/* ===========================================================================
   articles-v2.css — Articles Hub (editorial / blog index), clean-room build.
   Figma: desktop 810:103248 / tablet 811:109850 / mobile 811:114441.
   Reuses .btnav (best-time-v2.css), .v2reviews/.v2approach/opfoot* (home-v2.css);
   this file holds ONLY the NEW article-card grid + pagination + the .artnav
   tablet/mobile override (this page's nav bar is 82px tall below 1280, not the
   64px Light variant the shared .btnav collapses to).
   =========================================================================== */

body.articles-v2 {
  font-family: "Roboto Flex", system-ui, sans-serif;
  background: #fff;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   art-nav: the standalone white global nav bar is reused from .btnav. On the
   Articles Hub the tablet/mobile bar stays 82px tall (the page's own
   tablet-global-nav-bar), whereas the shared .btnav collapses to 64px below
   1280. Keep the bar at 82px here so it matches this page's design.
   --------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .articles-page .artnav.btnav { height: 82px; }
}

/* ---------------------------------------------------------------------------
   art-reviews: the reviews-io-banner on this page is the DARK variant
   (dark-teal #15292c bg + a faint luminosity texture + WHITE tagline), unlike
   the homepage §8 white variant. Override the reused .v2reviews here (mirrors
   the destination .dereviews dark treatment). The faint texture reuses the
   dereviews assets (the exact Figma photo differs → visual-UNVERIFIED).
   --------------------------------------------------------------------------- */
.artreviews { position: relative; isolation: isolate; background: #15292c; overflow: hidden; }
.artreviews::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url('../../img/v2/dereviews-bg-mobile.webp');
  background-size: cover; background-position: center;
  opacity: .10; mix-blend-mode: luminosity;
}
.artreviews > * { position: relative; z-index: 1; }
.artreviews .v2reviews__tagline { color: #ffffff; }
/* reviews.io wordmark is WHITE on the dark banner in the design (the shared SVG
   ships black). Invert it on this dark variant (same fix as destination .dereviews). */
.artreviews .v2reviews__logo { filter: brightness(0) invert(1); }
@media (min-width: 768px)  { .artreviews::before { background-image: url('../../img/v2/dereviews-bg-tablet.webp'); } }
@media (min-width: 1280px) { .artreviews::before { background-image: url('../../img/v2/dereviews-bg-desktop.webp'); } }

/* ---------------------------------------------------------------------------
   art-grid: the editorial article-card grid (Container 810:108097).
   Desktop: VERTICAL container, padding 168 top/bottom, content column 1232 in
   a centred 1440, header→cards→pagination gap 168. Cards = 4 rows of 1232,
   each 806 large + 16 gap + 410 small-column; rows alternate large-left/right.
   --------------------------------------------------------------------------- */
.artgrid {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.artgrid__inner {
  width: 100%;
  max-width: 1440px;
  padding: 168px 104px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 168px;
  align-items: center;
}

/* header --------------------------------------------------------------- */
.artgrid__head {
  width: 700px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
  align-items: stretch;   /* children span the full 700 so their box-x matches Figma */
}
.artgrid__title {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 62px;
  line-height: 58px;
  letter-spacing: 0;
  color: #000;
}
.artgrid__intro {
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 40px;
  color: #000;
}

/* card rows ------------------------------------------------------------ */
.artgrid__cards {
  width: 100%;
  max-width: 1232px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.artgrid__row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.artgrid__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 410px;     /* fluid below 1440, capped at the 410 design width */
  min-width: 0;
}
/* large card = 806 of the 1232 content row; column = 410; fluid by basis, the
   square aspect-ratio drives the row height so it scales 1280→1440 cleanly. */
.artgrid__row .artcard--lg { flex: 0 1 806px; min-width: 0; }

/* article card (overlay variant; desktop/tablet) ----------------------- */
.artcard {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #f9f5f2;
  isolation: isolate;
}
.artcard--lg { aspect-ratio: 1 / 1; }                 /* square; width from flex basis */
.artcard--sm { flex: 1 1 0; min-height: 0; aspect-ratio: 410 / 395; }  /* two stacked in the 410 column */

.artcard__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
/* legibility gradients (TWO, per the Figma card): a top wash behind the date
   (Container fill #000 .5 → transparent over ~106px) and a bottom wash behind
   the title/desc (Text fill transparent 51% → #000 .6 at 77%). */
.artcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 106px),
    linear-gradient(180deg, rgba(0,0,0,0) 51%, rgba(0,0,0,.6) 77%);
  pointer-events: none;
}
.artcard__date {
  position: absolute;
  top: 48px;
  left: 48px;
  z-index: 2;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.artcard__text {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.artcard__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-bottom: 16px;
}
.artcard__clock { width: 16px; height: 16px; flex: 0 0 16px; color: rgba(255,255,255,.8); }
.artcard__title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 50px;
  color: #f9f5f2;
  margin-bottom: 0;   /* default = title is the last line, sits on the baseline */
}
.artcard--sm .artcard__title { font-size: 28px; line-height: 28px; }
/* description + CTA are HIDDEN by default and revealed on hover (Figma annotation:
   "On hover, the background overlay changes and a short description and Read Article
   CTA appear"; small cards get the CTA but no description). */
