/* ==========================================================================
   GoodVibes Foundation — FEATURED FRIENDS BANNER, partner family (WIENLION)
   gvs.foundation · production CSS · overflow layer (loads after gvs-braids)

   A SIBLING of `gvs-braids-banner.css`, not a copy of it. Same card frame,
   same tokens, same <picture>/<source media> art-direction contract, same gold
   fill, same petrol label — and, since 2026-09-06, the same treatment: the call
   to action sits ON the artwork, not in a strip under it.

   ---------------------------------------------------------------------------
   WHERE THE BUTTON LANDS, AND WHY IT IS SAFE THERE

   The WIENLION artwork is a finished poster, so the landing spot was MEASURED
   off the two files rather than guessed. Protected ink, in artwork pixels:

     desktop  2289 x 687
       GoodVibes roundel .............. x   34- 412, y   80- 475
       headline + subline ............. x  488-1290, y  100- 445
       "GOODVIBES FOUNDATION x WIENLION"
         lockup, incl. its flanking rules  x  300-1266, y  473- 505   <- floor
       athletes photo ................. x 1140-1700, y    0- 640
       WIENLION crest + wordmark ...... x 1740-1960, y   20- 400
       "Vienna Stronger Together" ..... x 1795-1960, y  440- 561
       Vienna skyline silhouette ...... full width,  y  505- 640   <- free
       gold rule ...................... full width,  y  642- 653
       petrol footer band ............. full width,  y  657- 687

     mobile   1122 x 1402
       lockup ......................... x   52-1016, y 1240-1263   <- floor
       Vienna skyline silhouette ...... full width,  y 1266-1364   <- free
       gold rule ...................... full width,  y 1364-1376
       petrol footer band ............. full width,  y 1380-1402

   So on BOTH artworks the only stretch that carries no logo, face or word is
   the Vienna skyline along the bottom — which is exactly where the Afro Crown
   Beauty card above parks its own button. The two cards now agree.

   DESKTOP: bottom-LEFT, not bottom-right. The braids card uses bottom-right,
   but on this artwork the right third is the crest, the "Vienna Stronger
   Together" script and the athletes, whose shoes and bike run down to y=640 —
   there is no room on the right that is not somebody's logo. Bottom-left is
   free from y=505 to y=640 and the button's left edge is aligned to x=488, the
   left edge of the headline, so it reads as the last line of that column:
   headline -> subline -> lockup -> button.

   MOBILE: centred over the same skyline band, which is only 98 artwork px tall
   (7% of the poster). See the sizing note below for why that is survivable.

   ---------------------------------------------------------------------------
   WHY THE BUTTON SCALES AND THE BRAIDS ONE DOES NOT

   A fixed 44px button on a poster that scales with the viewport occupies a
   BIGGER fraction of the artwork the narrower the screen gets. At the 782px
   breakpoint this card is 778px wide, so the artwork renders 234px tall and the
   free skyline band is only 47 CSS px — a fixed 44px button would have 3px of
   clearance and would touch the lockup on the way. So the button is sized in
   `cqw` (a share of the CARD, which is the container) with a legibility floor
   and the braids card's own 15px/44px as the ceiling: at the full 1400px card
   it is pixel-identical to `.gvs-braids__cta`, and below that it shrinks with
   the poster instead of eating it. Everything else — height, padding, min-width
   — is expressed in `em`, so one clamped font-size drives the whole shape.

   The plain px declarations before each clamp are the fallback for engines
   without container query units; they are the same values as `.gvs-braids__cta`.

   THE RING. The braids card separates its gold button from the artwork with a
   cream halo, because it lands on dark skyline only. This button straddles
   cream ground AND navy skyline, so a cream halo would disappear on the cream
   half. It gets a 2px PETROL ring instead — the card's own border colour —
   which measures 8.8:1 against the cream ground and reads as a deliberate
   outline against the skyline. The label itself is petrol on gold, 5.03:1, the
   design's primary pairing, and it is unaffected by the artwork because the
   button fill is opaque.

   ROLLBACK: dequeue 'gvs-partner-banner' (see the gvs-partner-banners mu-plugin)
   and delete this file. The banner then degrades to a plain linked poster with
   an unstyled label over the skyline.
   ========================================================================== */

.gvs-partner {
  /* The two numbers worth tuning. Fractions of the banner box, so the button
     keeps its spot on the picture at every width — same idea as .gvs-braids. */
  --gvs-partner-cta-inline: 21.3%;  /* left edge, = headline left edge (x488)  */
  --gvs-partner-cta-block:   7.9%;  /* up from the bottom; the 2px ring clears the gold rule at 782px */

  position: relative;
  /* Makes the card the query container the button sizes itself against. */
  container-type: inline-size;
  display: block;
  isolation: isolate;
  box-sizing: border-box;
  /* Same measure as .gvs-braids directly above it and as the neighbouring
     landing sections, which render inside the theme's `.container`. */
  max-width: var(--wp--style--global--content-size, 1400px);
  margin: var(--gvs-space-4) auto var(--gvs-space-6);
  overflow: hidden;
  background-color: var(--gvs-bg-panel);
  border: var(--gvs-border-width) solid var(--gvs-petrol);
  border-radius: var(--gvs-radius);
  text-decoration: none;
  transition: border-color var(--gvs-t) var(--gvs-ease);
}

