/* products.css (NO CAROUSEL)
   Desktop + MOBILE (max-width: 999px)

   GOAL:
   - Equal spacing from HERO to first card
   - Equal spacing from last card to FOOTER
*/

/* =========================
   TOKENS
========================= */
:root{
  --brand-orange:#EF7A18;
  --page-white:#ffffff;
  --band-grey:#f2f2f2;
  --text-dark:#111;
  --text-soft:#444;

  --section-max-width:1500px;
  --section-side-gutter:60px;

  --section-padding:18px;
  --section-gap:40px;
  --section-radius:22px;

  /* SINGLE CONTROL for vertical rhythm */
  --edge-space:120px;

  /* spacing between cards */
  --card-gap:60px;
}

/* =========================
   BASE
========================= */
html, body{
  margin:0;
  padding:0;
}

.products-page{
  background:var(--page-white);
  color:var(--text-dark);
  width:100%;
  overflow-x:hidden;
  padding-bottom:0;
}

/* =========================
   HERO
========================= */
.products-hero{
  position: relative;
  min-height: 600px;
  display: grid;
  place-items: center;

  margin-bottom: var(--edge-space);
  overflow:hidden;
}

.products-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.products-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.15);
}

.products-hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 60px;
  text-align:center;
}

.products-hero-panel h1{
  margin:0;
  color:#fff;
  font-size:36px;
  line-height:1.12;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 10px 24px rgba(0,0,0,0.35);
}

/* =========================
   BODY WRAPPER
========================= */
.products-body{
  width:min(
    var(--section-max-width),
    calc(100% - (var(--section-side-gutter) * 2))
  );
  margin:0 auto;
  padding-bottom: var(--edge-space);
}

/* =========================
   PRODUCT BANDS (CARDS)
========================= */
.product-band{
  margin:0 0 var(--card-gap) 0;
}

.product-band:last-child{
  margin-bottom:0;
}

.product-band-inner{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr; /* text | image */
  gap:var(--section-gap);
  align-items:center;

  padding:var(--section-padding);
  background:var(--band-grey);
  border-radius:var(--section-radius);
}

/* =========================
   FLIPPED LAYOUT (DESKTOP)
========================= */
.product-band-inner.flip{
  grid-template-columns: 1.1fr 0.9fr; /* image | text */
}

.product-band-inner.flip .product-band-media{ order:1; }
.product-band-inner.flip .product-band-text{ order:2; }

/* =========================
   TEXT
========================= */
.product-band-text{
  padding: 8px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;

  align-items:flex-start;
  text-align:left;

  max-width:520px;
  margin:0 auto;
}

.product-band-text h2{
  margin:0 0 12px;
  font-size:36px;
  color:var(--brand-orange);
  max-width:520px;
}

.product-band-text p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--text-soft);
  max-width:520px;
}

/* =========================
   MEDIA
========================= */
.product-band-media{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:18px;
  overflow:hidden;
  background:#0000;
}

.product-band-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* no-bg variant */
.product-band-media.no-bg img{
  object-fit:contain;
}

/* =========================
   MOBILE (≤ 999px)
   - Text on top, image below
   - Images not oversized
========================= */
@media (max-width:999px){

  :root{
    --section-side-gutter:18px;
    --edge-space:70px;
    --card-gap:18px;
  }

  .products-hero{
    min-height:360px;
  }

  .products-hero-content{
    padding:0 22px;
  }

  .products-hero-panel h1{
    font-size:28px;
  }

  .products-body{
    width:calc(100% - 36px);
  }

  /* Always stacked on mobile: text first, image second */
  .product-band-inner{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  /* Neutralize desktop "flip" so order is consistent on mobile */
  .product-band-inner.flip{
    grid-template-columns: 1fr;
  }
  .product-band-inner.flip .product-band-text{ order: 1; }
  .product-band-inner.flip .product-band-media{ order: 2; }

  .product-band-text{
    padding: 0;
    max-width: none;
    margin: 0;
  }

  .product-band-text h2{
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .product-band-text p{
    font-size: 14.5px;
    line-height: 1.55;
  }

  /* Make images feel lighter / less tall */
  .product-band-media{
    aspect-ratio: 16 / 10; /* shorter than 4/3 */
    border-radius: 16px;
  }
}