/* ==========================================================================
   Yard template - the three inner pages

     containers.html       .page-head, .prow, .sizes, .explain, .sizes-block
     20ft-containers.html  .page-head, .aside-card, .qa
     enquire.html          .enquiry-page

   Everything reusable is already in components.css and sections.css. This
   file is only the layouts those three pages need. Every value is a token.
   ========================================================================== */


/* --- The small page head -----------------------------------------------------
   A flat --ink band with the H1 and one line under it. No photo: the homepage
   hero is the only photo hero on the site, which is what keeps these pages
   short and fast.
   ------------------------------------------------------------------------ */

/* Half what it was. 96px above and below an H1 and one line of text is a lot
   of nothing on a page whose job is to answer a question. */
.page-head {
  padding-block: clamp(var(--space-5), 3.5vw, var(--space-7));
}
.page-head h1 { max-width: 24ch; }
.page-head .lead {
  margin-block-start: var(--space-5);
  color: var(--mist);
}


/* --- Range rows --------------------------------------------------------------
   Full width rows in place of cards: photo left, words right, the same way
   round every time.

   The photo used to swap sides down the page, which is a nice rhythm on a
   page you read and the wrong one on a page you scan. A buyer here is looking
   for a size, so every name starts at the same place and the names form a
   single column down the page. 20 September.

   The photo is a third of the row, not over half, so two or three sizes are
   on screen at once.
   ------------------------------------------------------------------------ */

.prow {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-block-end: 1px solid var(--rule);
}
.prow:first-child { padding-block-start: 0; }
.prow:last-child { border-block-end: 0; padding-block-end: 0; }

@media (min-width: 48rem) {
  .prow { grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: center; }
}

.prow__copy { display: grid; gap: var(--space-4); align-content: start; }
.prow__copy h2 { font-size: var(--step-3); max-width: none; }
.prow__copy .marking { color: var(--steel); }
.prow__copy .btn { justify-self: start; }
.prow__copy .extras__list { margin-block-end: 0; }
/* Under the button on the two 20ft rows, the same offer the homepage cards
   make: the detail first, for a buyer not ready to give Anthony their number. */
.prow__link { margin: 0; font-size: var(--step--1); }

/* The five small sizes, each its own button. */
.sizes__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sizes__btn {
  min-width: var(--space-9);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-1);
  letter-spacing: 0.01em;
}


/* --- One trip or second hand -------------------------------------------------
   Two definitions on the dark band. Plain words, because these two terms are
   the whole reason a buyer hesitates.
   ------------------------------------------------------------------------ */

.explain__grid { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .explain__grid { grid-template-columns: 5fr 6fr; gap: var(--space-9); align-items: start; }
}
.explain__copy .lead { color: var(--mist); }
.explain__list { margin: 0; display: grid; gap: var(--space-5); }
.explain__item {
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--rule-on-dark);
}
.explain__item:last-child { padding-block-end: 0; border-block-end: 0; }
.explain dt {
  margin-block-end: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-2);
  color: var(--yellow);
}
.explain dd { margin: 0; color: var(--on-dark); }


/* --- The standard sizes ------------------------------------------------------ */

.sizes-block__grid { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .sizes-block__grid { grid-template-columns: 6fr 5fr; gap: var(--space-8); align-items: start; }
}
.sizes-block__tables { display: grid; gap: var(--space-5); }
/* A three column table of five figures does not want to be 700px wide: the
   eye has to travel the whole line to pair a label with its number. */
.page-body .marking-block { max-width: 32rem; }
.sizes-block__ring { margin-block-start: var(--space-5); }


/* --- 20ft page: the sticky card ----------------------------------------------
   The one thing that follows you down the page: the number and the button for
   the size the page is about. It sticks clear of the header, and on a phone it
   is a plain card at the top, because the fixed bar already does this job.
   ------------------------------------------------------------------------ */

.page-cols { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .page-cols { grid-template-columns: 7fr 4fr; gap: var(--space-9); align-items: start; }
}

/* The same box as the enquiry panel on the enquiry page: tinted paper, one
   2px charcoal border all the way round. It was a dark card with a yellow
   top edge, which made a third surface colour on a page that only needs two,
   and it sat quietly below the fold. It now lifts into the bottom of the dark
   page head, so the number is in the first screen and the card reads as the
   thing that follows you down the page. */
.aside-card {
  padding: var(--space-6);
  background-color: var(--surface);
  color: var(--ink);
  border: var(--edge) solid var(--ink);
}
@media (min-width: 56rem) {
  .aside-card {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-5));
    /* Up into the page head above it. The lift has to clear the section's own
       top padding first, or the card only rises inside the white and never
       crosses the edge, so it is that padding plus 32px. */
    margin-block-start: calc(-1 * (var(--section-padding) + var(--space-6)));
  }
}
.aside-card__title { font-size: var(--step-2); }
.aside-card__phone {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: var(--space-4) var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--step-4);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink);
}
@media (hover: hover) { .aside-card__phone:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.06em; } }
.aside-card__note { color: var(--steel); font-size: var(--step--1); }
.aside-card .btn { margin-block-start: var(--space-5); }


/* --- 20ft page: the body -----------------------------------------------------
   Prose width, one idea per part, with the door marking block as the data
   panel. Nothing here needs a script.
   ------------------------------------------------------------------------ */