.gvs-partner:hover {
  border-color: var(--gvs-petrol-deep);
}

.gvs-partner:focus-visible {
  outline: var(--gvs-focus-width) solid var(--gvs-focus-ring);
  outline-offset: var(--gvs-focus-offset);
}

/* The artwork. */
.gvs-partner__art,
.gvs-partner__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 0;
}

.gvs-partner__art img {
  object-fit: cover;
}

/* The rail the button rides on. It is the full width of the artwork and carries
   no ink of its own — it exists only so the button can be aligned by a single
   padding value without a second positioned box. (It used to be a petrol strip
   below the artwork; that is what this change removed.) */
.gvs-partner__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gvs-partner-cta-block);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-left: var(--gvs-partner-cta-inline);
  padding-right: var(--gvs-space-2, 16px);
  background: none;
}

/* The button. Same fill, label colour, radius and weight as .gvs-btn--primary
   and .gvs-braids__cta; it is a <span> because the whole banner is the link and
   an <a> inside an <a> is invalid. */
.gvs-partner__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--gvs-font-body);
  font-weight: var(--gvs-body-weight-em);
  font-size: var(--gvs-btn-fs-md);                    /* 15px, no-cqw fallback */
  font-size: clamp(12px, 1.0745cqw, var(--gvs-btn-fs-md));
  line-height: 1;
  white-space: nowrap;

  /* 44px / 132px / 24px at the 15px ceiling — i.e. identical to the braids
     button on a full-width card, and proportional to the poster below that. */
  height: 2.9333em;
  min-width: 8.8em;
  padding: 0 1.6em;

  background-color: var(--gvs-gold);
  border-radius: var(--gvs-radius);
  color: var(--gvs-text-on-gold);
  box-shadow:
    0 0 0 2px var(--gvs-petrol),
    0 6px 16px rgba(0, 0, 0, 0.28);

  transition: background-color var(--gvs-t) var(--gvs-ease);
}

.gvs-partner:hover .gvs-partner__cta {
  background-color: var(--gvs-gold-hover);
}

.gvs-partner:active .gvs-partner__cta {
  background-color: var(--gvs-gold-active);
}

/* --- WIENLION artwork ratios ---------------------------------------------
   Declared on the modifier, so the base above stays reusable for the next
   featured friend without inheriting this one's crop. `aspect-ratio` is
   declared per breakpoint from the real pixel dimensions so the box is
   reserved before the file lands: no layout shift on a banner this large. */
.gvs-partner--wienlion .gvs-partner__art img {
  aspect-ratio: 2289 / 687;
}

/* --- portrait artwork ----------------------------------------------------
   Breakpoint matched to the <source media> in the markup, so CSS and HTML never
   disagree about which artwork is on screen. Same 781px switch as the banner
   above, so the pair flips together.

   The portrait's free band is 98 artwork px (1266 -> 1364), which is 32 CSS px
   on a 390px phone and 26 CSS px on a 320px one. A 56px button cannot live
   there, so on the portrait the button becomes a compact pill: centred, 2em
   tall, scaling with the card from 11px up to the 17px `--gvs-btn-fs-lg`
   ceiling it reaches at the 781px end of this range. It is a smaller VISUAL
   affordance, not a smaller target: the entire card is the link. */
@media (max-width: 781px) {
  .gvs-partner {
    --gvs-partner-cta-block: 3.4%;
    /* `.container` keeps an 8px gutter at this width; match it so the frame's
       rounded corners are not clipped by the viewport edge. */
    width: calc(100% - (2 * var(--gvs-space-1)));
  }

  .gvs-partner--wienlion .gvs-partner__art img {
    aspect-ratio: 1122 / 1402;
  }

  .gvs-partner__bar {
    justify-content: center;
    padding-left: var(--gvs-space-1, 8px);
    padding-right: var(--gvs-space-1, 8px);
  }

  .gvs-partner__cta {
    font-size: var(--gvs-btn-fs-md);
    font-size: clamp(11px, 2.2338cqw, var(--gvs-btn-fs-lg));
    height: 2em;
    min-width: 0;
    padding: 0 1.15em;
    /* 1.5px, not 2px: the portrait's free band is 98 artwork px, which is 26 CSS
       px on a 320px phone, so half a pixel of ring on each edge is the
       difference between clearing the gold rule and sitting on it. */
    box-shadow:
      0 0 0 1.5px var(--gvs-petrol),
      0 4px 12px rgba(0, 0, 0, 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gvs-partner,
  .gvs-partner__cta {
    transition: none;
  }
}