/* ════════════════════════════════════════════════════════════════════
   pages.css — layout for the split-out pages: listings, detail pages,
   the standalone booking page. Loads after components.css.
   Logical properties only, so RTL mirrors without extra rules.
   ════════════════════════════════════════════════════════════════════ */

/* ——— Page shell ——— */
.page-section { padding-block: var(--section-pad); }

.page-head .section-title {
  font-size: var(--fs-h1);
  letter-spacing: var(--tr-tight);
  line-height: 1.1;
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1.1;
  margin-block: var(--s-3) var(--s-4);
}

.crumbs {
  padding-block: var(--s-4);
  border-block-end: var(--hair) solid var(--line-faint);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.crumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs span[aria-hidden] { color: var(--line-strong); }

.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-9);
  padding: var(--s-6) var(--s-7);
  background: var(--surface-1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
}

.page-cta p {
  color: var(--text-2);
  font-size: var(--fs-lead);
  margin: 0;
  max-inline-size: 52ch;
}

/* ——— Home previews ——— */
.view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-ink);
  border-block-end: var(--hair) solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}

.view-all:hover { border-block-end-color: var(--accent); }

.view-all-count {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-5);
}

/* Products preview: a swipeable rail, not another grid. */
.preview-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-4);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.preview-rail > * { scroll-snap-align: start; }

@media (max-width: 900px) {
  .preview-rail { grid-auto-columns: minmax(76vw, 300px); }
}

/* ——— Products: zig-zag editorial rows ———
   Below the zig-zag breakpoint a side-by-side split is too cramped, so the
   rail stacks one row per product. The plate stays full-width, but the empty
   state has to carry its weight: big ghosted profile mark, caption beneath. */
.product-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.product-rail .card-media-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  aspect-ratio: auto;
  block-size: auto;
  min-block-size: 148px;
  padding-block: var(--s-5);
}

.product-rail .card-media-icon .card-icon {
  inline-size: auto;
  block-size: auto;
  background: none;
  border: 0;
  border-radius: 0;
}

.product-rail .card-media-icon .card-icon .ui-icon {
  inline-size: 62px;
  block-size: 62px;
}

.product-rail .plate-label {
  display: block;
  position: static;
  inset: auto;
}

/* The plate caption replaces the body kicker at every width. */
.product-rail > .product-card .product-meta { display: none; }

@media (min-width: 900px) {
  .product-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
  }

  .product-rail > .product-card {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-items: stretch;
    box-shadow: var(--shadow-1);
  }

  /* Push the plate to the trailing side on every other row, swapping the
     column widths so the plate stays the narrow one. `order` follows the
     inline axis, so this mirrors correctly under dir="rtl". */
  .product-rail > .product-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  }

  .product-rail > .product-card:nth-child(even) > .card-media,
  .product-rail > .product-card:nth-child(even) > .card-carousel { order: 1; }

  .product-rail > .product-card .card-media,
  .product-rail > .product-card .card-carousel {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 260px;
    border-block-end: 0;
    border-inline-end: var(--hair) solid var(--line);
  }

  .product-rail > .product-card:nth-child(even) .card-media,
  .product-rail > .product-card:nth-child(even) .card-carousel {
    border-inline-end: 0;
    border-inline-start: var(--hair) solid var(--line);
  }

  .product-rail > .product-card .body {
    padding: var(--s-8) var(--s-7);
    gap: var(--s-3);
    justify-content: center;
  }

  .product-rail > .product-card .card-title {
    font-size: var(--fs-h2);
    letter-spacing: var(--tr-tight);
  }

  .product-rail > .product-card p {
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-inline-size: 54ch;
    flex: 0 0 auto;
  }

  .product-rail > .product-card .product-spec { font-size: var(--fs-body); }

  /* The catalogue ships without photography, so the plate has to read as a
     deliberate drawing rather than a missing image: the profile mark goes
     large and ghosted, and the category is scribed into the corner. */
  .product-rail .card-media-icon {
    min-block-size: 0;
    padding-block: 0;
  }

  .product-rail .card-media-icon .card-icon .ui-icon {
    inline-size: 118px;
    block-size: 118px;
    opacity: 0.85;
  }

  .product-rail .plate-label {
    position: absolute;
    inset-block-end: var(--s-4);
    inset-inline-start: var(--s-5);
  }
}

.plate-label {
  display: none;
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-start: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-kicker);
  color: var(--text-3);
}

