/* ============================================================
   BASE & FORMS
   ============================================================ */
a, button, label, select {
    cursor: pointer;
}

.form-error {
    font-size: 0.75rem;
    color: #ef4444; /* Rouge */
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[data-button-dropdown-container] {
    position: absolute;
    right: 0;
    transform: translate(0, 4px);
    min-width: max-content;
    z-index: 50;
}

[data-button-dropdown] svg:last-of-type {
    transition: transform 0.2s;
}

[data-button-dropdown][aria-expanded="true"] svg:last-of-type {
    transform: rotate(180deg);
}

.d-none {
    display: none;
}

.min-h-\[calc\(100vh-120px\)\] {
    min-height: calc(100vh - 120px);
}

:root {
    --header-h: calc(7.25rem + 1px);
}
@media (min-width: 48rem) {
    :root {
        --header-h: calc(4rem + 1px);
    }
}
.hero-viewport {
    min-height: calc(100dvh - var(--header-h));
}

/* Sticky-header offset for in-page anchors (#editeur, #cgu, #privacy…): without this the
   sticky header overlaps the targeted heading. Reuses --header-h so it tracks the real
   header height at every breakpoint. */
html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (width >= 40rem) {
    .sm\:p-8 {
        padding: calc(var(--spacing) * 8);
    }
}

.align-content-end {
    align-content:flex-end;
}

.border-amber-500\/20 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
}

.bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
}

.text-amber-500 {
    color: var(--color-amber-500);
}

:root {
    --accent: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
    --accent-foreground: var(--color-orange-500);
    --chart-3: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
}

/* ============================================================
   MAP, MARKERS & SCROLLBARS
   ============================================================ */
/* Marker clusters: override the plugin's green/yellow/orange theme with the map's flat brand orange */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(249, 115, 22, 0.35);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(249, 115, 22, 0.85);
}
.marker-cluster span {
    color: #fff;
    font-weight: 600;
}

/* Flat pin on a dark map: ground shadow anchors it + thin dark edge defines it.
   Scoped to img so cluster divIcons keep their flat fill. */
