/* =========================================================
   Featured-panel grammar (06.07.26)

   Started life as a standalone "featured band" of paired CTA
   panels below the hero; the band was dissolved the same day
   it shipped (the video moved into the intro card, the Before
   the Myth cover merged into that book's own card) and this
   file now holds the shared media-header grammar used by:
   - the intro card's "Think You Know Ireland?" video header
     (live-action; per user direction we do not call it a
     film), click-to-play via the hidden #intro-video figure
     in the shared lightbox shell;
   - the Before the Myth card's cover header, anchoring to
     #get-in-touch to register interest ahead of the 1 August
     2026 release.
   Every panel shares one visual grammar: full-bleed unshaded
   image (the bottom scrim was retired 06.07.26 late v5, per
   user) and a bottom-left text block of display-title + coral
   action line; video panels carry the play disc in flow
   directly above the title (06.07.26 late) so they read as
   video before the text is parsed.
   ========================================================= */

/* One panel = one CTA. The book panel is an <a>, the video
   panel a <button> (lightbox opener), so the base rule
   resets both elements to the same box. Children are all
   <span>s (a <button> only permits phrasing content) styled
   as blocks below. */
.featured-panel {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--primary-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  /* Button resets (film panel). */
  margin: 0;
  padding: 0;
  font: inherit;
  transition: border-color var(--t-standard) var(--ease-standard),
              box-shadow var(--t-standard) var(--ease-standard);
}

.featured-panel:hover,
.featured-panel:focus-visible {
  border-color: rgba(255, 107, 74, 0.45);
  box-shadow: var(--shadow-lift);
}

.featured-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.featured-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard);
}

.featured-panel:hover .featured-panel__img,
.featured-panel:focus-visible .featured-panel__img {
  transform: scale(1.04);
}

/* (06.07.26 late v5: the .featured-panel__scrim bottom gradient that
   lived here is RETIRED per user - both media headers now show their
   artwork unshaded, and the scrim spans were removed from the HTML.
   Both stills are dark in their lower-left corner, so the text block
   still reads without it. If a future panel uses a brighter image,
   re-check contrast before shipping it without a scrim.) */

.featured-panel__text {
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: var(--s-5);
  display: block;
}

/* (06.07.26 late: the .featured-panel__kicker rule that lived here
   was removed with the "On YouTube" kicker itself, per user - the
   text block is now play disc / title / action only.) */

.featured-panel__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: var(--s-2);
}

/* Coral action line: the "this is clickable, and this is
   what happens" cue. The arrow nudges right on hover with
   the same standard easing the site uses everywhere. */
