/* =========================================================
   Salsa Party — POC B "Fiesta Poster"
   Layered on styles.css, but flips the page to the cream/paper
   ground. Nav, drawer, footer and the package builder stay on the
   dark chalk ground so the page still belongs to the site.
   Adds: CSS papel picado bunting, ticket strip, event calendar,
   interactive package builder.
   ========================================================= */

.theme-paper{
  --fiesta-green: #5E7F3A;
  --fiesta-gold:  #E0A73C;
  --fiesta-pink:  #D45E78;
  --fiesta-teal:  #2E7A76;
  --ink-text:     var(--dark);
  --ink-dim:      var(--muted-ink);
  --ink-line:     rgba(33,29,25,.14);

  background:var(--cream);
  color:var(--ink-dim);
}

/* nav sits on a solid dark bar — transparent-over-cream would hide the links */
.theme-paper .nav{
  background:rgba(28,22,18,.94); backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.nav__links a.is-current{ color:var(--cream); }
.nav__links a.is-current::after{ right:0; }
.theme-paper .footer{ background:var(--ink); }

.btn--ink{ border-color:rgba(33,29,25,.5); color:var(--dark); }
.btn--ink:hover{ border-color:var(--dark); background:rgba(33,29,25,.06); }

.b-eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terracotta-d); margin:0 0 1rem;
}
.b-display{
  font-size:clamp(2.25rem,4vw,3.6rem); line-height:1.1; color:var(--ink-text);
  letter-spacing:-.01em; text-wrap:balance;
}
.b-head{ max-width:50ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.b-head p:last-child{ margin:1rem 0 0; }
.b-head--light .b-display{ color:var(--cream); }
.b-head--light p:last-child{ color:var(--text-dim); }
.b-head--light .b-eyebrow{ color:var(--accent); }

.b-section{ padding:clamp(4.5rem,10vw,7.5rem) 0; position:relative; }
.b-section--ink{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(46,28,16,.38), rgba(46,28,16,.38)), url("assets/texture-chalk.jpg");
  background-size:auto, 1120px auto;
  color:var(--text);
}

/* =========================================================
   PAPEL PICADO — pure CSS: colour stripes masked by a flag SVG
   ========================================================= */
.picado{
  position:absolute; left:0; right:0; top:90px; height:74px; z-index:2;   /* 90px = nav height */
  pointer-events:none;
}
.picado::before{                     /* the string */
  content:""; position:absolute; left:0; right:0; top:3px; height:1.5px;
  background:rgba(33,29,25,.35);
}
.picado::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--terracotta) 0 25%, var(--fiesta-gold) 25% 50%,
    var(--fiesta-green) 50% 75%, var(--fiesta-pink) 75% 100%);
  background-size:280px 100%;
  --flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 74'%3E%3Cpath fill-rule='evenodd' d='M6 3H64V58L57.5 66L51 58L44.5 66L38 58L31.5 66L25 58L18.5 66L12 58L6 66Z M35 16L44 29L35 42L26 29Z M16 14L20 19L16 24L12 19Z M54 14L58 19L54 24L50 19Z M16 38L20 43L16 48L12 43Z M54 38L58 43L54 48L50 43Z M23 50h24v3h-24z'/%3E%3C/svg%3E");
  -webkit-mask:var(--flag) 0 0 / 70px 74px repeat-x;
          mask:var(--flag) 0 0 / 70px 74px repeat-x;
  transform-origin:top; animation:sway 6s ease-in-out infinite alternate;
}
@keyframes sway{ from{ transform:skewX(-1.5deg); } to{ transform:skewX(1.5deg); } }

/* =========================================================
   HERO
   ========================================================= */
.b-hero{
  position:relative; overflow:hidden;
  padding:calc(90px + clamp(5rem,9vw,7rem)) 0 clamp(4rem,8vw,6rem);
  background:
    radial-gradient(60% 50% at 85% 30%, rgba(224,167,60,.16), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(184,79,54,.1), transparent 70%),
    var(--cream);
}
.b-hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }

.b-hero__title{
  font-size:clamp(4rem,10vw,8.5rem); line-height:.92; letter-spacing:-.02em;
  color:var(--ink-text); margin:0 0 1.5rem;
}
.b-hero__title em{ font-style:italic; color:var(--terracotta); padding-left:.6em; }
.b-hero__lede{ font-size:clamp(1rem,1.5vw,1.125rem); max-width:44ch; margin-bottom:2rem; }

.ticket{
  display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 2.25rem;
  background:var(--paper); border:1px solid var(--ink-line); border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(33,29,25,.07);
}
.ticket > div{ padding:1rem 1.15rem; }
.ticket > div + div{ border-left:1.5px dashed var(--ink-line); }
.ticket dt{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta-d); font-weight:600; margin-bottom:.3rem;
}
.ticket dd{ margin:0; color:var(--ink-text); font-size:.9rem; line-height:1.45; }

