/* Bright Trip case study.
   Palette sampled off the Tokyo course title card: the orange from the Skytree
   in the illustration, the teal from the mid-ground hills, the sky from the
   band above them. */

.case-study.brighttrip {
  --case-accent: #f67220;
  --case-paper: #eaf6fa;
  --case-ink: #12333a;
  --bt-teal: #2e7a8a;
  --bt-sky: #b2e2f6;
}

/* theme-carnival re-declares --case-paper on every [class*="case-"] element
   itself, so setting it on the ancestor above never reaches the stages. Same
   fix the Atlas case needed; this has to outrank `.theme-carnival
   [class*="case-"]` (0,2,0). */
.theme-carnival .brighttrip [class*="case-"] {
  --case-paper: #eaf6fa;
  --case-ink: #12333a;
}

/* ---- hero ----------------------------------------------------------------
   The hero photo is a Shinjuku street at eye level, so the frame is busy all
   the way up. The stock ::after gradient tops out at .2 alpha, which is not
   enough to hold white display type over the shopfronts. */
.brighttrip-hero::after {
  background: linear-gradient(
    180deg,
    rgba(6, 20, 26, 0.5),
    rgba(6, 20, 26, 0.24) 45%,
    rgba(6, 20, 26, 0.6)
  );
}
/* The wordmark and the <small> under it are two separate grid items, and
   .work-hero-mark leaves align-content at stretch, which pushes the caption
   most of a screen below the name. Same fix the Atlas hero needed. */
.brighttrip-hero .work-hero-mark {
  align-content: center;
  text-shadow: 0 4px 44px rgba(0, 0, 0, 0.45);
}
.brighttrip-hero .work-hero-mark small { margin-top: 30px; }

.brighttrip-hero .hero-mark-img {
  /* `.work-hero img` pins every image in the hero to position:absolute;inset:0
     for the background photo, which would drag the lockup into the corner. */
  position: static;
  width: clamp(240px, 34vw, 560px);
  height: auto;
  object-fit: contain;
  /* The supplied lockup is already white on transparency, so unlike the Atlas
     hero it needs the shadow only, with no brightness/invert pass first. */
  filter: drop-shadow(0 5px 30px rgba(0, 0, 0, 0.5));
}

/* ---- video frames --------------------------------------------------------
   Every embed on this page is a facade, so the play button is set once here
   rather than per section, and it stays dead centre on every frame. A solid
   orange disc sat on the subject of whatever it covered; a smoked glass one
   lets the frame read straight through it. */
.brighttrip .case-video-frame {
  --yt-play-fill: rgba(10, 20, 26, 0.3);
  --yt-play-mark: #ffffff;
  border-radius: var(--radius);
  background: #06161c;
}
/* Blur plus a hairline keeps the disc legible where the frame behind it is
   bright, which is what the solid fill used to buy. The border costs no size
   because everything on the site is already border-box. */
.brighttrip .yt-lite-play {
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}
.brighttrip .yt-lite:hover .yt-lite-play,
.brighttrip .yt-lite:focus-visible .yt-lite-play {
  background: rgba(10, 20, 26, 0.42);
  border-color: rgba(255, 255, 255, 0.75);
}

/* A trailer is its own section: full measure, caption underneath. */
.bt-trailer { margin: clamp(84px, 11vw, 170px) 0; }

.bt-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
  margin-top: 18px;
  font-family: "Space Mono", monospace;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bt-cap strong { font-weight: 400; color: var(--cream); }
.bt-cap span { color: var(--cream-dim); }
/* The rule sits between the two halves of the caption on one line and
   disappears once they wrap, which is what the flex-basis switch does. */
.bt-cap i {
  flex: 1 1 40px;
  height: 1px;
  min-width: 40px;
  background: rgba(241, 236, 227, 0.22);
}

/* ---- the four channel pieces --------------------------------------------- */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 30px) clamp(12px, 1.6vw, 26px);
}
.bt-grid > * { min-width: 0; }
.bt-grid .bt-cap { margin-top: 14px; }
/* The disc is sized against the viewport, not its frame, so at half measure
   it lands over most of a thumbnail's title. These four are designed frames
   with type in them, so the button steps down to sit on top of less. */
.bt-grid .yt-lite-play { width: clamp(50px, 4.4vw, 64px); }
.bt-grid .yt-lite-play::after {
  border-top-width: clamp(8px, 0.8vw, 11px);
  border-bottom-width: clamp(8px, 0.8vw, 11px);
  border-left-width: clamp(14px, 1.35vw, 19px);
}

/* ---- bento photo clusters ------------------------------------------------
   Two of these carry the stills, one after the Tokyo copy and one after the
   Cape Town trailer, rather than one four-up block doing all the work.
   Written small-screen first: a plain two-up here, with the interlocking
   desktop arrangement added at the bottom of the file, so no rule has to be
   undone with !important on the way down. */
.bt-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 22px);
  grid-auto-rows: clamp(150px, 26vw, 260px);
}
/* .case-media's min-height is meant for standalone blocks; inside the bento
   the grid row sizes the tile instead, and the image fills it. */
.bt-bento .case-media {
  min-height: 0;
  height: 100%;
  border-radius: var(--radius);
}

@media (max-width: 620px) {
  .bt-grid,
  .bt-bento { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .bt-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Tokyo: a tall hero frame on the right with the three street stills
     interlocking around it. Rows are explicit so the shapes hold no matter
     what order the sources decode in. */
  .bt-bento-tokyo { grid-template-rows: repeat(3, clamp(150px, 15.5vw, 235px)); }
  .bt-bento-tokyo > :nth-child(1) { grid-column: 1 / 5;  grid-row: 1 / 2; }
  .bt-bento-tokyo > :nth-child(2) { grid-column: 5 / 13; grid-row: 1 / 3; }
  .bt-bento-tokyo > :nth-child(3) { grid-column: 1 / 5;  grid-row: 2 / 4; }
  .bt-bento-tokyo > :nth-child(4) { grid-column: 5 / 13; grid-row: 3 / 4; }

  /* Places: the aerial runs wide and the blossom frame takes a narrow column
     beside it, which is the crop that suits a subject sitting low anyway. */
  .bt-bento-places { grid-template-rows: repeat(2, clamp(150px, 15.5vw, 235px)); }
  .bt-bento-places > :nth-child(1) { grid-column: 1 / 10; grid-row: 1 / 3; }
  .bt-bento-places > :nth-child(2) { grid-column: 10 / 13; grid-row: 1 / 3; }
}