/**
 * BLOG CATEGORY PAGE
 * =========================================================================
 * Styles for page-blog-category.php only. Enqueued from functions.php behind
 * the same is_page_template() check, so nothing here reaches any other page.
 *
 * Figma: node 94:13734 "Blog Category/Blog Listing" (1440 x 2894). Every
 * number below is measured from the file - the derivation for each one is in
 * BLOG-CATEGORY-PAGE.md at the project root.
 *
 * Mobile-first: the base rules are the phone layout, the Figma desktop design
 * lands in @media (min-width: 992px). There is no mobile frame in the file, so
 * the small-screen rules are judgement calls, as elsewhere in this theme.
 *
 * Prefix: every class is .a3-bc-*, so nothing can collide with service.css or
 * core-team.css.
 */

.a3-blog-category {
  /* Figma lays this page out on 128px gutters - 1184 of content at 1440.
   * A third container width: Core Team uses 68/1304, the rest of the site
   * 1320/1200. Kept separate rather than forced onto a shared one, since the
   * two-column split below depends on it. */
  --a3-bc-gutter: 20px;

  --a3-bc-ink: #030303;
  --a3-bc-muted: #676f7b;
  --a3-bc-rule: #e7eaf0;
  --a3-bc-tint: #f4f5f9;
  --a3-bc-orange: #f97316;
}

.a3-bc-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--a3-bc-gutter);
  padding-right: var(--a3-bc-gutter);
}

/* =========================================================================
 * 1. HERO - Figma 94:13737 (1440 x 540)
 *
 * Full-bleed photo under a horizontal dark gradient, with centred copy.
 * ========================================================================= */

.a3-bc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background-color: #1a1a1a;
  padding: 64px 20px;
  text-align: center;
}

/* Figma's imageTransform is sy=0.5626 with ty=0.2187 - 21.87% trimmed off the
 * top and the bottom, so the crop is symmetric and a plain centred cover is
 * exactly right. (Contrast the Core Team hero, whose ty=0 needed anchoring.) */
.a3-bc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: var(--a3-bc-hero-bg, none);
  background-size: cover;
  background-position: center;
}

/* Figma 'Gradient': handles [[0,0.5],[1,0.5]] - horizontal, left to right.
 * #1A1A1A at 90% down to 40%, so the left side carries the most weight even
 * though the copy is centred. */
.a3-bc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.4) 100%
  );
}

.a3-bc-hero__inner {
  width: 100%;
  max-width: 913px;
  margin: 0 auto;
}

.a3-bc-hero__heading {
  margin: 0 0 16px;

  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.a3-bc-hero__description {
  margin: 0 auto;
  max-width: 637px;

  color: #d0d4d4;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
}

/* =========================================================================
 * 2. BODY - Figma 94:13802, fill #FCFCFD
 * ========================================================================= */

.a3-bc-body {
  background: #fcfcfd;
  padding: 48px 0 64px;
}

/* Single column on phones; the two-column split is desktop-only. */
.a3-bc-container {
  display: block;
}

/* ---- "Latest Stories" header ------------------------------------------- */

.a3-bc-main__header {
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--a3-bc-rule);
}

.a3-bc-main__heading {
  margin: 0;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.6px;
}

/* ---- Post rows ---------------------------------------------------------- */

.a3-bc-post {
  display: block;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--a3-bc-rule);

  color: inherit;
  text-decoration: none;
}

/* Figma drops the rule on the final row - the section's own padding closes it
 * instead, so the list does not end on a dangling line. */
.a3-bc-post:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.a3-bc-post__media {
  overflow: hidden;
  margin-bottom: 16px;
  /* Figma's placeholder fill, so a post with no featured image leaves a tidy
   * block rather than a collapsed row. */
  background: var(--a3-bc-tint);
  aspect-ratio: 296.9 / 222.7;
}

.a3-bc-post__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-bc-post:hover .a3-bc-post__thumb {
  transform: scale(1.05);
}

/* The fallback is artwork, usually a logo - contain and centre it rather than
 * cropping to fill the way a photograph should be, and inset it so it does not
 * run to the tile edges. The hover zoom is dropped with it: a mark scaling
 * inside its own box reads as a glitch rather than as motion. */
.a3-bc-post__thumb--placeholder {
  object-fit: contain;
  padding: 24px;
  background: var(--a3-bc-tint);
}

.a3-bc-post:hover .a3-bc-post__thumb--placeholder {
  transform: none;
}

