/* ==========================================================================
   Checker Cells — layout components
   Built on checker-cells-theme.css (tokens + template corrections) and
   checker-cells-brand.css (the lockup). Loads after both. Every rule here
   belongs to a component the 2026-09-06 design review rebuilt: header
   geometry, the menu dialog, the footer, section titles, prose, the brand
   stage, the hero, the home sections, category and event cards, list
   toolbars. Physical left/right only where a legacy rule has to be undone.
   ========================================================================== */

:root {
    /* ONE source for the header's height. The header box, the pull-up of the
       hero under it and the hero's top padding all read this, so the strip
       the review measured (content height 143.7px vs a fixed -141px pull)
       cannot come back: the box no longer follows its content. */
    --ec-header-h: 96px;
    --ec-sidenav-w: min(340px, calc(100vw - 32px));
    /* Spacing steps (4/8/12/16/24/32/48/64). */
    --ec-s1: 4px;
    --ec-s2: 8px;
    --ec-s3: 12px;
    --ec-s4: 16px;
    --ec-s6: 24px;
    --ec-s8: 32px;
    --ec-s12: 48px;
    --ec-s16: 64px;
}

@media (max-width: 768px) {
    :root {
        --ec-header-h: 72px;
    }
}

/* --------------------------------------------------------------------------
   Skip link (WCAG 2.4.1)
   -------------------------------------------------------------------------- */
