/*
 * Never Bored CMS: the few styles built pages need beyond css/site.css.
 * Written by the CMS build to /assets/nbcms.css and linked after site.css.
 * At cutover these rules can move into css/site.css and this file can go.
 */

/* The main card grids (homepage, All guides, categories): smaller cards, four
   across on desktop, three on tablets, two on phones. Cards keep their own
   height (a tall reel card next to a shorter guide card), instead of the short
   ones being stretched with empty space. The curated strips are unchanged. */
.card-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 0.75rem);
  align-items: start;
}

@media (min-width: 640px) {
  .card-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5, 1.5rem);
  }
}

@media (min-width: 1000px) {
  .card-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Reel cards: the whole vertical reel frame fills the card, uncropped. */
.card--portrait .card-media img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
}

/* Article pages built by the CMS: pieces the hand-written guides never needed. */
.article-figure--wide { max-width: none; }
.article-figure--wide img { aspect-ratio: auto; }
.faq { margin: var(--space-5, 1.5rem) 0; }
.faq-item { border: 1px solid var(--color-border, #ecdfd0); border-radius: var(--radius-md, 14px); background: var(--color-surface, #fff); padding: 0 var(--space-4, 1rem); margin-bottom: var(--space-2, .5rem); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: var(--space-3, .75rem) 0; }
.faq-item p { margin: 0 0 var(--space-3, .75rem); }
.article-tags { font-size: .9rem; color: var(--color-ink-soft, #4b5563); margin: var(--space-5, 1.5rem) 0; }
.article-tags a { text-decoration: underline; }
.related { margin: var(--space-6, 2rem) 0; }
.related h2 { margin-bottom: var(--space-4, 1rem); }
.ad-slot--live { min-height: 280px; border: 0; background: transparent; }
.disclosure { font-size: .9rem; color: var(--color-ink-soft, #4b5563); margin: var(--space-3, .75rem) 0 0; }
.filter-status { text-align: center; color: var(--color-ink-soft, #4b5563); font-size: .9rem; min-height: 1.4em; margin: var(--space-4, 1rem) 0 0; }
.filter-status:empty { margin: 0; min-height: 0; }
.filter-more[hidden] { display: none; }

/* Map teaser on the homepage: a still picture inside a link */
.map-teaser { display: block; position: relative; border-radius: var(--radius-lg, 18px); overflow: hidden; border: 1px solid var(--color-border, #ecdfd0); background: var(--color-surface, #fff); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); }
.map-teaser:hover .map-teaser-cta .btn, .map-teaser:focus-visible .map-teaser-cta .btn { transform: translateY(-1px); }
.map-teaser-tiles { display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #e8ebe4; pointer-events: none; }
.map-teaser-tiles img { position: absolute; display: block; object-fit: cover; }
.map-teaser-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--color-accent, #e8603c); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.map-teaser-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 55%); }
.map-teaser-attribution { position: absolute; right: 0; bottom: 0; display: block; white-space: nowrap; font-size: .65rem; line-height: 1.3; padding: .15rem .4rem; background: rgba(255,255,255,.8); color: #333; }
.map-teaser-attribution a { color: inherit; display: inline; }
@media (max-width: 640px) { .map-teaser-tiles { aspect-ratio: 4 / 3; } }

/* The map page */
.map-filters { margin-bottom: var(--space-4, 1rem); }
.map-filters .filter-bar { margin-bottom: var(--space-3, .75rem); }
.filter-btn--tag { font-weight: 500; }
.map-filter-note { margin: 0 0 var(--space-4, 1rem); color: var(--color-ink-soft, #4b5563); font-size: .9rem; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; margin-left: .5rem; color: var(--color-accent, #e8603c); text-decoration: underline; cursor: pointer; }
.map-frame { border-radius: var(--radius-lg, 18px); overflow: hidden; border: 1px solid var(--color-border, #ecdfd0); margin-bottom: var(--space-6, 2rem); background: #e8ebe4; }
.map-canvas { height: min(70vh, 640px); min-height: 360px; }
.map-canvas .leaflet-popup-content { margin: .6rem .8rem; font: inherit; }
.map-popup-img { display: block; width: 200px; height: auto; max-height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: .4rem; }
.map-popup-title { display: block; font-size: 1rem; line-height: 1.3; }
.map-popup-place { display: block; color: #4b5563; font-size: .85rem; margin-top: .25rem; }
.map-unavailable { padding: var(--space-6, 2rem); text-align: center; color: var(--color-ink-soft, #4b5563); margin: 0; }
.map-results-heading { font-size: 1.25rem; margin-bottom: var(--space-4, 1rem); }