.artcard__desc {
  display: none;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #f9f5f2;
  margin-bottom: 16px;
}
.artcard__cta {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #ffffff;
}
.artcard__ctaarrow { width: 14px; height: 10px; flex: 0 0 14px; }

/* image-caption: shown on MOBILE cards only (see the mobile block). Hidden on
   desktop/tablet — those card variants have no caption in the design. */
.artcard__caption { display: none; }

/* ---- card HOVER: the overlay becomes dark teal @70% and the description (large
   cards) + Read Article CTA (all cards) appear. Hugo batch2 #11: ONE 450ms
   ease-in-out for every animated property, nothing staggered. The old
   display:none -> block reveal snapped while the overlay faded; now the text
   container is a grid whose desc/CTA rows animate 0fr -> 1fr on the same curve
   as the overlay colour and the fade, so overlay, reveal and re-stack move
   together. Scoped >=768 so narrow windows keep the mobile inline-description
   layout untouched. NOT gated on (hover:hover) — Paul's Chrome classifies his
   setup as hover-none (touchscreen laptop heuristics) and the whole block was
   skipped for him (2026-08-01); :hover simply never fires where there is no
   pointer, so the media guard added nothing except that failure mode. ---- */
.artcard::after { transition: background 450ms ease-in-out; }
@media (min-width: 768px) {
  .artcard__text { display: grid; grid-template-rows: auto auto 0fr 0fr; transition: grid-template-rows 450ms ease-in-out; }
  /* margins start at 0 and JOIN the 450ms transition (item margins count in grid track
     sizing even at 0fr, so a static 16px margin would hold the collapsed rows 16px open
     and shift the resting card) — same lesson as the accordion padding, 2026-07-12. */
  .artcard__desc { display: block; min-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: opacity 450ms ease-in-out, margin-top 450ms ease-in-out; }
  .artcard__cta  { display: inline-flex; min-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: opacity 450ms ease-in-out, margin-top 450ms ease-in-out; }
  .artcard:hover::after { background: rgba(21, 41, 44, .7); }   /* Primary/Dark Teal 1 70% */
  .artcard--lg:hover .artcard__text { grid-template-rows: auto auto 1fr 1fr; }
  .artcard--sm:hover .artcard__text { grid-template-rows: auto auto 0fr 1fr; }  /* small cards: CTA only, no description */
  .artcard--lg:hover .artcard__desc { opacity: 1; margin-top: 16px; }
  .artcard:hover .artcard__cta { opacity: 1; margin-top: 16px; }
}