.featured-panel__action {
  display: inline-block;
  font-size: var(--body-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.featured-panel__action::after {
  content: "\2192"; /* -> */
  display: inline-block;
  margin-left: var(--s-2);
  transition: transform var(--t-standard) var(--ease-standard);
}

.featured-panel:hover .featured-panel__action::after,
.featured-panel:focus-visible .featured-panel__action::after {
  transform: translateX(4px);
}

/* Play disc on the video panel. Same 64-viewBox disc the lightbox
   auto-injects (.lightbox-trigger--play), inlined here because the
   whole panel is the trigger rather than a corner button.
   06.07.26 (late): now sits IN FLOW inside the text block, directly
   above the title. The earlier absolute anchors (centred 44%, then
   62%, then a phone corner swap) drifted across the frame as the
   viewport resized, per user - in flow the disc is locked to the
   title at every width, and the fixed px size stops it scaling
   with the viewport. */
.featured-panel__play {
  display: block;
  /* 06.07.26 (late v13): 48 -> 28px, per user ("far too large"). The
     whole video header is the click target, so the disc is a marker,
     not the hit area - it can read small. */
  width: 28px;
  height: 28px;
  margin-bottom: var(--s-3);
  color: #FFFFFF;
  pointer-events: none;
  transform-origin: left center;
  transition: transform var(--t-standard) var(--ease-standard),
              color var(--t-standard) var(--ease-standard);
}

.featured-panel__play svg {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-panel--video:hover .featured-panel__play,
.featured-panel--video:focus-visible .featured-panel__play {
  color: var(--accent);
  transform: scale(1.08);
}

/* Card-media variant (06.07.26): the video panel embedded as the
   opening (intro) card's media header. Same visual grammar as the
   other panels - image, scrim, play disc / title / action -
   but flush to the card: full width, no border, no radius (the
   card's own overflow: hidden clips the top corners), no shadow,
   and the still's native 1280x544 cinematic crop instead of the
   band's 16/10, so nothing of the frame is lost. Hover keeps the
   image scale + coral action nudge from the base rules; the
   border/shadow lift is suppressed because the card supplies the
   surface. */
.featured-panel--card-media {
  display: block;
  width: 100%;
  /* 06.07.26 (late v3): 1280/544 -> 1280/528. The still is re-cropped
     96px per side (was 88): the YouTube letterbox has a soft encoder
     fade that bled ~4px of near-black past the old crop line, which
     rendered as a faint band along the header's top edge at rest and
     vanished under the hover zoom - the "faint border" the user
     chased. The band was IN THE IMAGE; no CSS layer could remove it. */
  aspect-ratio: 1280 / 528;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* 06.07.26 (late v2): opaque page-dark, was transparent. With a
     transparent panel, the sub-pixel gap noted below read as a
     hairline of the lighter glass card behind the artwork. */
  background: #0F1419;
}

.featured-panel--card-media:hover,
.featured-panel--card-media:focus-visible {
  border: 0;
  box-shadow: none;
}

/* 06.07.26 (late v2): kill the hairline that showed along the media
   header's top edge at rest - sub-pixel rounding between the
   aspect-ratio-derived box height and the absolutely-positioned img
   left a fractional slit of the card showing through. It vanished on
   hover because the scale(1.04) zoom oversized the image past the
   slit (user's observation, which identified the mechanism). The
   image now bleeds 1px past the container on every side, clipped by
   the panel's overflow: hidden, so the slit cannot exist at rest
   either. */
.featured-panel--card-media .featured-panel__img {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

/* Cover variant (06.07.26, revised same day pm): the Before the
   Myth cover artwork as that card's media header. Now shown at
   the artwork's NATIVE aspect (1600x1029) - no crop at all - per
   user direction that the cover reads as the card's dominant
   element while the era stage inside steps further back. Must
   sit after --card-media (same specificity; source order decides
   the aspect). */
.featured-panel--card-cover {
  aspect-ratio: 1600 / 1029;
}

/* 06.07.26 (late v5): no hover zoom on the cover, per user. The
   video header keeps its zoom as part of the play affordance; the
   cover holds still. Same specificity as the base hover rule,
   later in source, so it wins the tie. */
.featured-panel--card-cover:hover .featured-panel__img,
.featured-panel--card-cover:focus-visible .featured-panel__img {
  transform: none;
}

/* (06.07.26 late v7: the .featured-panel__link full-surface anchor
   is RETIRED per user - the cover is now inert artwork with the
   (i) expander, and the register-interest link is the action line
   itself. Rules for the cover's link-free behaviour follow.) */

/* The cover is not a click surface: no pointer cursor, and the
   panel-hover arrow nudge is suppressed so nothing on it reacts to
   a hover that is not on the link itself. */
.featured-panel--card-cover {
  cursor: default;
}

.featured-panel--card-cover:hover .featured-panel__action::after {
  transform: none;
}

/* The action line is its own <a> on the cover. Direct hover/focus
   on the link restores the arrow nudge; source order after the
   suppression rule above decides the tie. */
a.featured-panel__action {
  text-decoration: none;
}

.featured-panel--card-cover .featured-panel__action:hover::after,
.featured-panel--card-cover .featured-panel__action:focus-visible::after {
  transform: translateX(4px);
}

a.featured-panel__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Phone adjustments ---------- */
@media (max-width: 767px) {
  /* The in-card video header keeps its cinematic strip on phones;
     4/3 would crop the still's sides heavily inside the card. The
     text block tightens so title + action clear the shallower
     frame. */
  .featured-panel--card-media {
    aspect-ratio: 1280 / 528;
  }

  /* The cover carries both --card-media and --card-cover, so the
     strip rule above would win here on source order; re-assert the
     artwork's native aspect for phones too (06.07.26 pm). */
  .featured-panel--card-cover {
    aspect-ratio: 1600 / 1029;
  }

  .featured-panel--card-media .featured-panel__text {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-3);
  }

  .featured-panel--card-media .featured-panel__title {
    font-size: var(--h4);
    margin-bottom: 2px;
  }

  /* The 1280x544 strip is ~140px tall at phone widths; the in-flow
     disc shrinks a step so disc + title + action fit the frame
     (06.07.26 late). */
  .featured-panel--card-media .featured-panel__play {
    width: 24px;
    height: 24px;
    margin-bottom: var(--s-2);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .featured-panel__img,
  .featured-panel__play,
  .featured-panel__action::after {
    transition: none;
  }

  .featured-panel:hover .featured-panel__img,
  .featured-panel:focus-visible .featured-panel__img {
    transform: none;
  }
}