/* ============================================================
   Michy — blog index

   One document for every width. base.css draws the gradient band,
   the header, the sign-up and the footer; this sheet adds the four
   things only this page has: the hero with its filter chips, the
   featured card, the card grid and the pager.

   Nothing on this page is positioned.
   ============================================================ */

:root {
  /* hero */
  --bhero-pad-t:     40px;  --bhero-pad-b:    60px;
  --bhero-title-gap:  7px;  --bhero-stand-gap: 12px;  --bhero-chip-gap: 28px;
  --bhero-title-w:  307px;  --bhero-stand-w:  331px;
  --chip-pad-y:     6.5px;

  /* featured */
  --feat-pad-t:      50px;  --feat-pad-b:      9px;
  --feat-inset: 32px 27px 27px;  --feat-body-pad: 0px;
  --feat-title-w:   262px;  --feat-stand-w:  292px;
  --feat-stand-gap: 15.6px; --feat-pill-gap:  23px;  --feat-img-gap: 29px;
  --feat-media:  289 / 199;

  /* card grid */
  --cards-pad-t:     23px;  --cards-pad-b:     0px;
  --cards-gap-y:     12px;  --cards-gap-x:    32px;
  --card-pad-x:      23px;  --card-pad-t:     18px;  --card-pad-b: 13px;
  --card-title-gap:  16px;  --card-sum-gap:   17px;  --card-rule-gap: 14px;
  --card-more-gap:   13px;

  /* radii: the mobile frame rounds everything a little less */
  --r-card:          15px;  --r-feature:      15px;  --r-media:    10px;

  /* type ramps for this page, 375 -> 1440 */
  --fs-meta:  clamp(11.6px, 11.11px + 0.13vw, 13px);
  --fs-card:  clamp(18px, 16.59px + 0.376vw, 22px);
  --fs-arrow: clamp(26.8px, 25.67px + 0.30vw, 30px);
}

@media (min-width: 1024px) {
  :root {
    --bhero-pad-t:     87px;  --bhero-pad-b:   103px;
    --bhero-title-gap: -5px;  --bhero-stand-gap: 13px;  --bhero-chip-gap: 23px;
    --bhero-title-w:  874px;  --bhero-stand-w:  640px;
    --chip-pad-y:       8px;

    --feat-pad-t:      92px;  --feat-pad-b:     61px;
    --cards-pad-t:     31px;  --cards-pad-b:    26px;
    --feat-inset:      41px;  --feat-body-pad:  30px 47px 30px 27px;
    --feat-title-w:   444px;  --feat-stand-w:  443px;
    --feat-stand-gap: 17.2px; --feat-pill-gap:  28px;  --feat-img-gap:  0px;
    --feat-media:  565 / 389;

    --cards-gap-y:     32px;
    --card-pad-x:      26px;  --card-pad-t:     20px;  --card-pad-b: 14px;
    --card-title-gap: 17.5px; --card-sum-gap: 15.2px;  --card-rule-gap: 15px;
    --card-more-gap:   14px;

    --r-card:          20px;  --r-feature:      25px;  --r-media:    20px;
  }
}

/* --- hero --------------------------------------------------------------
   The frame anchors this page's gradient to the right edge rather than
   centring it, so the bright corner falls behind the navigation. */
.masthead--blog { padding-bottom: var(--bhero-pad-b); }

@media (min-width: 1024px) {
  .masthead--blog { background-position: right top; }
}

.bhero { padding-top: var(--bhero-pad-t); text-align: center; }

.bhero__title {
  margin: var(--bhero-title-gap) auto 0; max-width: min(100%, var(--bhero-title-w));
  font: 500 var(--fs-title)/1.3 var(--font-display); letter-spacing: -.03em;
}
.bhero__title span { color: rgba(255, 255, 255, .7); }

.bhero__stand {
  margin: var(--bhero-stand-gap) auto 0; max-width: min(100%, var(--bhero-stand-w));
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
}

/* --- filter chips ------------------------------------------------------
   A centred column of fixed-width chips on phones, as the mobile frame
   has them, and a wrapping row once there is width for one. */
.filters {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: var(--bhero-chip-gap); list-style: none;
}
.chip {
  display: block; width: 178px; padding: var(--chip-pad-y) 17.1px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-inverse); opacity: .85;
  transition: background-color .18s ease, opacity .18s ease;
}
.chip:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.chip--on {
  border-color: transparent; background: var(--surface-page);
  color: var(--text-primary); opacity: 1;
}
.chip--on:hover { background: var(--surface-page); }

@media (min-width: 700px) {
  .filters { flex-flow: row wrap; justify-content: center; }
  .chip { width: auto; }
  /* the card and the hero are wide here, so their copy takes a fuller
     measure than the phone's */
  :root {
    --feat-title-w:  444px;  --feat-stand-w:  443px;
    --bhero-title-w: 620px;  --bhero-stand-w: 560px;
  }
}

/* --- the pale band -----------------------------------------------------
   Figma emitted this as linear-gradient(to top,#e8f0f5,153.3%) — the
   second colour stop was lost, so the declaration failed to parse and the
   band rendered as bare page background. This is the node's own
   definition: #e8f0f5 at the foot, fading out at 153.3% of the box. */