html[dir="rtl"] .plate-label { text-transform: none; letter-spacing: 0; }

/* ——— Factories: the same alternating treatment, plate-first ——— */
.factory-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

/* No photo on the plate: scale the plant icon up so it reads as a watermark. */
.factory-rail .factory-media:not(:has(img)) {
  block-size: auto;
  min-block-size: 148px;
}

.factory-rail .factory-media-fallback .ui-icon {
  inline-size: 62px;
  block-size: 62px;
}

.factory-rail > .factory-card .body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  gap: var(--s-2);
}

.factory-rail > .factory-card .card-title { font-size: var(--fs-h3); }
.factory-rail > .factory-card .factory-short { font-size: var(--fs-sm); }

@media (min-width: 900px) {
  .factory-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }

  .factory-rail > .factory-card {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: stretch;
    box-shadow: var(--shadow-1);
  }

  .factory-rail > .factory-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  }

  .factory-rail > .factory-card:nth-child(even) > .factory-media { order: 1; }

  .factory-rail > .factory-card .factory-media {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 240px;
    border-block-end: 0;
    border-inline-end: var(--hair) solid var(--line);
  }

  .factory-rail > .factory-card:nth-child(even) .factory-media {
    border-inline-end: 0;
    border-inline-start: var(--hair) solid var(--line);
  }

  .factory-rail > .factory-card .factory-media img { max-inline-size: 72%; }

  .factory-rail .factory-media:not(:has(img)) { min-block-size: 0; }

  .factory-rail .factory-media-fallback .ui-icon {
    inline-size: 108px;
    block-size: 108px;
    opacity: 0.5;
  }

  .factory-rail > .factory-card .body {
    padding: var(--s-7) var(--s-6);
    justify-content: center;
    gap: var(--s-3);
  }

  .factory-rail > .factory-card .card-title {
    font-size: var(--fs-h2);
    letter-spacing: var(--tr-tight);
  }

  .factory-rail > .factory-card .factory-short {
    font-size: var(--fs-lead);
    max-inline-size: 52ch;
  }
}

/* ——— Clients: logo wall ———
   column-count, not column-width: a fixed count always fills, so a short
   list can't leave an empty trailing column. */
.client-wall {
  columns: 2;
  column-gap: var(--s-5);
}

@media (min-width: 900px) {
  .client-wall { columns: 3; }
}

.client-wall > .client-card {
  break-inside: avoid;
  margin-block-end: var(--s-5);
}

/* On the list page the same card becomes a full-width band: logo plate on the
   inline-start, copy beside it. Three clients in three tall cards was just a
   grid again. */
.client-wall.is-bands {
  columns: auto;
  display: grid;
  gap: var(--s-4);
}

.client-wall.is-bands > .client-card {
  break-inside: auto;
  margin-block-end: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  box-shadow: var(--shadow-1);
}

.client-wall.is-bands .client-logo {
  block-size: auto;
  border-block-end: 0;
  border-inline-end: var(--hair) solid var(--line);
}

.client-wall.is-bands .client-card .body {
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  justify-content: center;
  gap: var(--s-2);
}

.client-wall.is-bands .client-card .card-title { font-size: var(--fs-h3); }

/* The auto margin that pins the site link to the card edge flings it 1000px
   away once the card is a full-width band. */
.client-wall.is-bands .client-site-link { margin-inline-start: 0; }

@media (max-width: 560px) {
  .client-wall.is-bands > .client-card { grid-template-columns: minmax(0, 1fr); }

  .client-wall.is-bands .client-logo {
    block-size: 132px;
    border-inline-end: 0;
    border-block-end: var(--hair) solid var(--line);
  }
}

/* ——— Services: numbered index rows ——— */
.service-index { display: block; }

.service-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-start: var(--hair) solid var(--line);
}

.service-row:last-child { border-block-end: var(--hair) solid var(--line); }

/* .section-head already draws the rule above the index. */
.service-index > .service-row:first-child { border-block-start: 0; }

.service-row-num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  padding-block-start: var(--s-1);
}

.service-row h2,
.service-row h3 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--s-2);
}

.service-row p {
  color: var(--text-2);
  margin: 0;
  max-inline-size: 68ch;
}

.service-row .quote-btn { align-self: center; }

@media (max-width: 760px) {
  .service-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--s-3);
  }

  .service-row-num { display: none; }
  .service-row .quote-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ——— Detail pages ——— */