.a3-bc-post__category {
  display: block;
  margin-bottom: 12px;

  color: #000;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.a3-bc-post__title {
  margin: 0 0 12px;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  transition: color 0.22s ease;
}

.a3-bc-post:hover .a3-bc-post__title {
  color: var(--a3-bc-orange);
}

.a3-bc-post__excerpt {
  margin: 0 0 20px;

  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: normal;
}

.a3-bc-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Figma draws the avatar as the author's initial in a bordered tile, not a
 * photo - so there is no upload and no fallback to worry about. */
.a3-bc-post__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  background: var(--a3-bc-tint);
  border: 1px solid var(--a3-bc-rule);

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

.a3-bc-post__author {
  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

/* Pushed to the right-hand end of the meta row, as Figma has it. */
.a3-bc-post__date {
  margin-left: auto;

  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

/* ---- Pagination --------------------------------------------------------- */

/* Not in the Figma - the design shows no pagination control at all, which
 * usually means it was simply not drawn rather than that there is none. Built
 * to match the surrounding type and the theme's orange. */
.a3-bc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.a3-bc-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  padding: 0 12px;

  background: #fff;
  border: 1px solid var(--a3-bc-rule);

  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;

  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.a3-bc-pagination .page-numbers:hover {
  border-color: var(--a3-bc-orange);
  color: var(--a3-bc-orange);
}

.a3-bc-pagination .page-numbers.current {
  background: var(--a3-bc-orange);
  border-color: var(--a3-bc-orange);
  color: #fff;
}

.a3-bc-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

.a3-bc-empty {
  margin: 0;
  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-size: 16px;
}

/* =========================================================================
 * 3. SIDEBAR
 * ========================================================================= */

.a3-bc-sidebar {
  margin-top: 48px;
}

/* ---- Lead-capture card - Figma 101:17509 -------------------------------- */

.a3-bc-cta {
  background: #fcfcfd;
  border: 1px solid var(--a3-bc-rule);
  /* Figma DROP_SHADOW pair - a soft card lift, not the deep shadow the
   * capability cards use. */
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.a3-bc-cta__media {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.a3-bc-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 'Gradient' over the image: handles [[.5,1],[.5,0]] - bottom to top,
 * the card's own #FCFCFD fading up, so the photo dissolves into the body copy
 * rather than ending on a hard edge. */
.a3-bc-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, #fcfcfd 0%, rgba(252, 252, 253, 0) 100%);
}

/* Figma: 24 left/right/bottom and nothing on top - the heading sits directly
 * against the image's fade. */
.a3-bc-cta__body {
  padding: 0 24px 24px;
}

.a3-bc-cta__heading {
  margin: 0 0 23px;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 21.6px;
  line-height: 29.7px;
  letter-spacing: -0.54px;
}

/* The form is a Contact Form 7 shortcode from a field, so these rules have to
 * reach whatever markup CF7 emits rather than a structure of our own. */
.a3-bc-cta__body input[type="text"],
.a3-bc-cta__body input[type="email"],
.a3-bc-cta__body input[type="tel"],
.a3-bc-cta__body textarea {
  /* !important: global.css sets a min-height on textarea and CF7 ships its own
   * input styling, both of which outrank a plain class selector here.
   *
   * display: block is load-bearing, not tidying. As inline-block each field
   * sat on its paragraph's text baseline, so the <p> came out 5.7px taller
   * than the field to leave room for descenders - pushing the row pitch to
   * 54.7 against Figma's 49 and dragging the whole form 10px long. */
  display: block;
  width: 100%;
  padding: 2px 0 10px !important;
  min-height: 0 !important;

  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--a3-bc-rule) !important;
  border-radius: 0 !important;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 15.73px;
}

/* Figma draws "Your Message" as the same 29px Input frame as the other three,
 * not as a tall textarea - so it matches them exactly rather than opening into
 * a box. overflow-y auto keeps longer messages scrollable inside it. */
.a3-bc-cta__body textarea {
  height: 29px !important;
  resize: none;
  overflow-y: auto;
}

.a3-bc-cta__body ::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

/* Figma itemSpacing 20 between fields. CF7 wraps each field in a <p>, so the
 * spacing has to come off that. */
.a3-bc-cta__body form p {
  margin: 0 0 20px;
}

/* The submit sits in its own <p>; leaving it a bottom margin left dead space
 * under the button before the card closed.
 *
 * :last-of-type, not :last-child - CF7 prints a .wpcf7-response-output <div>
 * after the final <p>, so the submit's paragraph is never the last child and
 * a :last-child rule silently matched nothing. */
.a3-bc-cta__body form p:last-of-type {
  margin-bottom: 0;
}

/* CF7 injects a spinner span next to the submit button. It is invisible until
 * the form posts, but it is still an inline box in flow and was contributing
 * ~33px of line height inside the button's paragraph - most of the dead space
 * under the button. Taking it out of flow keeps the spinner working without it
 * occupying height. */
.a3-bc-cta__body .wpcf7-spinner {
  position: absolute;
  margin: 0;
}

/* Figma models the gap above the button as a wrapper with 16 of PADDING, and
 * that is the detail that matters: as a margin on the button it collapsed
 * straight through this empty paragraph and the 16px vanished. Padding cannot
 * collapse, so the button lands where the design puts it. */
.a3-bc-cta__body form p:last-of-type {
  position: relative;
  line-height: 0;
  padding-top: 16px;
}

/* CF7 always prints these, and the response output ships with a 2px border and
 * its own margins - which drew a stray rule under the last field and padded
 * the card out. They only ever hold validation text, so they are collapsed
 * until CF7 fills them in. */
.a3-bc-cta__body .wpcf7-response-output,
.a3-bc-cta__body .screen-reader-response {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.a3-bc-cta__body .wpcf7-response-output:empty {
  display: none !important;
}

/* Figma: 97 x 40, fill #F97316 - with the row set to SPACE_BETWEEN, so the
 * button sits hard right.
 *
 * #F97316 is NOT the site's brand orange (#FF6900) - it is Tailwind's
 * orange-500, which suggests it arrived with the design kit rather than by
 * intent. Figma is followed here because that is the brief, but it is a
 * one-character change to var(--primary) if the brand colour is wanted.
 *
 * The extra class selectors and !important are needed to outrank
 * service.css's `input.wpcf7-form-control.wpcf7-submit { background:
 * var(--primary) !important }`, which is more specific than a plain
 * attribute selector and would otherwise repaint this #FF6900. */
.a3-bc-cta__body input.wpcf7-form-control.wpcf7-submit,
.a3-bc-cta__body input[type="submit"],
.a3-bc-cta__body .wpcf7-submit {
  /* Centred. Figma's row is SPACE_BETWEEN, which reads as "push apart", but the
   * measured position settles it: the container spans 1004..1278 (centre 1141)
   * and the 97-wide button sits at 1092.5..1189.5 - centre 1141 exactly.
   *
   * Figma: 20 of item spacing after the last field, then the button's own
   * 16 of top padding = 36. */
  display: block;
  margin-left: auto;
  margin-right: auto;

  width: auto;
  min-width: 97px;
  height: 40px;
  min-height: 40px;
  padding: 10px 24px;

  background: var(--a3-bc-orange) !important;
  border: 0 !important;
  border-radius: 0 !important;

  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;

  transition: transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1), background-color 0.22s ease;
}

.a3-bc-cta__body input[type="submit"]:hover {
  transform: translateY(-2px);
}

/* ---- Widgets: Trending Now / Popular Topics ----------------------------- */

.a3-bc-widget {
  margin-bottom: 40px;
}

.a3-bc-widget:last-child {
  margin-bottom: 0;
}

/* Figma: a 45px header row closed by a 1px rule, icon then title. */
.a3-bc-widget__header {
  display: flex;
  align-items: center;
  gap: 8px;

  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--a3-bc-rule);
}

.a3-bc-widget__icon {
  flex: 0 0 auto;
  color: var(--a3-bc-ink);
}

.a3-bc-widget__title {
  margin: 0;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.45px;
}

/* ---- Trending Now ------------------------------------------------------- */

.a3-bc-trending__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-bc-trending__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
}