.index {
  background: linear-gradient(to top, #e8f0f5 0%, rgba(232, 240, 245, 0) 153.3%);
}

/* --- featured article --------------------------------------------------
   The card runs wider than the measure — 1280 in the 1440 frame — and the
   glow is a background layer clipped by the card, so neither needs a box
   of its own. */
.featured {
  --wrap-max: 1280px;
  padding-block: var(--feat-pad-t) var(--feat-pad-b);
}

.feature {
  display: grid; overflow: hidden;
  padding: var(--feat-inset);
  border-radius: var(--r-feature); background: #0d1524;
  background-image: url("../assets/blog/glow-ellipse.svg");
  background-position: -338px 19px; background-size: 1193.9px 414px;
  background-repeat: no-repeat;
  color: var(--text-inverse);
}
.feature__body { padding: var(--feat-body-pad); }
.feature__title {
  max-width: var(--feat-title-w);
  font: 500 var(--fs-h2)/1.3 var(--font-display); letter-spacing: -.03em;
}
.feature__stand {
  margin-top: var(--feat-stand-gap); max-width: var(--feat-stand-w);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
}
.feature__cta { --pill-pad-r: 28.8px; --pill-gap: 8px; margin-top: var(--feat-pill-gap); }
.feature__cta .pill__dot { background: var(--surface-dark); }
.feature__img {
  width: 100%; height: auto; aspect-ratio: var(--feat-media);
  margin-top: var(--feat-img-gap); object-fit: cover; border-radius: var(--r-media);
}

@media (min-width: 1024px) {
  /* copy and image side by side, in the frame's proportion */
  .feature { grid-template-columns: minmax(0, 633fr) minmax(0, 565fr); }
}

/* --- card grid ---------------------------------------------------------
   The card is one link. Its action row is pushed to the foot, so a longer
   title or summary lengthens the card rather than crowding the rule. */
.cards {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--cards-gap-y) var(--cards-gap-x);
  padding-block: var(--cards-pad-t) var(--cards-pad-b);
}
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-default); border-radius: var(--r-card);
  background: var(--surface-page);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: var(--text-subtle);
  box-shadow: 0 12px 28px -18px rgba(12, 22, 37, .45);
}
.card__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font: 400 var(--fs-meta)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-muted);
}
.card__meta b {
  font-family: var(--font-label); font-weight: 500; color: var(--text-brand);
}
.card__title {
  margin-top: var(--card-title-gap);
  font: 600 var(--fs-card)/1.2 var(--font-display); color: var(--text-primary);
}
.card__sum {
  margin: var(--card-sum-gap) 0 var(--card-rule-gap);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-secondary);
}
.card__rule { margin-top: auto; height: 1px; background: var(--border-default); }
.card__more {
  display: flex; align-items: center; gap: 9px;
  margin-top: var(--card-more-gap);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-strong);
}
.card__more img { width: var(--fs-arrow); height: var(--fs-arrow); }

/* --- view more ---------------------------------------------------------
   The mobile frame shows three cards and this button; the desktop frame
   shows all nine and pages them. */
.more {
  --pill-pad-r: 24.8px; --pill-gap: 16px;
  display: flex; width: max-content;
  margin: 28px auto 0;
  padding-left: 24px;
}
/* the space under the button is the band's, not the button's: a margin
   would collapse through .index and show the page ground instead */
@media (max-width: 1023.98px) { .index { padding-bottom: 50px; } }
.more img { width: var(--pill-dot); height: var(--pill-dot); }

@media (min-width: 1024px) {
  .more { display: none; }
}
/* three cards on a phone, as the frame has it; four once the grid is two
   columns, so the last row is not left half empty */
@media (max-width: 699.98px)  { .card:nth-child(n + 4) { display: none; } }
@media (min-width: 700px) and (max-width: 1023.98px) {
  .card:nth-child(n + 5) { display: none; }
}

/* --- pager -------------------------------------------------------------
   The mobile frame does not carry a pager, so it appears from 1024 up. */
.pager { display: none; }

@media (min-width: 1024px) {
  .pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding-block: 31px 90px;
    font: 400 16px/1.5 var(--font-sans); letter-spacing: -.005em;
    color: var(--text-secondary);
  }
  .pager__nav { display: flex; align-items: center; gap: 34px; }
  .pager__step { display: inline-flex; align-items: center; gap: 12px; }
  .pager__chev { width: 10.16px; height: 6.19px; }
  .pager__chev--back { transform: rotate(90deg); }

  .pager__pages { display: flex; align-items: center; gap: 12px; list-style: none; }
  .pager__page {
    display: grid; place-items: center;
    width: 38.72px; height: 38.72px; border-radius: 11.06px;
    background: #f5f5f5;
    transition: background-color .18s ease;
  }
  .pager__page:hover { background: #e6e9ee; }
  .pager__page--on, .pager__page--on:hover {
    background: var(--surface-brand-deep); color: var(--text-inverse);
  }
  .pager__ellipsis { width: 19.91px; text-align: center; }
}

/* --- link feedback ----------------------------------------------------- */
.pager a, .bhero a { transition: opacity .18s ease; }
.pager a:hover { opacity: .75; }
.feature { transition: box-shadow .18s ease; }
.feature:hover { box-shadow: 0 18px 40px -24px rgba(10, 38, 87, .8); }