.b-hero__collage{ position:relative; aspect-ratio:1/1.02; }
.b-hero__collage img{
  position:absolute; object-fit:cover; border-radius:var(--r);
  box-shadow:0 22px 50px rgba(33,29,25,.22); border:6px solid var(--paper);
}
.b-hero__collage .c1{ width:78%; aspect-ratio:4/3; top:0; right:0; transform:rotate(2deg); }
.b-hero__collage .c2{ width:44%; aspect-ratio:3/4; left:0; top:34%; transform:rotate(-4deg); z-index:1; }
.b-hero__collage .c3{ width:56%; aspect-ratio:4/3; right:4%; bottom:0; transform:rotate(1.5deg); }
.sticker{
  position:absolute; z-index:2; right:-2%; top:44%;
  width:7.2rem; height:7.2rem; border-radius:50%; margin:0;
  display:grid; place-items:center; text-align:center;
  background:var(--fiesta-gold); color:var(--dark);
  font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.05;
  transform:rotate(12deg); box-shadow:0 10px 24px rgba(33,29,25,.25);
}

/* =========================================================
   UPCOMING NIGHTS
   ========================================================= */
.nights{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-line); }
.night-row{
  display:grid; grid-template-columns:6.5rem 1fr auto auto; align-items:center;
  gap:1.25rem clamp(1.25rem,3vw,2.5rem);
  padding:1.6rem clamp(.75rem,2vw,1.5rem); border-bottom:1px solid var(--ink-line);
  transition:background-color .25s var(--ease);
}
.night-row:hover{ background:rgba(255,250,243,.7); }
.night-row__date{ margin:0; line-height:1; color:var(--ink-text); }
.night-row__date b{ display:block; font-family:var(--serif); font-size:3rem; font-weight:500; }
.night-row__date span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.night-row h3{ font-size:clamp(1.35rem,2.2vw,1.75rem); color:var(--ink-text); margin-bottom:.3rem; }
.night-row__body p{ margin:0; font-size:.93rem; max-width:54ch; }
.night-row__tag{
  margin:0; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--fiesta-teal); border:1px solid rgba(46,122,118,.4); border-radius:99px; padding:.3rem .8rem;
}
.night-row .btn{ padding:.7rem 1.5rem; }

.night-row--feature{
  background:linear-gradient(100deg, rgba(184,79,54,.12), rgba(224,167,60,.12));
  border-radius:var(--r-sm); border-bottom-color:transparent; margin:.4rem 0;
}
.night-row--feature .night-row__date b{ color:var(--terracotta); }
.night-row--feature .night-row__tag{ color:var(--terracotta-d); border-color:rgba(173,72,49,.45); }

.flow{
  display:grid; grid-template-columns:repeat(5,1fr); margin-top:clamp(2.5rem,5vw,3.5rem);
  counter-reset:flow; position:relative;
}
.flow::before{
  content:""; position:absolute; left:10%; right:10%; top:.55rem; height:1.5px;
  background-image:linear-gradient(to right, rgba(173,72,49,.5) 0 8px, transparent 8px 14px);
  background-size:14px 1.5px;
}
.flow > div{ text-align:center; position:relative; padding-top:1.75rem; }
.flow > div::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--cream); border:2px solid var(--terracotta);
}
.flow b{ display:block; font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--ink-text); }
.flow span{ font-size:.82rem; }

/* =========================================================
   PACKAGE BUILDER
   ========================================================= */
.builder{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.builder fieldset{ border:0; margin:0; padding:0; min-width:0; }
.builder__step{
  display:flex; align-items:center; gap:.7rem; padding:0;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--cream); margin:0 0 1.1rem;
}
.builder__step span{
  display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--terracotta); color:var(--paper); font-size:.8rem; letter-spacing:0;
}

.builder__pkgs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.builder__pkgs legend{ grid-column:1 / -1; float:left; width:100%; }   /* float lets a legend join the grid */

.pick{ position:relative; cursor:pointer; display:block; }
.pick input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pick__card{
  display:flex; flex-direction:column; gap:.45rem; height:100%;
  padding:1.5rem 1.4rem; border-radius:var(--r);
  border:1.5px solid var(--line); background:rgba(247,241,232,.05);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
  position:relative;
}
.pick:hover .pick__card{ border-color:rgba(247,241,232,.35); transform:translateY(-2px); }
.pick input:focus-visible + .pick__card{ outline:2px solid var(--accent); outline-offset:3px; }
.pick input:checked + .pick__card{
  border-color:var(--accent);
  background:linear-gradient(165deg, rgba(184,79,54,.3), rgba(184,79,54,.08) 70%);
}
.pick input:checked + .pick__card::after{       /* check badge */
  content:"✓"; position:absolute; top:1.1rem; right:1.1rem;
  width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--dark); font-size:.85rem; font-weight:700;
}
.pick__flag{
  align-self:flex-start; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:var(--fiesta-gold); color:var(--dark); padding:.2rem .65rem; border-radius:99px;
}
.pick__name{ font-family:var(--serif); font-size:1.6rem; color:var(--cream); line-height:1.15; }
.pick__price{ color:var(--accent); font-weight:600; font-size:1.05rem; }
.pick__price small{ color:var(--text-dim); font-weight:400; font-size:.8rem; }
.pick__inc{ font-size:.86rem; color:var(--text-dim); line-height:1.55; }

