/* Stoke Tiles redesign: homepage (T3).
   Built from design/home.html and design/home-mobile.html.

   The design's sections carry fixed heights because they were drawn on a
   canvas. Here they size to their content, as the handoff README says they
   should; the padding and the internal proportions are the design's. */

.st-home { display: flex; flex-direction: column; }

/* Shared section furniture */
.st-grid { display: grid; column-gap: 24px; row-gap: 40px; }
.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-eyebrow--on-dark { color: var(--st-white); }
.st-icon-btn--muted { border-color: var(--st-linen); color: var(--st-taupe); }
.st-icon-btn--muted:hover { background: var(--st-linen); color: var(--st-espresso); }
.st-card-media__empty { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ Hero */

.st-hero {
  position: relative;
  height: 840px;
  overflow: hidden;
  background: var(--st-espresso);
  display: flex;
  align-items: flex-end;
}
.st-hero__media,
.st-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}

/* Only the directional gradient lives here: the header carries its own top
   scrim, so repeating it would double the darkness under the logo. */
.st-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 21, 18, 0.78) 0%, rgba(24, 21, 18, 0.55) 42%, rgba(24, 21, 18, 0) 78%);
}

.st-hero__body {
  position: relative;
  width: 660px;
  max-width: 100%;
  margin: 0 0 112px var(--st-gutter-desktop);
  color: var(--st-white);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.st-hero__eyebrow {
  font-size: var(--st-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--st-on-dark-cream);
}
.st-hero__title {
  margin: 0;
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: var(--st-display);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--st-white);
}
.st-hero__rule { width: 72px; height: 1px; background: var(--st-gold-light); }
.st-hero__text {
  margin: 0;
  font-family: var(--st-serif);
  font-size: 28px;
  line-height: 1.35;
  max-width: 460px;
  color: var(--st-white);
}
.st-hero__actions { display: flex; align-items: center; gap: 32px; margin-top: 8px; }
.st-hero__actions .st-btn { padding: 0 36px; }

/* --------------------------------------------------------- Promise strip */

.st-promise {
  background: var(--st-white);
  border-bottom: 1px solid var(--st-divider);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--st-gutter-desktop);
}
.st-promise__item {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 120px;
  padding: 20px 28px;
  border-right: 1px solid var(--st-divider);
  text-decoration: none;
  color: var(--st-espresso);
}
.st-promise__item:last-child { border-right: 0; }
.st-promise__item:hover { background: var(--st-ivory); }
.st-promise__item svg { flex-shrink: 0; color: var(--st-bronze); stroke-width: 1.3; }
.st-promise__text { display: flex; flex-direction: column; gap: 4px; }
.st-promise__title {
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-promise__note { font-size: 15px; color: var(--st-taupe); }

/* ------------------------------------------------------------ Categories */

.st-cats { padding: 112px 0; }
.st-cats__more { display: none; margin-top: 32px; }

.st-tile-card { display: flex; flex-direction: column; text-decoration: none; color: var(--st-espresso); }
.st-tile-card__media {
  position: relative;
  height: 440px;
  overflow: hidden;
  background: var(--st-stone);
}
.st-tile-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.st-tile-card:hover .st-tile-card__media img { transform: scale(1.04); }
.st-tile-card__label {
  min-height: 100px;
  background: var(--st-white);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--st-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
}
.st-tile-card__label svg { flex-shrink: 0; color: var(--st-bronze); }
.st-tile-card:hover .st-tile-card__label { color: var(--st-bronze); }

/* --------------------------------------------------------------- Samples */

.st-split {
  background: var(--st-stone);
  display: grid;
  grid-template-columns: 720px minmax(0, 1fr);
}
.st-split__media { overflow: hidden; }
.st-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 96px 112px 96px 96px;
}
.st-split__body p { margin: 0; }
.st-split__actions { display: flex; margin-top: 8px; }
.st-split__actions .st-btn { padding: 0 36px; }

/* ----------------------------------------------------------- By style */

