/* ==========================================================================
   GoodVibes Foundation — FEATURED FRIENDS BANNER (Afro Crown Beauty)
   gvs.foundation · production CSS · overflow layer (loads after gvs-calendar)

   One poster in a GVS card frame, with the call to action sitting INSIDE the
   artwork instead of hanging underneath it.

   TWO SEPARATE ARTWORKS, not two sizes of one:
     desktop  #1647  1536 x 461   landscape — headline left, group right
     mobile   #1646  1122 x 1402  portrait  — headline stacked over the group
   That is art direction, so the swap is a <picture>/<source media> in the
   markup and NOT a `srcset` width list: `srcset` picks by RESOLUTION, and the
   previous markup listed the portrait and the landscape as if they were two
   renders of the same crop, leaving the choice to the browser's own guess.

   THE CTA IS PLACED IN FRACTIONS OF THE ARTWORK, so it keeps its spot on the
   picture at every width. Both artworks put a dark Vienna skyline along the
   bottom, which is where the button sits: gold on petrol is the design's own
   primary pairing (5.03:1). A cream halo ring — not a scrim — separates it
   from the busy areas, so nothing dims Afro Crown Beauty's own logo lockup.

   ROLLBACK: dequeue 'gvs-braids-banner' in functions.php, delete this file,
   and restore the block from the page-15 backup taken alongside it.
   ========================================================================== */

.gvs-braids {
  /* The two numbers worth tuning. Fractions of the banner box. */
  --gvs-braids-cta-inline: 3.2%;   /* distance from the right edge  */
  --gvs-braids-cta-block:  7.5%;   /* distance from the bottom edge */

  position: relative;
  display: block;
  isolation: isolate;
  box-sizing: border-box;
  /* Same measure as the neighbouring landing sections, which render inside the
     theme's `.container` (1400px, measured 20px clear of a 1440px viewport).
     The block this replaced was `align: wide` — 1300px — which stepped in from
     the birthday banner above it and the hero below. */
  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-braids:hover {
  border-color: var(--gvs-petrol-deep);
}

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

/* The artwork. `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-braids__art,
.gvs-braids__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 0;
}

.gvs-braids__art img {
  aspect-ratio: 1536 / 461;
  object-fit: cover;
}

/* The button, embedded. Same fill, label colour, radius and weight as
   .gvs-btn--primary; it is a <span> because the whole banner is the link and
   an <a> inside an <a> is invalid. */
.gvs-braids__cta {
  position: absolute;
  right: var(--gvs-braids-cta-inline);
  bottom: var(--gvs-braids-cta-block);
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--gvs-btn-h-md);
  min-width: var(--gvs-btn-min-md);
  padding: 0 var(--gvs-btn-pad-md);
  background-color: var(--gvs-gold);
  border-radius: var(--gvs-radius);
  box-shadow: 0 0 0 3px var(--gvs-cream);
  color: var(--gvs-text-on-gold);
  font-family: var(--gvs-font-body);
  font-weight: var(--gvs-body-weight-em);
  font-size: var(--gvs-btn-fs-md);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--gvs-t) var(--gvs-ease),
              box-shadow var(--gvs-t) var(--gvs-ease);
}

.gvs-braids:hover .gvs-braids__cta {
  background-color: var(--gvs-gold-hover);
}

.gvs-braids:active .gvs-braids__cta {
  background-color: var(--gvs-gold-active);
}

/* --- portrait artwork ----------------------------------------------------
   Breakpoint matched to the <source media> in the markup, so CSS and HTML
   never disagree about which artwork is on screen. The portrait puts the
   Afro Crown Beauty and GoodVibes logo lockups along the bottom edge, so the
   button is centred and lifted clear of them, over the skyline. */
@media (max-width: 781px) {
  .gvs-braids {
    --gvs-braids-cta-block: 15%;
    /* `.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-braids__art img {
    aspect-ratio: 1122 / 1402;
  }
  .gvs-braids__cta {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    height: var(--gvs-btn-h-lg);
    font-size: var(--gvs-btn-fs-lg);
  }
}

/* Reduced motion: the transitions above are colour only, but keep the promise
   explicit rather than implied. */
@media (prefers-reduced-motion: reduce) {
  .gvs-braids,
  .gvs-braids__cta {
    transition: none;
  }
}