.ec-skip {
    position: absolute;
    top: -200px;
    inset-inline-start: 16px;
    z-index: 1200;
    padding: 12px 16px;
    border-radius: var(--r-sm, 6px);
    background: var(--checker-navy, #181e32);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
}

.ec-skip:focus,
.ec-skip:focus-visible {
    top: 12px;
    outline: 3px solid var(--checker-mint, #2dd4bf) !important;
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Header geometry
   -------------------------------------------------------------------------- */
header {
    position: relative;
    height: var(--ec-header-h);
    min-height: var(--ec-header-h);
}

.headerbg {
    display: flex;
    align-items: center;
    height: var(--ec-header-h);
    padding: 0;
    /* Only colour and shadow animate — never a size, which would make the
       bar breathe at the sticky threshold. */
    transition: background-color .2s ease, box-shadow .2s ease;
}

.headerbg > .container {
    width: 100%;
}

.headerbg .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* The pinned bar is content-sized (the compact rules live in the theme). */
.headerbg.sticky {
    height: auto;
    padding-top: 0 !important;
}

/* Hero pages sit under the transparent header by exactly its height. */
.slidertopheader {
    margin-top: calc(-1 * var(--ec-header-h));
}

.slidertopheader__home {
    padding-top: calc(var(--ec-header-h) + 40px);
    padding-bottom: 72px;
    min-height: 640px;
    min-height: min(100svh, 820px);
}

.slidertopheader__pages {
    padding-top: calc(var(--ec-header-h) + 20px);
    padding-bottom: 28px;
    min-height: 0;
}

.slidertopheader__events {
    padding-top: calc(var(--ec-header-h) + 40px);
}

/* Detail heroes: the cover is its own layer under the scrim (see the theme's
   .slidertopheader__events::before), cover-cropped from the centre; with no
   cover the brand's cell pattern stands in — never a stock photograph. The
   helper's `.bg-colored > *` would lift a direct child to z-index 2, so the
   layer pins itself below the scrim. */
.ec-detail-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.ec-detail-hero__img--fallback {
    background: var(--checker-navy, #181e32) url("../brand/checker-cells/hero-background.svg") center / cover no-repeat;
}

/* A real utility, not a hero-local rule. Every logo that carries this class
   keeps its own ratio inside whatever box it is given. Scoping it to
   .slidertopheader__events left the class inert everywhere else it is used —
   the venue card on an event page, the venue page's related list and the
   organizer's own logo preview — so a wide logo was drawn stretched into a
   square box (EIEC: a 240x120 file painted at 60x60, reported by Google's
   best-practices audit). The hero keeps the exact same behaviour. */
.objectfit-contain {
    object-fit: contain;
}

/* The curve is part of the cover unit: pinned to the bottom of the hero box,
   above the photograph and the overlay, filled with the next section's own
   surface so the join is seamless at every width. The template's external
   .svgtop (an inline SVG pulled up by a fixed negative margin, z-index auto
   under the overlay, path #f8f8fa) painted a grey band on wide screens. */
.ec-detail-hero__curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    display: block;
    width: 100%;
    height: clamp(18px, 4.2vw, 60px);
    pointer-events: none;
}

.ec-detail-hero__curve path {
    fill: var(--checker-cloud, #f7f9fc);
}

/* The section after a detail hero starts at the hero's edge: no negative
   margin (the curve is inside the hero now). */
.ec-detail-body {
    position: relative;
}

@media (max-width: 768px) {
    .slidertopheader__home {
        padding-top: calc(var(--ec-header-h) + 20px);
        padding-bottom: 32px;
        min-height: auto;
    }

    .slidertopheader__pages {
        padding-top: calc(var(--ec-header-h) + 8px);
        padding-bottom: 20px;
        min-height: 0;
    }

    /* Content-driven on phones: a long title, its meta line and the badges
       fit without the desktop's 600px floor forcing empty photograph. */
    .slidertopheader__events {
        padding-top: calc(var(--ec-header-h) + 20px);
        padding-bottom: 48px; /* 18px curve + 30px clearance */
        min-height: 440px;
    }
}

/* Independence notice (compliance): the header becomes a normal solid bar
   above the notice, so the hero starts at its own top edge. */
body.ei-has-independence-notice .slidertopheader {
    margin-top: 0;
}

body.ei-has-independence-notice .slidertopheader__home {
    padding-top: 40px;
    min-height: calc(100svh - var(--ec-header-h));
}

@media (max-width: 768px) {
    body.ei-has-independence-notice .slidertopheader__home {
        padding-top: 20px;
        min-height: auto;
    }
}

/* Desktop navigation: no wrapping at 1200-1339px, where the six items plus
   the account and language controls made the bar 153px tall. */
.headerbg .navbar-nav .nav-link {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .headerbg .navbar .navbar-nav .nav-item {
        margin-inline-start: 0 !important;
        margin-inline-end: 28px !important;
    }

    .headerbg.sticky .navbar .navbar-nav .nav-item {
        margin-inline-end: 18px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1339.98px) {
    .headerbg .navbar .navbar-nav .nav-item {
        margin-inline-end: 16px !important;
    }

    .headerbg .navbar .navbar-nav .nav-item .nav-link {
        font-size: 17px;
    }
}

.headerbg__logo_logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* The hamburger is a 44px target with three separate lines. The button
   carries Bootstrap's d-flex/d-xl-none (both !important), so the display
   is theirs; this rule only lays the lines out inside it. */
.headerbg .iconbars {
    min-width: 44px;
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    padding: 0;
    margin: 0;
}

.headerbg .iconbars span {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Mobile menu dialog
   -------------------------------------------------------------------------- */
.sidenav {
    width: var(--ec-sidenav-w);
    max-width: 100vw;
    top: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    visibility: hidden;
    transform: translateX(var(--ec-sidenav-out));
    transition: transform .3s ease, visibility 0s linear .3s;
}

/* It opens from the side the toggle sits on in both scripts: the toggle is
   the trailing element of the header row, so the panel hugs the inline-end
   edge. Physical left/right are reset because the template positioned it
   with left:-350px (RTL sheet) and right:-350px (LTR sheet). */
html[dir="ltr"] .sidenav {
    --ec-sidenav-out: 100%;
    right: 0;
    left: auto;
}

html[dir="rtl"] .sidenav {
    --ec-sidenav-out: -100%;
    left: 0;
    right: auto;
}

.sidenav.active {
    visibility: visible;
    transform: none;
    transition: transform .3s ease, visibility 0s;
}

html[dir="ltr"] .sidenav.active,
html[dir="rtl"] .sidenav.active {
    right: auto;
    left: auto;
}

html[dir="ltr"] .sidenav.active {
    right: 0;
}

html[dir="rtl"] .sidenav.active {
    left: 0;
}

.sidenav:focus {
    outline: none;
}

.ec-sidenav__head {
    display: flex;
    justify-content: flex-end;
    padding: 8px 8px 0;
}

.ec-sidenav__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border-radius: var(--r-sm, 6px);
    font-size: 16px;
    font-weight: 600;
}

.ec-sidenav__close i {
    font-size: 18px;
}

.ec-sidenav__nav {
    padding: 8px 12px 0;
}

.sidenav .ec-sidenav__nav .nav-item {
    border-bottom: 0;
}

.sidenav .ec-sidenav__nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 2px 0;
    padding: 10px 16px;
    border: 0 !important;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--checker-cloud, #f7f9fc);
    transition: background-color .15s ease, color .15s ease;
}

.sidenav .ec-sidenav__nav .nav-item .nav-link:hover {
    background-color: rgb(255 255 255 / 8%);
    color: #fff;
}

/* The current page: a light turquoise ground, 8px corners and a clear
   weight. No cell, no side border. */
.sidenav .ec-sidenav__nav .nav-item.active > .nav-link,
.sidenav .ec-sidenav__nav .nav-item .nav-link[aria-current="page"] {
    background-color: rgb(45 212 191 / 16%);
    border: 0 !important;
    color: var(--checker-mint, #2dd4bf) !important;
    font-weight: 700;
}

.ec-sidenav__foot {
    padding-top: 16px !important;
}

/* Social row: never wider than the panel. */
.ec-social-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ec-social-row li {
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footerbg .ec-footer__col {
    text-align: center;
}

@media (min-width: 992px) {
    .footerbg .ec-footer__col {
        text-align: start;
    }

    .footerbg .ec-footer__col .ec-social-row {
        justify-content: flex-start;
    }
}

.ec-footer__brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    text-decoration: none;
}

.ec-footer__tagline {
    max-width: 38ch;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .ec-footer__tagline {
        margin-inline: 0;
    }
}

/* Bootstrap's .text-white-50 is 3.9:1 on navy; the palette's on-dark grey
   is 9.5:1. */
.footerbg .ec-footer__muted {
    color: var(--checker-on-dark, #b8bfce) !important;
}

/* Contact rows: on mobile, icons form ONE column at the physical LEFT
   in both languages — a 24px icon
   column, a 12px gap and a flexible text column. Each row used to be a
   centred flex line, so every icon moved with the length of its text
   (measured x = 76 / 112 / 39px at 390px). The row's grid runs left-to-right
   so the icon column stays put; the text cell keeps the page's direction. */
.ec-footer__contact a,
.ec-footer__contact p {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    direction: ltr;
    min-height: 44px;
    margin-bottom: 4px;
    padding-top: 10px;
}

.ec-footer__contact img {
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

.ec-footer__contact a > :not(img),
.ec-footer__contact p > :not(img) {
    justify-self: start;
    min-width: 0;
    text-align: left;
}

[dir="rtl"] .ec-footer__contact a > :not(img),
[dir="rtl"] .ec-footer__contact p > :not(img) {
    direction: rtl;
    text-align: right;
}

/* Latin data stays LTR in either direction, left-anchored next to its icon. */
[dir] .ec-footer__contact .ec-footer__ltr {
    direction: ltr;
    text-align: left;
}

/* Desktop follows the reading direction and the Contact Us heading. The
   owner's mobile layout keeps the physical-left icon column above. */
@media (min-width: 992px) {
    .ec-footer__contact a,
    .ec-footer__contact p {
        direction: inherit;
    }
}

/* Phones centre the block as a whole; the icons stay a column inside it. */
@media (max-width: 991.98px) {
    .ec-footer__contact {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }
}

/* Addresses and numbers are Latin data inside an Arabic line. */
.ec-footer__ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.footerbg .ec-footer__links {
    justify-content: center;
}

@media (min-width: 992px) {
    .footerbg .ec-footer__links {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Section title
   Markup: <x-frontend.section-title> — a heading with a 64x4 rule under it,
   starting at the reading edge (centred only with a centred heading).
   -------------------------------------------------------------------------- */
.ec-title {
    position: relative;
    margin-bottom: var(--ec-s6);
    text-align: start;
}

.ec-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-block-start: 12px;
    margin-inline: 0 auto;
    border-radius: 2px;
    background: var(--checker-teal, #0f766e);
}

.ec-title--center {
    text-align: center;
}

.ec-title--center::after {
    margin-inline: auto;
}

.ec-title--on-dark {
    color: var(--checker-cloud, #f7f9fc) !important;
}

.ec-title--on-dark::after {
    background: var(--checker-mint, #2dd4bf);
}

.ec-title + .ec-lede {
    margin-top: calc(-1 * var(--ec-s2));
    margin-bottom: var(--ec-s6);
}

/* --------------------------------------------------------------------------
   Prose (Our story) and the brand stage beside it
   -------------------------------------------------------------------------- */
.ec-prose {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.75;
    color: var(--checker-ink-2, #333a4e);
    text-align: start;
}

html[lang="ar"] .ec-prose {
    line-height: 1.8;
}

.ec-prose p {
    margin: 0 0 16px;
    font-size: inherit;
    line-height: inherit;
    text-align: start;
}

.ec-prose p:last-child {
    margin-bottom: 0;
}

/* About (owner decision, round 5): a quiet navy stage with the brand's faint
   cell pattern instead of a white box, holding the VERTICAL lockup (mark
   above the name, the tagline under it) or the owner's story image on a
   white figure. It keeps a balanced height beside the story column; it is
   never stretched to a long text. */
.ec-brand-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 48px 32px;
    border-radius: var(--r-lg, 16px);
    background: var(--checker-navy, #181e32) url("../brand/checker-cells/hero-background.svg") center / cover no-repeat;
}

.ec-brand-stage .ec-brand {
    max-width: 100%;
}

.ec-brand-stage__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
}

.ec-brand-stage__image {
    display: block;
    max-width: 100%;
    max-height: 300px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .ec-brand-stage {
        margin-top: var(--ec-s6);
        padding: 32px 20px;
    }
}

/* --------------------------------------------------------------------------
   Home hero (review round 4)
   Desktop: the photograph fills the box; the copy and the search sit at the
   BOTTOM, on a compact translucent panel that hugs the text, so the upper
   half shows the place. Phones: the image is its own block under the
   transparent header (header + 200px at 390px), the copy and the search
   follow on solid navy — nothing covers the landmark. The changing name is
   typed inside a box that always holds the full name (the remainder is
   transparent), so no line re-flows per character; the tallest title is
   reserved by the controller. Previous/next/counter/pause live inside the
   image area (W3C carousel pattern).
   -------------------------------------------------------------------------- */
.ec-hero {
    --ec-hero-place: #f7f9fc;
    --ec-hero-accent: var(--checker-mint, #2dd4bf);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--checker-navy, #181e32);
}

/* The carousel region is NOT a stacking context (no z-index), so its two
   children take part in the hero's own order: slides (1) < page scrim (2) <
   copy (3) < controls (4). Round 5 measured the controls under the scrim when
   they lived inside the isolated slides box. */
.ec-hero__carousel {
    position: absolute;
    inset: 0;
}

.ec-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.ec-hero__slides {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.ec-hero__slides .slick-list,
.ec-hero__slides .slick-track,
.ec-hero__slide {
    height: 100%;
}

.ec-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ec-hero__slide-fallback {
    width: 100%;
    height: 100%;
    background: var(--checker-navy, #181e32) url("../brand/checker-cells/hero-background.svg") center / cover no-repeat;
}

/* The page scrim (style.css ::before) stays above the slides and below the
   controls and the copy, and it is inert: a pseudo-element that took pointer
   events would swallow the hover that pauses the slideshow. */
.slidertopheader__home.ec-hero::before {
    z-index: 2;
    pointer-events: none;
}

/* A light opaque bar (owner decision, round 5): cloud surface, navy icons and
   counter, a thin edge and a soft shadow, centred at the bottom of the image
   area, always visible — never a translucent navy pill and never opacity. */
.ec-hero__controls {
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgb(24 30 50 / 14%);
    border-radius: 999px;
    background: #f7f9fc;
    color: #181e32;
    box-shadow: 0 8px 24px rgb(24 30 50 / 28%);
}

.ec-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #181e32;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ec-hero__btn:hover {
    background: rgb(24 30 50 / 8%);
}

/* On the light bar the focus ring is teal (the hero's mint ring is for navy). */
.slidertopheader .ec-hero__btn:focus-visible {
    outline-color: var(--checker-teal, #0f766e) !important;
    outline-offset: 0;
}

.ec-hero__btn i {
    font-size: 22px;
    color: inherit;
}

.ec-hero__counter {
    min-width: 48px;
    padding: 0 6px;
    color: #181e32;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

.ec-hero__content {
    z-index: 3;
}

/* The gap to the search card belongs to the slot, not the panel: the
   controller reserves the slot from the panel's own box height, and a margin
   on the panel would sit outside that measurement (a 16px jump on phones
   was measured before this moved). */
.ec-hero__copy-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.ec-hero__copy {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 22px 4px;
    border-radius: 16px;
    /* Compact: it hugs the two text lines in the bottom band, where the page
       scrim is ≥ .55, and leaves the upper half of the photograph untouched
       (the round-3 panel spanned col-lg-9 in the middle of the picture). Its
       opacity is set by the rendered-pixel measurement: at .56 the worst
       pixel under the title on the brightest slide was 1.97:1. */
    background: rgb(24 30 50 / 64%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ec-hero__title.display-title {
    margin: 0 0 14px;
    font-size: clamp(26px, 2.2vw + 14px, 50px) !important;
    line-height: 1.3 !important;
    color: #fff;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.ec-hero__lead,
.ec-hero__place,
.ec-hero__word,
.ec-hero__rest {
    display: inline;
    white-space: normal;
}

/* The typed part carries the colour and the mint underline; the remainder is
   laid out but transparent (it stays in the accessibility tree, so the
   heading always reads as the whole sentence). */
.ec-hero__word {
    color: var(--ec-hero-place);
    text-decoration: underline;
    text-decoration-color: var(--ec-hero-accent);
    text-decoration-thickness: 4px;
    text-decoration-skip-ink: none;
    text-underline-offset: 0.18em;
}

.ec-hero__rest {
    color: transparent;
}

/* The cursor is absolutely positioned at the inline end of the typed text
   (the positioned inline's last line box), so it takes no space in the line
   — measured: an inline-block cursor, even at width 0, changed the name box
   by 2px — and can never wrap alone. Visible while typing, two blinks when
   the name is complete, then gone for the reading pause. */
.ec-hero__word {
    position: relative;
}

.ec-hero__word.is-typing::after {
    content: "";
    position: absolute;
    inset-inline-start: 100%;
    bottom: 0.1em;
    width: 2px;
    height: 0.9em;
    margin-inline-start: 1px;
    background: currentColor;
}

.ec-hero__word.is-done::after {
    animation: ec-cursor-blink .5s steps(1, end) 2;
}

@keyframes ec-cursor-blink {
    50% { box-shadow: none; }
}

.ec-hero__subtitle {
    margin: 0 0 10px;
    color: #e6ebf5;
    text-wrap: pretty;
}

.ec-hero__search {
    padding: 16px;
}

.ec-hero__search .ec-hero__form {
    padding: 0;
}

.ec-hero__search .ec-hero__form > [class^="col"] {
    margin-bottom: 12px;
}

.ec-hero__search .ec-hero__form > [class^="col"]:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .ec-hero__search {
        padding: 20px 24px;
    }

    .ec-hero__search .ec-hero__form > [class^="col"] {
        margin-bottom: 0;
    }
}

.ec-hero__search .form-control-lg,
.ec-hero__search .custom-select-lg {
    height: 48px;
    padding-inline: 16px;
    font-size: 16px;
}

@media (min-width: 992px) {
    .ec-hero__search .form-control-lg,
    .ec-hero__search .custom-select-lg {
        height: 52px;
    }
}

/* Desktop / tablet: room under the search card for the control bar. */
@media (min-width: 768px) {
    .slidertopheader__home.ec-hero {
        padding-bottom: 92px;
    }
}

/* Phones: image block, then copy and search on navy. */
@media (max-width: 767.98px) {
    .slidertopheader__home.ec-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding-top: 0;
        padding-bottom: 28px;
    }

    .slidertopheader__home.ec-hero::before {
        display: none;
    }

    .ec-hero__carousel {
        position: relative;
        inset: auto;
        height: calc(var(--ec-header-h) + 200px);
        flex: 0 0 auto;
    }

    .ec-hero__media {
        position: absolute;
        inset: 0;
    }

    /* The image block's own scrim: dark only where the header sits. */
    .ec-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgb(24 30 50 / 85%) 0,
            rgb(24 30 50 / 30%) var(--ec-header-h),
            rgb(24 30 50 / 10%) 60%,
            rgb(24 30 50 / 45%) 100%
        );
    }

    .ec-hero__controls {
        bottom: 12px;
    }

    .ec-hero__content {
        padding-top: 20px;
    }

    .ec-hero__copy-slot {
        align-items: stretch;
        margin-bottom: 16px;
    }

    .ec-hero__copy {
        display: block;
        margin-bottom: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-hero__btn {
        transition: none;
    }

    .ec-hero__btn--toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Home sections: features (cloud) → organizer + community (navy)
   The two meet edge to edge; all spacing is section padding.
   -------------------------------------------------------------------------- */
.ec-section {
    padding: 40px 0;
}

@media (min-width: 992px) {
    .ec-section {
        padding: 72px 0;
    }
}

.ec-section__head {
    margin-bottom: 32px;
}

.ec-section--cloud {
    background: var(--checker-cloud, #f7f9fc);
}

.ec-section--navy {
    position: relative;
    overflow: hidden;
    background: var(--checker-navy, #181e32);
    color: var(--checker-cloud, #f7f9fc);
}

/* §09 — a few scattered cells at the edges, never behind the copy. */
.ec-section--navy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../brand/checker-cells/hero-background.svg") center / cover no-repeat;
    opacity: .6;
    pointer-events: none;
}

.ec-section--navy > .container {
    position: relative;
}

.ec-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--checker-border, #c6cedc);
    border-radius: var(--r-lg, 16px);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ec-feature:hover {
    border-color: var(--checker-teal, #0f766e);
    box-shadow: 0 8px 24px rgb(24 30 50 / 8%);
    transform: translateY(-2px);
}

.ec-feature__icon {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-md, 12px);
    background: rgb(15 118 110 / 10%);
    color: var(--checker-teal, #0f766e);
    font-size: 26px;
}

.ec-feature__icon img {
    width: 32px;
    height: auto;
}

.ec-feature__icon i {
    color: inherit !important;
}

.ec-feature__title {
    margin: 0 0 6px;
    color: var(--checker-navy, #181e32);
}

.ec-feature__text {
    color: var(--checker-muted, #667085);
    line-height: 1.6;
}

.ec-cta__lede {
    color: var(--checker-on-dark, #b8bfce) !important;
}

.ec-cta__list {
    margin-bottom: 28px;
}

.ec-section--navy .listcheck li {
    color: var(--checker-cloud, #f7f9fc);
}

.ec-section--navy .listcheck li::before {
    color: var(--checker-mint, #2dd4bf);
}

/* §06 — the action on navy is mint with navy ink (8.9:1); teal on navy is
   forbidden. Hover keeps the ink pinned so nothing can inherit white. */
.ec-section--navy .btn-primary {
    color: var(--checker-navy, #181e32) !important;
    background-color: var(--checker-mint, #2dd4bf) !important;
    border-color: var(--checker-mint, #2dd4bf) !important;
}

.ec-section--navy .btn-primary:hover,
.ec-section--navy .btn-primary:focus {
    color: var(--checker-navy, #181e32) !important;
    background-color: var(--checker-mint-hover, #24bfae) !important;
    border-color: var(--checker-mint-hover, #24bfae) !important;
}

.ec-community-col {
    margin-top: 32px;
}

@media (min-width: 992px) {
    .ec-community-col {
        margin-top: 0;
    }
}

.ec-community {
    padding: 28px 20px;
    background: var(--checker-elevated, #242b45);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--r-lg, 16px);
}

@media (min-width: 992px) {
    .ec-community {
        padding: 36px 32px;
    }
}

.ec-community__title {
    margin-bottom: 24px;
    color: var(--checker-cloud, #f7f9fc) !important;
}

.ec-community__stat {
    padding: 12px 4px;
    color: #fff;
}

.ec-community__label {
    color: var(--checker-on-dark, #b8bfce);
}

/* --------------------------------------------------------------------------
   Category / event-type cards: icon, name and count always visible
   -------------------------------------------------------------------------- */
.ec-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 172px;
    padding: 20px 12px;
    background: #fff;
    border: 1px solid var(--checker-border, #c6cedc);
    border-radius: var(--r-lg, 16px);
    color: var(--checker-navy, #181e32);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ec-cat:hover,
.ec-cat:focus-visible {
    border-color: var(--checker-teal, #0f766e);
    box-shadow: 0 8px 24px rgb(24 30 50 / 8%);
    color: var(--checker-navy, #181e32);
    text-decoration: none;
    transform: translateY(-2px);
}

.ec-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: var(--checker-teal, #0f766e);
    font-size: 36px;
    line-height: 1;
}

.ec-cat__icon i {
    color: inherit !important;
}

.ec-cat__icon img {
    width: 36px;
    height: 36px;
}

.ec-cat__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ec-cat__count {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--checker-mist, #e9edf3);
    color: var(--checker-ink-2, #333a4e);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ec-cat {
        min-height: 160px;
        padding: 16px 10px;
    }

    .ec-cat__icon {
        font-size: 32px;
    }

    .ec-cat__name {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-cat,
    .ec-feature {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Event card additions: full date line, calendar state, honest price
   -------------------------------------------------------------------------- */
.ec-card__date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--checker-ink-2, #333a4e);
}

.ec-card__date i {
    color: var(--checker-teal, #0f766e);
}

.ec-card__status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ec-card__status--upcoming {
    background: rgb(15 118 110 / 12%);
    color: var(--checker-teal, #0f766e);
}

/* Calendar state is never gold (gold = Featured/Premium only): ongoing is
   the mint tint, upcoming teal, ended grey. */
.ec-card__status--ongoing {
    background: rgb(45 212 191 / 22%);
    color: var(--checker-mint-ink, #0b3a34);
}

.ec-card__status--ended {
    background: var(--checker-mist, #e9edf3);
    color: var(--checker-ink-2, #333a4e);
}

.ec-card__title a {
    color: var(--checker-navy, #181e32);
}

/* The date is information, not a distinction: a white box with navy ink on
   every card, featured or not. Corners are PHYSICAL by owner decision
   (review round 5): the date sits at the right and the distinction badge at
   the left in both languages — the corners are part of the component, not of
   the reading direction; the text inside each keeps its own direction. The
   legacy per-direction pair (style.css left:10px / style-ltr.css right:10px
   !important) is gone, and the legacy cards that still use the template
   class get the same physical corner below. */
.boxevents__thu_label_time {
    top: 10px;
    right: 10px;
    left: auto;
}

.ec-card__date-badge {
    top: 12px;
    right: 12px;
    left: auto;
}

.ec-card__date-box {
    min-width: 56px;
    padding: 8px 10px;
    border: 1px solid rgb(24 30 50 / 12%);
    border-radius: 12px;
    background: #ffffff;
    color: var(--checker-navy, #181e32);
    box-shadow: 0 2px 8px rgb(24 30 50 / 14%);
}

.ec-card__date-box .ec-card__date-day {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.ec-card__date-box .ec-card__date-month,
.ec-card__date-box .ec-card__date-year {
    display: block;
    margin-top: 3px;
    color: var(--checker-ink-2, #333a4e);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* The distinction badge sits in the opposite (left) top corner. */
.ec-card__flag {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   List toolbars, the filter drawer, loading and empty states
   -------------------------------------------------------------------------- */
.ec-list__toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.ec-list__search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ec-list__search input {
    height: 48px;
    padding-inline-start: 42px;
}

.ec-list__search i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--checker-muted, #667085);
    pointer-events: none;
}

.ec-list__filters-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    white-space: nowrap;
}

.ec-list__count {
    display: inline-block;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--checker-teal, #0f766e);
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
}

.ec-list__loading {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 0 0;
    color: var(--checker-muted, #667085);
    font-weight: 600;
}

.ec-list__spinner {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--checker-teal, #0f766e);
    animation: ccCellPulse 1s ease-in-out infinite;
}

.gridevents__row.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

.ec-empty {
    padding: 48px 20px;
    background: #fff;
    border: 1px dashed var(--checker-border, #c6cedc);
    border-radius: var(--r-lg, 16px);
    text-align: center;
}

.ec-empty i {
    display: block;
    margin-bottom: 12px;
    color: var(--checker-teal, #0f766e);
    font-size: 40px;
}

.ec-empty__title {
    margin-bottom: 8px;
    font-size: 20px !important;
}

.ec-empty p {
    margin-bottom: 16px;
    color: var(--checker-muted, #667085);
}

.ec-filters__head,
.ec-filters__foot,
.ec-drawer-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .ec-filters {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        width: min(360px, calc(100vw - 32px));
        max-width: 100vw;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff;
        box-shadow: 0 0 40px rgb(24 30 50 / 30%);
        visibility: hidden;
        transform: translateX(var(--ec-drawer-out));
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    html[dir="ltr"] .ec-filters {
        --ec-drawer-out: 100%;
        right: 0;
        left: auto;
    }

    html[dir="rtl"] .ec-filters {
        --ec-drawer-out: -100%;
        left: 0;
        right: auto;
    }

    body.ec-drawer-open .ec-filters {
        visibility: visible;
        transform: none;
        transition: transform .3s ease, visibility 0s;
    }

    .ec-filters:focus {
        outline: none;
    }

    .ec-filters .sticky-top {
        position: static !important;
        top: auto !important;
    }

    .ec-filters__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 8px 10px 20px;
        border-bottom: 1px solid var(--checker-border, #c6cedc);
    }

    html[dir="rtl"] .ec-filters__head {
        padding: 10px 20px 10px 8px;
    }

    .ec-filters__title {
        font-size: 18px;
        font-weight: 700;
        color: var(--checker-navy, #181e32);
    }

    .ec-filters__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-height: 44px;
        border-radius: var(--r-sm, 6px);
        color: var(--checker-navy, #181e32);
        font-size: 18px;
    }

    .ec-filters__body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 12px 16px;
    }

    .ec-filters__foot {
        display: flex;
        gap: 12px;
        padding: 12px 16px;
        border-top: 1px solid var(--checker-border, #c6cedc);
        background: #fff;
    }

    .ec-filters__foot .btn {
        flex: 1 1 0;
        min-height: 48px;
    }

    .ec-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgb(21 21 21 / 60%);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    body.ec-drawer-open .ec-drawer-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-filters,
    .ec-drawer-backdrop,
    .sidenav {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Password visibility toggle: a real button with a 44px target, centred on
   the field's trailing edge in both directions.
   -------------------------------------------------------------------------- */
.btn-reset.buttoneyeshowpassword {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    top: 50%;
    bottom: auto;
    /* Physical resets first, then the logical offset, so the offset wins the
       same physical property in both directions. */
    left: auto;
    right: auto;
    inset-inline-end: 6px;
    padding: 0;
    border-radius: var(--r-sm, 6px);
    color: var(--checker-muted, #667085);
    transform: translateY(-50%);
}

.btn-reset.buttoneyeshowpassword:hover,
.btn-reset.buttoneyeshowpassword[aria-pressed="true"] {
    color: var(--checker-teal, #0f766e);
}

/* Release audit: links distinguishable without colour; 32px topic targets. */
.singlecontentbg a:not(.btn), .ec-prose-link {
    text-decoration: underline;
    text-underline-offset: .18em;
}
.ec-topic-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 24px;
    white-space: normal;
}
.btn.colorsocial.wh, .btn.colorsocial.wh:hover, .btn.colorsocial.wh:focus {
    color: var(--checker-navy) !important;
}
.nav-tabs.customtabs__style1 .nav-link:not(.active) {
    color: var(--checker-body, #333a4e);
}