/* ==========================================================================
   Yard template - homepage sections, in page order

     1  Hero                  .hero            on .band--ink
     2  Trust strip           .trust           on .band--paper
     3  The range             .range           on .band--paper
     4  See it before you pay .see-it          on .band--ink
     5  Delivery              .delivery        on .band--paper
     6  Extras                .extras          on .band--paper-2
     7  Reviews               .reviews         on .band--paper
     8  The yard              .yard            on .band--paper-2
     9  Closing band          .closing         on .band--yellow
     10 Footer                .site-footer     on .band--ink

   Rhythm: dark, light, light, dark, light, tint, light, tint, yellow, dark.
   ========================================================================== */


/* --- Section heads ------------------------------------------------------------
   A full width hairline under every light section heading, the way a
   printed catalogue rules off each part. It gives the flat light bands some
   structure without an eyebrow. Not used on the dark or yellow bands.
   ------------------------------------------------------------------------ */

.section-head {
  margin-block-end: var(--space-7);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--rule);
}
.section-head > h2 { max-width: none; }


/* --- 1. Hero -----------------------------------------------------------------
   A 7 to 5 split. Copy left, the photo bleeding off the right edge of the
   screen.

   The hero is held to its content, so the trust strip shows beneath it in the
   first screen and the page never has a false floor. This is the original
   rule. It was swapped on 19 September for a hero exactly one screen tall,
   and swapped back on 20 September, because a full height hero puts the proof
   below the fold and the proof is what this business is selling.

   Not on phones. There the hero tightens instead, because the size picker has
   to clear the fixed call bar on a 667px screen, and a full height hero would
   push it under.
   ------------------------------------------------------------------------ */

.hero { padding-block: clamp(var(--space-6), 5vw, var(--space-8)) 0; }

.hero__grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [copy-start] minmax(0, calc(var(--container-wide) * 7 / 12))
    [copy-end media-start] minmax(0, calc(var(--container-wide) * 5 / 12))
    [media-end] minmax(var(--page-gutter), 1fr)
    [full-end];
  align-items: end;
}

.hero__copy {
  grid-column: copy-start / copy-end;
  display: grid;
  gap: var(--space-5);
  padding-inline-end: clamp(var(--space-7), 5vw, var(--space-8));
  padding-block-end: clamp(var(--space-7), 6vw, var(--space-9));
}
.hero__copy .lead { color: var(--mist); }
.hero__copy .picker { margin-block-start: var(--space-3); }

/* One line of proof inside the hero, for phones and tablets, where the photo
   and caption stack fall below the fold. On desktop the caption stack sits
   beside the H1 and carries the same proof, and a short laptop screen needs
   every pixel for the picker. */
.hero__proof { display: none; color: var(--on-dark); }
@media (max-width: 55.99rem) {
  .hero__proof { display: block; }
}

.hero__phone { color: var(--mist); }
.hero__phone a {
  color: var(--on-dark);
  font-weight: var(--w-medium);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hero__media {
  grid-column: media-start / full-end;
  position: relative;
  align-self: stretch;
  min-height: 26rem;
}
.hero__media > .plate {
  aspect-ratio: auto;
  height: 100%;
  min-height: inherit;
}
/* once the photo is in, the caption stack is the caption */
.hero__media > .plate:has(img) > .plate__label { display: none; }
/* the caption owns the bottom left corner, so the plate label moves up */
.hero__media > .plate { align-items: start; }
.hero__media > .plate > .plate__label { margin-block-start: var(--space-8); }

.hero__media > .caption-stack {
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-6));
  inset-block-end: var(--space-6);
  z-index: 1;
}

@media (min-width: 56rem) {
  .hero {
    display: grid;              /* one child, so the grid fills the height */
    /* Back to content height on 20 September, and the trust strip with it.
       A hero exactly one screen tall cannot show anything under it by
       definition, so no amount of padding would have brought the strip up:
       the height rule was the thing in the way. 34rem keeps the photo a
       generous shape without setting a floor the copy has to fill. */
    min-height: 34rem;
    padding-block: 0;
  }
  .hero__grid { align-items: center; }
  /* 96px above and below was the full height hero's slack made visible. At
     content height it is simply air: 48px, which is what took about 50px off
     each end and lifted the trust strip into the first screen. */
  .hero__copy { padding-block: var(--space-7); padding-block-end: var(--space-7); }
}

