/* ==========================================================================
   HOME.CSS — Galpan Gadh Sweets — Home page only
   Loaded only on the front page, on top of main.css (tokens + shared
   components already come from there).
   ========================================================================== */
@import url('main.css');

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding: clamp(2.8rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem); background: var(--cream);}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(199,147,46,.4) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 78% 10%, black, transparent 70%);
          mask-image: radial-gradient(70% 60% at 78% 10%, black, transparent 70%);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items:center;}
.hero-tag{font-family:var(--font-gu); color:var(--maroon-800); font-weight:600; font-size:1.05rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;}
.hero-tag .en{font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.hero h1{font-size: clamp(2.5rem, 5.4vw, 4.1rem); line-height:1.05; margin-top:.9rem; color:var(--ink);}
.hero h1 em{font-style:normal; background-image: linear-gradient(180deg, transparent 60%, rgba(231,182,78,.65) 60%); padding:0 .04em;}
.hero p.lede{margin-top:1.3rem; font-size:1.08rem; color: var(--muted); max-width:46ch;}
.hero-ctas{display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap;}
.hero-note{margin-top:1.4rem; font-size:.85rem; color: var(--maroon-800); opacity:.9; display:flex; gap:.5rem; align-items:center;}

.emblem-wrap{position:relative; display:flex; align-items:center; justify-content:center; min-height:320px;}
.emblem-frame{position:relative; width:min(300px,80%); aspect-ratio:1;}
.emblem-ring{position:absolute; inset:6%; border:1px solid var(--line-gold); border-radius:50%;}
.emblem-diamond{
  position:absolute; inset:20%;
  background: linear-gradient(150deg, var(--maroon-700), var(--maroon-900));
  border:1.5px solid var(--gold-500);
  transform: rotate(45deg);
  box-shadow: 0 0 0 9px rgba(231,182,78,.14), var(--shadow-lg);
}
.emblem-icon{
  position:absolute; inset:0; margin:auto; width:46%; height:auto;
  transform: rotate(0deg);
  filter: drop-shadow(0 8px 18px rgba(58,5,8,.35));
}
.emblem-frame .corner{width:26px; height:26px;}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--cream-line); border-bottom:1px solid var(--cream-line); background: var(--cream);}
.trust-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; padding: 1.5rem 0;}
.trust-item{display:flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:600; color:var(--ink);}
.trust-item svg{width:22px; height:22px; flex:none; color:var(--maroon-800);}

/* ---------- collections ---------- */
.collection-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.collection-grid > .card.feature{grid-column: span 3;}

/* ---------- home responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .emblem-wrap{order:-1; min-height:220px;}
  .collection-grid{grid-template-columns:repeat(2,1fr);}
  .collection-grid > .card.feature{grid-column:span 2;}
  .trust-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 620px){
  .collection-grid{grid-template-columns:1fr;}
  .collection-grid > .card.feature{grid-column:span 1;}
  .hero-ctas .btn{width:100%;}
  .hero-ctas{flex-direction:column;}
}