.a3-bc-trending__item:last-child {
  margin-bottom: 0;
}

/* Figma: Inter Bold 24/32 in #D0D4D4 - a pale counter, deliberately quieter
 * than the title beside it. */
.a3-bc-trending__num {
  flex: 0 0 auto;

  color: #d0d4d4;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.a3-bc-trending__body {
  display: block;
  min-width: 0;
}

.a3-bc-trending__title {
  display: block;
  margin-bottom: 4px;

  color: var(--a3-bc-ink);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 19.25px;
  text-decoration: none;
  transition: color 0.22s ease;
}

.a3-bc-trending__title:hover {
  color: var(--a3-bc-orange);
}

.a3-bc-trending__read {
  display: block;

  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

/* ---- Popular Topics ----------------------------------------------------- */

/* Figma: 8px between pills in both directions, and they wrap. */
.a3-bc-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-bc-topics__pill {
  display: flex;
  align-items: center;

  height: 34px;
  padding: 0 17px;

  background: #fff;
  border: 1px solid var(--a3-bc-rule);

  color: var(--a3-bc-muted);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;

  transition:
    border-color 0.22s ease,
    color 0.22s ease;
}

.a3-bc-topics__pill:hover {
  border-color: var(--a3-bc-orange);
  color: var(--a3-bc-orange);
}

/* =========================================================================
 * 4. DESKTOP - the Figma frame, exactly
 * ========================================================================= */

@media (min-width: 992px) {

  /* ------------------------------------------------------------------
   * The desktop layout scales proportionally between 992 and 1440, then
   * locks to the Figma values above that.
   *
   * Each value is the Figma measurement as a fraction of the 1440 frame
   * (value / 1440 * 100vw), clamped so it can never exceed the design value.
   *
   * It has to scale because these columns are subtractive: with a fixed 128
   * gutter, 96 gap, 330.7 sidebar and 296.9 thumbnail, a 1097 viewport (a
   * 175% browser zoom on a 1920 screen) left the post text just 85px wide and
   * broke every title onto one word per line. Browser zoom shrinks the layout
   * viewport, so this is the same problem as a narrow window and one fix
   * covers both.
   * ------------------------------------------------------------------ */
  .a3-blog-category {
    /* Figma: 1440 frame - 1184 content = 128 each side. */
    --a3-bc-gutter: clamp(40px, 8.8889vw, 128px);        /* 128   */
    --a3-bc-col-gap: clamp(32px, 6.6667vw, 96px);        /* 96    */
    --a3-bc-sidebar-w: clamp(260px, 22.9653vw, 330.7px); /* 330.7 */
    --a3-bc-thumb-w: clamp(200px, 20.6181vw, 296.9px);   /* 296.9 */
    --a3-bc-post-gap: clamp(20px, 2.2222vw, 32px);       /* 32    */
  }

  /* ---- Hero ---------------------------------------------------------- */

  .a3-bc-hero {
    min-height: 540px;
    padding: 0;
    display: flex;
    align-items: flex-start;
  }

  .a3-bc-hero__inner {
    /* Figma puts the heading's first line at y=120 within the 540 frame. */
    padding-top: 120px;
  }

  /* Figma: Inter Regular 64/93 (145.3%), letter-spacing -2, centred. */
  /* line-height and letter-spacing as ratios (93/64, -2/64) so they follow the
   * font size down instead of staying pinned at the 1440 value. */
  .a3-bc-hero__heading {
    font-size: clamp(38px, 4.4444vw, 64px); /* 64 */
    line-height: 1.4531;                    /* 93 / 64 */
    letter-spacing: -0.03125em;             /* -2 / 64 */
    /* Heading box ends at 328; the description's box starts at 355. */
    margin-bottom: 27px;
  }

  /* Figma: Inter Regular 20/30 (150%), #D0D4D4, in a 636.8 box. */
  .a3-bc-hero__description {
    font-size: 20px;
    line-height: 30px;
  }

  /* ---- Two-column body ------------------------------------------------ */

  /* Figma: main 757.3 + gap 96 + sidebar 330.7 = 1184. Fixed sidebar, fluid
   * main, so the columns hold their proportions as the container narrows. */
  .a3-bc-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--a3-bc-sidebar-w);
    gap: var(--a3-bc-col-gap);
    align-items: start;
  }

  .a3-bc-body {
    padding: 0 0 96px;
  }

  /* Figma: the "Latest Stories" rule sits at y=96 within the section. */
  .a3-bc-main {
    padding-top: 96px;
  }

  .a3-bc-main__header {
    /* Figma 'HorizontalBorder' is 49 tall with the text on 96.3, so the rule
     * lands ~48 below the cap line. */
    padding-bottom: 17px;
    margin-bottom: 40px;
  }

  /* Figma: Inter Medium 40 with a 32 line-height - 80%, tighter than the font
   * size, which is why this cannot just be a ratio. */
  .a3-bc-main__heading {
    font-size: 40px;
    line-height: 32px;
    letter-spacing: -0.6px;
  }

  /* ---- Post rows ------------------------------------------------------ */

  /* Figma row: 757.3 x 271.7 on a 319.7 pitch, so 48 between the rule and the
   * next row. Image 296.9 left, 32 gap, content 428.4. */
  .a3-bc-post {
    display: grid;
    grid-template-columns: var(--a3-bc-thumb-w) minmax(0, 1fr);
    column-gap: var(--a3-bc-post-gap);
    align-items: start;

    padding-bottom: 48px;
    margin-bottom: 48px;
  }

  /* aspect-ratio rather than the Figma 222.7 height, so the thumbnail keeps
   * its 296.9 x 222.7 proportions as its column scales. */
  .a3-bc-post__media {
    margin-bottom: 0;
    height: auto;
    aspect-ratio: 296.9 / 222.7;
  }

  .a3-bc-post__category {
    /* Eyebrow bottom 16 -> title top 32.5. */
    margin-bottom: 16.5px;
  }

  /* Figma: Inter Medium 24/31.2 (130%), letter-spacing -0.6. */
  .a3-bc-post__title {
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -0.6px;
    /* Title box ends 93.7; the excerpt's first line sits at 112.9. */
    margin-bottom: 19px;
  }

  /* Excerpt ends ~158; the avatar tile starts at 190.7. */
  .a3-bc-post__excerpt {
    margin-bottom: 32px;
  }

  /* ---- Sidebar -------------------------------------------------------- */

  /* ---- Sticky sidebar -------------------------------------------------
   *
   * Keeps the enquiry form in view while the post list scrolls. Not in the
   * Figma (a static frame cannot express it) - an addition.
   *
   * The WHOLE sidebar sticks, not just the card. Sticking only the card would
   * pin it while the two widgets below carried on scrolling up, and because a
   * sticky box keeps its original slot in flow, the card would ride down over
   * them. Moving the stickiness to their common parent keeps the group intact.
   *
   * A grid item's sticky containing block is its grid AREA, which spans the
   * full row - here the 1691 of the main column against the sidebar's 1131.
   * That 560 of slack is exactly how far it can travel, so it pins for the
   * length of the list and releases at the bottom, where the lower widgets
   * come back into view.
   *
   * top: 105 = the 81px sticky site header + 24 of clearance. Tie it to the
   * header height if that ever changes.
   *
   * align-self: start is what stops the item stretching to the full row
   * height; a stretched item has no room to move and sticky silently does
   * nothing. The grid already sets align-items: start, but it is repeated here
   * because the sticky depends on it. */
  .a3-bc-sidebar {
    /* Figma starts the CTA card at y=112 against the main column's 96 - the
     * 16 difference is the card's own offset, not a column gap. */
    margin-top: 112px;

    position: sticky;
    top: 105px;
    align-self: start;
  }

  .a3-bc-cta {
    margin-bottom: 60px;
  }

  /* Figma: the Trending header rule sits 60 below the card, and Popular Topics
   * another 46 below Trending's last item. */
  .a3-bc-widget {
    margin-bottom: 46px;
  }
}