.builder__side{ display:grid; gap:1.25rem; position:sticky; top:6rem; }
.builder__block{
  padding:1.4rem; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(247,241,232,.04);
}
.builder__block .builder__step{ margin-bottom:1rem; }

.stepper{ display:flex; align-items:center; gap:1rem; }
.stepper button{
  width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(247,241,232,.4); background:none; color:var(--cream);
  font-size:1.3rem; line-height:1; transition:border-color .2s, background-color .2s;
}
.stepper button:hover:not(:disabled){ border-color:var(--cream); background:rgba(247,241,232,.08); }
.stepper button:disabled{ opacity:.3; cursor:not-allowed; }
.stepper output{ font-family:var(--serif); font-size:2.2rem; color:var(--cream); min-width:2.5ch; text-align:center; }
.builder__hint{ margin:.75rem 0 0; font-size:.82rem; color:var(--text-dim); }

.extra{
  display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center;
  padding:.6rem 0; border-bottom:1px solid var(--line); cursor:pointer;
  font-size:.9rem; color:var(--text);
}
.extra:last-child{ border-bottom:0; }
.extra input{ width:1.1rem; height:1.1rem; accent-color:var(--terracotta); margin:0; }
.extra b{ color:var(--accent); font-weight:600; font-size:.85rem; }

.summary{
  background:var(--paper); color:var(--muted-ink);
  border-radius:var(--r); padding:1.6rem; text-align:center;
}
.summary__night{
  display:inline-block; margin:0 0 1rem; font-size:.75rem; font-weight:600;
  color:var(--fiesta-teal); border:1px solid rgba(46,122,118,.4); border-radius:99px; padding:.3rem .9rem;
}
.summary__label{ margin:0; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.summary__total{ font-family:var(--serif); font-size:2.6rem; color:var(--dark); margin:.15rem 0 .5rem; line-height:1.1; }
.summary__note{ font-size:.75rem; margin-bottom:1.25rem; }
.summary .btn{ width:100%; }

/* =========================================================
   STRIP + CLOSE
   ========================================================= */
.b-strip{ display:grid; grid-template-columns:1.3fr .8fr 1.3fr 1fr .8fr; height:clamp(180px,24vw,320px); }
.b-strip img{ width:100%; height:100%; object-fit:cover; }

.b-close{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.b-quote{ margin:0; }
.b-quote p{
  font-family:var(--serif); font-style:italic; font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.15; color:var(--ink-text); margin:0 0 1rem; text-wrap:balance;
}
.b-quote footer{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta-d); }
.b-contact{
  background:var(--paper); border:1px solid var(--ink-line); border-radius:var(--r);
  padding:clamp(1.75rem,3.5vw,2.5rem);
}
.b-contact h2{ font-size:1.75rem; color:var(--ink-text); margin-bottom:.6rem; }
.b-contact p{ font-size:.95rem; }
.b-contact__phone{
  font-family:var(--serif); font-size:1.6rem; color:var(--dark);
  text-decoration:none; border-bottom:1px solid rgba(33,29,25,.3);
}
.b-contact__phone:hover{ color:var(--terracotta-d); border-color:var(--terracotta-d); }
.b-contact .social{ margin:1.1rem 0 0; }
.b-contact .social a{ color:var(--terracotta-d); }
.b-contact .social a:hover{ color:var(--dark); background:rgba(33,29,25,.06); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .builder{ grid-template-columns:1fr; }
  .builder__side{ position:static; grid-template-columns:1fr 1fr; }
  .summary{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .b-hero__grid,.b-close{ grid-template-columns:1fr; }
  .b-hero__collage{ max-width:560px; width:100%; margin-inline:auto; }
  .night-row{ grid-template-columns:5rem 1fr; }
  .night-row__tag{ grid-column:2; justify-self:start; }
  .night-row .btn{ grid-column:2; justify-self:start; }
  .b-strip{ grid-template-columns:repeat(3,1fr); }
  .b-strip img:nth-child(n+4){ display:none; }
}
@media (max-width:640px){
  .ticket{ grid-template-columns:1fr; }
  .ticket > div + div{ border-left:0; border-top:1.5px dashed var(--ink-line); }
  .builder__pkgs,.builder__side{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; gap:1rem; text-align:left; }
  .flow::before{ left:.55rem; right:auto; top:.5rem; bottom:.5rem; width:1.5px; height:auto;
    background-image:linear-gradient(to bottom, rgba(173,72,49,.5) 0 8px, transparent 8px 14px); background-size:1.5px 14px; }
  .flow > div{ text-align:left; padding:0 0 0 2.25rem; }
  .flow > div::before{ left:0; transform:none; }
  .flow b{ display:inline; margin-right:.6rem; font-size:1.15rem; }
  .sticker{ width:5.5rem; height:5.5rem; font-size:.85rem; right:0; }
  .hero__actions .btn{ flex:1 1 100%; }
  .picado{ height:56px; }
  .picado::after{ -webkit-mask-size:53px 56px; mask-size:53px 56px; background-size:212px 100%; }
}
@media (prefers-reduced-motion:reduce){
  .picado::after{ animation:none; }
}