img.leaflet-marker-icon {
    filter:
        drop-shadow(1px 0 0 #5b1f08)
        drop-shadow(-1px 0 0 #5b1f08)
        drop-shadow(0 1px 0 #5b1f08)
        drop-shadow(0 -1px 0 #5b1f08)
        drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
}

.scrollbar-custom::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #c2410c, #ea580c, #f59e0b);
    border-radius: 10px;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #9a3412, #c2410c, #ea580c);
}

.leaflet-tile-pane {
    filter: invert(1) hue-rotate(200deg) saturate(1) brightness(2) contrast(0.9);
}

.leaflet-container .leaflet-control-attribution a {
    color: var(--color-amber-500);
}

.leaflet-container .leaflet-control-attribution {
    background: none;
}

.leaflet-container {
    background: none;
}

.map-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    z-index: 1;
}

.map-container-all {
    height: 500px;
}

/* Firefox */
.scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: #ea580c rgba(0, 0, 0, 0.1);
}



/* ============================================================
   TOM SELECT (venue multiselect)
   ============================================================ */
/* Conteneur principal Tom Select */
.ts-wrapper {
    position: relative;
    width: 100%;
    display: block !important;
}

/* Input/Control principal */
.ts-control {
    background-color: var(--input-background) !important;

    border-color: var(--input);
    border-style: solid;
    border-width: 0;

    border-radius: var(--radius);

    min-height: calc(var(--spacing)*9);
    padding: calc(var(--spacing)*1) calc(var(--spacing)*3) !important;
    padding-right: 2.5rem !important;
    font-size: var(--text-sm) !important;
    line-height: var(--text-sm--line-height) !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

.ts-dropdown, .ts-control, .ts-control input {
    color: inherit !important;
    cursor: pointer !important;
}

.has-items .ts-control > input {
    margin: 7px 0 3px 0 !important;
}

.ts-control input {
    width: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    font-size: var(--text-sm);
}

.has-items .ts-control input {
    padding-inline: calc(var(--spacing) * 1) !important;
}

.ts-control:hover, .ts-control:focus {
    border-color: rgba(234, 88, 12, 0.4) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: rgba(234, 88, 12, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1) !important;
}

/* Item sélectionné dans le control - style genre */
.ts-control .item {
    background: rgba(234, 88, 12, 0.1) !important;
    color: #ea580c !important;
    border: none !important;

    padding: 0.25rem 2px 0.25rem 0.6rem !important;
    border-radius: calc(var(--radius) - 2px);
    margin: 0.125rem 0.25rem 0.125rem 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.ts-control .item:hover {
    background: rgba(234, 88, 12, 0.15) !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove,
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
    border-left: 1px solid color-mix(in oklab, var(--color-orange-500) 10%, transparent);
}

.ts-wrapper.plugin-remove_button .item .remove {
    font-size: 13px;
    padding: 0 6px 0 4px;
    margin-left: 6px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
    padding-right: 2px !important;
}

/* Control en mode multiple avec wrapping */
.ts-wrapper.multi .ts-control {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    overflow-x: hidden !important;
}

.ts-wrapper.multi .ts-control > div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    overflow-x: hidden !important;
}

/* Dropdown menu */
.ts-dropdown {
    background-color: #0A0A0F !important;
    background-color: var(--background, #0A0A0F) !important;
    border: 1px solid rgba(234, 88, 12, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(234, 88, 12, 0.1);
    margin-top: 0.25rem;
    padding: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

/* Dropdown content */
.ts-dropdown-content {
    padding: 0;
}

/* Options dans le dropdown */
.ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    color: var(--foreground);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s;
    font-size: 0.875rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
}

.ts-dropdown .option.selected {
    background: linear-gradient(to right, #c2410c, #ea580c, #f59e0b);
    color: white;
    font-weight: 500;
}

.ts-dropdown .option.selected:hover {
    background: linear-gradient(to right, #c2410c, #ea580c, #f59e0b);
    opacity: 0.9;
}

/* Message "Aucun résultat" */
.ts-dropdown .no-results {
    padding: 0.75rem;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Flèche du dropdown */
.ts-control::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    border: 0;
    transition: transform 0.2s;
}

.ts-wrapper.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Input de recherche dans le dropdown */
.ts-dropdown .ts-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 88, 12, 0.3) transparent;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: rgba(234, 88, 12, 0.3);
    border-radius: 3px;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(234, 88, 12, 0.5);
}

/* Loading state */
.ts-wrapper.loading .ts-control::after {
    content: '';
    border: 2px solid rgba(234, 88, 12, 0.2);
    border-top-color: #ea580c;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
    .ts-dropdown {
        max-height: 250px;
    }
}

/* Focus visible pour l'accessibilité */
.ts-wrapper:focus-within .ts-control {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Animation d'apparition du dropdown */
.ts-dropdown {
    animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style pour le input de recherche dans dropdown */
.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: #ea580c;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Placeholder personnalisé */
.ts-control .placeholder {
    color: var(--muted-foreground);
}

/* ============================================================
   MODALS & OVERLAYS
   ============================================================ */
body.has-modal {
    overflow: hidden !important;
    overscroll-behavior: contain;
    position: relative !important;
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-right: 15px !important;
}
.modal-overlay, .modal {
    pointer-events: auto;
}
.modal {
    display: none;
}
.modal.is-open {
    display: grid;
}
body:not(.has-modal) {
    .modal-overlay {
        display: none;
    }
}

@keyframes spin-fixed {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin-fixed 1s linear infinite;
    transform-origin: center center;
    will-change: transform;
}

[data-custom-checked], [data-toggle-checked] {
    position: relative;

    > div {
        position: relative;
        top: 2px;
    }

    input[type=checkbox] {
        position: absolute;
        pointer-events: none;
        opacity: 0;
        margin: 0;
        width: 16px;
        height: 16px;
    }
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.50rem center;
    background-size: 15px 15px;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-destructive,
.btn-white {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing)*2);
    border-radius: var(--radius);

    padding-inline:calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*1.5);

    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);

    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    display: inline-flex;
}

.btn-primary {
    --tw-gradient-position: to right in oklab;
    --tw-gradient-from: var(--color-orange-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
    --tw-gradient-via: var(--color-orange-500);
    --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
    --tw-gradient-to: var(--color-amber-500);

    background-image:
        linear-gradient(to right, var(--color-orange-600), var(--color-orange-600)),
        linear-gradient(var(--tw-gradient-stops));
    background-size: 0% 100%, 100% 100%;
    background-position: left, left;
    background-repeat: no-repeat;
    transition: background-size 0.20s ease-out;
}

.btn-outline {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #fe6e0033;
    color: var(--foreground);
    background-color: var(--background);
}

.btn-ghost {
    color: var(--muted-foreground);
    background-color: #0000;
}

.btn-destructive {
    background-color: var(--destructive);
    color: var(--color-white);
}

@media (hover: hover) {
    .btn-primary:hover {
        background-size: 100% 100%, 100% 100%;
    }
}

.btn-primary:focus {
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: #fe6e0080
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-primary:focus {
        --tw-ring-color:color-mix(in oklab,var(--color-orange-500)50%,transparent)
    }
}

.btn-primary:focus {
    --tw-outline-style: none;
    outline-style: none
}

.btn-primary:disabled {
    cursor: not-allowed;
    opacity: .5
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-outline {
        border-color:color-mix(in oklab,var(--color-orange-500)20%,transparent)
    }
}

@media (hover: hover) {
    .btn-outline:hover {
        border-color:#fe6e0066;
        color: var(--color-orange-500);
    }

    @supports (color: color-mix(in lab,red,red)) {
        .btn-outline:hover {
            border-color:color-mix(in oklab,var(--color-orange-500)40%,transparent)
        }
    }

    .btn-outline:hover {
        background-color: #fe6e001a
    }

    @supports (color: color-mix(in lab,red,red)) {
        .btn-outline:hover {
            background-color:color-mix(in oklab,var(--color-orange-500)10%,transparent)
        }
    }
}

.btn-outline:focus {
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: #fe6e0080
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-outline:focus {
        --tw-ring-color:color-mix(in oklab,var(--color-orange-500)50%,transparent)
    }
}

.btn-outline:focus {
    --tw-outline-style: none;
    outline-style: none
}

.btn-outline:disabled {
    cursor: not-allowed;
    opacity: .5;
    background-color: inherit !important;
    border-color: inherit !important;
}

@media (hover: hover) {
    .btn-ghost:hover {
        background-color:#fe6e001a;
        color: var(--color-orange-500);
    }

    @supports (color: color-mix(in lab,red,red)) {
        .btn-ghost:hover {
            background-color:color-mix(in oklab,var(--color-orange-500)10%,transparent)
        }
    }
}

.btn-ghost:focus {
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: #fe6e0080
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-ghost:focus {
        --tw-ring-color:color-mix(in oklab,var(--color-orange-500)50%,transparent)
    }
}

.btn-ghost:focus {
    --tw-outline-style: none;
    outline-style: none
}

.btn-ghost:disabled {
    cursor: not-allowed;
    opacity: .5
}

@media (hover: hover) {
    .btn-destructive:hover {
        background-color:var(--destructive)
    }

    @supports (color: color-mix(in lab,red,red)) {
        .btn-destructive:hover {
            background-color:color-mix(in oklab,var(--destructive)90%,transparent)
        }
    }
}

.btn-destructive:focus {
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--destructive)
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-destructive:focus {
        --tw-ring-color:color-mix(in oklab,var(--destructive)50%,transparent)
    }
}

.btn-destructive:focus {
    --tw-outline-style: none;
    outline-style: none
}

.btn-destructive:disabled {
    cursor: not-allowed;
    opacity: .5
}

/* Unused as of 2026-07 (no template references .btn-white) — kept as a reusable button variant.
.btn-white {
    background-color: #fff;
    color: var(--color-orange-600);
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}

@media (hover: hover) {
    .btn-white:hover {
        background-color: #f3f4f6;
    }
}

.btn-white:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: #fe6e0080;
    outline-style: none;
}

.btn-white:disabled {
    cursor: not-allowed;
    opacity: .5;
}
*/

.btn-follow-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing)*2);
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*1.5);
    font-weight: var(--font-weight-medium);
    border: 1px solid #fe6e004d;
    color: var(--color-orange-500);
    background-color: #fe6e001a;
    transition: all .18s ease;
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-follow-toggle {
        border-color: color-mix(in oklab,var(--color-orange-500)30%,transparent);
        background-color: color-mix(in oklab,var(--color-orange-500)10%,transparent);
    }
}

