/* Compact discovery and a consistent hierarchy, without changing event artwork. */
[hidden] { display: none !important; }
.hero-section { height: clamp(340px, 48vw, 480px); min-height: 0; max-height: none; }
.hero-image-content { top: auto; bottom: 3rem; max-width: 760px; }
.hero-title { max-width: none; font-size: clamp(3.5rem, 7vw, 6rem); line-height: .98; }
.hero-description { max-width: 46ch; margin-top: 1rem; font-size: 1.05rem; color: var(--text); }
.hero-video-toggle { margin-top: 1rem; padding: .5rem .75rem; border: 1px solid #a6a3ad; background: #07080fcc; color: white; cursor: pointer; font: inherit; }
.hero-social-links { display: none; }
.det-hero { height: 400px; min-height: 0; }
.search-section { position: relative; top: auto; backdrop-filter: none; }
.search-filter-btn { display: flex; gap: .6rem; align-items: center; width: auto; padding: .75rem 1rem; font: inherit; }
.search-filters { gap: 1rem; padding-block: 1rem; align-items: flex-start; }
.quick-date-pills { margin-top: 1rem; }
.reaction-filters-hint { display: none; }
.section-title { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.grid > .card, .grid > .card:nth-child(6n + 1), .grid > .card:nth-child(6n + 2) { grid-column: span 4; }
.card-content { display: flex; flex-direction: column; }
.card-date-line { color: var(--cyan); font-size: .9rem; margin-bottom: .65rem; }
.card-title { font-size: 1.8rem; line-height: 1.05; }
.card-footer { margin-top: auto; padding-top: 1rem; }
.card-more { padding: .7rem 1rem; border-top: 1px solid #ffffff20; }
.card-more summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; }
.card-more .btn-share-wa { position: static; display: inline-flex; margin: .5rem; }
.card-more .btn-going { margin-top: .5rem; }
.event-scope-label { display: flex; gap: .5rem; align-items: center; color: var(--text-muted); font-size: .9rem; }
#event-scope { color: var(--text); background: var(--bg-card); border: 1px solid #ffffff30; padding: .6rem; font: inherit; }
.styles-grid { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid #ffffff30; }
.styles-grid .style-card, .styles-grid .style-card:last-child { flex: 1 1 180px; display: flex; align-items: center; justify-content: space-between; aspect-ratio: auto; min-height: 80px; height: auto; padding: 1.25rem; color: var(--text); background: none; border: 0; border-bottom: 1px solid #ffffff30; font: 700 1.5rem var(--font-display); text-align: left; cursor: pointer; }
.styles-grid .style-card:hover { background: var(--bg-surface); color: var(--cyan); transform: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 1024px) {
 .grid > .card, .grid > .card:nth-child(6n + 1), .grid > .card:nth-child(6n + 2) { grid-column: span 6; }
}
@media (max-width: 768px) {
 .hero-section { height: 380px; }
 .det-hero { height: 320px; min-height: 0; }
 .hero-image-content { top: auto; bottom: 2rem; }
 .hero-title { font-size: clamp(3rem, 12vw, 4.5rem); }
 .hero-description { font-size: .95rem; max-width: 32ch; }
 .grid > .card, .grid > .card:nth-child(6n + 1), .grid > .card:nth-child(6n + 2) { grid-column: 1 / -1; }
 .sort-controls { flex-wrap: wrap; justify-content: flex-start; gap: .7rem; }
}