/* ============================================================
   PLACES  ·  About, Book, Locations index, city pages
   Doc No. ICON-WEB-CSS-006 · loads after tokens.css and main.css

   Everything structural comes from the archetype library in
   main.css. This file only carries what those four page shapes
   genuinely need and a shared component cannot know: the band
   budget, three hero crops, a ruled list, a city grid, a portrait
   pair, and the fail-safe status panel under the booking form.

   If it grows much past this, a page is inventing patterns that
   belong in the SYSTEM lane instead.
   ============================================================ */


/* ---------- 1 · THE BAND BUDGET ----------
   Two spec rules collide at desktop. §D1 sets --pad-std to 80px at
   1024 and 88px at 1440. §D2 then bills a register change at 1.5x,
   so every paper-to-black seam measures 120px or 132px, while §D3
   caps any run of empty page at 96px desktop and 56px mobile. D3 is
   the QC gate, so the standard band on these pages runs a smaller
   budget. The tablet figure set the curve: a flat 4.2vw put the
   paper-to-black seam at 60px on a 768 viewport, four over the mobile
   limit. This curve bills that seam at 52px, and the widest seam it
   bills anywhere is 84px at 1600, well inside the desktop ceiling. */
.band:not(.band--tight):not(.band--anchor):not(.band--bleed) {
  --pad: clamp(28px, 0.75rem + 3vw, 56px);
}
/* The press row and the closing cross-link strip carry their own
   internal padding and their own hairlines, so the band around them
   only has to clear them. */
.pl-press  { --pad: var(--s-5); }
.pl-closer { --pad: var(--s-4); }


/* ---------- 2 · HERO CROPS, §AR-1 ----------
   The subject sits in the outer 55% of the frame, the type in the
   inner 45%. Verified at 390, 768, 1280 and 1600 on each page.

   About runs the Four Seasons portrait master, the same plate the
   Autostrada page carries. It is a front-on symmetric car sitting
   dead centre, so no crop of it clears the type. From 768 up the
   portrait is boxed into the right of the frame and its left edge is
   masked into the black, which lands the whole car in the outer half
   and leaves the type on clean field. Below 768 the frame is too
   narrow to split, so the type sits over the wet asphalt reflection,
   which is the darkest part of the plate. */
@media (min-width: 768px) {
  .pl-hero-about .hero-img {
    left: auto;
    right: 0;
    width: 70%;
    object-position: 50% 52%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  .pl-hero-about .hero-inner > * { max-width: 42%; }
}
@media (min-width: 1024px) {
  .pl-hero-about .hero-img { width: 78%; }
  .pl-hero-about .hero-inner > * { max-width: 38%; }
  .pl-hero-about .hero-inner .btn-row { max-width: none; }
}

/* Locations runs the studio Range Rover and each city page runs its
   own placeless dark car plate. Placeless on purpose: no photograph
   of an Ontario shop exterior exists yet, and a stock streetscape
   would imply a building we cannot show. Every one of those plates is
   framed with the car right of centre, so the crop only has to hold
   it there. */
.pl-hero-place { --hero-pos: 62% 52%; }
@media (min-width: 768px) { .pl-hero-place { --hero-pos: 70% 54%; } }

/* Book runs the beading macro. It is the darkest plate in the vault
   and carries type anywhere, so the crop only keeps the bright
   highlight line clear of the headline. */
.pl-hero-book { --hero-pos: 58% 40%; }
@media (min-width: 768px) { .pl-hero-book { --hero-pos: 70% 44%; } }


/* ---------- 3 · RUN-IN SECTION HEADING ----------
   Sections that open with a D3 instead of an I-beam still need the
   I-beam's clearance underneath. Matches .ibeam's margin-bottom. */
.pl-head { margin-bottom: var(--s-6); }
.pl-sub  { margin-bottom: var(--s-5); }


/* ---------- 4 · RULED LIST ----------
   The four city points, the conditions of certification, what
   happens after a booking. Rules between items, never boxes around
   them. The list is the object; it does not get a container. */
.pl-list > li {
  padding-block: 10px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--body);
  font-size: var(--b2-size);
  line-height: var(--b2-lh);
  letter-spacing: var(--b2-ls);
  color: var(--fg-dense);
  max-width: 56ch;
}
.pl-list > li:first-child { border-top: 2px solid var(--rule-heavy); }
/* .split-text shrink-wraps its children, so a list has to be told to
   span the column. Same for a notice strip sitting under the prose. */
.split-text > .pl-list,
.split-text > .notice { width: 100%; }


/* ---------- 5 · CITY GRID ----------
   AR-9 rows in more than one column, for the thirteen Ontario cities
   opening next and for the nine-city index at the foot of a city
   page. Column flow, so each column runs top to bottom and reads as
   a list rather than a table. The 2px opening rule belongs to the
   grid, not to the DOM-first row, or columns two and three would
   open with nothing above them. */