.btn-follow-toggle .follow-toggle-on,
.btn-follow-toggle .follow-toggle-off {
    align-items: center;
    gap: calc(var(--spacing)*2);
}

.btn-follow-toggle .follow-toggle-on {
    display: inline-flex;
}

.btn-follow-toggle .follow-toggle-off {
    display: none;
}

@media (hover: hover) {
    .btn-follow-toggle:hover {
        border-color: #ef44448c;
        color: var(--destructive);
        background-color: #ef44441f;
    }

    @supports (color: color-mix(in lab,red,red)) {
        .btn-follow-toggle:hover {
            border-color: color-mix(in oklab,var(--destructive)55%,transparent);
            background-color: color-mix(in oklab,var(--destructive)12%,transparent);
        }
    }

    .btn-follow-toggle:hover .follow-toggle-on {
        display: none;
    }

    .btn-follow-toggle:hover .follow-toggle-off {
        display: inline-flex;
    }
}

.btn-follow-toggle:focus-visible {
    outline-style: none;
    box-shadow: 0 0 0 2px #fe6e0080;
}

.btn-follow-toggle .follow-toggle-touch {
    display: none;
}

@media (hover: none) {
    .btn-follow-toggle {
        justify-content: space-between;
    }

    .btn-follow-toggle .follow-toggle-touch {
        display: inline-flex;
        align-items: center;
    }
}

[data-pwa-install] {
    display: none;
}
[data-pwa-install].is-available {
    display: flex;
}

/* ============================================================
   HEADINGS, LINKS & FORM CONTROLS
   ============================================================ */
.heading-1,
.heading-2 {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-orange-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
    --tw-gradient-via: var(--color-orange-500);
    --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
    --tw-gradient-to: var(--color-amber-500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
}

.heading-1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    font-weight: var(--font-weight-bold);
}

.heading-2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
}

.heading-3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.stretched-link::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: 0;
    cursor: pointer;
}

.input-base {
    height: calc(var(--spacing)*9);
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 0;
    border-color: var(--border);
    background-color: var(--input-background);
    width: 100%;
    padding-inline:calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*1);
    color: var(--foreground);
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.input-base::placeholder {
    color: var(--muted-foreground)
}

.input-base:focus, .input-base:hover {
    border-color: var(--primary);
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--primary)
}

@supports (color: color-mix(in lab,red,red)) {
    .input-base:focus, .input-base:hover {
        --tw-ring-color:color-mix(in oklab,var(--primary)50%,transparent)
    }
}

.input-base:focus {
    --tw-outline-style: none;
    outline-style: none
}

.input-base:disabled {
    cursor: not-allowed;
    opacity: .5
}

.textarea-base {
    resize: none;
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 0;
    border-color: var(--border);
    background-color: var(--input-background);
    width: 100%;
    min-height: 100px;
    padding-inline:calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*2);
    color: var(--foreground);
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.textarea-base::placeholder {
    color: var(--muted-foreground)
}

.textarea-base:focus, .textarea-base:hover {
    border-color: var(--primary);
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--primary)
}

@supports (color: color-mix(in lab,red,red)) {
    .textarea-base:focus, .textarea-base:hover {
        --tw-ring-color:color-mix(in oklab,var(--primary)50%,transparent)
    }
}

.textarea-base:focus {
    --tw-outline-style: none;
    outline-style: none
}

.textarea-base:disabled {
    cursor: not-allowed;
    opacity: .5
}

.select-base {
    height: calc(var(--spacing)*9);
    cursor: pointer;
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 0;
    border-color: var(--border);
    background-color: var(--input-background);
    width: 100%;
    padding-inline:calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*2);
    color: var(--foreground);
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.select-base:focus, .select-base:hover {
    border-color: var(--primary);
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--primary)
}

@supports (color: color-mix(in lab,red,red)) {
    .select-base:focus, .select-base:hover {
        --tw-ring-color:color-mix(in oklab,var(--primary)50%,transparent)
    }
}

.select-base:focus, .select-base:hover {
    --tw-outline-style: none;
    outline-style: none
}

.select-base:disabled {
    cursor: not-allowed;
    opacity: .5
}

