/* ════════════════════════════════════════════════════
   Solo Stainless Steel, Product Pages
   Extends: styles.css (uses same custom properties)
   Reusable template for all product/service pages
   ════════════════════════════════════════════════════ */

/* ═══════════════════════════
   PAGE HERO (shared with about.css)
   Only included if about.css is NOT loaded
   ═══════════════════════════ */

.page-hero {
  position: relative;
  height: 70vh;
  min-height: 520px;
  max-height: 720px;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--black);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: pageHeroZoom 12s var(--ease-in-out) forwards;

  background-color: var(--charcoal);
  background-image: linear-gradient(135deg, var(--charcoal) 0%, var(--steel) 50%, var(--graphite) 100%);
}

@keyframes pageHeroZoom {
  to { transform: scale(1); }
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.4) 50%,
    rgba(10, 10, 10, 0.3) 100%
  );
}

.page-hero--top-fade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.65) 0%,
    rgba(10, 10, 10, 0.35) 50%,
    rgba(10, 10, 10, 0) 100%
  );
  z-index: 4;
  pointer-events: none;
}

.page-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(184, 124, 76, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 124, 76, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
}

.page-hero-label::before,
.page-hero-label::after {
  content: "";
  width: 45px;
  height: 1px;
  background: var(--white);
}

.page-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--silver);
  letter-spacing: 0.06em;
}

.page-hero-breadcrumb a {
  color: var(--silver);
  transition: color 0.3s;
}

.page-hero-breadcrumb a:hover {
  color: var(--copper-light);
}

.breadcrumb-sep {
  color: var(--warm-grey);
  opacity: 0.5;
}

/* ═══════════════════════════
   PRODUCT INTRO
   ═══════════════════════════ */

.product-intro {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

.product-intro-text {
  font-size: 17px;
  color: var(--gunmetal);
  line-height: 1.9;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* ═══════════════════════════
   FEATURES
   ═══════════════════════════ */

.product-features {
  padding: var(--section-pad) 0;
  background: var(--cream);
}

.product-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.product-feature-card {
  background: var(--white);
  padding: 44px 36px;
  position: relative;
  transition: transform 0.5s var(--ease-out);
}

.product-feature-card:hover {
  transform: translateY(-6px);
}

.product-feature-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.product-feature-card:hover::after {
  transform: scaleX(1);
}

.product-feature-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--silver);
  display: block;
  margin-bottom: 20px;
  opacity: 0.7;
}

.product-feature-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 14px;
  line-height: 1.3;
}

.product-feature-desc {
  font-size: 15px;
  color: var(--warm-grey);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(15px * 1.8 * 3);
}

.product-features--full .product-feature-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  text-wrap: pretty;
}

/* ═══════════════════════════
   GALLERY
   ═══════════════════════════ */

.product-gallery {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

.product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 360px;
  grid-auto-flow: dense;
  gap: 48px;
}

.product-gallery-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.product-gallery-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out);

  /* Placeholder */
  background-color: var(--steel);
  background-image:
    radial-gradient(ellipse at 30% 40%, var(--graphite) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, var(--gunmetal) 0%, transparent 60%);
}

.product-gallery-item:hover .product-gallery-image,
.product-gallery-item.is-active .product-gallery-image {
  transform: scale(1.06);
}

.product-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.product-gallery-item:hover .product-gallery-overlay,
.product-gallery-item.is-active .product-gallery-overlay {
  opacity: 1;
}

/* Gallery captions (per-page) */
.product-gallery--captions .product-gallery-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.55);
}

.product-gallery-caption {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.01em;
  transform: translateY(8px);
  transition: transform 0.4s var(--ease-out);
}

.product-gallery-item:hover .product-gallery-caption,
.product-gallery-item.is-active .product-gallery-caption {
  transform: translateY(0);
}

/* Gallery modifiers (per-page) */
.product-gallery--3col .product-gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.product-gallery--3col .product-gallery-portraits {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.product-gallery--4col .product-gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  grid-auto-flow: dense;
  gap: 24px;
}

.product-gallery--4col .product-gallery-item {
  height: 280px;
}

.product-gallery--4col .product-gallery-item--portrait {
  grid-row: span 2;
  height: auto;
}

.product-gallery--contain .product-gallery-item {
  background: var(--white);
  height: 320px;
}

.product-gallery--contain .product-gallery-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--white);
}

.product-gallery--contain .product-gallery-item:hover .product-gallery-image {
  transform: none;
}