.pl-citygrid { display: grid; column-gap: var(--s-6); border-top: 2px solid var(--rule-heavy); }
.pl-citygrid .city-row:first-child { border-top: none; }
@media (min-width: 560px) {
  .pl-citygrid { grid-template-columns: 1fr 1fr; grid-auto-flow: column; }
  .pl-citygrid--13 { grid-template-rows: repeat(7, auto); }
  .pl-citygrid--9  { grid-template-rows: repeat(5, auto); }
}
@media (min-width: 1024px) { .pl-citygrid { column-gap: var(--s-8); } }


/* ---------- 6 · PORTRAIT PAIR ----------
   The only two photographs in the library shot in an Ontario partner
   bay are both vertical phone frames. §F2 holds a frame within 15%
   of its source ratio, so they cannot be cropped to landscape. Two
   up in a capped column keeps them honest and keeps them small,
   which is the size limit the asset map puts on them. */
.pl-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); max-width: 560px; }
.pl-note { margin-top: var(--s-5); }
.pl-figlink { margin-top: var(--s-4); justify-self: start; }


/* ---------- 7 · AR-6 PRESS MARKS ----------
   motor-trend, mens-journal and sema-show ship as near-black artwork
   on transparency, so the library's grayscale treatment leaves them
   invisible on #131110. brightness(0) invert(1) flattens any mark to
   one white silhouette, which is also what makes the row read as a
   single object. Ferrari is excluded: its colour is the mark, and
   whitening it fills the horse and prints a plain white tile, which
   is exactly what the first render of this file did. The two
   exceptions carry .pressrow in the selector so they outrank the
   blanket rule above them. */
.pl-press .pressrow img { height: 26px; opacity: 0.88; filter: brightness(0) invert(1); }
.pl-press .pressrow .press-ferrari { height: 38px; opacity: 0.96; filter: none; }
.pl-press .pressrow .press-autostrada { height: auto; width: min(180px, 42vw); }


/* ---------- 8 · THREE COLUMN ROWS ----------
   The shared rule pads columns two and three off their hairline but
   leaves column one flush, so column one runs wider. Closing the
   column gap and padding column one on the right makes all three
   content boxes identical and puts each hairline dead centre. */
@media (min-width: 768px) {
  .pl-steps { column-gap: 0; }
  .pl-steps > *:first-child { padding-right: var(--s-6); }
}


/* ---------- 9 · THE BOOKING PLATE ----------
   AR-10 with a form in the left column. .cta-left justifies its
   children to the start, which would shrink the form to the width of
   its widest field. */
.pl-book-form,
.pl-form-status { width: 100%; justify-self: stretch; }
.pl-book-form .btn { justify-self: start; }
.pl-book-form textarea { min-height: 96px; }
.pl-book-form.sent { display: none; }
.pl-cta-side { display: grid; gap: var(--s-5); align-content: start; }
/* The form column is always the taller of the two, so at desktop the
   aside spreads down it. Packed to the top it opened a 200px hole in
   the bottom right of the plate. .cta-plate aligns its items to start,
   so the aside has to be told to fill the row before space-between has
   any height to work with. */
@media (min-width: 1024px) {
  .pl-cta-side { max-width: 460px; align-self: stretch; align-content: space-between; }
}

/* At mobile the seal drops to 108px and still hangs 65px inside the
   plate, while the plate only pays 32px of top padding, so the seal
   lands on the first line of the D2. The home page shows the same
   collision, so the real fix belongs in the library; these pages buy
   the clearance locally in the meantime. Flagged to the system lane. */
@media (max-width: 767px) {
  .cta-wrap:has(.seal--overlap) .cta-left { padding-top: 36px; }
}

/* Fail safe status panel. No booking endpoint exists, so the form
   does not pretend to submit: this panel carries the direct route
   instead. Hidden until the script fills it, so it never renders
   empty. */
.pl-form-status {
  display: none;
  margin-top: var(--s-2);
  padding: var(--s-5);
  background: var(--surface-well);
  border-top: var(--plate-rule) solid var(--gold);
  font-size: var(--b2-size);
  line-height: var(--b2-lh);
  color: var(--fg-dense);
}
.pl-form-status.show { display: block; }
.pl-form-status strong {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--d4-size);
  letter-spacing: var(--d4-ls);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.pl-form-status a { color: var(--fg-accent); border-bottom: 1px solid var(--hair-gold); }


/* ---------- 10 · TWO COMPOSITION ROWS ----------
   The British Columbia line and the closing cross-link strip are
   both a short block plus one trailing element. Same shape, one
   rule. */
.pl-row { display: grid; gap: var(--s-4); align-items: center; }
.pl-row .b1, .pl-row .b2 { margin-top: 8px; }
.pl-crosslinks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
@media (min-width: 768px) {
  .pl-row { grid-template-columns: 1fr auto; gap: var(--s-6); }
  .pl-row .link-arrow { justify-self: end; }
}


/* ---------- 11 · THE OPERATION BLOCK ----------
   AR-4 with an engineering title block in the evidence column
   instead of a photograph. No portrait of a named Ontario operator
   exists yet, and a stock face would be worse than none. */
.pl-tblock-col { display: grid; gap: var(--s-5); align-content: start; }