/* ============================================================
   PAGE LAYOUT & NAV DRAWERS
   ============================================================ */
.page-main {
    flex: 1 1 0;
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 2rem;
}

@media (min-width: 40rem)  { .page-main { max-width: 40rem; } }
@media (min-width: 48rem)  { .page-main { max-width: 48rem; } }
@media (min-width: 64rem)  { .page-main { max-width: 64rem; padding-inline: 2rem; } }
@media (min-width: 80rem)  { .page-main { max-width: 80rem; } }
@media (min-width: 96rem)  { .page-main { max-width: 96rem; } }

[data-mobile-menu-drawer] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 24rem;
    z-index: 70;
    transform: translateX(100%);
    transition: transform 200ms ease-out;
}
@media (max-width: 639px) {
    [data-mobile-menu-drawer] {
        max-width: 100%;
    }
}
[data-mobile-menu-drawer][data-open="true"] {
    transform: translateX(0);
}

[data-mobile-menu-backdrop] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}
[data-mobile-menu-backdrop][data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1024px) {
    [data-mobile-menu-drawer],
    [data-mobile-menu-backdrop] {
        display: none !important;
    }
}

[data-search-drawer] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 24rem;
    z-index: 70;
    background-color: var(--background);
    border-left: 1px solid color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    transform: translateX(100%);
    transition: transform 200ms ease-out;
    display: flex;
    flex-direction: column;
}
[data-search-drawer][data-open="true"] {
    transform: translateX(0);
}

[data-search-backdrop] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}
[data-search-backdrop][data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   SEARCH UI (chips, filters, pills, shelf)
   ============================================================ */
.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid color-mix(in oklab, var(--color-orange-500) 15%, transparent);
    flex-shrink: 0;
}

.filters-body {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filters-foot {
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-top: 1px solid color-mix(in oklab, var(--color-orange-500) 15%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-head {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Search page: the header field stays hidden until the page bar scrolls out of view. */
.header-search-reveal {
    display: none;
}
@media (min-width: 1024px) {
    .header-search-reveal.is-shown {
        display: block;
        animation: header-search-fade 150ms ease-out;
    }
}
@keyframes header-search-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Replace the browser's native (blue on webkit) clear cross with a theme-colored one. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    background-color: var(--muted-foreground);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--color-orange-500);
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.search-chips__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
}

/* Desktop: dissolve the scroll wrapper so all chips (Filtres included) share one wrapping flow. */
@media (min-width: 640px) {
    .search-chips__row {
        display: contents;
    }
}

.schip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    background-color: var(--card);
    color: var(--muted-foreground);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 16%, transparent);
}
.schip:hover {
    color: var(--foreground);
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
}
.schip.is-on {
    background-image: linear-gradient(to right, var(--color-orange-700), var(--color-orange-500), var(--color-amber-500));
    border-color:  var(--color-orange-500);
    color: #fff;
    font-weight: 500;
}
.schip.is-on:hover {
    color: #fff;
}

.schip--state {
    padding: 0;
    overflow: hidden;
    color: var(--foreground);
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
}
.schip__body {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 100%;
    padding: 0 0.35rem 0 0.9rem;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}
.schip__body:hover {
    color: var(--color-orange-500);
}
.schip__x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 100%;
    color: var(--muted-foreground);
    cursor: pointer;
}
.schip__x:hover {
    color: var(--color-orange-500);
}

.search-chips__denied {
    justify-content: center;
    margin-top: 0.5rem;
}

.search-chips--state {
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.fsection {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fseg {
    display: flex;
    background-color: var(--input-background);
    border-radius: 0.625rem;
    padding: 3px;
}
.fseg__btn {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    color: var(--muted-foreground);
}
.fseg__btn:hover {
    color: var(--foreground);
}
.fseg__btn.is-on {
    background-image: linear-gradient(to right, var(--color-orange-700), var(--color-orange-500), var(--color-amber-500));
    color: #fff;
    font-weight: 600;
}

.fpills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fpill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 25%, transparent);
    background-color: var(--card);
    color: var(--muted-foreground);
    font-size: 0.8rem;
    transition: color 150ms ease, border-color 150ms ease;
}
.fpill:hover {
    color: var(--foreground);
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
}
.fpill.is-on {
    background-image: linear-gradient(to right, var(--color-orange-700), var(--color-orange-500), var(--color-amber-500));
    border-color: var(--color-orange-500);
    color: #fff;
    font-weight: 500;
}

.fpill-group + .fpill-group {
    margin-top: 0.75rem;
}
.fpill-group__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.tag-chips:empty {
    display: none;
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    /* Chips link to their search: lift them out of the card's stretched-link overlay. */
    position: relative;
    z-index: 10;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
/* Tags read as neutral metadata; orange stays the action colour (button, links, heart).
   The hover shifts to orange so a chip still signals it is a clickable filter.
   Type and genre keep separate classes for meaning, but share one look. */
.tag-chip--type,
.tag-chip--genre {
    background-color: color-mix(in oklab, var(--muted-foreground) 12%, transparent);
    border-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
    color: var(--foreground);
}
.tag-chip--type:hover,
.tag-chip--genre:hover {
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
    color: var(--color-orange-500);
}
.tag-chips--sm .tag-chip {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
}

.fswitch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.fswitch__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.search-shelf {
    margin-bottom: 1.5rem;
}

.search-shelf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.search-shelf__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.search-shelf__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--color-orange-500) 12%, transparent);
    color: var(--color-orange-500);
    font-size: 0.7rem;
    letter-spacing: normal;
}

