/* CampWatch signature element: the "opening" card (site number, loop, exact nights, a big Book button).
   Classes are prefixed cw-. Colors come from the theme tokens; nothing here restyles .btn or .card. */

.cw-opening {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1.25rem;
  align-items: start;
  padding: 1rem 1.25rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand, var(--primary));
  border-radius: var(--radius);
}
.cw-opening + .cw-opening { margin-top: 0.75rem; }
.cw-site { display: grid; justify-items: start; min-width: 4rem; gap: 0.25rem; }
.cw-site-label { font-size: 0.8125rem; color: var(--muted-foreground); letter-spacing: 0.04em; text-transform: uppercase; }
.cw-site-no { font-family: var(--font-heading, serif); font-weight: 600; font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cw-detail > * { margin: 0; }
.cw-detail > * + * { margin-top: 0.125rem; }
.cw-where { font-weight: 600; }
.cw-nights { font-size: 1.125rem; font-weight: 500; }
.cw-book { grid-column: 1 / -1; }
.cw-book .btn { width: 100%; justify-content: center; min-height: 2.75rem; }
@media (min-width: 640px) {
  .cw-opening { grid-template-columns: auto 1fr auto; }
  .cw-book { grid-column: auto; align-self: center; }
  .cw-book .btn { width: auto; }
}

/* Month rows on a campground page */
.cw-months { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.cw-months li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }

/* Optional extra campgrounds on the watch form */
.cw-also { display: grid; gap: 0.5rem; }
.cw-also label { display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; }
.cw-search { display: flex; gap: 0.5rem; }
.cw-search .input { flex: 1; min-width: 0; }

/* State and park link lists on the directory pages */
.cw-states { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1.5rem; }
.cw-states li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 0.5rem; min-height: 2.75rem; align-items: center; }