/* ============================================================
   Interior pages: the four service pages, the thirty city pages,
   the blog index and the blog posts.

   Loaded AFTER home.css, which carries the tokens, type scale,
   nav, drawer, gallery tiles, lightbox, bento cards, marquee and
   footer. Everything in this file is the handful of things an
   interior page needs that the homepage does not.

   No new colours, no new radii, no second accent. The pages differ
   in their photography and their words, not in their system.
   ============================================================ */

/* ---------- interior hero ----------
   The homepage hero owns a full viewport because it is the front
   door. An interior page has already been chosen; show the content
   sooner. */
.hero--service{min-height:auto;padding-block:calc(var(--nav-h) + 4.75rem) 4.75rem}
@media (max-width:980px){
  .hero--service{padding-block:calc(var(--nav-h) + 2.75rem) 3rem}
}

/* ---------- films row ----------
   Same tiles as the homepage gallery, different grid. The homepage
   has ten films to fill a row with; a service page has five at most.
   Column counts are explicit rather than left to auto-fit, which counts
   repetitions against the track maximum and so drops the fifth tile onto
   a second row while the first row sits half empty. */
.films{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,212px));
  /* Left-aligned, so the tiles line up with the heading above them. */
  justify-content:start;
  gap:.9rem;
}

/* ---------- films, where there are only one or two ----------
   A row of two tiles with nine hundred empty pixels beside it reads as a
   page that ran out of material. These pages set the heading alongside the
   films instead: the band is full, and the tiles are bigger for it. */
.films-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.films-split .sec-head{margin-bottom:0}
.films-split .films{grid-template-columns:repeat(2,minmax(0,1fr))}
.films-split .films--one{grid-template-columns:minmax(0,1fr);max-width:324px}

@media (max-width:900px){
  .films{grid-template-columns:repeat(auto-fit,minmax(150px,212px))}
  .films-split{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:560px){
  .films{grid-template-columns:1fr 1fr;gap:.6rem}
  .films-split .films{gap:.6rem}
  .films-split .films--one{max-width:none}
}

/* ---------- formations rail ----------
   A second grid would repeat the films' layout family, so the stills
   run as a rail. It suits the material too: these are moments in
   sequence, not a catalogue. The rail bleeds to both viewport edges
   so it reads as something that continues past the page. */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}
.rail-head .body{margin-top:.9rem}
.rail{
  display:flex;gap:.9rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-bottom:1.1rem;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(4.5vw,calc(50vw - var(--shell)/2));
  /* Snapping aligns to the scrollport's border box, not its content box,
     so without this the rail starts life scrolled past its own left
     padding and the first still sits flush against the viewport edge. */
  scroll-padding-inline:max(4.5vw,calc(50vw - var(--shell)/2));
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--pill)}
.rail figure{
  flex:0 0 clamp(188px,20vw,232px);
  scroll-snap-align:start;
  margin:0;
}
.rail img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--night);
  border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.rail figure:hover img{transform:translateY(-4px);border-color:var(--line-2)}
.rail figcaption{margin-top:.75rem;font-size:.78rem;color:var(--ink-3);line-height:1.5}

/* ---------- deliverables ----------
   Plain rows in two columns. No card boxes and no hairline under
   every line; the grouping does the work. */
.deliver{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.25rem,5vw,4.25rem);align-items:start}
.deliver-list{display:grid;grid-template-columns:1fr 1fr;gap:1.7rem 2.25rem}
.deliver-item h3{
  font-size:.95rem;font-weight:600;margin-bottom:.4rem;
  padding-top:.95rem;border-top:1px solid var(--line);
}
.deliver-item p{font-size:.85rem;color:var(--ink-2);line-height:1.7}
@media (max-width:980px){
  .deliver{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:620px){
  .deliver-list{grid-template-columns:1fr;gap:1.3rem}
}

/* ---------- the other three services ----------
   The homepage bento, three up instead of four. The lattice origins
   are set by nth-child in home.css, so three cards still land on
   three different corners. */
.bento--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.bento--three{grid-template-columns:1fr}}

