/* ============================================================
   oceanparksm.com — /stay/ page styles
   References shared.css tokens ONLY: no raw colors, no
   font-family, no raw type sizes. Tints via color-mix().
   ============================================================ */

/* Photo hero + date/countdown strip: see shared.css (shared across all pages).
   This page adds the .hero-overlap modifier for extra bottom clearance
   (the booking card below overlaps the hero by -74px). */

/* -- Booking search card (recycled from design proposal V2) ----- */
.book{max-width:920px;margin:-74px auto 0;padding:0 24px;position:relative}
.book-card{
  background:var(--op-white);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:26px 28px;
}
.book-card h2{
  font-size:var(--fs-h3);font-weight:var(--fw-h3);margin-bottom:16px;
}
.book-form{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;
}
@media (max-width:760px){ .book-form{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .book-form{grid-template-columns:1fr} }
.book-field label{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--op-ocean);margin-bottom:6px;
}
.book-field input{
  font-family:inherit;font-size:1rem;font-weight:700;width:100%;
  padding:12px 14px;border-radius:12px;color:var(--op-ink);
  border:2px solid color-mix(in srgb, var(--op-ink) 18%, transparent);
  background:var(--op-foam);
}
.book-form button{
  font-family:inherit;cursor:pointer;border:none;
}
.disclosure-inline{
  font-size:var(--fs-small);margin-top:14px;
  color:color-mix(in srgb, var(--op-ink) 65%, transparent);
}

/* -- Pick sections ---------------------------------------------- */
.picks{padding:56px 34px 30px;max-width:1010px;margin:0 auto}
.picks h2{
  font-size:var(--fs-h2);font-weight:var(--fw-h2);text-align:center;margin-bottom:34px;
}
.band{
  background:color-mix(in srgb, var(--op-ocean) 12%, var(--op-foam));
  margin-top:40px;padding-top:8px;padding-bottom:48px;max-width:none;
}
.band > .band-inner{max-width:1010px;margin:0 auto;padding:48px 34px 0}
.band .picks{padding-top:0}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.pick{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:24px 22px;border-top:7px solid var(--pick-c, var(--op-ocean));
  display:flex;flex-direction:column;gap:10px;
}
.pick h3{font-size:var(--fs-h3);font-weight:var(--fw-h3)}
.pick .band-tag{
  font-size:.8rem;font-weight:900;letter-spacing:.12em;color:var(--op-ocean);
}
.pick p{
  font-size:var(--fs-small);line-height:1.55;
  color:color-mix(in srgb, var(--op-ink) 75%, transparent);
}
/* -- Live webcams -------------------------------------------------- */
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--op-palm);margin-right:8px;
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
.pick .go{
  margin-top:auto;font-weight:900;font-size:.92rem;text-decoration:none;
  color:var(--pick-c, var(--op-ocean));
}

/* -- Upcoming article stubs -------------------------------------- */
.stubs{padding:26px 34px 64px;max-width:1010px;margin:0 auto}
.stub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.stub{
  border:2px dashed color-mix(in srgb, var(--op-ink) 30%, transparent);
  border-radius:var(--radius-card);padding:22px;
  color:color-mix(in srgb, var(--op-ink) 70%, transparent);
}
.stub h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);margin-bottom:6px;color:var(--op-ink)}
.stub .soon{
  display:inline-block;margin-top:10px;font-size:.8rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--op-palm);
}