/* ─── Hem (index.html) — page-only styles ──────────────────────────────────
   Loaded in addition to css/style.css (shared). */

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center;background:var(--primary);margin-top:-78px}
/* Height is set in real viewport units here (not a % of the parent) — on some
   mobile browsers a percentage height fails to resolve reliably against an
   ancestor sized with min-height (rather than an explicit height), which
   made the video collapse to a short strip and look cropped top/bottom. */
.hero-media{position:absolute;top:0;left:0;right:0;width:100%;height:100vh;height:100dvh;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(75,37,19,.38) 0%,rgba(75,37,19,.5) 55%,rgba(75,37,19,.66) 100%);pointer-events:none}
.hero-inner{max-width:720px;margin:0 auto;padding:150px 28px 96px;text-align:center;position:relative;z-index:2}
.hero .eyebrow{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.hero-title{font-size:clamp(38px,6vw,64px);line-height:1.08;margin:22px 0 24px;letter-spacing:-.015em;font-weight:500;color:#fff}
.hero-title em{font-style:italic;color:var(--accent-soft)}
.hero-lead{font-size:17px;line-height:1.8;color:rgba(255,255,255,.85);max-width:50ch;margin:0 auto 36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){.hero-media{display:none}}

/* ─── Category tiles (Skyltar / Ringbrickor) ─────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cat-tile{background:var(--white);border:1px solid var(--tertiary-wash);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-tile .cat-art{background:var(--tertiary-wash);border-radius:var(--r-md);height:220px;display:flex;align-items:center;justify-content:center}
.cat-tile .cat-art svg{width:52%;height:auto}
.cat-tile .cat-body{padding:22px 16px 14px}
.cat-title{font-size:24px;font-weight:500;margin-bottom:8px}
.cat-desc{font-size:13.5px;color:var(--primary-tint);line-height:1.75;margin-bottom:16px}
.cat-foot{display:flex;justify-content:space-between;align-items:center}
.cat-count{font-size:12px;color:var(--primary-tint);font-weight:600}

/* ─── Feature / trust cards ───────────────────────────────────────────────── */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{background:var(--white);border:1px solid var(--tertiary-wash);border-radius:var(--r-md);padding:24px 22px;box-shadow:var(--shadow-sm)}
.feature-icon{width:42px;height:42px;border-radius:50%;background:var(--accent-wash);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature-title{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:6px}
.feature-desc{font-size:12.5px;color:var(--primary-tint);line-height:1.65}

/* ─── Occasion chips ──────────────────────────────────────────────────────── */
.occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.occ-card{background:var(--white);border:1px solid var(--tertiary-wash);border-radius:var(--r-md);padding:22px 20px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:flex-start}
.occ-icon{width:38px;height:38px;border-radius:50%;background:var(--tertiary-wash);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.occ-title{font-size:15.5px;font-weight:700;margin-bottom:5px}
.occ-desc{font-size:12.5px;color:var(--primary-tint);line-height:1.65}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .hero-inner{padding-top:150px;padding-bottom:56px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .occ-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .cat-grid{grid-template-columns:1fr}
  .hero{min-height:100vh;min-height:100dvh}
  .hero-inner{padding-top:140px;padding-bottom:48px}
}
@media(max-width:560px){
  .feature-grid{grid-template-columns:1fr}
  .occ-grid{grid-template-columns:1fr}
}