/* =========================================================================
   occasions.html — page-specific styles (Occasions Hub)
   Load AFTER css/site.css. This page has its own look (Playfair Display /
   Plus Jakarta Sans, softer muted text, rounder corners), so the first block
   re-applies its values on top of the shared defaults.
   ========================================================================= */

:root{
  --bg-surface:#17120c;
  --muted:#b8aba0;
  --line:rgba(243,236,222,.1);
  --radius:12px;
  --display:'Playfair Display',serif;
  --body:'Plus Jakarta Sans',sans-serif;
}

*{margin:0;padding:0;}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:auto;
}

section{position:static;}  /* site.css makes every section position:relative; this page's weren't */

/* This heading never sets a weight, so it used the browser's bold; site.css's
   h1-h4 rule would make it 600. */
.cta-box h2{font-weight:700;}

.wrap{
  width:100%;
  padding:0 24px;
}

/* site.css turns every .fa-solid into a 1em mask icon. The header icons (arrow,
   chevron, close) use those shapes like every other page; the icons in this page's
   content are Font Awesome glyphs (music included), so undo the mask for them.
   :where() keeps this at single-class specificity so the page's own icon rules win. */
.fa-solid:where(:not(.fa-arrow-right, .fa-chevron-down, .fa-xmark)){
  width:auto;
  height:auto;
  background-color:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  vertical-align:baseline;
  flex:0 1 auto;
}

/* HERO */
.occasions-hero{
  position:relative;
  padding:80px 0 60px;
  background:radial-gradient(circle at 50% 0%,rgba(227,161,61,.15),transparent 70%);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.occasions-hero .eyebrow{
  font:12px ui-monospace,monospace;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:14px;
  display:inline-block;
}
.occasions-hero h1{
  font-family:var(--display);
  font-size:clamp(36px,5vw,56px);
  font-weight:600;
  margin-bottom:18px;
}
.occasions-hero p{
  max-width:680px;
  margin:0 auto;
  font-size:18px;
  color:var(--muted);
  font-weight:300;
}

/* OCCASION FINDER */
.milestones-container{padding:70px 0 80px;}
.occ-head{max-width:640px;margin:0 auto 30px;text-align:center;}
.occ-head h2{font-family:var(--display);font-size:clamp(28px,3.6vw,38px);font-weight:600;margin-bottom:10px;}
.occ-head p{color:var(--muted);font-size:16px;}

.occ-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:0 auto;}
.occ-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:9999px;
  border:1px solid var(--line-strong);background:rgba(243,236,222,.02);
  color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .25s ease;
}
.occ-pill i{font-size:12px;}
.occ-pill:hover{color:var(--cream);border-color:var(--gold-soft);}
.occ-pill.active{color:#1B1206;background:linear-gradient(90deg,var(--gold),var(--rust));border-color:transparent;box-shadow:0 0 18px rgba(227,161,61,.35);}
.occ-count{text-align:center;margin:18px 0 34px;font:12px ui-monospace,monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}

.occ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px;}
.occ-tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:30px 26px 26px;border-radius:20px;
  background:linear-gradient(180deg,rgba(23,18,12,.9),rgba(15,12,9,.95));
  border:1px solid var(--line-strong);color:var(--cream);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.occ-tile:hover,.occ-tile:focus-visible{
  transform:translateY(-4px);
  border-color:rgb(var(--m-a,227,161,61));
  box-shadow:0 20px 40px -15px rgba(var(--m-a,227,161,61),.28);
}
.occ-tile[hidden]{display:none;}
.card-glow{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,rgb(var(--m-a,227,161,61)),rgb(var(--m-b,192,91,59)));}
.card-icon{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;color:#1B1206;margin-bottom:18px;
  background:linear-gradient(135deg,rgb(var(--m-a,227,161,61)),rgb(var(--m-b,192,91,59)));
  box-shadow:0 0 20px rgba(var(--m-a,227,161,61),.35);
}
.occ-cat{font:11px ui-monospace,monospace;letter-spacing:1.4px;text-transform:uppercase;color:rgb(var(--m-a,227,161,61));margin-bottom:6px;}
.occ-tile h3{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.25;margin-bottom:10px;}
.occ-tile p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex-grow:1;}
.card-action{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cream);transition:color .2s ease;}
.card-action i{font-size:12px;transition:transform .2s ease;}
.occ-tile:hover .card-action{color:rgb(var(--m-a,240,195,120));}
.occ-tile:hover .card-action i{transform:translateX(4px);}

/* "Don't see your occasion?" tile */
.occ-tile-custom{border-style:dashed;background:rgba(243,236,222,.02);}
.occ-tile-custom .card-icon{background:linear-gradient(135deg,var(--gold),#FF5A36,var(--rust));}
.occ-tile-custom .occ-cat{color:var(--gold-soft);}

/* BOTTOM CTA */
.occasions-cta-section{padding:20px 0 100px;text-align:center;}
.cta-box{background:linear-gradient(135deg,rgba(23,18,12,.95),rgba(35,26,17,.95));border:1px solid var(--line-strong);border-radius:24px;padding:60px 40px;box-shadow:0 30px 60px rgba(0,0,0,.5);}
.cta-box h2{font-family:var(--display);font-size:clamp(28px,4vw,40px);margin-bottom:16px;}
.cta-box p{max-width:600px;margin:0 auto 30px;color:var(--muted);font-size:16.5px;}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:9999px;font-size:15px;font-weight:700;color:#1B1206;background:linear-gradient(90deg,var(--gold),#FF5A36,var(--rust),var(--gold)) 0 0/300% 100%;box-shadow:0 0 25px rgba(227,161,61,.4);transition:transform .25s ease;}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);}

@media (max-width:640px){
  .occasions-hero{padding:64px 0 48px;}
  .occasions-hero p{font-size:16px;}
  .milestones-container{padding:50px 0 60px;}
  .occ-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -18px;padding-left:18px;padding-right:18px;}
  .occ-filters::-webkit-scrollbar{display:none;}
  .occ-pill{padding:9px 14px;font-size:12.5px;flex:none;}
  .occ-tile{padding:26px 22px 22px;}
  .cta-box{padding:45px 24px;}
}
@media (prefers-reduced-motion:reduce){.occ-tile,.occ-tile .card-action i{transition:none;}}