/* =========================================================================
 * 5. TABLET
 *
 * The sidebar drops under the list rather than squeezing two columns into
 * 800px, which would leave the post rows too narrow to hold their layout.
 * ========================================================================= */

@media (min-width: 576px) and (max-width: 991.98px) {

  .a3-blog-category {
    --a3-bc-gutter: 32px;
  }

  .a3-bc-post {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .a3-bc-post__media {
    margin-bottom: 0;
    height: 180px;
    aspect-ratio: auto;
  }

  .a3-bc-hero__heading {
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: -1.2px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .a3-bc-post__thumb,
  .a3-bc-cta__body input[type="submit"] {
    transition: none;
  }

  .a3-bc-post:hover .a3-bc-post__thumb,
  .a3-bc-cta__body input[type="submit"]:hover {
    transform: none;
  }
}

/* The tag you are already viewing, in Popular Topics on a tag archive. Added
 * with category.php: on the listing page nothing in that list is ever the
 * current page, so the state could not arise there. */
.a3-bc-topics__pill.is-current {
  border-color: #f97316;
  color: #030303;
}

/* A picture in the letter tile, where the author has one. The tile keeps its
 * 32x32 box and border; the image just fills it. */
.a3-bc-post__avatar {
  overflow: hidden;
}

.a3-bc-post__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pagination lands on the post list, not the hero - the links carry #posts
   (see category.php / page-blog-category.php). The site header is sticky at
   ~81px, so the fragment needs an offset or the first row sits under it. */

.a3-bc-body {
  scroll-margin-top: 104px;
}