@media (max-width: 55.99rem) {
  .hero__grid {
    grid-template-columns:
      [full-start] var(--page-gutter)
      [copy-start media-start] minmax(0, 1fr)
      [copy-end media-end] var(--page-gutter)
      [full-end];
  }
  .hero__copy  { padding-inline-end: 0; padding-block-end: var(--space-6); }
  /* On a phone the whole picker has to clear the fixed bar on a 667px
     screen, so the hero tightens: the sub line drops a step (it ran to five
     lines) and the gaps close up. */
  .hero { padding-block-start: var(--space-5); }
  .hero__copy { gap: var(--space-3); }
  .hero__copy .lead { font-size: var(--step-0); line-height: 1.5; }
  .hero__copy .picker { margin-block-start: var(--space-1); }
  .hero__copy .picker__label { margin-block-end: var(--space-2); }
  .hero__copy .picker__list { gap: var(--space-2); }
  .hero__media { grid-column: full-start / full-end; min-height: 0; }
  .hero__media > .plate { aspect-ratio: 5 / 4; height: auto; }
  .hero__media > .plate > .plate__label { margin-block-start: var(--space-7); }
  .hero__media > .caption-stack {
    inset-inline-start: var(--page-gutter);
    inset-block-end: var(--space-4);
  }
}


/* --- 2. Trust strip ----------------------------------------------------------
   Four real facts, divided by hairlines. Two by two on a phone so all four
   are seen without a sideways swipe.
   ------------------------------------------------------------------------ */

.trust { padding-block: var(--space-5); border-block-end: 1px solid var(--rule); }

.trust__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trust__item {
  padding: var(--space-2) var(--space-5);
  border-inline-start: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--steel);
}
.trust__item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.trust__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  color: var(--ink);
}

@media (max-width: 47.99rem) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
  .trust__item { padding-inline: var(--space-4) 0; }
  .trust__item:nth-child(odd) { padding-inline: 0 var(--space-4); border-inline-start: 0; }
  /* Three items since the waste carrier line came off (Jen, 2 October). The
     reviews take the whole second row rather than sitting next to a gap. */
  .trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; padding-inline-end: 0; }
}


/* --- 3. The range --------------------------------------------------------------
   The grid and cards live in components.css. This is only the link under it.
   ------------------------------------------------------------------------ */

.range__more { margin-block-start: var(--space-6); }


/* --- 4. See it before you pay --------------------------------------------------
   The one dark band in the middle of the page. The promise on the left, the
   four buying steps on the right with big yellow numerals. The steps are a
   real sequence, so the numbers are earned.
   ------------------------------------------------------------------------ */

.see-it__grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 56rem) {
  .see-it__grid { grid-template-columns: 5fr 6fr; gap: var(--space-9); align-items: start; }
}
.see-it__copy { display: grid; gap: var(--space-5); }
.see-it__copy h2 { font-size: var(--step-5); line-height: var(--lh-display); }
.see-it__copy .lead { color: var(--on-dark); }
.see-it__copy p:not(.lead) { color: var(--mist); }

.steps { counter-reset: none; }
.steps__item {
  display: grid;
  grid-template-columns: 4ch 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--rule-on-dark);
}
.steps__item:first-child { padding-block-start: 0; }
.steps__item:last-child { border-block-end: 0; }
.steps__num {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--step-numeral);
  line-height: 0.8;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.steps__item p {
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--on-dark);
}


/* --- 5. Delivery ---------------------------------------------------------------
   The delivery photo used to be pulled 48px up over the dark band above, the
   page's one deliberate overlap, so the two sections locked together. It came
   out on 19 September.

   It worked when the plate carried wide ribs and corner castings and the band
   behind it carried finer ones: two textures reading against each other. Both
   came off in the quietening pass, which left flat --ink-2 on flat --ink at
   1.23:1. The same plate is 12.11:1 against the light band below it, so the
   photo had a crisp edge on one side and dissolved on the other, and the
   overlap read as a misplaced picture rather than as a device.

   The photo now starts at the top of its own section, like every other one.
   ------------------------------------------------------------------------ */

.delivery__grid {
  display: grid;
  gap: var(--space-7);
}
/* The same rhythm the 20ft page got in 11.2: nothing in this column carries a
   margin of its own, so the area line ran straight into the first term. */
.delivery__copy .facts { margin-block-start: var(--space-5); }
.delivery__copy .delivery__ready { margin-block-start: var(--space-7); }
.delivery__copy .ready { margin-block-start: var(--space-5); }

@media (min-width: 56rem) {
  /* 5 to 6, not 6 to 5. The copy column was the narrower of the two and
     "Delivered, or collect it yourself" broke over two lines in it at 34px.
     The photo gives up the width, because the words are doing the work. */
  .delivery__grid { grid-template-columns: 5fr 6fr; gap: var(--space-8); align-items: start; }
}