/* ---------- closing band ---------- */
.close-cta{text-align:center;max-width:46ch;margin-inline:auto}
.close-cta .display{max-width:none}
.close-cta .body{margin:1.15rem auto 0;max-width:50ch}
.close-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.9rem}

@media (prefers-reduced-motion:reduce){
  .rail{scroll-snap-type:none}
}

/* ---------- heroes with no asset beside them ----------
   City pages have no footage of their own and a blog post has its
   photograph behind the band, so neither has a second column to fill.
   One column, held to a reading measure. */
.hero--solo{min-height:auto;padding-block:calc(var(--nav-h) + 5rem) 4.5rem}
.hero--solo .hero-grid{grid-template-columns:minmax(0,62ch)}
.hero--solo .hero-bg img{opacity:.38}
@media (max-width:980px){
  .hero--solo{padding-block:calc(var(--nav-h) + 3rem) 3rem}
}

/* ---------- article ----------
   One measure, centred, with the pictures breaking out of it. The
   breakout is what stops a long post reading like a wall. */
.post-meta{
  max-width:66ch;margin:0 auto 2.1rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
  display:flex;gap:.45rem 1.4rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.prose{max-width:66ch;margin-inline:auto}
.prose p{color:var(--ink-2);line-height:1.85;margin-bottom:1.35rem}
.prose > p:first-child{font-size:1.1rem;line-height:1.75;color:var(--ink)}
.prose h2{
  font-family:var(--display);font-weight:400;font-synthesis-weight:none;
  font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);margin:2.9rem 0 1rem;
}
.prose figure{
  margin:2.4rem 0;
  width:calc(100% + clamp(0rem,9vw,9rem));
  margin-left:calc(-1 * clamp(0rem,4.5vw,4.5rem));
}
/* Below the point where the shell's own gutter is thinner than the
   breakout, the breakout would push the page sideways. */
@media (max-width:760px){
  .prose figure{width:100%;margin-left:0}
}
.prose figure img,.prose figure video{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--night);
}
.prose figcaption{margin-top:.75rem;font-size:.78rem;color:var(--ink-3);line-height:1.55;text-align:center}
.prose-end{max-width:66ch;margin:2.6rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------- cards: the blog index, and related posts ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:2.4rem 1.5rem}
.card{display:block;color:inherit}
.card img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--night);
  transition:transform .5s var(--ease);
}
.card:hover img{transform:translateY(-5px)}
.card-kind{
  display:block;margin-top:1.1rem;
  font-family:var(--sans);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);
}
.card h3{
  font-family:var(--display);font-weight:400;font-synthesis-weight:none;
  font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);margin:.5rem 0 .4rem;
  transition:color .35s var(--ease);
}
.card:hover h3{color:var(--accent-ink)}
.card p{font-size:.85rem;color:var(--ink-2);line-height:1.65}

/* ---------- city pages ---------- */
.city-why{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.city-why .body{max-width:none}
@media (max-width:980px){.city-why{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- blog films ----------
   Every reel we shoot is vertical. Cropping one into a 16:10 strip is a
   close-up of whatever happened to be in the middle of the frame, so a
   film in an article keeps its own shape and sits centred instead. */
.prose figure.is-video{width:100%;margin-left:0}
.prose figure.is-video video{
  width:min(100%,304px);aspect-ratio:9/16;object-fit:cover;
  margin-inline:auto;border-radius:var(--r);
}

/* ---------- stills from the night ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:1.4rem .9rem}
.shots figure{margin:0}
.shots img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--night);border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.shots figure:hover img{transform:translateY(-4px);border-color:var(--line-2)}
.shots figcaption{margin-top:.65rem;font-size:.77rem;color:var(--ink-3);line-height:1.5}
@media (max-width:520px){.shots{grid-template-columns:1fr 1fr;gap:1rem .6rem}}