.detail-section { padding-block: var(--s-9) var(--section-pad); }

.detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

@media (min-width: 900px) {
  .detail-split {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: var(--s-9);
  }
}

.detail-media .card-media,
.detail-media .card-carousel {
  aspect-ratio: 4 / 3;
  /* .card-media-icon pins an explicit height for the compact card plate, which
     would win over aspect-ratio and leave a stub beside the copy column. */
  block-size: auto;
  border-radius: var(--r-md);
}

.detail-media-icon {
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 24px 24px;
}

.detail-media .card-media-icon .card-icon {
  inline-size: auto;
  block-size: auto;
  background: none;
  border: 0;
  border-radius: 0;
}

.detail-media .card-media-icon .card-icon .ui-icon {
  inline-size: 104px;
  block-size: 104px;
  opacity: 0.85;
}

.detail-media-note {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-start: 50%;
  translate: -50% 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.detail-copy { display: flex; flex-direction: column; gap: var(--s-4); }

.spec-table {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-5) 0;
  border-block: var(--hair) solid var(--line);
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-4);
}

.spec-row dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--text-3);
}

html[dir="rtl"] .spec-row dt { text-transform: none; letter-spacing: 0; }

.spec-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--text-1);
}

.detail-desc p { color: var(--text-2); margin: 0; }
.detail-lede { color: var(--text-2); font-size: var(--fs-lead); margin: 0; max-inline-size: 62ch; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }
.detail-note { font-size: var(--fs-sm); margin: 0; }

.related-grid {
  display: grid;
  /* 240px was narrow enough to wrap the two card CTAs onto separate lines. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}

/* Factory detail */
.detail-head { margin-block-end: var(--s-7); }
.detail-head .page-title { margin-block-start: var(--s-4); }

.factory-stage-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}

/* Two plates side by side once there is room, with the first promoted to a
   full-width hero only when there is a row left beneath it to anchor — a
   lone half-width tile beside empty space reads as broken. */
@media (min-width: 900px) {
  .factory-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .factory-stage-list > .factory-stage:first-child:nth-last-child(n + 3) {
    grid-column: 1 / -1;
  }
}

.factory-stage {
  margin: 0;
  background: var(--surface-1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.factory-stage img,
.factory-stage video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* A full-width 16/9 plate is 700px tall on a desktop, which pushes the
     actual content off the first screen. */
  max-block-size: min(52vh, 460px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}

.factory-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  max-block-size: min(52vh, 460px);
  background: var(--ink);
}

.factory-embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.factory-stage figcaption {
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-block-start: var(--hair) solid var(--line-faint);
}

.detail-panel-body { margin-block-end: var(--s-7); }
.detail-panel-body p { color: var(--text-2); margin: 0; }

.factory-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-5) var(--s-3);
  margin-block: var(--s-6);
  padding-block: var(--s-5);
  border-block: var(--hair) solid var(--line);
}

.factory-stat { text-align: start; }

.factory-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--accent-ink);
}

.factory-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 0.15rem;
}

/* Client detail */
.client-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  margin-block-end: var(--s-8);
}

@media (min-width: 760px) {
  .client-head { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); }
}

.client-logo-lg {
  block-size: 200px;
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.client-logo-lg img { max-block-size: 128px; }

.client-head-copy { display: flex; flex-direction: column; gap: var(--s-3); }
.client-head-copy .page-title { margin-block: 0 var(--s-2); }
.client-head-copy .client-location { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-sm); }

.client-projects-title { margin-block: var(--s-8) var(--s-5); }

.client-projects-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

.client-project {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  background: var(--surface-1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.client-project.no-media { grid-template-columns: minmax(0, 1fr); }

.client-project img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 180px;
  object-fit: cover;
}

@media (max-width: 620px) {
  .client-project { grid-template-columns: minmax(0, 1fr); }
  .client-project img { block-size: 160px; min-block-size: 0; }
}

.client-project-body { padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.client-project-body h3 { font-size: var(--fs-h3); margin: 0; }
.client-project-body p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

.client-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-family: var(--font-display);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
}

html[dir="rtl"] .client-project-meta { text-transform: none; letter-spacing: 0; }

.client-projects-empty { color: var(--text-3); font-size: var(--fs-sm); }

/* Inline badge variants used on detail heads */
.factory-type-badge.is-inline,
.client-flag.is-inline {
  position: static;
  inset: auto;
  display: inline-block;
  margin-inline-end: var(--s-2);
}