.facts { margin: 0; display: grid; gap: var(--space-4); }
.facts__item {
  display: grid;
  gap: var(--space-1);
}
@media (min-width: 36rem) {
  /* max-content, not a fixed 120px track. At 18px body "Near the yard" and
     "Further afield" no longer fitted and broke over two lines; the column
     now sizes itself to the longest term in the list. */
  .facts__item { grid-template-columns: max-content 1fr; gap: var(--space-4); align-items: baseline; }
}
.facts dt {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-1);
  line-height: var(--lh-heading);
}
.facts dd { margin: 0; }

.delivery__ready {
  margin-block: var(--space-7) var(--space-4);
  font-size: var(--step-2);
}
.ready { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* A paragraph after the list needs the space a p + p would have given it. The
   list is not a p, so nothing was separating them and the sentence sat on the
   last item. */
.ready + p { margin-block-start: 1.2em; }
.ready li {
  position: relative;
  padding-inline-start: var(--space-6);
}
/* a square, not a bullet: nothing on this site is round */
.ready li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: var(--space-3);
  height: var(--space-3);
  background: var(--ink);
}


/* --- 6. Extras -----------------------------------------------------------------
   A plain list in two columns next to one photo. No icons.
   ------------------------------------------------------------------------ */

.extras__grid { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .extras__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
}
.extras__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-5);
}
.extras__list li {
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
}


/* --- 7. Reviews ----------------------------------------------------------------
   The score line alone until lead/reviews.md has real words in it. When it
   does, quotes go under the head: one large in the display face, two smaller.
   ------------------------------------------------------------------------ */

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
}
.reviews__stars { font-size: var(--step-4); }

/* The quotes. One large, two small, each with a name and a town. A slot with
   no words in it is simply not in the markup, so a lead with no reviews shows
   the score line alone and nothing looks broken. */
.quotes {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}
@media (min-width: 56rem) {
  .quotes { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .quote--lg { grid-column: 1 / -1; }
}
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p {
  margin: 0;
  text-wrap: pretty;
}
.quote--lg p {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  max-width: 22ch;
  text-indent: -0.4em;          /* hanging punctuation */
  text-wrap: balance;
}
.quote figcaption {
  margin-block-start: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step--1);
  color: var(--steel);
}


/* --- 8. The yard ---------------------------------------------------------------
   The photo, who runs it, the address, ring first, and a map link on the
   postcode. No map iframe.
   ------------------------------------------------------------------------ */

/* The yard photo runs the full width of the screen, edge to edge, above the
   address. It is the one photo on this page that is the business itself
   rather than a product, and a full width band is the only section on the
   homepage that breaks out of the container: that break is what stops the
   page reading as one column of equal blocks. */
.yard { padding-block-start: 0; }
.yard__band { margin-block-end: var(--section-padding); }
.yard__band > .plate { --ratio: 3 / 1; }
@media (max-width: 55.99rem) {
  .yard__band > .plate { --ratio: 2 / 1; }
}

.yard__grid { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  /* The photo is a band now, so the right hand column carries the address
     instead: what the place is on the left, how to get to it on the right. */
  .yard__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
  .yard__contact { padding-block-start: var(--space-7); }
}
.yard__copy > p { font-size: var(--step-1); line-height: 1.45; }
.yard__address {
  margin-block: var(--space-5);
  font-style: normal;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-3);
  line-height: var(--lh-heading);
}
.yard__address a { font-variant-numeric: tabular-nums; }
.yard__line { display: block; }
.yard .yard__ring { font-weight: var(--w-medium); }
.yard .yard__links { margin-block-start: var(--space-4); font-size: var(--step-0); }


/* --- 9. Closing band -----------------------------------------------------------
   The hero turned inside out: yellow with ink type, the phone number huge.
   The only yellow band on the page.
   ------------------------------------------------------------------------ */

/* Two columns from 56rem up. The heading, the number and the button stay
   left; the yard address is anchored in the bottom right corner, where the
   band had a screen's width of empty yellow. It is the last thing on the page
   and it answers the question the band asks: where would I be going. */
