/* =========================================================================
   home2 — components
   The pieces Figma draws as library components and reuses across sections.
   Each block names its Figma component. Look = Figma; hover and timing =
   the old prototype (home.css), carried over as it was:

     buttons         fill → ink, .12s linear
     round arrows    ring → ink, glyph ×1.3, .12s linear
     cards           1px outset stroke at 12.5% ink, title → blue (.25s),
                     photo ×1.04 over 1.2s

   Hovers only apply where there is a real pointer ((any-hover: hover)), as
   before, so a tap on a phone never leaves a card stuck in its hover state.
   ========================================================================= */

/* ── Button, CTA / Button, CTA Outline ───────────────────────────────── */
.c-btn {
  --btn-dur: .12s;
  --btn-ease: linear;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 44px;
  padding: 12px 24px;
  border-radius: 2px;
  background: var(--color-blue);
  color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: background var(--btn-dur) var(--btn-ease),
              color      var(--btn-dur) var(--btn-ease),
              box-shadow var(--btn-dur) var(--btn-ease);
}
.c-btn--outline {
  background: transparent;
  color: var(--color-blue);
  box-shadow: inset 0 0 0 1.5px var(--color-blue-40);
}
@media (any-hover: hover) {
  .c-btn:is(:hover, :focus-visible) { background: var(--color-black); color: var(--color-white); }
  .c-btn--outline:is(:hover, :focus-visible) {
    background: transparent;
    color: var(--color-black);
    box-shadow: inset 0 0 0 1.5px var(--color-black);
  }
}
/* Button, CTA, Small — Figma sets it in SemiBold 14/16 directly, not
   through a text style, so the numbers are written here. The 1024 frame
   uses it where the others use Normal: .c-btn--sm-tablet does that swap. */
.c-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: "calt" 0, "dlig" 1;
}
@media (min-width: 1024px) and (max-width: 1391px) {
  .c-btn--sm-tablet {
    height: 32px;
    padding: 0 12px;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    font-feature-settings: "calt" 0, "dlig" 1;
  }
}
/* never wider than its column: on the narrowest phones a long label wraps
   inside a button that grows, rather than pushing the page sideways */
.c-btn { max-width: 100%; }
@media (max-width: 419px) {
  .c-btn { white-space: normal; text-align: center; height: auto; min-height: 44px; }
}
.c-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-stack-s); }

/* ── Eyebrow (Diamond + label) ───────────────────────────────────────
   The two inner class names are what motion.js looks for: the label flips
   in character by character and the diamond pushes it into place. */
.c-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-black);
}
.c-eyebrow .hp-eyebrow__mark { flex: none; display: block; width: 10px; height: 10px; }
.c-eyebrow .hp-eyebrow__mark svg { width: 10px; height: 10px; }
.c-eyebrow .hp-eyebrow__text { display: block; }

/* ── Arrow Button / Button, CTA Arrow / Button, Next ─────────────────
   A 1.5px ring at 30% ink with a glyph in the middle. The ring and the
   glyph are separate layers so the hover can recolour one and scale the
   other. Whatever wraps it is what is hovered — the card, usually — so the
   rule is keyed off the arrow itself, a link around it, or .u-hit. */
.c-arrow {
  --size: 32px;
  --line: var(--color-black-30);
  --line-hover: var(--color-black);
  --dur: .12s;
  --ease: linear;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  color: var(--color-black);
  background: none;
  border: 0;
  padding: 0;
}
.c-arrow--lg { --size: 44px; }
.c-arrow__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.c-arrow__icon {
  position: relative;
  display: grid; place-items: center;
  transition: scale var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-arrow__icon svg { display: block; }
/* filled: the black disc Figma draws for the hovered card */
.c-arrow--filled .c-arrow__ring { background: var(--color-black); }
.c-arrow--filled { color: var(--color-white); }
/* on a photo: a white disc, ink glyph */
.c-arrow--disc { --line: var(--color-white-30); --line-hover: var(--color-white); }
.c-arrow--disc .c-arrow__ring { background: var(--color-white); }
/* on a dark ground: white ring and glyph */
.c-arrow--light { --line: var(--color-white-30); --line-hover: var(--color-white); color: var(--color-white); }

@media (any-hover: hover) {
  .c-arrow:is(:hover, :focus-visible) .c-arrow__ring,
  a:is(:hover, :focus-visible) .c-arrow__ring,
  .u-hit:is(:hover, :focus-visible) .c-arrow__ring { border-color: var(--line-hover); }
  .c-arrow:is(:hover, :focus-visible) .c-arrow__icon,
  a:is(:hover, :focus-visible) .c-arrow__icon,
  .u-hit:is(:hover, :focus-visible) .c-arrow__icon { scale: 1.3; }
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.c-dots { display: flex; align-items: center; gap: 8px; }
.c-dots > * {
  width: 16px; height: 16px; padding: 0; border: 0;
  border-radius: var(--full);
  background: var(--color-black-30);
  transition: background-color .25s var(--e-hover);
}
.c-dots > [aria-selected="true"], .c-dots > .is-on { background: var(--color-black); }

/* ── Cards ───────────────────────────────────────────────────────────
   The hover every card on the old page shared. Add .c-card to the
   clickable box, .c-card__title to its heading and .c-card__media to the
   box that clips its photo. */
.c-card {
  position: relative;
  box-shadow: 0 0 0 1px rgba(2, 3, 11, 0);
  transition: box-shadow .512s var(--e-hover);
}
.c-card__title { transition: color .25s var(--e-hover); }
.c-card__media { overflow: hidden; }
.c-card__media img { transition: transform 1.2s var(--e-zoom); }
@media (any-hover: hover) {
  .c-card:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px rgba(2, 3, 11, .125); }
  .c-card:is(:hover, :focus-visible) .c-card__title { color: var(--color-blue); }
  .c-card:is(:hover, :focus-visible) .c-card__media img { transform: scale(1.04); }
}
/* motion.css's reveal presets replace `transition` on the card; they list
   box-shadow already, this keeps the title and photo out of that fight */

@media (prefers-reduced-motion: reduce) {
  .c-btn, .c-arrow__ring, .c-arrow__icon, .c-card, .c-card__title, .c-card__media img { transition: none; }
}