.search-shelf__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-shelf__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 25%, transparent);
    color: var(--muted-foreground);
}
.search-shelf__arrow:hover:not(:disabled) {
    color: var(--color-orange-500);
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
}
.search-shelf__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
@media (max-width: 639px) {
    .search-shelf__arrow {
        display: none;
    }
}

.search-shelf__manage {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted-foreground);
}
.search-shelf__manage:hover {
    color: var(--color-orange-500);
}

.search-shelf__row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}
.search-shelf__row::-webkit-scrollbar {
    display: none;
}

.search-shelf__card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 11rem;
    max-width: 16rem;
    padding: 0.8rem 0.95rem;
    border-radius: 0.875rem;
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 16%, transparent);
    background-color: var(--card);
    transition: border-color 150ms ease;
}
.search-shelf__card:hover {
    border-color: color-mix(in oklab, var(--color-orange-500) 45%, transparent);
}
.search-shelf__card.is-active {
    background-image: linear-gradient(to right, var(--color-orange-700), var(--color-orange-500), var(--color-amber-500));
    border-color: var(--color-orange-700);
    color: #fff;
}

.search-shelf__name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-shelf__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.search-shelf__pill {
    display: inline-block;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    color: var(--color-orange-500);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-shelf__pill svg {
    display: inline-block;
    vertical-align: -0.125em;
    margin-right: 0.2rem;
}
.search-shelf__card.is-active .search-shelf__pill {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.search-shelf__card--add {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    border-style: dashed;
    border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
    background: none;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    white-space: nowrap;
}
.search-shelf__card--add:hover {
    color: var(--color-orange-500);
}

@media (max-width: 639px) {
    .search-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .search-chips__row {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.55rem;
        mask-image: linear-gradient(to right, #000 calc(100% - 0.5rem), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 0.5rem), transparent);
    }
    .search-chips__row::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================
   EMPTY STATE — no-result search ("déjà passé chez nous")
   ============================================================ */
.empty-hero__halo {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-orange-500);
    background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--color-orange-500) 22%, transparent), color-mix(in oklab, var(--color-orange-500) 4%, transparent));
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 30%, transparent);
}
.empty-hero__halo svg {
    width: 1.85rem;
    height: 1.85rem;
}
.empty-hero__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.empty-hero__title .hl {
    color: var(--color-orange-500);
}
.empty-hero__sub {
    max-width: 28rem;
    margin: 0 auto 1.5rem;
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

.past-played {
    max-width: 24rem;
    margin: 0 auto 1.5rem;
    padding: 0.25rem 1rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
}
.past-played__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0 0.6rem;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--muted-foreground);
}
.past-played__label svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-orange-500);
}
.past-played__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.past-played__row:last-child {
    border-bottom: 0;
}
.past-played__venue {
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    color: var(--foreground);
}
.past-played__year {
    flex-shrink: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--color-orange-500) 12%, transparent);
    color: var(--color-orange-500);
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   EVENT CARDS & LISTINGS
   ============================================================ */
img.event-img {
    opacity: 0;
}
img.event-img.loaded {
    animation: eventImgFadeIn 0.3s ease forwards;
}
@keyframes eventImgFadeIn {
    to { opacity: 1; }
}

@media (max-width: 639px) {
    .grid:has(> .event-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.625rem;
        row-gap: 1rem;
    }
    .event-card .event-card__media {
        height: 150px;
    }
    .event-card .event-card__body {
        padding: 0.75rem;
    }
    .event-card .event-card__title {
        font-size: 0.9rem;
    }
    .event-card .event-card__meta {
        font-size: 0.75rem;
    }
    .event-card .event-card__meta svg {
        width: 14px;
        height: 14px;
        flex: none;
    }
    .event-card .event-card__cta {
        padding-block: 0.4375rem;
        font-size: 0.75rem;
    }
    .event-card .event-card__media > a {
        padding: 6px;
    }
    .event-card .event-card__media > a svg {
        width: 16px;
        height: 16px;
    }
    /* Venue name gets a second line instead of being cut mid-word on the narrow card. */
    .event-card .event-card__meta .line-clamp-1 {
        -webkit-line-clamp: 2;
    }
    /* Icons shrink to 14px here, so the text column — and the chip indent that mirrors
       it — move in with them. */
    .event-card .event-card__reason svg {
        width: 14px;
        height: 14px;
    }
}

.event-card__meta .date-short {
    display: none;
}
@media (max-width: 639px) {
    .event-card__meta .date-full {
        display: none;
    }
    .event-card__meta .date-short {
        display: inline;
    }
    /* The hero favourites slider gives each card near-full width, so the full date fits — keep it. */
    .favorites-shelf .event-card__meta .date-full {
        display: inline;
    }
    .favorites-shelf .event-card__meta .date-short {
        display: none;
    }
}

/* Why a recommended event is being shown. One quiet line: it justifies the card,
   it never competes with the title. Its icon + gap mirror the meta rows, so the text
   lands on the same column as the date and venue rather than at the card edge. */
