/*  ================================================================
    Hustob Clothier · Home (landing) styles
    ---------------------------------------------------------------
    • Extends the design tokens already declared in site.css
    • Fluid typography / spacing via clamp()
    • Runs reveal animation (paired with home.js)
    • Optimised grids for 320 px → 4 K
    ================================================================ */

/* ───────────────────────────────────────────
   1.  Hero banner
   ─────────────────────────────────────────── */
.hc-hero{
  min-height:clamp(65vh, 70vh, 760px);
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  position:relative;text-align:center;
}
.hc-hero::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.35);backdrop-filter:blur(1px);
}
.hero-inner{position:relative;z-index:1;max-width:90%;color:#fff}
.hero-title{
  font-size:clamp(2rem, 6vw, 3.5rem);
  font-weight:600;margin:0 0 1rem;
  line-height:1.15;
}
.btn-hero{
  display:inline-block;padding:.85rem 2.2rem;
  background:var(--hc-accent);color:#fff;
  font-weight:500;border-radius:4px;
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.btn-hero:hover{opacity:.9;transform:translateY(-2px)}

/* ───────────────────────────────────────────
   2.  Generic section wrapper
   ─────────────────────────────────────────── */
.hc-section{
  padding:clamp(3rem, 6vw, 4.5rem) 1rem;text-align:center;
}
.section-head{max-width:60rem;margin-inline:auto}
.section-title{
  font-size:clamp(1.6rem, 4vw, 2rem);
  font-weight:600;margin:0 0 2rem;position:relative;
}
.section-title::after{
  content:"";width:60px;height:4px;border-radius:2px;
  background:var(--hc-accent);display:block;margin:.6rem auto 0;
}

/* ───────────────────────────────────────────
   3.  Featured category cards
   ─────────────────────────────────────────── */
.cat-grid{
  --min:260px;
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
}
.cat-card{
  position:relative;border-radius:6px;overflow:hidden;
  display:block;text-decoration:none;color:#fff;
}
.cat-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.cat-card span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.47);
  font-size:clamp(1.25rem, 3.3vw, 1.6rem);font-weight:700;
  letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.45);
}
.cat-card:hover img{transform:scale(1.08)}

/* ───────────────────────────────────────────
   4.  Product grid
   ─────────────────────────────────────────── */
.prod-grid{
  --min:220px;
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
}
.prod-card{
  background:var(--hc-light);border:1px solid var(--hc-border);
  border-radius:6px;overflow:hidden;color:var(--hc-dark);
  text-decoration:none;display:block;
  transition:box-shadow .25s ease,transform .25s ease;
}
.prod-card:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.prod-card img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
}
.prod-card h3{
  font-size:1rem;font-weight:500;
  margin:.85rem .9rem .1rem;line-height:1.35;
}
.prod-card .price{
  margin:0 .9rem 1rem;
  color:var(--hc-accent);font-weight:600;
  font-size:.95rem;
}

/* CTA below grids */
.section-cta{margin-top:2.2rem}
.btn-outline{
  display:inline-block;padding:.75rem 1.9rem;border:2px solid var(--hc-accent);
  color:var(--hc-accent);border-radius:4px;font-weight:500;
  transition:background var(--hc-dur) ease,color var(--hc-dur) ease;
}
.btn-outline:hover{background:var(--hc-accent);color:#fff}

/* ───────────────────────────────────────────
   5.  Promo strip
   ─────────────────────────────────────────── */
.hc-cta-strip{
  background:var(--hc-dark);color:#fff;text-align:center;
  padding:clamp(2.5rem, 6vw, 4rem) 1rem;
  display:flex;flex-direction:column;gap:1rem;
}
.hc-cta-strip h2{
  font-size:clamp(1.3rem,3.3vw,1.7rem);
  font-weight:600;margin:0;
}
.hc-cta-strip p{margin:0;font-size:.95rem;opacity:.9}
.btn-alt{
  display:inline-block;padding:.7rem 1.8rem;background:#fff;
  color:var(--hc-dark);border-radius:4px;font-weight:600;
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.btn-alt:hover{opacity:.88;transform:translateY(-1px)}

/* ───────────────────────────────────────────
   6.  Reveal animation (home.js hook)
   ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:
  opacity var(--hc-dur) ease-out,
  transform var(--hc-dur) ease-out;
}
.reveal.in{opacity:1;transform:none}

/* ───────────────────────────────────────────
   7.  Breakpoints & accessibility tweaks
   ─────────────────────────────────────────── */
@media (max-width:480px){
  .cat-grid{--min:200px}
  .prod-grid{--min:180px}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{transition:none!important}
  .cat-card img,.prod-card,
  .btn-hero,.btn-outline,.btn-alt{transition:none!important}
}