/* ═══════════════════════════════════════════
   HOME.CSS — Shatabdi Pavers (index.html ONLY)
   Styles for: the big hero banner, product preview
   cards, "Why Choose Us" cards, applications grid,
   and testimonial cards.

   ✏️ This file is mostly LAYOUT/STYLE — to edit actual
      TEXT shown on the homepage, edit index.html instead.
      To edit COLOURS used here (var(--terra) etc), edit
      the :root block in css/shared.css instead.
   ═══════════════════════════════════════════ */

/* HERO */
.hero{min-height:100vh;padding-top:var(--nav-h);background:linear-gradient(140deg,#1B1713 0%,#2C2018 55%,#3B2719 100%);position:relative;overflow:hidden;display:flex;align-items:center}
.hero-bg-grid{position:absolute;inset:0;opacity:.065;background-image:linear-gradient(rgba(200,169,126,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,126,.9) 1px,transparent 1px);background-size:56px 28px}
.hero-glow1{position:absolute;top:-80px;right:-60px;width:620px;height:620px;background:radial-gradient(circle,rgba(184,92,44,.22) 0%,transparent 70%);pointer-events:none}
.hero-glow2{position:absolute;bottom:-100px;left:-80px;width:440px;height:440px;background:radial-gradient(circle,rgba(200,169,126,.14) 0%,transparent 70%);pointer-events:none}
.hero-content{position:relative;z-index:2;padding:80px 28px;max-width:var(--max-w);margin:0 auto;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sand);margin-bottom:26px}
.hero-badge::before{content:'';display:block;width:36px;height:1.5px;background:var(--sand)}
.hero-h1{font-family:'Playfair Display',serif;font-size:clamp(46px,8vw,92px);font-weight:700;color:var(--white);line-height:1.03;letter-spacing:-2.5px;margin-bottom:10px}
.hero-h1 em{font-style:italic;color:var(--terra)}
.hero-sub{font-size:clamp(15px,1.8vw,18px);color:rgba(250,250,245,0.6);max-width:500px;margin-bottom:40px;font-weight:300;line-height:1.75}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:68px}
.hero-stats{display:flex;gap:52px;flex-wrap:wrap;border-top:1px solid rgba(200,169,126,.18);padding-top:44px}
.hstat-num{font-family:'Playfair Display',serif;font-size:clamp(30px,5vw,52px);font-weight:700;color:var(--sand);line-height:1}
.hstat-label{font-size:12px;color:rgba(250,250,245,.45);margin-top:5px;letter-spacing:.5px}

/* PRODUCT PREVIEW CARDS */
.prod-grid-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.phc{background:var(--cream);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all var(--t);text-decoration:none;color:inherit;display:block}
.phc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(184,92,44,.4)}
.phc-img{height:200px;position:relative;overflow:hidden;background:var(--border)}
.phc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.phc:hover .phc-img img{transform:scale(1.06)}
.phc-colors{position:absolute;bottom:12px;left:14px;display:flex;gap:5px;z-index:2}
.phc-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.phc-body{padding:22px}
.phc-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;margin-bottom:7px}
.phc-desc{font-size:13.5px;color:var(--taupe);line-height:1.65;margin-bottom:14px}
.phc-tags{display:flex;flex-wrap:wrap;gap:5px}

/* ────────────────────────────────────────────────────────────
   GALLERY PREVIEW STRIP (homepage "A Look at Our Work" section)
   ──────────────────────────────────────────────────────────── */
.gallery-grid-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.ghc{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--border)}
.ghc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.ghc:hover img{transform:scale(1.08)}
.ghc-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);color:#fff;font-size:12.5px;font-weight:500;opacity:0;transition:opacity var(--t)}
.ghc:hover .ghc-cap{opacity:1}
.tag{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(184,92,44,.1);color:var(--terra)}

/* WHY CARDS */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:52px}
.wcard{padding:30px;border:1px solid var(--border);border-radius:10px;background:var(--white);transition:all var(--t);position:relative;overflow:hidden}
.wcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.wcard:hover::before{transform:scaleX(1)}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.wcard-icon{font-size:30px;margin-bottom:14px}
.wcard-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;margin-bottom:8px}
.wcard-desc{font-size:13.5px;color:var(--taupe);line-height:1.7}

/* APPLICATIONS */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:48px}
.apc{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px 16px;text-align:center;transition:all var(--t)}
.apc:hover{border-color:var(--terra);transform:translateY(-3px)}
.apc-icon{width:35px;height:35px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.apc-icon img{width:100%;height:100%;object-fit:contain;display:block}
.apc-name{font-size:13px;font-weight:500}

/* TESTIMONIALS */
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:48px}
.tcard{padding:30px;border:1px solid var(--border);border-radius:10px;background:var(--white)}
.tcard-q{font-family:'Playfair Display',serif;font-size:16.5px;font-style:italic;line-height:1.65;margin-bottom:22px;color:var(--dark)}
.tcard-q::before{content:'\201C';font-size:52px;color:var(--terra);line-height:0;vertical-align:-.4em;margin-right:3px}
.tcard-auth{display:flex;align-items:center;gap:12px}
.tcard-av{width:42px;height:42px;border-radius:50%;background:var(--terra);display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:17px;font-family:'Playfair Display',serif;flex-shrink:0}
.tcard-name{font-weight:600;font-size:14px}
.tcard-loc{font-size:11.5px;color:var(--taupe);margin-top:2px}

@media(max-width:768px){
  .hero-stats{gap:28px}
}