.event-card__reason {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.event-card__reason > svg {
    margin-top: 2px;
}
.event-card__reason span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Home hero — the single next favorite, featured. Mirrors .event-card's surface
   (card bg, orange hairline, hover lift) but reads as a horizontal billboard. */
.event-spotlight {
    display: flex;
    flex-direction: column;
    max-width: 40rem;
    margin-inline: auto;
    overflow: hidden;
    text-align: left;
    background-color: var(--card);
    border: 1px solid color-mix(in oklab, var(--color-orange-500) 22%, transparent);
    border-radius: 1rem;
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.85);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.event-spotlight:hover {
    border-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
    box-shadow: 0 26px 60px -26px color-mix(in oklab, var(--color-orange-500) 22%, transparent);
}
.event-spotlight__media {
    position: relative;
    display: block;
    width: 100%;
    height: 14rem;
    flex: none;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in oklab, var(--color-orange-500) 14%, transparent), color-mix(in oklab, var(--color-amber-500) 10%, transparent));
}
.event-spotlight__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.event-spotlight:hover .event-spotlight__media img {
    transform: scale(1.08);
}
.event-spotlight__body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.15rem 1.3rem 1.3rem;
}
.event-spotlight__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.event-spotlight__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.event-spotlight__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--foreground);
}
.event-spotlight__countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-amber-500);
    background-color: color-mix(in oklab, var(--color-amber-500) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-amber-500) 30%, transparent);
}
.event-spotlight__countdown svg {
    width: 0.85rem;
    height: 0.85rem;
}
.event-spotlight__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.event-spotlight__meta svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--color-orange-500);
}
.event-spotlight__cta {
    margin-top: 0.45rem;
}
@media (min-width: 768px) {
    .event-spotlight {
        flex-direction: row;
        max-width: 44rem;
    }
    .event-spotlight__media {
        width: 15rem;
        height: auto;
    }
}

/* Desktop-only: the upcoming favourites as image cards, centred in the hero in place of the
   single-event spotlight, which lets the favourites band drop on desktop. */
.favorites-hero {
    max-width: 76rem;
    margin-inline: auto;
    margin-top: 1.75rem;
    container-type: inline-size;
}
/* Phones show the favourites as the slider band, still on the hero backdrop. */
.favorites-hero--phone {
    margin-top: 1.75rem;
}
/* Centred on its own (fit-content + auto margins) instead of a text-align on the parent,
   which would cascade into the cards and centre their text. */
.favorites-hero__eyebrow {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-orange-500);
    transition: color 0.2s;
}
.favorites-hero__eyebrow:hover {
    color: var(--color-amber-500);
}
.favorites-hero__eyebrow svg {
    width: 1rem;
    height: 1rem;
}
/* A grid, not flex, so every card (and the discover card) shares one row height, exactly like
   the event listings. Fixed-width columns, centred. */
.favorites-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 17.5rem);
    justify-content: center;
    gap: 1.5rem;
}
/* At the width where exactly three cards fit, a fourth would wrap onto a lonely row. Hide it
   there only — wider shows four in a row, narrower balances two and two. (Thresholds track the
   17.5rem column width + 1.5rem gap.) */
@container (min-width: 888px) and (max-width: 1191px) {
    .favorites-hero__grid > :nth-child(4) {
        display: none;
    }
}

/* Closes a short favorites shelf: a dashed invitation card instead of empty grid cells.
   height:100% lets the grid stretch it to match the event cards beside it. */
.discover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    min-height: 16rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed color-mix(in oklab, var(--color-orange-500) 40%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, var(--color-orange-500) 5%, transparent);
    transition: border-color 0.3s, background-color 0.3s;
}
.discover-card:hover {
    border-color: color-mix(in oklab, var(--color-orange-500) 70%, transparent);
    background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
}
.discover-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    color: var(--color-orange-500);
    background-color: color-mix(in oklab, var(--color-orange-500) 12%, transparent);
}
.discover-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.discover-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
}
.discover-card__sub {
    max-width: 22ch;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

/* Home favorites: one shelf that reads as a horizontal, snap-scrolling slider on phones —
   the next card peeks past the edge to invite the swipe — and a plain responsive grid from
   sm up. The negative inline margin lets the slider bleed to the screen edges. */
.favorites-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: 0.5rem;
}
.favorites-shelf > * {
    scroll-snap-align: start;
}
.favorites-shelf::-webkit-scrollbar {
    display: none;
}
@media (min-width: 640px) {
    .favorites-shelf {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        padding-bottom: 0;
    }
}
@media (min-width: 1024px) {
    .favorites-shelf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .favorites-shelf {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Phone slider cards are wide, so a fixed image height reads as a letterbox. Lift it toward a
   square (kept a touch wider than tall), closer to the recommendation cards below. Phones only. */
@media (max-width: 639px) {
    .favorites-shelf .event-card__media {
        height: auto;
        aspect-ratio: 6 / 5;
    }
}

@media (max-width: 639px) {
    .follow-tabs {
        display: flex;
        width: 100%;
    }
    .follow-tabs .follow-tab {
        flex: 1 1 0;
        justify-content: center;
    }
}

@media (max-width: 1279px) {
    .locale-full { display: none; }
}
@media (min-width: 1280px) {
    .locale-short { display: none; }
}

/* ============================================================
   ADMIN PANEL (public page) & HERO SEARCH
   ============================================================ */
/* Admin badge on the public event page (inside .admin-panel). */
.btn-admin-badge {
    border-radius: .25rem;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    background-color: #f59e0b33;
}

/* Admin-only panel on the event page: same amber look as .btn-admin, but a container holding
   the view count and the edit link together. */
.admin-panel {
    width: 100%;
    padding-inline: calc(var(--spacing)*3);
    padding-block: calc(var(--spacing)*2);
    border: 1px dashed #f59e0b66;
    border-radius: var(--radius);
    background-color: #f59e0b1a;
    color: #f59e0b;
    font-size: .75rem;
    font-weight: 500;
}

/* Shared search pill — the home hero and the search page render this same component (see
   components/_search_box.html.twig). --hero / --page only set the width and the breakpoint at
   which each hides (below it the header search field takes over). */
.search-box {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing)*3);
    width: 100%;
    margin-inline: auto;
    height: 4rem;
    padding: 0 calc(var(--spacing)*2) 0 calc(var(--spacing)*4);
    background-color: color-mix(in srgb, var(--input-background) 50%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
}
.search-box__icon {
    display: flex;
    flex: none;
    color: var(--muted-foreground);
}
/* The compound selector also neutralises the form theme's `input-base` on the search page. */
.search-box .search-box__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--foreground);
    font-size: 1rem;
}
.search-box .search-box__input::placeholder {
    color: var(--muted-foreground);
}
/* The search page's field carries the form theme's `input-base`, which rings on hover/focus.
   Drop that — the pill's own :focus-within ring below is the single, shared focus indicator. */