.page-body > * + * { margin-block-start: var(--space-8); }
.page-body h2 { font-size: var(--step-3); max-width: 32ch; }
.page-body h3 { font-size: var(--step-2); max-width: 32ch; }

/* Rhythm, 20 September. Headings carry no margin of their own anywhere on this
   site, and the only rule here was heading-followed-by-paragraph. A heading
   followed by a list, a table or a grid therefore sat 6px off it, which is
   what Ben measured in six places on this page. One rule, every case: 24px
   under a heading, whatever comes next. */
.page-body :is(h2, h3) + * { margin-block-start: var(--space-5); }

/* An H3 is a step down inside a part, so it needs more air above it than the
   thing it follows gets below. 48px reads as "new sub-part", 24px did not. */
.page-body h3 { margin-block-start: var(--space-7); }

/* A list, a table or a grid after a paragraph gets the same gap two
   paragraphs get, so prose and data share one rhythm. */
.page-body p + :is(dl, ul, ol, table, .gallery, .qa) { margin-block-start: 1.2em; }

/* One wide photo, two under it. Three equal photos in a row gave the doors
   open shot, which is the one that answers "what does it look like inside",
   the same weight as the one on the lorry. */
.gallery {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery > :first-child { grid-column: 1 / -1; }
.gallery > :first-child > .plate,
.gallery > :first-child { --ratio: 16 / 9; }
@media (max-width: 35.99rem) {
  .gallery { grid-template-columns: 1fr; }
}

/* The four questions. A details element, so they open with scripts off. */
.qa { display: grid; }
.qa__item {
  border-block-end: 1px solid var(--rule);
}
.qa__item:first-of-type { border-block-start: 1px solid var(--rule); }
.qa__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  cursor: pointer;
  list-style: none;
}
.qa__item > summary::-webkit-details-marker { display: none; }
/* a square plus and minus, drawn in CSS: nothing on this site is round */
.qa__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
  /* 3px strokes with square ends. At 2px the plus was thinner than the 2px
     card borders around it and read as a hairline rather than a control. */
  background:
    linear-gradient(var(--ink) 0 0) 50% / 100% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) 50% / 3px 100% no-repeat;
}
.qa__item[open] > summary::after { background-size: 100% 3px, 0 100%; }
.qa__item > div { padding-block: 0 var(--space-5); }
.qa__item p + p { margin-block-start: var(--space-4); }


/* --- Enquiry page ------------------------------------------------------------
   The panel on the left at content width, the ways to reach Anthony on the
   right. One review slot, which shows the score until lead/reviews.md has
   real words in it.
   ------------------------------------------------------------------------ */

.enquiry-page { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .enquiry-page { grid-template-columns: 7fr 4fr; gap: var(--space-8); align-items: start; }
  /* Follows the form down the page. The form is the long column and the four
     steps are what a visitor wants to check halfway through filling it in. */
  .contact { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); }
}
/* Half the top padding on this page only. The form is the page, so anything
   above it is a delay. With the head halved as well the form starts about
   130px higher than it did. */
.enquiry-page { padding-block-start: 0; }
.band--paper:has(> .container > .enquiry-page),
.band--paper:has(> .enquiry-page) { padding-block-start: calc(var(--section-padding) / 2); }

.contact { display: grid; gap: var(--space-5); }

/* What happens next. Numbered, because the order is the point, and it opens
   with the thing the visitor is waiting to know. */
.next-steps {
  margin: var(--space-4) 0 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-3);
}
.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.next-steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  color: var(--red-text);
}
.contact__head { font-size: var(--step-2); }
/* The email sits directly under the phone number, and at the reduced type
   scale an inline link there is about 20px tall, inside axe's 24px target
   floor and too close to the number above it. It gets the same treatment as
   the phone: its own row, its own 44px. */
.contact__email {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.contact__phone {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--step-4);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
/* One block with one line spacing. It was three lines of text plus a link
   with a 44px tap box, so the postcode line sat 9px lower than the three
   above it. Every line is a block of the same height now, and the tap target
   comes from the line box rather than from padding on the last line. */
.contact__address { font-style: normal; display: grid; gap: 0; }
.contact__addr-line {
  display: block;
  min-height: var(--tap);
  line-height: var(--tap);
}
.contact__address a.contact__addr-line { width: fit-content; }
.contact__ring { font-weight: var(--w-medium); }
/* The email sits under the address now, in body type and charcoal, because it
   is the slowest way to reach him and it was competing with the number. */
.contact__email { color: var(--ink); font-size: var(--step-0); }

/* .contact__score is unused since the five stars moved inside the form panel
   on 20 September. Kept for the template. */
.contact__score {
  padding: var(--space-5);
  background: var(--surface);
  border: var(--edge) solid var(--ink);
}
.contact__score .stars { font-size: var(--step-2); }
.contact__score p { margin-block-start: var(--space-2); }

/* The yard page map, 25 October. Jen asked for an interactive Google map,
   which overrules "No map iframe" in the plan's Won't do list. Google's plain
   embed URL needs no API key. Square cornered and edged in ink like a plate,
   so it reads as part of the page rather than something pasted on top. */
.yard-map {
  border: var(--edge) solid var(--ink);
  background: var(--paper-2);
}
.yard-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}