/* =========================================================
   THINK YOU KNOW IRELAND - the video card (06.08.26)

   His direction: on this site "in the same way we have done for
   Before the Myth", but with the text kept to a minimum - the video
   is the point, not the prose.

   WRITTEN FRESH, NOT COPIED FROM ET. The Eternal Tales build styles
   this panel through section-featured.css's .featured-panel grammar,
   which carries a --card-cover variant and a set of hover and action
   rules this card has no use for. Porting the file wholesale is the
   mistake the BtM port avoided when it left ET's 697-line
   section-btm.css behind: most of those selectors would appear zero
   times in this document. Only the pieces this card actually uses are
   written here, and they use their own class names so nothing on
   either site can drift into the other.

   THIS FILE MUST STAY LINKED AFTER section-our-stories-intro.css,
   which is where .et-tale-tile itself lives. The panel below
   overrides that tile's media rules, and at equal specificity the
   later file wins.

   To remove the card: delete this file, its <link>, the <li> in
   .et-tales-grid and the hidden #tyki-video figure beside it. Nothing
   else references it - the lightbox picks the figure up from data
   attributes alone.
   ========================================================= */

/* ---- The media panel ----
   A <button>, not a figure, because it opens the shared lightbox.
   The tile's own .et-tale-tile__img is aspect-ratio 3/2 with
   object-fit: cover, which is right for the two POSTER tiles beside
   it. This still is 1280x528, a 2.42:1 cinematic frame: dropped into
   a 3/2 box and covered it would scale to the box height and lose
   about 19% off EACH SIDE of the composition. So the panel keeps the
   still's own aspect and runs the card's full width, exactly as the
   Before the Myth artwork does since the 05.08.26 v5 ruling. The
   consequence, and it is deliberate: this card's picture is shorter
   than An Oath on Stone's and Voice of the Filí's. That uniformity
   was already given up when BtM went to its own aspect. */
.tyki-panel {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 528;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(22, 24, 26, 0.4);   /* matches .et-tale-tile__img's ground */
  overflow: hidden;
  cursor: pointer;
  color: #FFFFFF;
  -webkit-appearance: none;
  appearance: none;
}
.tyki-panel picture,
.tyki-panel img {
  display: block;
  width: 100%;
  height: 100%;
}
.tyki-panel img {
  object-fit: cover;
  transition: transform var(--t-standard) var(--ease-standard);
}
.tyki-panel:hover img,
.tyki-panel:focus-visible img { transform: scale(1.03); }

/* The play disc. Centred in flow rather than by percentage offsets:
   ET's own note records that absolute percentage anchors drifted
   across the frame as the viewport resized. */
.tyki-panel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
  pointer-events: none;
  transition: transform var(--t-standard) var(--ease-standard);
}
.tyki-panel__play svg { width: 100%; height: 100%; display: block; }
.tyki-panel:hover .tyki-panel__play,
.tyki-panel:focus-visible .tyki-panel__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.tyki-panel:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

/* ---- The subscribe action ----
   Sits in the tile body, under the one line of prose. Takes
   --accent-on-light for the same reason every action on the Before
   the Myth card does: this is a WHITE tile, and the studio fuchsia
   is 3.05:1 on white, a fail at this size. */
.tyki-watch {
  margin: var(--s-4) 0 0;
  padding: 0;
}
.tyki-watch a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.2vw + 10.4px, 12.5px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-on-light) 40%, transparent);
  padding-bottom: 2px;
}
.tyki-watch a:hover,
.tyki-watch a:focus-visible { border-bottom-color: var(--accent-on-light); }
.tyki-watch a:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 3px;
}
.tyki-watch__icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .tyki-panel img,
  .tyki-panel__play { transition: none; }
  .tyki-panel:hover img,
  .tyki-panel:focus-visible img { transform: none; }
}