.search-box .search-box__input:hover,
.search-box .search-box__input:focus {
    box-shadow: none;
}
.search-box:focus-within {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 45%, transparent);
}
.search-box__btn {
    flex: none;
    height: 2.75rem;
}
.search-box--hero {
    max-width: 42rem;
}
.search-box--page {
    max-width: 48rem;
}
/* On phones the header carries the search field, so both content pills hide there. */
@media (max-width: 640px) {
    .search-box--hero {
        display: none;
    }
}
@media (max-width: 1023px) {
    .search-box--page {
        display: none;
    }
}

/* Backdrop of an illustrated band. Driven by its own class, not Tailwind's `group`:
   a `group` on the section also fires the `group-hover:` utilities of the event cards
   inside it, so hovering the backdrop lit up every card in the grid. */
.band-illustrated__backdrop {
    transition: transform 0.5s;
}
.band-illustrated:hover > .band-illustrated__backdrop {
    transform: scale(1.1);
}

/* Greeting of the logged-in hero. Capped in characters rather than pixels so the wrap
   holds at every size: the greetings vary in length and no longer carry <br>, so the line
   breaks have to come from the measure itself. Roomy on desktop so the title spans wide. */
.hero-greeting {
    margin-inline: auto;
    text-wrap: balance;
}
/* Left uncapped on phones, where the viewport is already the measure. */
@media (min-width: 640px) {
    .hero-greeting {
        max-width: 26ch;
    }
}
@media (min-width: 1024px) {
    .hero-greeting {
        font-size: 3rem;
    }
}

.admin-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-panel-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing)*2);
    width: 100%;
    margin-top: calc(var(--spacing)*2);
    color: #f59e0b;
}

@media (hover: hover) {
    .admin-panel-link:hover {
        text-decoration: underline;
    }
}

/* ============================================================
   BADGES, CTA BANDS & FOOTER
   ============================================================ */
/* "Nouveau" tag on event cards: a discreet white label flush to the left edge
   (squared on the edge side, rounded on the other, like a ribbon) so it stays
   readable over any cover image without eating into the visual. Lives here
   rather than as Tailwind utilities because the CSS bundle is precompiled and
   can't be rebuilt on the shared host. */
.badge-new {
    position: absolute;
    top: calc(var(--spacing)*3);
    left: 0;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 0 9999px 9999px 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.badge-new::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--color-orange-500);
}

/* Countdown pill on a favourite card's image — the old spotlight's amber "in X days", carried
   over. Only rendered when the card is passed showCountdown (the favourites). Sits on the scrim
   at the bottom of the image, where the dark gradient keeps it readable. */