/* pagination ----------------------------------------------------------- */
.artgrid__pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}
.artgrid__arrow {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: #15292c;     /* dark teal disc */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.artgrid__arrow svg { width: 14px; height: 14px; }
/* page 1: the prev arrow is the DISABLED state in the design — the whole
   carousel-arrows disc + chevron at opacity .15 (dark teal reads as light grey
   on white). Wired to toggle when pagination JS lands. */
.artgrid__arrow--prev { opacity: .15; }
/* numbered row: 40x40 boxes, active page has a gold border */
.artgrid__nums {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.artgrid__num {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #000;
}
.artgrid__num--on {
  border: 1px solid #b19f70;   /* gold-bordered current page */
  color: #000;
}
.artgrid__count { display: none; }   /* shown on mobile only */

/* ---------------------------------------------------------------------------
   TABLET (<=1024): uniform 2-column grid of 424x424 overlay cards; container
   pad 128/104, gap 128, header→cards→pag.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* side margin 80 so the two 424 squares + 16 gap (=864) fill the column at 1024,
     matching the design; cards shrink proportionally below 1024 but stay 2-up. */
  .artgrid__inner { padding: 128px 80px; gap: 128px; }
  .artgrid__title { font-size: 46px; line-height: 42px; }
  .artgrid__intro { font-size: 20px; line-height: 32px; }
  .artgrid__cards {
    max-width: 864px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .artgrid__row { display: contents; }            /* dissolve rows into the grid */
  .artgrid__col { display: contents; }            /* dissolve small-card columns */
  .artcard { width: auto; height: auto; aspect-ratio: 1 / 1; flex: none !important; }
  .artcard--lg, .artcard--sm { width: auto; height: auto; }
  .artcard__title { font-size: 28px; line-height: 28px; }
  /* tablet card text insets are 32 (design Container padding), not the desktop 48 */
  .artcard__date { top: 32px; left: 32px; }
  .artcard__text { left: 32px; right: 32px; bottom: 32px; }
}

/* ---------------------------------------------------------------------------
   MOBILE / large phone (<=767): 1-column stack; image ON TOP (square) with date +
   caption overlaid, text BELOW the image. Container pad 80/24, gap 80; card gap 24.
   (Tablets 768+ use the 2-col grid above; phones stack up to 767 so cards never
   shrink to tiny 2-up boxes in the 481-767 range.)
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Figma annotation [Mobile: Articles Hub] (on: Container): "On mobile the
     background is sand not white." (Primary/Sand 1 = #f9f5f2). Desktop/tablet white. */
  body.articles-v2 { background: var(--c-sand, #f9f5f2); }
  .artgrid { background: var(--c-sand, #f9f5f2); }
  .artgrid__inner { padding: 80px 24px; gap: 80px; }
  .artgrid__head { width: 100%; max-width: 540px; }
  .artgrid__title { font-size: 40px; line-height: 38px; }
  .artgrid__intro { font-size: 18px; line-height: 30px; }
  .artgrid__cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 540px;     /* stack stays a comfortable single-column width up to 767 */
  }
  .artgrid__row, .artgrid__col { display: contents; }
  /* re-flow the card: image (square) on top, text below */
  .artcard {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    color: #15292c;
    display: flex;
    flex-direction: column;
    /* neutralise the desktop flex basis (.artgrid__row .artcard--lg = flex 0 1 806px,
       .artcard--sm = flex 1 1 0): in this 1-col COLUMN those become a fixed/zero
       HEIGHT, which left a huge empty gap below each card. Size to content instead. */
    flex: none !important;
  }
  .artcard--lg, .artcard--sm { width: 100%; height: auto; }
  .artcard__img {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  .artcard::after {            /* gradient only over the image area, lighter */
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
  }
  /* image-caption at the bottom of the square image (gold #ic-credit glyph + white
     caption text over a bottom gradient) — mobile-article-cards node, 20px insets. */
  .artcard__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 64px 20px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
    pointer-events: none;
  }
  .artcard__capicon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--c-gold, #b19f70); }
  .artcard__captxt {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255,255,255,.8);
  }
  .artcard__date {
    top: 24px; left: 24px;
    color: rgba(255,255,255,.9);
  }
  .artcard__text {
    position: relative;
    left: auto; right: auto; bottom: auto;
    padding-top: 16px;
    color: #15292c;
  }
  .artcard__read { color: rgba(21,41,44,.7); margin-bottom: 12px; }
  .artcard__clock { color: rgba(21,41,44,.7); }
  .artcard__title { color: #15292c; font-size: 28px; line-height: 28px; margin-bottom: 12px; }
  /* mobile cards show the description INLINE (all cards, dark text below the image);
     the Read Article CTA is NOT shown on mobile (design has no CTA on the mobile card). */
  .artcard__desc { display: block; color: #15292c; font-size: 14px; line-height: 22px; margin-bottom: 0; }
  .artcard__cta { display: none !important; }
  /* mobile pagination: arrows + "01 of 12" (Figma mobile replaces the number row). */
  .artgrid__pag { gap: 40px; }
  .artgrid__nums { display: none; }
  .artgrid__count {
    display: inline-flex;
    font-family: "Roboto Flex", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: rgba(0,0,0,.6);
  }
}

/* ---------------------------------------------------------------------------
   >1440: full-bleed white background, content centred at 1440 (LESSONS L5).
   The .artgrid section is already full-width with a centred 1440 inner, so the
   white bg is edge-to-edge and the content stays put. Confirm-only.
   --------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  .articles-page .artgrid__inner { max-width: 1440px; margin: 0 auto; }
  /* our-approach >1440 containment now lives on the BASE .v2approach in home-v2.css
     (shared, unscoped) — no per-page copy here. */
}