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

/* Header, buttons, kicker, newsletter, footer, and the photo hero +
   date/countdown strip all moved to shared.css — one source of
   truth for all pages (2026-07-13). */

/* -- Category cards -------------------------------------------- */
.explore{padding:58px 34px 30px;max-width:1010px;margin:0 auto}
.explore h2,.tip h2{
  font-size:var(--fs-h2);font-weight:var(--fw-h2);text-align:center;margin-bottom:34px;
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.card{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:26px 22px 22px;text-decoration:none;color:var(--op-ink);display:block;
  border-top:7px solid var(--card-c, var(--op-ocean));transition:transform .15s;
}
.card:nth-child(odd){transform:rotate(-1.1deg)}
.card:nth-child(even){transform:rotate(1.1deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.card .ico{font-size:2.1rem;display:block;margin-bottom:10px}
.card h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);margin-bottom:8px}
.card p{
  font-size:var(--fs-small);line-height:1.55;margin-bottom:14px;
  color:color-mix(in srgb, var(--op-ink) 75%, transparent);
}
.card .go{font-weight:900;font-size:.92rem;color:var(--card-c, var(--op-ocean))}

/* -- Local tip -------------------------------------------------- */
.tip{background:color-mix(in srgb, var(--op-ocean) 12%, var(--op-foam));margin-top:52px;padding:48px 34px;text-align:center}
.tip h2{margin-bottom:18px}
.tip blockquote{
  max-width:640px;margin:0 auto;background:var(--op-white);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:26px 30px;
  font-size:1.1rem;font-weight:700;line-height:1.6;transform:rotate(-.6deg);
}
.tip blockquote footer{margin-top:10px;font-size:.85rem;font-weight:800;color:var(--op-palm)}

/* Newsletter band and footer: see shared.css (shared chrome). */