.listing-page { overflow: clip; padding-bottom: var(--space-80); }
.listing-page section { padding-block: var(--space-40); }
.editorial-breadcrumb { padding-block: var(--space-24); }
.editorial-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.editorial-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-8); color: var(--color-neutral-300); }
.editorial-breadcrumb a { text-decoration: none; }
.editorial-breadcrumb [aria-current="page"] { color: var(--color-text-muted); }

.listing-hero { padding-block: clamp(var(--space-40), 8vw, var(--space-80)); }
.listing-hero h1 { max-width: 16ch; font-size: clamp(40px, 7vw, 76px); }
.listing-hero > p:last-of-type { max-width: 64ch; margin-top: var(--space-16); color: var(--color-text-muted); font-size: clamp(18px, 2vw, 22px); }
.listing-hero .btn { margin-top: var(--space-24); }
.listing-section > p { max-width: 68ch; color: var(--color-text-muted); }
.listing-section > h3 { margin: var(--space-60) 0 var(--space-24); }

.listing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.listing-card,
.listing-feature { width: 100%; min-width: 0; overflow: hidden; background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.listing-card { display: flex; flex-direction: column; padding: var(--space-24); border-top: 4px solid var(--listing-color, var(--color-primary-light)); }
.listing-card > p:not(.eyebrow) { color: var(--color-text-muted); }
.listing-card > :last-child { margin-top: auto; }
.listing-status { display: inline-flex; width: fit-content; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-neutral-100); color: var(--color-text-muted); font-size: var(--text-xs); }
.editorial-text-link { font-weight: 600; }

.listing-month-card { padding: 0; border-top: 0; }
.listing-month-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.listing-month-card > div { display: flex; flex: 1; flex-direction: column; padding: var(--space-24); }
.listing-month-card > div > p:not(.eyebrow) { color: var(--color-text-muted); }
.listing-month-card > div > :last-child { margin-top: auto; }

.listing-feature { display: grid; }
.listing-feature img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.listing-feature > div { padding: var(--space-32); }
.listing-feature .btn,
.listing-feature .editorial-text-link { margin-top: var(--space-16); }
.listing-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-24); }
.listing-filters span { padding: 8px 14px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-pill); color: var(--color-text-muted); }
.listing-note { margin-top: var(--space-24); color: var(--color-text-muted); }
.listing-cta { margin-top: var(--space-60); padding-inline: var(--space-24); text-align: center; background: var(--color-primary-pale); border-radius: var(--radius-lg); }
.listing-cta .btn { margin-top: var(--space-16); }
.listing-page--ods8 .listing-hero { border-top: 6px solid #A21942; }

@media (min-width: 640px) {
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-feature { grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); }
}

@media (min-width: 1024px) {
  .listing-grid--months,
  .listing-grid--categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}