/* ============================================================================
   Turtle Shell — the video stylesheet. Loaded by /media and by /thank-you.
   ----------------------------------------------------------------------------
   Loaded from each page's Styles section, which the layout renders AFTER
   design.css and BEFORE theme-dark.css. That position is what lets the
   alternation block at the bottom win its ties against design.css at equal
   specificity, and it is safe against theme-dark.css because that sheet says
   nothing about feature rows or video.

   WHY IT IS STILL CALLED media.css NOW THAT TWO PAGES LOAD IT. /media's markup
   is held byte-identical to what it rendered before the testimonials were
   shared, and the <link> is part of that markup — renaming the file would
   change the page. The name is not wrong either: every class in here is
   .media-video-* or .media-testimonial-*, and those class names are in the
   frozen markup too. One file, both pages: the two sections marked
   "/media only" are the ones /thank-you matches nothing in.

   The alternative was a second sheet /media @imports, which would have cost
   that page a serialised round trip forever to save /thank-you the fifteen
   inert lines at the bottom of this file. Not a trade worth making.

   design.css is a vendor file and is not edited. Everything here is additive.

   Breakpoints follow design.css: xs 0 · sm 480 · md 768 · lg 1024.
   ============================================================================ */

/* ---- 1. The frame --------------------------------------------------------- */

/* A fixed aspect box, so the row does not reflow when the poster decodes and
   does not reflow again when the video loads. The aspect is the file's own —
   four testimonials were shot portrait for social, and the overview and
   Bartlett were shot landscape — which is why there are two classes and not one
   box that everything is squeezed into.

   background is black rather than a theme colour: it is what shows in the
   letterbox strip if a file's real aspect and its declared box ever disagree by
   a pixel, and black is what a video letterbox is supposed to be. */
.media-video-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow-2);
}

.media-video-landscape { aspect-ratio: 16 / 9; }
.media-video-portrait { aspect-ratio: 9 / 16; }

/* object-fit: COVER, on the video and therefore on its poster — there is no
   separate property for the poster, the video's own object-fit governs both.

   WHAT THIS DOES AND DOES NOT FIX, because the two get confused. Every file is
   encoded at exactly the aspect its frame declares — 540x960 in a 9/16 box,
   960x540 in a 16/9 one — so contain and cover produce the same pixels and
   neither letterboxes. The white bars this page had were baked INTO the poster
   frames: four of the five testimonials are social exports whose edit cuts
   between a full-bleed shot and a layout that insets the picture on a cream
   canvas to leave room for a caption, and the posters had been cut at a flat
   10% of runtime, which landed three of them on the inset layout. The fix was
   to cut the posters somewhere else; this declaration is what keeps a frame
   filled if a future file is ever encoded at an aspect its box does not expect.
   Cover rather than contain because dead space is the thing being designed out,
   and a crop is the lesser of the two failures. */
.media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  border-radius: inherit;
}

/* Reached only by a browser that can play no MP4 at all, so it is styled just
   enough to be readable on the black frame it sits on. */
.media-video-fallback {
  margin: 0;
  padding: var(--s-4);
  color: #e7efe9;
  font-size: var(--fs-sm);
}

.media-video-fallback a { color: #6fdc84; text-decoration: underline; }

/* ---- 1b. The cover: poster, scrim, play button ---------------------------- */

/* Ships `hidden` and media.js unhides it, at the same moment it takes
   `controls` off the video. With no JavaScript this never appears and the
   native player is what the visitor gets — the enhancement is added, never
   subtracted. See _MediaVideo.

   The whole poster is the button. Nobody should have to hit a circle, and a
   card-sized target is what makes this comfortable at 375. */
.media-video-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* display:grid above would beat the UA's `[hidden]{display:none}`, so the
   attribute has to be honoured here or the cover ships visible on top of a
   working native player. */
.media-video-cover[hidden] { display: none; }

/* The scrim. Subtle, and darkest under the middle, so the button reads against
   a bright roofline or a white wall without dulling the whole photograph. On
   the cover rather than on the video, so it cannot tint a frame that is
   playing — by then this element is gone. */
.media-video-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(58% 42% at 50% 50%, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.16) 72%),
    linear-gradient(to top, rgba(0, 0, 0, 0.34), transparent 42%);
  transition: background var(--dur) var(--ease);
}

