/* ============================================================
   PASSATO STEEL (steel.html)
   Loads after styles.css + hero-b.css. Same locked light theme,
   one accent (logo blue), radius: surfaces var(--r-surface), buttons pill.
   Sections: poster hero (shared .hb-poster) / two products / gallery / photo + stacked reasons / contact list (shared).
   ============================================================ */

/* ---------- hero: warehouse racks, copy over the roof trusses; five-word headline gets more measure ---------- */
.st-hero { --poster-pos: 50% 45%; }
.st-hero .hb-poster-copy h1 { max-width: 20ch; }

/* ---------- products: the two we have real photos of, side by side ---------- */
.st-cat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) var(--s3);
  margin-top: var(--s4);
}
.st-item { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.st-img {
  display: block;
  overflow: hidden;
  border-radius: var(--r-surface);
  background: var(--bg-3);
  height: clamp(300px, 34vw, 460px);
}
.st-img img { width: 100%; height: 100%; object-fit: cover; }
.st-item figcaption { display: flex; flex-direction: column; gap: 0.3rem; }
.st-item .h-item { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.st-item figcaption p { color: var(--text-dim); font-size: 0.97rem; max-width: 42ch; text-wrap: pretty; }
.st-item.rv:nth-child(2) { transition-delay: 0.08s; }

@media (max-width: 800px) {
  .st-cat { gap: var(--s3) var(--s2); }
  .st-item { gap: 0.6rem; }
  .st-img { height: auto; aspect-ratio: 4 / 5; }
  .st-item .h-item { font-size: 1.15rem; }
  .st-item figcaption p { font-size: 0.88rem; }
}
@media (max-width: 560px) {
  .st-cat { grid-template-columns: minmax(0, 1fr); } /* two products: one per row, full width */
}

/* ---------- why: one photo beside the three reasons stacked ---------- */
.st-why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "media head"
    "media list";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--s4);
}
.st-why-head { grid-area: head; }
.st-why-media {
  grid-area: media;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border-radius: var(--r-surface);
  background: var(--bg-3);
}
.st-why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-why-list { grid-area: list; list-style: none; border-top: 2px solid var(--accent); }
.st-why-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3) 0;
}
.st-why-list li + li { border-top: 1px solid var(--line); }
.st-why-list .h-item { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 800; }
.st-why-list p { color: var(--text-dim); margin-top: 0.35rem; max-width: 46ch; }
.st-why-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-surface);
  background: var(--bg);
  color: var(--accent);
  font-size: 1.6rem;
  box-shadow: 0 1px 2px rgba(15, 22, 56, 0.06), 0 8px 20px -12px rgba(36, 64, 216, 0.45);
}
.st-why-list li.rv:nth-child(2) { transition-delay: 0.08s; }
.st-why-list li.rv:nth-child(3) { transition-delay: 0.16s; }

.st-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.st-link .ph { transition: transform 0.2s ease; }
@media (hover: hover) {
  .st-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .st-link:hover .ph { transform: translateX(3px); }
}

@media (max-width: 800px) {
  .st-why {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "list";
    grid-template-rows: auto;
    row-gap: var(--s3);
  }
  .st-why-media { min-height: 0; aspect-ratio: 4 / 3; }
  .st-why-list li { gap: var(--s2); }
  .st-why-icon { width: 44px; height: 44px; font-size: 1.35rem; }
}

/* ---------- contact: Steel labels are longer than division names ---------- */
@media (min-width: 801px) {
  .st-contact .contact-row { grid-template-columns: 11.5rem minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .st-link .ph { transition: none; }
  .st-item.rv, .st-why-list li.rv { transition-delay: 0s; }
}

/* ---------- gallery: masonry columns of real yard, workshop, site and port photos ---------- */
.st-gal { columns: 3 18rem; column-gap: var(--s2); margin-top: var(--s4); }
.st-gal img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--s2);
  break-inside: avoid;
  border-radius: var(--r-surface);
  background: var(--bg-3);
  cursor: zoom-in;
}
.st-gal img:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .st-gal img { transition: opacity 0.2s; }
  .st-gal img:hover { opacity: 0.9; }
}
@media (max-width: 640px) {
  .st-gal { columns: 2; column-gap: 0.6rem; }
  .st-gal img { margin-bottom: 0.6rem; }
}