.closing__inner { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 56rem) {
  .closing__inner {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--space-8);
  }
  .closing__title,
  .closing__phone,
  .closing__btn { grid-column: 1; }
  .closing__addr {
    grid-column: 2;
    /* span 3, not 1 / -1. The rows here are implicit, and a negative line
       number only counts explicit ones, so 1 / -1 resolved to a single row
       and the address sat at the top of the column instead of the foot. */
    grid-row: 1 / span 3;
    align-self: end;
    justify-self: end;
    text-align: end;
  }
}
.closing__addr {
  display: grid;
  gap: var(--space-1);
  font-style: normal;
  line-height: 1.4;
}
.closing__addr-line {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-1);
}
.closing__addr-note { color: var(--ink-2); font-size: var(--step--1); }
.closing__title { font-size: var(--step-4); max-width: 22ch; }
.closing__phone,
.band--yellow a.closing__phone {
  /* A tappable phone number, so it carries the 44px floor in its own right.
     At the reduced scale the type alone is 36px on a phone. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--step-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
@media (hover: hover) {
  .band--yellow a.closing__phone:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }
}
.band--yellow :where(a, button):focus-visible { outline-color: var(--focus-on-light); }
.closing__btn { padding-inline: var(--space-8); }


/* --- 10. Footer ----------------------------------------------------------------
   Charcoal with the ribs. The wordmark and address, how to get in touch, the
   pages, and the two registrations.
   ------------------------------------------------------------------------ */

.site-footer { padding-block: var(--space-8) var(--space-7); }
.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.site-footer__address {
  margin-block-start: var(--space-4);
  font-style: normal;
  color: var(--mist);
}
.site-footer__head {
  margin-block-end: var(--space-3);
  font-size: var(--step-1);
  color: var(--on-dark);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.site-footer__list--plain li { color: var(--mist); padding-block: var(--space-2); }
.site-footer__list--plain a { display: inline; min-height: 0; }
.site-footer__phone {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
}


/* --- Phones: the length budget ---------------------------------------------------
   The homepage has to stay under 7,500px at 375px wide. Boxit's is 6,907 and
   RFB's is 21,355. Everything below trims the stacked layout only; desktop
   is untouched.
   ------------------------------------------------------------------------ */

@media (max-width: 35.99rem) {
  /* Section padding, tighter than the token's 72px floor but no longer mean
     with it. This was 48px, cut that fine when the budget was close. The
     smaller type freed about 1,600px of headroom, so 64px buys the page back
     some air and still leaves well over a thousand spare. */
  .section { padding-block: var(--space-8); }
  .section-head { margin-block-end: var(--space-6); padding-block-end: var(--space-4); }
  .range__more { margin-block-start: var(--space-4); }

  .see-it__grid { gap: var(--space-6); }

  /* Delivery and yard photos letterbox like the range cards. */
  .delivery__media > .plate,
  .yard__media > .plate { --ratio: 2 / 1 !important; }

  /* Buying steps: numerals a size down, each step on one or two lines. */
  .steps__num { font-size: var(--step-4); }
  .steps__item { padding-block: var(--space-3); grid-template-columns: 3ch 1fr; }
  .steps__item p { font-size: var(--step-0); }

  /* Delivery facts: label and fact side by side. */
  .facts { gap: var(--space-3); }
  .facts__item { grid-template-columns: 7.5em 1fr; gap: var(--space-3); align-items: baseline; }
  .facts dt { font-size: var(--step-0); }
  .delivery__ready { margin-block-start: var(--space-5); }

  /* Extras: the list says it. The X1 slot shows from 576px up. */
  .extras__media { display: none; }
  .extras__list li { font-size: var(--step-1); padding-block: var(--space-2); }

  .reviews__stars { font-size: var(--step-2); }

  .yard__address { font-size: var(--step-2); margin-block: var(--space-4); }
  /* Two lines, not four, but only in the homepage band, where the address is
     a summary beside a paragraph. Scoped to .yard since 21 September: on
     the-yard.html the address IS the content and has a column to itself, and
     run together it read as one long string rather than an address. */
  .yard .yard__address .yard__line { display: inline; }
  /* the postcode is already the map link, and the fixed bar has Call */
  .yard .yard__links { display: none; }

  .see-it__copy h2 { font-size: var(--step-4); }
  .closing__title { font-size: var(--step-3); }
  .closing__inner { gap: var(--space-4); }
  .range-card__body { gap: var(--space-2); }
  .range-tile { padding: var(--space-5); }
  .hero__copy { padding-block-end: var(--space-5); }

  /* Footer: two columns, the brand across the top. */
  .site-footer { padding-block: var(--space-7) var(--space-6); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); row-gap: var(--space-5); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__list--plain li { padding-block: var(--space-1); }
  /* the page links wrap in a row rather than a tall column */
  .site-footer__pages { grid-column: 1 / -1; }
  .site-footer__pages .site-footer__list { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
}

/* One column at the narrow end. Two columns of 170px broke the long footer
   lines over several rows against a short neighbour, and the footer stopped
   reading as rows. */
@media (max-width: 26rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* The postcode is the map link. Big enough to tap. */
.yard__address a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Jen's hero photo, 25 October, is landscape (1600 by 1200) in a slot that
   runs tall on desktop. The row of containers sits right of centre and below
   the middle, so the crop is pulled that way rather than taking the centre. */
.hero__media img { object-position: 58% 60%; }