/* The button itself: brand green, and big enough to be a comfortable target at
   375 without dominating a 278px tile at 1440. 72px is well clear of the 44px
   floor and the whole card is clickable anyway. */
.media-video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(21, 58, 28, 0.72);
  border: 2px solid #6fdc84;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.media-video-play svg {
  width: 30px;
  height: 30px;
  /* The triangle is optically centred, not geometrically: its own centre of
     area sits left of the circle's middle, so nudging it right is what stops it
     reading as off-centre. */
  margin-left: 4px;
  fill: #6fdc84;
  transition: fill var(--dur) var(--ease);
}

.media-video-cover:hover .media-video-play {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}

.media-video-cover:hover .media-video-play svg { fill: #0f1a13; }

.media-video-cover:hover::before {
  background:
    radial-gradient(58% 42% at 50% 50%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.10) 72%),
    linear-gradient(to top, rgba(0, 0, 0, 0.30), transparent 42%);
}

/* The ring goes round the circle, not round the card. design.css draws a
   global :focus-visible outline; a card-sized one on a 496px tile reads as the
   whole tile being selected rather than as a button being focused, so the
   button suppresses it and hands it to the graphic inside. */
.media-video-cover:focus-visible { outline: none; }

.media-video-cover:focus-visible .media-video-play {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  background: var(--accent);
  border-color: var(--accent);
}

.media-video-cover:focus-visible .media-video-play svg { fill: #0f1a13; }

/* Pressed state, so a tap on a touch screen — where there is no hover — still
   acknowledges itself before the video starts loading. */
.media-video-cover:active .media-video-play { transform: scale(0.96); }

/* ---- 2. /media only: Watch How It Works ----------------------------------- */

/* Nothing on /thank-you matches this or section 5 — that page has no feature
   rows — so both are inert there.

   The row's media slot used to hold an <img>, which design.css sizes with
   `.feature-media img`. A <video> is not an img and inherits none of it, so the
   frame states its own width here. */
.feature-media .media-video-frame { width: 100%; }

/* ---- 3. The testimonial grid ---------------------------------------------- */

/* One column, then two, then four. Four rather than three at the top end
   because there are four portrait films: three columns would leave one of them
   alone on a second row beside a gap, and the whole reason Bartlett is last is
   to avoid exactly that shape. */
.media-testimonials {
  grid-template-columns: 1fr;
  /* Tiles differ in height once Bartlett's landscape row is reached, and a
     stretched row would pull its frame out of aspect. */
  align-items: start;
}

.media-testimonial-figure { margin: 0; }

.media-testimonial-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.media-testimonial-name {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: #eaf5ec;
}

.media-testimonial-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Bartlett. It takes a whole row at its own 16:9, and the frame is capped so a
   1200px column does not hand one testimonial a cinema screen while the other
   four get a phone. Centred, with the caption held to the same measure so the
   name still sits under the left edge of the picture. */
.media-testimonial-wide { grid-column: 1 / -1; }

.media-testimonial-wide .media-video-frame,
.media-testimonial-wide .media-testimonial-caption {
  max-width: 720px;
  margin-inline: auto;
}

/* sm ≥480 — nothing yet: a 9:16 tile beside another one is still too narrow for
   the browser's own control bar to lay out its buttons at this width. */

/* md ≥768 */
@media (min-width: 768px) {
  .media-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* lg ≥1024 */
@media (min-width: 1024px) {
  .media-testimonials { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 4. /media only: putting the feature rows back on the right sides ----- */

/* design.css alternates a feature row's media between left and right with
   `.section-feature:nth-of-type(even) .feature-media{order:2}`, and
   :nth-of-type counts EVERY <section> among its siblings — the hero and the
   photo gallery included, not just the feature rows. Adding the testimonials
   section therefore shifts the parity of all four rows below it and silently
   flips every one of them to the other side of the page.

   So the four state their side by class instead of by position, which is both
   the fix and an immunisation: the next section anybody inserts on this page
   cannot move an image again.

   Inside the same media query design.css uses, and for the same reason: below
   768px the row is a single column, where `order` would not swap the picture
   from left to right — it would move it below the words. */
@media (min-width: 768px) {
  .section-feature.media-row-left .feature-media { order: 0; }
  .section-feature.media-row-right .feature-media { order: 2; }
}