/* Adamas Digital — selected work reel strip.
   A horizontal run of 9:16 cards driven by Owl Carousel, with a progress rail
   and a pair of arrows beneath it. Loaded only on pages that set $page_owl.

   The plugin's own stylesheet handles the stage and the transform; everything
   here is the card itself and the controls, plus the few Owl defaults that
   need overriding to sit inside this design. */

.reel-strip {
  margin-top: clamp(40px, 5vw, 64px);
}

/* The grid stands on its own as a section rather than sitting under a
   heading, so it carries the site gutter and rhythm itself. */
.work-reel-page {
  padding: clamp(48px, 6vw, 90px) clamp(24px, 6vw, 96px) clamp(92px, 11vw, 180px);
}

@media (max-width: 720px) {
  .work-reel-page { padding: 40px 20px 90px; }
}

/* ---- The grid ----------------------------------------------------------
   Same cards, laid out rather than slid. Four to a row and then on down the
   page, which is what the work page wants: everything visible by scrolling,
   with nothing to drive. */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}

@media (max-width: 1100px) { .reel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .reel-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- The card ---------------------------------------------------------- */
.reel-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* 9:16 is the shape the strip is cut for, and aspect-ratio holds it without a
   padding hack, so the frame is the right size before the image has loaded and
   the row never reflows underneath the carousel's measurements. */
.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  background: #e7e3dc;
  isolation: isolate;
}

.reel-frame img,
.reel-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* ---- The player -------------------------------------------------------
   YouTube gives an embed no way to switch off its title bar, its channel
   avatar or the logo in the corner: controls=0 removes the scrub bar and
   nothing else, and modestbranding stopped doing anything in 2023. Those
   pieces are drawn at the top and bottom edges of the player itself.

   So the player is built taller than the card and centred, and the card clips
   it. A 9:16 clip in a 9:16 frame that is 1.45x too tall gets fitted to the
   width, which leaves matching bands of empty player above and below it —
   and that is where the title bar and the logo live. The card shows the
   middle, which is exactly the picture and nothing else.

   Sized in the same ratio the frame uses, so the two cannot drift apart.

   Pointer input stays off: it keeps YouTube's hover overlays from appearing
   at all, and hands dragging back to the carousel, which an iframe would
   otherwise swallow. */
/* Matched on position rather than class: the API swaps the element it is
   handed for an iframe of its own making, and for a moment that iframe
   carries no class at all. Anything the frame contains gets the treatment. */
.reel-frame .reel-embed,
.reel-frame iframe {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 145%;
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
  pointer-events: none;

  /* Held back until the clip is running. A player that has not started yet
     draws a large play button across its middle — the one piece of chrome the
     crop cannot reach, because it sits dead centre. The poster underneath
     covers that moment, and the player fades up over it once it is playing. */
  opacity: 0;
  transition: opacity .4s ease;
}

.reel-card.is-live .reel-embed,
.reel-card.is-live .reel-frame iframe { opacity: 1; }

/* The still stays under the video until playback starts, so the first frame
   never flashes empty on a card whose file has not been fetched yet. */
.reel-frame video {
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}

.reel-card.is-playing .reel-frame video { opacity: 1; }

/* A short wash top and bottom. The labels sit over photographs nobody has
   colour-graded for legibility, and without it a pale frame loses them. */
.reel-frame:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 26%),
    linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 30%);
}

.reel-handle,
.reel-name,
.reel-duration {
  position: absolute;
  z-index: 3;
  color: #fff;
  font-family: var(--display);
  pointer-events: none;
}

.reel-handle {
  top: 12px;
  left: 13px;
  font-size: 9px;
  letter-spacing: .04em;
  opacity: .85;
}

.reel-duration {
  top: 14px;
  right: 46px;
  font-size: 9px;
  letter-spacing: .06em;
  opacity: .9;
}

.reel-name {
  bottom: 14px;
  left: 13px;
  right: 13px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* No play control any more: the reels start themselves and run silent, so a
   button would only be something to put over the picture. The duration badge
   goes the same way once a player is up, since it describes a still. */
.reel-card.is-playing .reel-duration { opacity: 0; }

/* A card with nothing to play is a link, so it gets the affordance a link
   should have and nothing that suggests video. */
a.reel-card .reel-frame { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
a.reel-card:hover .reel-frame { transform: translateY(-4px); }

/* ---- Controls ---------------------------------------------------------- */
.reel-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

/* 44px square: large enough to hit on a phone without aiming, which is the
   size the rest of the site's controls were raised to for the same reason.
   The icon inside is sized here rather than on the markup, so the two arrows
   and their SVGs cannot drift apart. */
.reel-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--blue);
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.reel-arrow svg { width: 22px; height: 22px; }

/* The button grew but the mark did not fill it, so hovering needs to show
   what is being pressed — otherwise the target is invisible until it moves. */
.reel-arrow:hover:not([disabled]),
.reel-arrow:focus-visible { background: rgba(24, 0, 255, .08); }

.reel-arrow[disabled] { opacity: .25; cursor: default; }

/* The row keeps its height from the arrows now, so pull the extra back off
   the top margin: the rail should sit the same distance under the cards as
   it did before, not 18px lower. */
.reel-controls { margin-top: 13px; }

/* The rail doubles as the position indicator: how far along the strip is, and
   how much of it there is left, in one line. */
.reel-progress {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .12);
  overflow: hidden;
}

.reel-progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  border-radius: 2px;
  background: var(--blue);
  transition: left .45s ease, width .45s ease;
}

/* ---- Owl overrides -----------------------------------------------------
   The plugin ships a stage that ignores heights and a nav it renders itself.
   The nav is switched off in the init, so only the layout needs correcting. */
.reel-track.owl-carousel .owl-stage { display: flex; }
.reel-track.owl-carousel .owl-item { display: flex; }
.reel-track.owl-carousel .owl-item > * { width: 100%; }

/* Owl sets the stage to grab/grabbing; on a strip of links that reads as
   draggable, which it is, so it is left alone — but the cards inside must not
   swallow the drag with their own cursor. */
.reel-track.owl-carousel .reel-card { cursor: inherit; }

/* Before the plugin initialises, the cards would otherwise stack full-width
   down the page. This keeps them in a scrollable row, so the section is
   usable — and looks deliberate — if jQuery never arrives. */
.reel-track:not(.owl-loaded) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 16px;
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  a.reel-card:hover .reel-frame { transform: none; }
  .reel-progress span { transition: none; }
}