/*
 * Blog author profiles.
 *
 * Markup: pages/blog/author.blade.php (the profile), pages/blog/post.blade.php (the byline under
 * the title and the About-the-author card), partials/blog/posts-loop.blade.php (the author line
 * on a post card). Loaded by the two pages through the layout's `head` slot, after marketing.css,
 * so it inherits that sheet's colours, the .hv-card-lg hover and the phone rules below 641px.
 *
 * Three of those inherited rules shape everything here:
 *   · below 641px every <section> is forced to 60px of vertical padding and every <p> to 14px;
 *   · below 641px `section h1, section h2` are centred with auto margins, and so is any <div>
 *     sitting immediately before them — which is why the header below centres as a whole on a
 *     phone instead of fighting it;
 *   · above 1000px body has zoom .9, so every size here is ~10% smaller on screen than it reads
 *     in this file. The numbers were picked against the render, not the file.
 *
 * The one author row on the site today has no photo, no bio and no LinkedIn address. That is the
 * default this sheet is drawn for: every optional block is a separate element the template simply
 * does not print, so nothing collapses into an empty box, a stray gap or a dead link.
 */

/* === profile header ======================================================== */

/*
 * The profile header stands on the site's container, not on one of its own.
 *
 * Every other page gets that container from an inline `max-width: 1180px`, which home-v2.css
 * rewrites through `[data-home-v2] [style*="max-width: 1180px"] { max-width: var(--hp-container) }`
 * — a selector that matches the literal inline string and nothing else. This block set its width
 * in a class, so the rewrite never reached it: the header sat on 820px while the article grid
 * below it sat on the real 1320px, and the two left edges came apart by 225px at 1440.
 *
 * Reading --hp-container directly is what hv-footer.css and cia-kompakt.css already do for the
 * same reason. It puts the header on the same edge as the grid under it, as the navigation, the
 * footer and the pricing table — and it keeps it there if that width is ever changed, which
 * copying 1180px into this file would not.
 */
.bau-wrap {
  max-width: var(--hp-container, 1320px);
  margin: 0 auto;
  padding: 0 32px;
}

.bau-crumbs {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: #656B7E;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bau-head {
  margin: 26px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.bau-ident {
  flex: 1 1 auto;
  min-width: 0;
}

.bau-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5F6478;
}

/* The page-title step, the same one /blog and a category page set on their own h1 — the three
   blog titles stay one size at every width, so the slope below is shared by all three.

   It has to stand a step above .bau-list-title. Matching only the ends was not enough: at 4.6vw
   against that heading's 4.4vw the two clamps ran almost parallel and met in the middle of the
   range — 32.20px against 30.80px at 700px, 41.40 against 39.60 at 900px, a ratio of 1.045,
   which is no step at all. A page title and a band title were the same size on the same screen.

   The step is opened from BELOW, by lowering the band title — not from above. clamp(30px, 4.6vw,
   48px) is not a blog number: it is the site-wide page-title scale, carried by .hp-audience-title
   on /pl/dla-kogo and /for-whom and by .hp-ct-title on the contact pages. Raising it here would
   have bought this one pair its step at the price of the blog's h1 no longer matching any other
   page's h1 — trading a local collision for a site-wide divergence.

   So .bau-list-title drops to clamp(26px, 4.0vw, 42px): 4.6 / 4.0 = 1.15 through the sloped
   middle, 30/26 = 1.154 below 650px, and 48/42 = 1.143 above 1050px. The ratio never falls below
   the 48:42 step the design already uses, and the page title stays exactly what it is everywhere
   else on the site. */
.bau-name {
  margin: 12px 0 0;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #14162B;
  text-wrap: balance;
}

.bau-role {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: #4B4CD8;
}

/* In a <div>, not a <p>: the phone rules clamp every paragraph to 14px, and a bio is read line
   by line rather than scanned. The inner <p> keeps the same exception the article body uses.

   The header now spans the full container, so the bio is the one thing in it that needs holding
   back: a line of prose 1250px wide is unreadable no matter how correct its left edge is. 700px
   is not a new number — it is the text column of an article body (764px container less its two
   32px gutters), so a bio here is set to exactly the measure the reader has just been reading at.
   It says 700 and not 756 because the article column itself was measured and narrowed: the same
   paragraph set at 756px runs 82.3 characters to the line and tops out at 88, at 700px it runs
   78.5 and tops out at 82. 756 was the rejected half of that pair and had been left standing
   here, which put two reading measures in one site.
   The limit is on the paragraph, not on the column, so the left edge does not move. */