.product-gallery--contain .product-gallery-overlay {
  display: none;
}

.product-gallery-item--portrait {
  grid-row: span 2;
  height: auto;
}

/* Portrait block — 3-col grid that sits below the main landscape grid.
   3 cols keeps each tile narrower than its 600px height so tiles read
   as portraits (~5:8) rather than squares. */
.product-gallery-portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid rgba(184, 124, 76, 0.25);
}

.product-gallery-portraits .product-gallery-item {
  height: 600px;
}

.product-gallery--piano-hinges .product-gallery-portraits,
.product-gallery--test-measures .product-gallery-portraits {
  grid-template-columns: repeat(2, 1fr);
}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */

@media (max-width: 1024px) {
  .product-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-features-grid .product-feature-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  .product-gallery--4col .product-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .page-hero {
    height: 40vh;
    min-height: 320px;
  }

  .product-features-grid {
    grid-template-columns: 1fr;
  }
  .product-features-grid .product-feature-card:last-child {
    max-width: 100%;
  }

  .product-gallery-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery--4col .product-gallery-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery-item {
    height: 280px;
  }

  .product-gallery-item--portrait {
    height: auto;
    aspect-ratio: 3 / 4;
    grid-row: auto;
  }

  /* Mobile portrait layout (pharma): let rows size to each item so
     portrait tiles don't overflow the 360px auto-row and overlap below. */
  .product-gallery--mobile-portrait .product-gallery-grid {
    grid-auto-rows: auto;
  }

  /* Lone portrait inside a multi-col mobile grid (kitchen): span the
     full row so it doesn't leave a sibling cell empty. */
  .product-gallery--mobile-portrait .product-gallery-item--portrait {
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* Shops & Buildings: drop the desktop-only forced line breaks in
     feature cards 2 and 3 so mobile text flows naturally. */
  .product-features--shops .product-feature-card:nth-child(2) .product-feature-desc br,
  .product-features--shops .product-feature-card:nth-child(3) .product-feature-desc br {
    display: none;
  }

  /* Test Measures: drop the desktop-only forced line breaks in the
     intro paragraph and feature card 3 so mobile text matches cards 1/2.
     `.m-only-br` breaks are preserved so we can place mobile-specific breaks. */
  .product-intro--test-measures .product-intro-text br:not(.m-only-br),
  .product-features--test-measures .product-feature-card:nth-child(3) .product-feature-desc br:not(.m-only-br) {
    display: none;
  }

  /* Test Measures gallery: tighten the vertical stacking gap on mobile
     so tiles aren't separated by an oversized gap. */
  .product-gallery--test-measures .product-gallery-grid {
    gap: 20px;
  }

  /* Transfer Drawers: drop the desktop-only forced line breaks in
     feature card 2 so mobile text flows naturally. */
  .product-features--transfer-drawers .product-feature-card:nth-child(2) .product-feature-desc br {
    display: none;
  }

  .product-gallery-portraits {
    grid-template-columns: 1fr;
  }
  .product-gallery-portraits .product-gallery-item {
    height: 480px;
  }

  /* Bending & Rolling (3col): force single-column stacking on mobile so
     tiles aren't squeezed; specificity matches the desktop --3col rules. */
  .product-gallery--3col .product-gallery-grid,
  .product-gallery--3col .product-gallery-portraits {
    grid-template-columns: 1fr;
  }

  /* Piano Hinges: hide the site logo while the mobile menu is open so
     only the close button shows in the bar. visibility (not display)
     keeps the flex layout intact so the hamburger stays on the right. */
  .page-piano-hinges:has(.mobile-menu.open) .nav-logo {
    visibility: hidden;
  }

  /* Piano Hinges: drop the desktop-only forced line breaks in feature
     card descriptions so mobile text flows naturally. */
  .product-features--piano-hinges .product-feature-desc br {
    display: none;
  }

  /* Piano Hinges: cancel the tablet rule that narrows the 3rd card to
     max-width 50% so all three cards stack at full width on mobile. */
  .product-features--piano-hinges .product-feature-card:last-child {
    max-width: 100%;
    margin: 0;
    grid-column: auto;
  }

  /* Piano Hinges: stack the two portrait images vertically (overrides
     the 2-col desktop layout this page sets for its portraits). */
  .product-gallery--piano-hinges .product-gallery-portraits,
  .product-gallery--test-measures .product-gallery-portraits {
    grid-template-columns: 1fr;
  }
}