.st-styles { background: var(--st-white); padding: 104px 0; }
.st-style-card { display: flex; flex-direction: column; text-decoration: none; color: var(--st-espresso); }
.st-style-card__media { height: 378px; overflow: hidden; background: var(--st-stone); }
.st-style-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.st-style-card:hover .st-style-card__media img { transform: scale(1.04); }
.st-style-card__label {
  min-height: 72px;
  background: var(--st-panel);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--st-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

/* -------------------------------------------------------------- Delivery */

.st-delivery { background: var(--st-sage); color: var(--st-white); padding: 96px 0; }
.st-delivery__inner { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 96px; }
.st-delivery__intro { display: flex; flex-direction: column; gap: 20px; }
.st-delivery__intro h2 { color: var(--st-white); }
.st-delivery__lead {
  margin: 0;
  font-family: var(--st-serif);
  font-size: 26px;
  line-height: 1.3;
  color: var(--st-white);
}
.st-delivery__actions { display: flex; margin-top: 12px; }
.st-delivery__detail { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.st-delivery__rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.st-rate { display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 0 32px; }
.st-rate:first-child { padding-left: 0; }
.st-rate:last-child { padding-right: 0; }
.st-rate + .st-rate { border-left: 1px solid rgba(255, 255, 255, 0.4); }
.st-rate svg { color: var(--st-white); }
.st-rate__label {
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-rate__price { font-family: var(--st-serif); font-size: 34px; font-weight: 500; }
.st-rate__note { font-size: 15px; line-height: 1.5; }
.st-delivery__footnote { margin: 0; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------- Reviews */

.st-reviews { padding: 104px 0; }
.st-reviews__controls { display: flex; align-items: center; gap: 12px; }
.st-reviews__controls .st-btn { margin-right: 12px; }
.st-reviews__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* Beyond the first three, the extras wait their turn in the carousel. */
.st-reviews__track > .st-review:nth-child(n + 4) { display: none; }

/* The homepage draws the card white, taller and roomier than the product
   page's; home.html and product-tile.html genuinely differ here. */
.st-reviews__track .st-review { height: auto; min-height: 280px; background: var(--st-white); padding: 40px; gap: 24px; }
.st-reviews__track .st-review__quote { font-size: 23px; line-height: 1.35; }
.st-reviews__track .st-review__meta { flex-direction: row; justify-content: space-between; gap: 16px; }


/* ---------------------------------------------------------- Installation */

.st-install {
  background: var(--st-sage);
  color: var(--st-white);
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  min-height: 520px;
}
.st-install__media {
  background: var(--st-sage-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
}
.st-install__placeholder {
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
  color: var(--st-white);
  text-align: center;
}
.st-install__body {
  padding: 64px var(--st-gutter-desktop);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
/* Named by class rather than by element, so it is legible as a deliberate
   override of .st-h2 rather than an accident. */
.st-install__body .st-h2 { color: var(--st-white); font-size: 48px; line-height: 1.05; }
.st-install__body p { margin: 0; max-width: 560px; }
.st-install__actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Tablet */

@media (max-width: 1200px) {
  .st-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-split__body { padding: 64px 48px; }
  .st-delivery__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .st-install { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-install__body { padding: 56px 40px; }
  .st-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
  .st-hero { height: 700px; }
  .st-hero__media img { object-position: 47% center; }
  /* The design puts "Delivery information" after the rates on a phone, not
     between the lead and them. `display: contents` dissolves the intro so
     its pieces and the rates can be ordered together. */
  .st-delivery__inner { display: flex; flex-direction: column; gap: 32px; }
  .st-delivery__intro { display: contents; }
  .st-delivery__intro .st-eyebrow { order: 1; }
  .st-delivery__intro h2 { order: 2; }
  .st-delivery__lead { order: 3; }
  .st-delivery__detail { order: 4; }
  .st-delivery__actions { order: 5; margin-top: 8px; }

  /* 34px here, not the 48px the wider layout uses - at 390 it ran to two
     lines and doubled the height of the band. */
  .st-install__body .st-h2 { font-size: 34px; line-height: 1.05; }

  .st-hero__scrim {
    /* Two layers, as the design has them. Without the 140px top wash the
       white logo and icons sat on a bright photograph. */
    background:
      linear-gradient(0deg, rgba(24, 21, 18, 0.86) 0%, rgba(24, 21, 18, 0.62) 42%, rgba(24, 21, 18, 0.08) 72%),
      linear-gradient(180deg, rgba(24, 21, 18, 0.6) 0px, rgba(24, 21, 18, 0) 140px);
  }
  .st-hero__body {
    width: auto;
    margin: 0 var(--st-gutter-mobile) 32px;
    gap: 20px;
  }
  .st-hero__eyebrow { font-size: var(--st-eyebrow); }
  .st-hero__title { font-size: 58px; }
  .st-hero__rule { width: 56px; }
  .st-hero__text { font-size: 23px; }
  .st-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .st-hero__actions .st-btn { width: 100%; }

  .st-promise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }
  .st-promise__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    min-height: 116px;
    padding: 16px 16px 16px var(--st-gutter-mobile);
    border-bottom: 1px solid var(--st-divider);
  }
  .st-promise__item:nth-child(2n) { border-right: 0; }
  .st-promise__item svg { width: 26px; height: 26px; }
  .st-promise__title { font-size: var(--st-eyebrow); letter-spacing: 0.12em; }
  .st-promise__note { font-size: 13px; }

  .st-cats { padding: 64px 0; }
  .st-styles { padding: 64px 0; }
  .st-reviews { padding: 64px 0; }
  .st-delivery { padding: 64px 0; }
  .st-section__head { margin-bottom: 28px; }
  /* The design drops the inline "view all" on phones and puts a full width
     button under the grid instead. */
  .st-section__head .st-link { display: none; }
  .st-cats__more { display: flex; }

  .st-grid { column-gap: 12px; row-gap: 20px; }
  .st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .st-tile-card__media { height: 240px; }
  .st-tile-card__label { min-height: 82px; padding: 14px; font-size: 20px; line-height: 1.3; gap: 8px; }
  .st-tile-card__label svg { width: 16px; height: 16px; }

  .st-style-card__media { height: 211px; }
  .st-style-card__label { min-height: 80px; padding: 14px; font-size: 20px; line-height: 1.3; }

  .st-split { grid-template-columns: minmax(0, 1fr); }
  .st-split__media { height: 260px; }
  .st-split__body { padding: 40px var(--st-gutter-mobile); gap: 18px; }
  .st-split__body .st-body-l { font-size: var(--st-body); }
  .st-split__actions { margin-top: 6px; }
  .st-split__actions .st-btn { width: 100%; }

  /* Each rate becomes a row: icon, name and note, then the price. */
  .st-delivery__rates { display: flex; flex-direction: column; }
  .st-rate {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }
  .st-rate + .st-rate { border-left: 0; }
  .st-rate__label { order: 2; flex-grow: 1; font-size: var(--st-eyebrow); letter-spacing: 0.12em; }
  .st-rate__note { order: 3; font-size: 15px; }
  .st-rate__price { order: 4; font-size: 26px; }
  /* Name above note, price to the right, on one row. */
  .st-rate { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
  .st-rate svg { grid-row: 1 / 3; grid-column: 1; }
  .st-rate__label { grid-column: 2; grid-row: 1; }
  .st-rate__note { grid-column: 2; grid-row: 2; }
  .st-rate__price { grid-column: 3; grid-row: 1 / 3; text-align: right; }
  .st-delivery__detail { gap: 16px; }
  .st-delivery__actions .st-btn { width: 100%; }
  .st-delivery__intro { gap: 16px; }

  /* Reviews scroll sideways rather than stacking three tall boxes. */
  .st-reviews .st-wrap { padding-right: 0; }
  /* Below the cards, not above them: dashes at the left, the button at the
     right. The head dissolves so the three can be ordered together. */
  .st-reviews .st-wrap { display: flex; flex-direction: column; }
  .st-reviews .st-section__head { display: contents; }
  .st-reviews .st-heading { order: 1; }
  .st-reviews__track { order: 2; }
  .st-reviews__controls {
    order: 3;
    margin-top: 20px;
    padding-right: var(--st-gutter-mobile);
    justify-content: space-between;
  }
  .st-reviews__controls .st-btn { margin-right: 0; }
  /* The arrows are a desktop affordance - the track scrolls by finger here,
     and the design shows progress dashes instead. Hidden rather than squashed
     to 36px. */
  .st-reviews__controls .st-icon-btn { display: none; }
  .st-reviews__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: var(--st-gutter-mobile);
    -webkit-overflow-scrolling: touch;
  }
  .st-reviews__track > .st-review:nth-child(n + 4) { display: flex; }
  .st-review {
    flex: 0 0 300px;
    min-height: 260px;
    padding: 28px;
    scroll-snap-align: start;
  }
  .st-review__quote { font-size: 20px; }

  .st-install { grid-template-columns: minmax(0, 1fr); }
  .st-install__media { min-height: 200px; }
  .st-install__body { padding: 40px var(--st-gutter-mobile); }
  .st-install__body h2 { font-size: 34px; }
  .st-install__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .st-install__actions .st-btn { width: 100%; }
}


/* ============================================================ Design pass */

/* The installation paragraph is set in the regular weight, not light. */
.st-install__body .st-body-l { font-weight: 400; }

/* The samples footnote: 15px at desktop, 14px on a phone. */
.st-split__body .st-small { font-size: 15px; }

@media (max-width: 1024px) {
  .st-delivery__intro .st-h1 { font-size: 42px; }
  .st-delivery__lead { font-size: 23px; }
  .st-install__body .st-body-l { font-size: 16px; }
  .st-reviews__controls .st-btn { font-size: 12px; letter-spacing: 0.16em; }
  .st-split__body .st-small { font-size: 14px; }
}

/* Installation banner photo (Oct 2026). The design's 560px panel, filled
   edge to edge and cropped to fit; 240px tall on phones as in
   design/home-mobile.html. No photo set: the banner runs without the panel. */
.st-install__media { position: relative; overflow: hidden; padding: 0; }
.st-install__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.st-install--no-photo { grid-template-columns: minmax(0, 1fr); min-height: 0; }

@media (max-width: 1024px) {
  .st-install__media { min-height: 240px; }
}