.event-card__countdown {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-amber-500);
    background-color: color-mix(in oklab, var(--color-amber-500) 16%, rgba(0, 0, 0, 0.55));
    border: 1px solid color-mix(in oklab, var(--color-amber-500) 35%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.event-card__countdown svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Bottom "ready to explore" CTA: a dark band with a soft orange glow rising from
   the center-bottom, instead of a full orange fill that clashes on a dark page. */
.cta-band {
    background:
        radial-gradient(700px 280px at 50% 117%, rgba(249, 115, 22, 0.2), transparent 60%),
        var(--background);
}

/* Same warm glow for the other plain dark sections, coming from the top so it sits
   behind the section heading without washing out the content below. */
.section-glow {
    background:
        radial-gradient(900px 420px at 50% -6%, rgba(249, 115, 22, 0.16), transparent 60%),
        var(--background);
}

/* ============================================================
   FEEDBACK & LOCATION FILTER
   ============================================================ */
.feedback-card { display: flex; flex-direction: column; gap: 20px; }
.feedback-intro { margin-top: 6px; }
.feedback-form { display: flex; flex-direction: column; gap: 16px; }
.feedback-label { font-size: 14px; font-weight: 500; color: #fff; margin: 0 0 8px; display: inline-block; }
.feedback-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feedback-radio { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.feedback-option { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .02); color: #a3a3a3; cursor: pointer; font-size: 13px; transition: border-color .15s, background-color .15s, color .15s; }
.feedback-option:hover { border-color: rgba(234, 88, 12, .45); }
.feedback-radio:checked + .feedback-option { border-color: rgba(234, 88, 12, .6); background: rgba(234, 88, 12, .1); color: #fff; }
.feedback-radio:focus-visible + .feedback-option { outline: 2px solid rgba(234, 88, 12, .6); outline-offset: 2px; }
.feedback-comment { width: 100%; box-sizing: border-box; background: #141414; border: 1px solid rgba(234, 88, 12, .2); border-radius: 10px; color: #e5e5e5; padding: 11px 13px; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 84px; }
.feedback-comment::placeholder { color: #737373; }
.feedback-comment:focus { outline: none; border-color: rgba(234, 88, 12, .55); }

/* Location filter (proximity-first): geolocation on intent + city/radius presets,
   with the venue multiselect demoted to a collapsible "refine" section. */
.loc-filter__clear,
.loc-refine__toggle,
.loc-radius {
    border: 0;
    background-color: transparent;
}
.loc-filter {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid rgba(234, 88, 12, 0.2);
    background-color: rgba(234, 88, 12, 0.05);
    border-radius: var(--radius);
}
.loc-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.loc-filter__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.loc-filter__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    transition: color 0.15s;
}
.loc-filter__clear:hover { color: var(--color-orange-500); }
.loc-filter__entry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* .hidden (main.css) and these display rules share specificity; custom.css wins by
   load order, so re-assert the hidden state explicitly. */
.loc-filter__entry.hidden,
.loc-filter__denied.hidden {
    display: none;
}
.loc-filter__or {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.loc-filter__or::before,
.loc-filter__or::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
}
.loc-filter__denied {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #fca5a5;
}
.loc-filter__active {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.loc-filter__active.hidden {
    display: none;
}
.loc-filter__chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--color-orange-500);
    background-color: rgba(234, 88, 12, 0.1);
    border: 1px solid rgba(234, 88, 12, 0.2);
}
.loc-filter__radius {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.loc-radius {
    padding: 0.4rem 0.25rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted-foreground);
    text-align: center;
    transition: color 0.15s, background-color 0.15s;
}
.loc-radius:hover { color: var(--foreground); }
.loc-radius.is-active {
    color: #fff;
    font-weight: 600;
    background-image: linear-gradient(to right, #c2410c, #ea580c, #f59e0b);
}
.loc-refine {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.loc-refine__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--foreground);
    transition: color 0.15s;
}
.loc-refine__toggle:hover { color: var(--color-orange-500); }
.loc-refine__title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.loc-refine__chev {
    color: var(--muted-foreground);
    transition: transform 0.2s;
}
.loc-refine__toggle[aria-expanded="true"] .loc-refine__chev { transform: rotate(180deg); }

/* Nudge shown instead of the "save this search" button when the search is geolocated:
   an "around me" alert can't be persisted, so we invite the visitor to pick a city. */
/* Unused as of 2026-07 — feature not wired in any template yet.
.save-city-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--muted-foreground);
    text-align: center;
    background-color: rgba(234, 88, 12, 0.05);
    border: 1px dashed rgba(234, 88, 12, 0.3);
    border-radius: var(--radius);
}
*/

/* ============================================================
   EVENT CTA BAR (mobile) & COMPACT LISTS
   ============================================================ */
.event-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    background-color: var(--background);
    border-top: 1px solid color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}
.event-cta-bar__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}
.event-cta-bar__date {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-cta-bar__place {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-cta-bar__more {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-orange-500);
}
@media (min-width: 1024px) {
    .event-cta-bar {
        display: none;
    }
}
@media (max-width: 1023px) {
    body:has(.event-cta-bar) #container {
        padding-bottom: 5rem;
    }
}

.map-modal {
    z-index: 55;
}
.map-modal-container {
    height: min(60vh, 460px);
}

.footer-cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
}

.chip-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Justified variant: every wrapped row runs edge to edge, the last one stays natural.
   Needs inline flow (text-align: justify), so the flex gap becomes margins + word spacing. */
.chip-links--justify {
    display: block;
    text-align: justify;
    word-spacing: 0.25rem;

    .chip-link {
        margin-bottom: 0.5rem;
        word-spacing: normal;
    }
}
.chip-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(234, 88, 12, 0.2);
    border-radius: 9999px;
    font-size: 0.85rem;
    color: var(--muted-foreground);
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;

    &:hover {
        color: #f97316;
        border-color: rgba(234, 88, 12, 0.5);
        background-color: rgba(234, 88, 12, 0.08);
    }
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The native share sheet only replaces the per-network buttons on a mobile viewport;
   without navigator.share the container never gets the class and the buttons stay. */
.share-native {
    display: none;
}

@media (max-width: 639px) {
    .share-options--native .share-buttons {
        display: none;
    }

    .share-options--native .share-native {
        display: inline-flex;
    }
}

.event-row-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--card);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.event-row:hover {
    border-color: rgba(249, 115, 22, 0.55);
    background-color: rgba(249, 115, 22, 0.06);
}

.event-row__date {
    flex: none;
    width: 50px;
    padding: 6px 0;
    text-align: center;
    border-radius: 8px;
    background-color: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

.event-row__day {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.1;
}

.event-row__month {
    display: block;
    font-size: 0.6875rem;
}

.event-row__body {
    flex: 1;
    min-width: 0;
}

.event-row__title {
    display: block;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--foreground);
}

.event-row:hover .event-row__title {
    color: #f97316;
}

.event-row__place {
    display: block;
    margin-top: 3px;
    font-size: 0.78125rem;
    color: var(--muted-foreground);
}

.event-row__time {
    color: var(--foreground);
    font-weight: 500;
}

.event-row__chevron {
    flex: none;
    color: var(--muted-foreground);
    transition: color 0.15s, transform 0.15s;
}

.event-row:hover .event-row__chevron {
    color: #f97316;
    transform: translateX(2px);
}

/* Fills the orphan slot of the 2-column grid; dropped once the grid is 3 columns. */
.card--two-col-only {
    display: flex;
}

@media (min-width: 1024px) {
    .card--two-col-only {
        display: none;
    }
}

/* ============================================================
   HEADER LOGO
   ============================================================ */
.site-logo-cal {
    height: 26px;
    width: auto;
}

/* The wordmark's loupe + descenders hang below the cap line, so centering
   the whole mark floats the text high — nudge it down to optically align
   with the calendar icon (tied to the height above; retune if it changes). */
.site-logo-word {
    height: 24px;
    width: auto;
    transform: translateY(3px);
}