.bau-bio {
  margin: 18px 0 0;
  max-width: 700px;
}

.bau-bio p {
  margin: 0 0 12px;
  font-size: 16px !important;
  line-height: 1.7;
  color: #4C5163;
  text-wrap: pretty;
}

.bau-bio p:last-child {
  margin-bottom: 0;
}

/* === photo and monogram ==================================================== */

/*
 * One shape, three sizes: the profile header, the About-the-author card and the byline. The
 * monogram is not a fallback image but the same circle with initials in it, so a profile without
 * a photo keeps its silhouette instead of leaving a hole where a face should be.
 */
.bau-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF0FE;
  border: 1px solid #DEE0E8;
  color: #4B4CD8;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

.bau-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bau-photo--card {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.bau-photo--byline {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.bau-photo--mini {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

/* === Profiles elsewhere (partials/blog/author-socials) ===================== */

/*
 * The author's LinkedIn (and any network added later), in two shapes: a pill with the network's
 * name on the profile, and the mark alone beside the name in the About-the-author card. Both draw
 * the mark as a solid tile (the partial says why), because a tile can be aligned exactly:
 *
 *   · in the pill it is centred on the word: its middle 0.39em above the baseline, half of
 *     Poppins' ascender (0.78em, the top of the "L", "k" and "d" in "LinkedIn"), so it overhangs
 *     the letters by the same 1.5px above and below. Placed from the baseline, not by
 *     `align-items: center`: the middle of the line box depends on how the font's ascent and
 *     descent round at each size, and measured it sat 0.6px low at 390 and 1.2px low at 1440.
 *     The bare "in" this replaces was centred that way and was 13.75px of ink against a 9px
 *     capital; it hung 2.25px under the baseline and 1.25px over the top of the word, which is
 *     the misalignment the owner saw.
 *   · beside the name it follows the same rule at the name's size: a tile 1em square, its middle
 *     0.39em above the name's baseline (.bau-social-mark). Both marks are as tall as their text
 *     and centred on it the same way, so the two read as one mark at two sizes.
 */
.bau-links {
  margin: 22px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bau-socials { display: flex; gap: 10px; flex-wrap: wrap; }

/* 13px of tile to 13px of text; 7px from the tile to the label. 13px of padding before the tile
   and 14px after the label, which with the letters' own side space leaves 14px of air on the
   left and 15.5px on the right: a solid square reads closer to the rounded end than the "n"
   closing "LinkedIn", so those two measure the same by eye. */
.bau-social {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 999px;
  padding: 9px 14px 9px 13px;
  font-size: 13px;
  font-weight: 500;
  color: #4C5163;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bau-social:hover {
  border-color: #5B5CE6;
  color: #14162B;
  box-shadow: 0 10px 24px -20px rgba(20, 22, 43, 0.6);
}

.bau-social svg,
.bau-social-mark svg {
  display: block;
  flex: 0 0 auto;
  color: #4B4CD8;
  transition: color 0.15s ease;
}

/* On the baseline first (a flex item holding no text takes its bottom edge as its baseline),
   then lowered by half its height less 0.39em, which puts its middle on the middle of the word.
   The transform moves the drawing only, so the pill keeps the height of its line of text. */
.bau-social svg {
  width: 13px;
  height: 13px;
  transform: translateY(calc(6.5px - 0.39em));
}

/* The mark beside the About card's name. It was the name's cap height (0.7em, 12.6px), 7px from
   the last letter, and the owner found it too small and too close. Now it is 1em (18px) at 10px
   (.bau-about-name), the pill's proportion: still the height of the letters it follows, not a
   button beside them.

   The name is a flex row on its baseline, and a flex box holding only the <svg> takes its
   baseline from the svg's bottom edge, so the tile stands on the name's baseline; the transform
   then lowers it by 0.5em - 0.39em, the pill's rule above. Its middle lands halfway up the
   ascenders, so it overhangs the "D", "l" and "k" and the baseline by the same 2px. The transform
   is on the link, not the svg, so the target and the focus ring move with the tile, and the
   row keeps the height of its line of text.

   The 5px of padding, handed back by the margin, make the target 28px square without moving
   anything (25px on screen above 1000px, where zoom takes 10%; WCAG 2.5.8 asks for 24), and give
   the focus ring room around the tile. 10px between marks, should there be more than one, is
   where two targets meet without overlapping. */
.bau-socials--compact { gap: 10px; }

.bau-social-mark {
  display: inline-flex;
  padding: 5px;
  margin: -5px;
  border-radius: 8px;
  transform: translateY(0.11em);
}

.bau-social-mark svg {
  width: 1em;
  height: 1em;
}

.bau-social-mark:hover svg,
.bau-social-mark:focus-visible svg {
  color: #3F40C4;
}

/* The focus ring goes round the tile, 2px off it, instead of round the padded box: that box
   reaches to 1px from the name, and a ring drawn on it ran into the last letter. */
.bau-social-mark:focus-visible {
  outline: none;
}

.bau-social-mark:focus-visible svg {
  outline: 2px solid #5B5CE6;
  outline-offset: 2px;
  border-radius: 3px;
}

/* === article list on the profile =========================================== */

.bau-list-head {
  margin: 0 0 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

/* A heading standing over a grid of cards is a band title, and the site has exactly one size for
   that: 42px / -0.028em, set by .hp-know-head h2 over the article grid on /pl and by .hp-testi-intro
   h2. The 32px this used to close on is not a smaller step in that scale — the scale has no such
   step (the landing runs h1 48-74px, h2 42px, h3 17-20px), which is why the blog read as a smaller
   site sitting next to it. */
.bau-list-title {
  margin: 0;
  font-size: clamp(26px, 4.0vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #14162B;
}

/* Said out loud rather than left as a blank grid: an author with nothing published yet is a
   normal state, and the page has to read as finished when it happens. */
.bau-empty {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  padding: 44px 32px;
  text-align: center;
}

.bau-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: #14162B;
}

.bau-empty-text {
  margin: 10px auto 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5163;
}

/* === byline under the article title ======================================== */

/*
 * One row of items: who wrote it, the date, the update (when there was one), the reading time and
 * the category. It used to be two groups, author and date, that wrapped as blocks; with four
 * facts after the name the second block no longer fitted beside the first in the 720px column
 * (measured on /blog/tldr-above-the-fold at 1440px) and went down a line with its separator dot
 * leading it.
 *
 * Now every item wraps on its own, and a dot never opens a line: each item stands on a 21px slot
 * (.bau-byline-row > *), the row is pulled 21px to the left, and .bau-byline clips. The slot of
 * whichever item starts a line - and the dot in it - falls left of the clip; between two items on
 * one line the slot is the gap and the dot sits in its middle. The 4px of padding, taken back by
 * the margins, keep the name link's focus ring inside the clip.
 */
.bau-byline {
  margin: 14px -4px -4px;
  padding: 4px;
  overflow: hidden;
}

.bau-byline-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-left: -21px;
}

.bau-byline-row > * {
  margin-left: 21px;
}

.bau-byline-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bau-byline-meta {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #656B7E;
  white-space: nowrap;
}

/* Only the items after the author carry a dot; the category pill is its own separator. */
.bau-byline-who ~ .bau-byline-meta::before,
.bau-byline-meta ~ .bau-byline-meta::before {
  content: '\00b7';
  position: absolute;
  left: -14px;
  opacity: 0.6;
}

.bau-byline-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #14162B;
}

a.bau-byline-name {
  text-decoration: underline;
  text-decoration-color: rgba(91, 92, 230, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a.bau-byline-name:hover {
  color: #4B4CD8;
  text-decoration-color: #5B5CE6;
}

/* === About-the-author card at the end of an article ======================== */

.bau-about {
  margin: 56px 0 0;
  background: #FAFAFC;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  padding: 28px 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.bau-about-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bau-about-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5F6478;
}

.bau-about-name {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #14162B;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
}

.bau-about-role {
  margin: 4px 0 0;
  font-size: 13px;
  color: #4B4CD8;
}

.bau-about-bio {
  margin: 14px 0 0;
}

.bau-about-bio p {
  margin: 0 0 10px;
  font-size: 14.5px !important;
  line-height: 1.65;
  color: #4C5163;
}

.bau-about-bio p:last-child {
  margin-bottom: 0;
}

.bau-about-foot {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bau-about-more {
  font-size: 13.5px;
  font-weight: 600;
  color: #5B5CE6;
  transition: color 0.15s ease;
}

.bau-about-more:hover {
  color: #3F40C4;
}

/* === author line on a post card ============================================ */

.bau-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #656B7E;
}

/*
  Wzorzec rozciagnietego linku. Karta wpisu nie jest juz kotwica — jest nia tytul, a jego ::after
  nakrywa cala karte, wiec klikniecie gdziekolwiek dalej prowadzi do artykulu. Podpis autora
  siedzi NAD ta warstwa (position + z-index), wiec jest osobnym, klikalnym celem prowadzacym
  do profilu. Tak dwa rozne cele mieszcza sie w jednej karcie bez zagniezdzania <a> w <a>,
  ktore jest niepoprawnym HTML-em i bylo powodem, dla ktorego nazwisko dotad nie linkowalo.
*/
.bau-card-link {
  color: inherit;
  text-decoration: none;
}

.bau-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

a.bau-card-author {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  text-decoration: none;
  transition: color 0.15s ease;
}

a.bau-card-author:hover,
a.bau-card-author:focus-visible {
  color: #5B5CE6;
}

/* === phones ================================================================ */

@media (max-width: 640px) {
  .bau-wrap {
    padding: 0 20px;
  }

  /* marketing.css centres h1/h2 and the div right before them below 641px. The header follows
     instead of resisting: photo over name, everything on one axis. */
  .bau-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  /* Scoped to the header: a bare .bau-photo rule here would outrank the --byline, --card and
     --mini modifiers, which are the same specificity and sit earlier in the file. */
  .bau-head .bau-photo {
    width: 84px;
    height: 84px;
    font-size: 26px;
  }

  .bau-bio p {
    font-size: 15px !important;
    text-align: left;
  }

  .bau-links {
    justify-content: center;
  }

  .bau-list-head {
    justify-content: center;
    text-align: center;
  }

  .bau-about {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
  }

  .bau-about-bio p {
    text-align: left;
  }

  .bau-about-name,
  .bau-about-foot {
    justify-content: center;
  }

  /* The card is centred on a phone, and the name should stand on the same axis as the kicker
     and the role above and below it. Centring name and mark as one group put the name 10px left
     of that axis; an indent the width of the mark and its gap on the other side hangs the mark
     outside the centring instead. */
  .bau-about-name:has(.bau-socials--compact) {
    padding-left: calc(1em + 10px);
  }

  /* The author gets a line of their own on a phone, as before; the facts wrap below it. The
     basis is the column (the row is 21px wider, see .bau-byline-row). */
  .bau-byline-who {
    flex-basis: calc(100% - 21px);
  }
}

/* === About-the-author card: profile link beside "All articles" ================= */

/* The profile link and the article link are one pair of ways onward, so they wear one style:
   the indigo of .bau-about-more above (the owner: "Author profile" and "All articles" should read
   as equals; the dark underlined profile link read as the main action). They have the row to
   themselves: LinkedIn moved up beside the name (.bau-social-mark). */
.bau-about-profile {
  font-size: 13.5px;
  font-weight: 600;
  color: #5B5CE6;
  transition: color 0.15s ease;
}
.bau-about-profile:hover { color: #3F40C4; }
/* Two links of one colour side by side read as one phrase without a mark between them: the dot
   the byline uses, centred in the 16px gap and outside the link, so it is neither underlined on
   hover nor clickable. Not on a phone, where the two stack. */
.bau-about-more { position: relative; }
.bau-about-profile + .bau-about-more::before {
  content: '\00b7';
  position: absolute;
  left: -11px;
  color: #A8ACC8;
  pointer-events: none;
}
@media (max-width: 640px) {
  .bau-about-profile + .bau-about-more::before { content: none; }
}

/* === pagination bar (partials/blog/pagination) on a phone ===================== */

/* At 16px/15px of side padding and an 8px gap, the bar of a six-page list (/blog, and Damian's
   profile) measured 380px against the 350px a 390px phone leaves it, so the "→" dropped to a line
   of its own. 11px and 6px make every pill 32px wide and bring six pages to 298px and seven to
   336px, still one line. Past that the bar wraps, as any row of numbers must. !important because
   the partial sets its padding inline. */
@media (max-width: 640px) {
  [data-blog-pager] { gap: 6px !important; }
  [data-blog-pager] > * { padding-left: 11px !important; padding-right: 11px !important; }
}