/* =====================================================================
   Your Pet's Health Clinic — landing.css
   Public one-page site. Reuses the sky-blue tokens from themes.css.
   MOBILE-FIRST: single column (unchanged). DESKTOP: full-bleed hero +
   two-column layout (main content + sticky info sidebar), see bottom.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: var(--accent-deep); }
button { font-family: inherit; cursor: pointer; }

.lp { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px; }

/* ---- Hero (full-bleed banner) --------------------------------------- */
.lp-hero {
  position: relative;
  padding: 40px 16px 34px;
  background: linear-gradient(160deg, var(--sky-500), var(--sky-700));
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.lp-hero::after {
  content: "";
  position: absolute; right: -60px; bottom: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.lp-hero .logo {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 20px; background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
}
.lp-hero .logo svg { width: 34px; height: 34px; }
.lp-hero h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.lp-hero .tag { margin: 6px 0 0; font-size: 15px; color: var(--sky-100); }
.lp-hero .founder { margin: 14px auto 0; max-width: 460px; font-size: 14px; color: rgba(255,255,255,.9); }

.status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 7px 16px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 700; background: #fff;
}
.status-badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-badge.open   { color: var(--ok); }
.status-badge.open .dot   { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.status-badge.closed { color: var(--urgent); }
.status-badge.closed .dot { background: var(--urgent); box-shadow: 0 0 0 3px var(--urgent-soft); }

/* ---- Quick actions -------------------------------------------------- */
.quick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 20px auto 0; max-width: 440px;
}
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.quick a:hover { background: rgba(255, 255, 255, .24); }
.quick a svg { width: 20px; height: 20px; }

/* ---- Layout scaffold ------------------------------------------------ */
.lp-grid { margin-top: 24px; }
.lp-section { margin-top: 24px; }
.lp-main > .lp-section:first-child { margin-top: 0; }

.lp-section > h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; margin: 0 0 14px;
}
.lp-section > h2 svg { width: 19px; height: 19px; color: var(--accent); }

.lp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}

/* ---- Announcements -------------------------------------------------- */
.notice { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.notice + .notice { margin-top: 14px; }
.notice.vacation { border-color: #fcd34d; }
.notice.closure  { border-color: #fca5a5; }
.notice .n-body { padding: 16px; }
.notice-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; text-transform: capitalize; margin-bottom: 8px;
}
.notice-kind svg { width: 13px; height: 13px; }
.notice-kind.general  { background: var(--sky-100); color: var(--accent-deep); }
.notice-kind.flyer    { background: #ede9fe; color: #6d28d9; }
.notice-kind.vacation { background: var(--warn-soft); color: var(--warn); }
.notice-kind.closure  { background: var(--urgent-soft); color: var(--urgent); }
.notice h3 { margin: 0 0 4px; font-size: 16px; }
.notice p  { margin: 0; color: var(--slate-700); white-space: pre-wrap; }
.notice .n-date { margin-top: 10px; font-size: 12px; color: var(--text-faint); }
.notice img.flyer { width: 100%; display: block; background: var(--sky-50); }

.empty-notices {
  text-align: center; padding: 28px 16px; color: var(--text-faint);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--card);
}
.empty-notices svg { width: 28px; height: 28px; color: var(--sky-300); margin-bottom: 6px; }

/* ---- Find us / map -------------------------------------------------- */
.map-embed {
  border: 0; width: 100%; height: 240px; display: block;
  border-radius: var(--r-md); margin-bottom: 14px; background: var(--sky-50);
}
.addr-line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.addr-line svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent-deep); color: #fff; font-weight: 600; text-decoration: none;
}
.btn-link:hover { background: var(--sky-800); }
.btn-link svg { width: 16px; height: 16px; }

/* ---- Hours ---------------------------------------------------------- */
table.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
table.hours td { padding: 10px 4px; border-top: 1px solid var(--sky-50); }
table.hours tr:first-child td { border-top: 0; }
table.hours td.day { color: var(--slate-700); }
table.hours td.time { text-align: right; color: var(--text-muted); }
table.hours td.closed { color: var(--urgent); font-weight: 600; }
table.hours tr.today td { font-weight: 700; color: var(--accent-deep); }
table.hours tr.today { background: var(--sky-50); }

/* ---- Contact -------------------------------------------------------- */
.contact-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; }
.contact-row + .contact-row { border-top: 1px solid var(--sky-50); }
.contact-row .ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex: none; }
.contact-row .ic svg { width: 18px; height: 18px; }
.contact-row a { text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-row .lbl { font-size: 12px; color: var(--text-faint); }

/* ---- Footer --------------------------------------------------------- */
.lp-footer {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
  text-align: center; font-size: 13px; color: var(--text-faint);
}
.lp-footer a { color: var(--text-muted); }

/* =====================================================================
   DESKTOP — full-bleed hero + two-column (main + sticky sidebar)
   ===================================================================== */
@media (min-width: 680px) {
  .lp-hero { padding: 56px 24px 44px; }
  .lp-hero h1 { font-size: 34px; }
  .lp-hero .tag { font-size: 17px; }
  .map-embed { height: 300px; }
}

@media (min-width: 900px) {
  .lp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 32px;
  }
  .lp-main > .lp-section:first-child,
  .lp-aside > .lp-section:first-child { margin-top: 0; }
  .lp-main > .lp-section + .lp-section { margin-top: 28px; }

  /* sidebar tracks the scroll so hours + contact stay in view */
  .lp-aside {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .lp-aside .lp-section { margin-top: 0; }

  .map-embed { height: 340px; }
}