/* Ambridge.biz — page-level layout.
   Mobile-first: base styles are for phone. One media query at 768px+
   for tablet and up. */

/* ============================================================
   App shell
   ============================================================ */
.app {
  max-width: 100%;
  background: var(--bg);
}
.container { padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.section + .section { padding-top: var(--space-8); }

/* ============================================================
   Top strip (persistent time + open count + map link)
   ============================================================ */
.top-strip {
  background: var(--ink); color: white;
  padding: 10px var(--space-4);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm);
}
.top-strip__left {
  display: flex; align-items: center; gap: var(--space-2);
}
.top-strip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  box-shadow: 0 0 0 2.5px rgba(230,180,35,0.32);
}
.top-strip__link {
  opacity: 0.9; color: white;
  display: inline-flex; align-items: center; gap: 5px;
}
.top-strip__link:hover { color: white; opacity: 1; }

/* ============================================================
   Main site header (wordmark + hamburger)
   ============================================================ */
.site-header {
  padding: var(--space-4) var(--space-5) 14px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  border-bottom: var(--border-thick) solid var(--ink);
}
.site-header .wordmark { font-size: 26px; }
.site-nav { display: none; }
.site-header__menu { display: inline-flex; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: var(--space-8) var(--space-5) var(--space-2); }
.hero__eyebrow { margin-bottom: 14px; }
.hero h1 {
  font-size: var(--text-3xl);
  line-height: 1.02;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.hero h1 .highlight {
  background: var(--accent); padding: 0 4px;
}
.hero p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   Prompt CTA (two tiles: Open near me / Browse ideas)
   ============================================================ */
.prompt-cta { padding: var(--space-6) var(--space-5) var(--space-2); }
.prompt-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.prompt-cta__tile {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  min-height: 76px;
  border: var(--border-thin) solid var(--ink);
  text-decoration: none;
}
.prompt-cta__tile.primary { background: var(--ink); color: white; }
.prompt-cta__tile.secondary { background: var(--paper); color: var(--ink); }
.prompt-cta__label {
  font-size: 10px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; font-weight: 700;
}
.prompt-cta__title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
}

/* ============================================================
   Open Now / Business list
   ============================================================ */
.list-section {
  padding: var(--space-8) 0 var(--space-3);
}
.list-section .container { padding: 0 var(--space-5); }
.list-section .section-header { margin: 0 var(--space-5) var(--space-4); }
.list-section .chip-row { padding: 0 var(--space-5) var(--space-4); }
.list-section .cards {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 var(--space-5);
}

/* ============================================================
   Discovery collections list (mobile: single column)
   ============================================================ */
.discovery { padding: var(--space-10) 0 var(--space-2); }
.discovery .section-header { margin: 0 var(--space-5) var(--space-4); }
.discovery__tiles {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 var(--space-5);
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust { padding: var(--space-8) var(--space-5) var(--space-2); }
.trust__card { padding: var(--space-5); }
.trust__headline {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  margin-bottom: var(--space-2); line-height: 1.2;
}
.trust__body {
  color: var(--ink-2); font-size: 13px;
  line-height: var(--leading-normal); margin-bottom: 14px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: var(--space-8) var(--space-5) var(--space-10);
  color: var(--ink-3); font-size: var(--text-sm);
  border-top: var(--border-thick) solid var(--ink);
  margin-top: var(--space-8);
  text-align: center;
}
.site-footer .wordmark {
  font-size: 18px; color: var(--ink);
  margin-bottom: var(--space-1);
  display: block;
}
.site-footer__links {
  display: flex; justify-content: center; gap: var(--space-5);
  margin-top: var(--space-3);
}
.site-footer__links a { color: var(--ink-2); }

/* ============================================================
   Loading state (before CSV arrives)
   ============================================================ */
.loading {
  padding: var(--space-8) var(--space-5);
  color: var(--ink-3);
  text-align: center;
}

/* ============================================================
   Tablet and up (768px+)
   ============================================================ */
@media (min-width: 768px) {
  .app {
    max-width: var(--page-max);
    margin: 0 auto;
    background: var(--bg);
  }
  main > .view:not(#view-map),
  .top-strip,
  .site-header,
  .site-footer {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }
  .hero { padding: 64px var(--space-6) 36px; }
  .hero h1 { font-size: var(--text-5xl); }
  .hero p { font-size: var(--text-lg); max-width: 620px; }
  .list-section .cards,
  .discovery__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .collection-members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .detail-blurb { max-width: 60ch; }
  .hours-list { max-width: 480px; }
  .site-nav {
    display: flex;
    gap: var(--space-6);
    align-items: center;
  }
  .site-nav a {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 8px;
  }
  .site-nav a:hover { text-decoration: underline; }
  .site-header__menu { display: none; }
  .container { padding: 0 var(--space-6); }
}