/* ===========================================================================
   EventCentral.me — brand-new stylesheet
   Palette: black / white / red. Bootstrap 4.6 + Bootstrap Icons + Swiper.
   ========================================================================= */

/* --------------------------------------------------------- DESIGN TOKENS  */
:root {
    /* Brand */
    --ec-red:        #dc2626;
    --ec-red-dark:   #991b1b;
    --ec-red-soft:   #fef2f2;
    --ec-black:      #0a0a0a;
    --ec-ink:        #111111;

    /* Neutrals */
    --ec-text:       #1a1a1a;
    --ec-text-muted: #6b7280;
    --ec-bg:         #ffffff;
    --ec-bg-alt:     #f7f7f8;
    --ec-border:     #e5e7eb;
    --ec-border-strong: #d1d5db;

    /* Layout */
    --ec-radius:     14px;
    --ec-radius-sm:  10px;
    --ec-radius-pill:9999px;

    /* Elevation */
    --ec-shadow-sm:  0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    --ec-shadow:     0 4px 12px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
    --ec-shadow-lg:  0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);

    /* Type */
    --ec-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* --------------------------------------------------------- RESET / BASE   */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--ec-font);
    color: var(--ec-text);
    background: var(--ec-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

a { color: var(--ec-red); transition: color .15s ease; }
a:hover { color: var(--ec-red-dark); text-decoration: none; }

img { max-width: 100%; height: auto; }

.ec-text-red { color: var(--ec-red); }

/* Eyebrow / small caps label */
.ec-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ec-red);
    margin-bottom: 14px;
}
.ec-eyebrow-light { color: rgba(255,255,255,.78); }

/* =========================================================================
   NAVIGATION (BPO-style — clean, sticky, collapses to burger)
   ========================================================================= */
.ec-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ec-border);
    transition: box-shadow .2s ease;
}
.ec-nav-scrolled { box-shadow: var(--ec-shadow-sm); }

.ec-nav .navbar {
    /* No min-height here — the brand sets the row height instead. If we put
       min-height on .navbar, Bootstrap's `align-items: center` re-centers the
       brand row when the collapse opens (taller wrapped flex container), which
       reads as an 11px upward "jump" on mobile. Holding the height on the
       brand keeps the top row constant in both collapsed and expanded states. */
}

/* Logo */
.ec-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;          /* pins the top row height — see note above */
    color: var(--ec-black);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.01em;
    text-decoration: none;
}
.ec-brand:hover { color: var(--ec-black); text-decoration: none; }
.ec-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--ec-red);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .02em;
}
.ec-brand-text { color: var(--ec-black); }
.ec-brand-text strong { color: var(--ec-red); font-weight: 800; }
.ec-brand-light .ec-brand-text { color: #fff; }

/* Burger button — 44x44 tap target (WCAG min) with 28x22 bar group inside */
.ec-toggler {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 11px 8px;     /* with border-box, content area is 28x22 for the bars */
    margin: 0 -8px;        /* visually keep the icon flush with the edge despite padding */
    background: transparent;
    border: 0;
    cursor: pointer;
}
.ec-toggler:focus { outline: none; }
.ec-toggler-bar {
    display: block;
    width: 100%; height: 2px;
    background: var(--ec-black);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.ec-toggler.is-open .ec-toggler-bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.ec-toggler.is-open .ec-toggler-bar:nth-child(2) { opacity: 0; }
.ec-toggler.is-open .ec-toggler-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Nav links */
.ec-nav-main .nav-link,
.ec-nav-cta  .nav-link {
    color: var(--ec-ink);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 14px;
    transition: color .15s ease;
}
.ec-nav-main .nav-link:hover,
.ec-nav-cta  .nav-link:hover { color: var(--ec-red); }

.ec-nav-cta { gap: 6px; align-items: center; }

/* Buttons */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--ec-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
    white-space: nowrap;
}
.ec-btn:hover { text-decoration: none; }
.ec-btn:active { transform: translateY(1px); }
.ec-btn-lg { padding: 14px 26px; font-size: 15px; }

.ec-btn-primary {
    background: var(--ec-red);
    color: #fff;
    border-color: var(--ec-red);
}
.ec-btn-primary:hover { background: var(--ec-red-dark); border-color: var(--ec-red-dark); color: #fff; }

.ec-btn-outline {
    background: transparent;
    color: var(--ec-ink);
    border-color: var(--ec-border-strong);
}
.ec-btn-outline:hover { background: var(--ec-ink); color: #fff; border-color: var(--ec-ink); }

.ec-btn-link-light {
    background: transparent;
    color: #fff;
    border-color: transparent;
    padding-left: 6px; padding-right: 6px;
}
.ec-btn-link-light:hover { color: #fff; opacity: .8; }

/* =========================================================================
   HERO
   ========================================================================= */
.ec-hero {
    position: relative;
    overflow: hidden;
    background: var(--ec-black);
    color: #fff;
}
.ec-hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .55;
    transform: scale(1.02);
    will-change: transform;
}
.ec-hero-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(220,38,38,.20), transparent 55%),
        linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.85) 100%);
}

.ec-hero-inner {
    position: relative;
    /* Longhand so we don't clobber the 15px horizontal padding that
       Bootstrap's .container provides — that was the cause of the
       edge-to-edge hero content on mobile. */
    padding-top: 56px;          /* trimmed from 96px — banner now occupies the upper hero area */
    padding-bottom: 80px;
    max-width: 880px;
}
.ec-hero-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 18px;
}
.ec-hero-sub {
    color: rgba(255,255,255,.82);
    font-size: 17px;
    margin: 0 0 32px;
    max-width: 600px;
}
.ec-hero-sub strong { color: #fff; font-weight: 700; }

/* Search bar */
.ec-search {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow-lg);
    padding: 8px;
    gap: 0;
    max-width: 760px;
}
.ec-search-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 4px 14px;
}
.ec-search-icon {
    color: var(--ec-text-muted);
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}
.ec-search-field input,
.ec-search-field select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ec-text);
    font-size: 15px;
    font-family: inherit;
    padding: 14px 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.ec-search-field input::placeholder { color: #9ca3af; }
.ec-search-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px;
    padding-right: 22px;
}
.ec-search-divider {
    width: 1px;
    background: var(--ec-border);
    margin: 12px 0;
    flex-shrink: 0;
}
.ec-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ec-red);
    color: #fff;
    border: 0;
    border-radius: var(--ec-radius-sm);
    padding: 0 28px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
    white-space: nowrap;
    min-height: 52px;
}
.ec-search-submit:hover { background: var(--ec-red-dark); }
.ec-search-submit:active { transform: translateY(1px); }

/* =========================================================================
   SECTIONS / SECTION HEADS
   ========================================================================= */
.ec-section {
    padding: 80px 0;
}
.ec-section-tight { padding: 64px 0 32px; }
.ec-section-alt { background: var(--ec-bg-alt); }

.ec-section-head { margin-bottom: 36px; }
.ec-section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ec-section-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ec-black);
    margin: 0 0 8px;
}
.ec-section-sub {
    color: var(--ec-text-muted);
    font-size: 16px;
    margin: 0;
    max-width: 600px;
}
.ec-section-link {
    color: var(--ec-ink);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 2px solid var(--ec-ink);
    padding-bottom: 2px;
}
.ec-section-link:hover { color: var(--ec-red); border-color: var(--ec-red); }

/* =========================================================================
   EVENT CARDS (image-led)
   ========================================================================= */
.ec-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    overflow: hidden;
    color: var(--ec-text);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ec-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ec-shadow-lg);
    border-color: var(--ec-border-strong);
    color: var(--ec-text);
    text-decoration: none;
}

.ec-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--ec-bg-alt);
    background-size: cover;
    background-position: center;
}
/* iOS Safari pre-aspect-ratio fallback */
@supports not (aspect-ratio: 16 / 9) {
    .ec-card-media { padding-top: 56.25%; }
}
.ec-card-media::after {
    /* subtle bottom gradient so the date pill is always legible */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
}

.ec-card-badge {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: var(--ec-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--ec-radius-pill);
}

.ec-card-date {
    position: absolute;
    bottom: 12px; left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    color: var(--ec-ink);
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: var(--ec-shadow);
    min-width: 50px;
}
.ec-card-day { font-size: 18px; font-weight: 800; line-height: 1; }
.ec-card-mon { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ec-red); margin-top: 2px; }

.ec-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.ec-card-cat {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ec-red);
    background: var(--ec-red-soft);
    padding: 4px 8px;
    border-radius: var(--ec-radius-pill);
}
.ec-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ec-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ec-card:hover .ec-card-title { color: var(--ec-red); }
.ec-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-text-muted);
    font-size: 13px;
    margin-top: 2px;
}
.ec-card-meta i { font-size: 14px; color: var(--ec-text-muted); flex-shrink: 0; }
.ec-card-meta span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ec-card-footer {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ec-card-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-ink);
}

/* =========================================================================
   SWIPER overrides (modern look, red accents)
   ========================================================================= */
.ec-featured-swiper {
    position: relative;
    padding: 4px 0 56px;
    /* Clip slides at the container edge (Swiper's default). Previously this
       was `overflow: visible` for the peek-next effect, but at desktop widths
       it let partial cards bleed past the search bar's right edge. The peek
       still works inside the wrapper because slidesPerView is fractional. */
    overflow: hidden;
}
.ec-featured-swiper .swiper-slide { height: auto; }
.ec-featured-swiper .swiper-slide .ec-card { height: 100%; }

/* Pagination dots */
.ec-swiper-pagination {
    bottom: 16px !important;
    text-align: center;
}
.ec-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: var(--ec-border-strong);
    opacity: 1;
    margin: 0 4px !important;
    transition: background .15s ease, width .2s ease;
}
.ec-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--ec-red);
    width: 24px;
    border-radius: 4px;
}

/* Navigation arrows */
.ec-swiper-controls {
    display: none;
    position: absolute;
    top: -52px; right: 0;
    gap: 8px;
    z-index: 5;
}
@media (min-width: 768px) {
    .ec-swiper-controls { display: flex; }
}
.ec-swiper-arrow {
    width: 40px; height: 40px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    color: var(--ec-ink);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ec-swiper-arrow:hover { background: var(--ec-ink); color: #fff; border-color: var(--ec-ink); }
.ec-swiper-arrow:focus { outline: none; }
.ec-swiper-arrow.swiper-button-disabled { opacity: .35; cursor: not-allowed; }

/* =========================================================================
   CATEGORIES GRID
   ========================================================================= */
.ec-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ec-cat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    color: var(--ec-ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ec-cat-card:hover {
    border-color: var(--ec-ink);
    background: var(--ec-ink);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.ec-cat-name { font-weight: 600; font-size: 15px; }
.ec-cat-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
.ec-cat-card:hover .ec-cat-count { color: rgba(255,255,255,.85); }

/* =========================================================================
   CTA STRIP
   ========================================================================= */
.ec-cta {
    padding: 80px 0;
}
.ec-cta-card {
    background: var(--ec-black);
    color: #fff;
    border-radius: var(--ec-radius);
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(220,38,38,.35), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(220,38,38,.18), transparent 50%);
}
.ec-cta-text { flex: 1 1 420px; }
.ec-cta-title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.ec-cta-sub {
    color: rgba(255,255,255,.78);
    margin: 0;
    font-size: 15px;
}
.ec-cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ec-footer {
    background: var(--ec-black);
    color: rgba(255,255,255,.7);
    padding: 64px 0 24px;
}
.ec-footer-tag {
    margin: 18px 0 20px;
    font-size: 14px;
    color: rgba(255,255,255,.65);
    max-width: 440px;
    line-height: 1.6;
}
.ec-footer-h {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.ec-footer-links {
    list-style: none;
    padding: 0; margin: 0;
}
.ec-footer-links li { margin-bottom: 10px; }
.ec-footer-links a {
    color: rgba(255,255,255,.7);
    font-size: 14px;
    text-decoration: none;
}
.ec-footer-links a:hover { color: #fff; }

.ec-footer-social {
    display: flex;
    gap: 10px;
}
.ec-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--ec-radius-pill);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ec-footer-social a:hover {
    background: var(--ec-red);
    border-color: var(--ec-red);
    color: #fff;
}

.ec-footer-bottom {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

/* =========================================================================
   MAIN WRAPPER — uses flex column so we can reorder sections per breakpoint
   ========================================================================= */
.ec-main {
    display: flex;
    flex-direction: column;
}
.ec-main > * { order: 0; }

/* =========================================================================
   BANNERS CAROUSEL — sits INSIDE the hero, at the top of the content stack
   (above the eyebrow). On both mobile and desktop. Source order in the
   hero handles the "above the search on mobile" requirement intrinsically;
   no flex `order` games needed.
   ========================================================================= */
.ec-hero-banners {
    margin-bottom: 36px;
    /* Match the hero text column so the banner doesn't feel wider than the
       headline + search bar below it. */
    max-width: 880px;
}

.ec-banners-swiper {
    position: relative;
    border-radius: var(--ec-radius);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ec-banners-swiper .swiper-slide {
    display: block;
}
.ec-banner {
    display: block;
    position: relative;
    /* Wider/thinner inside the hero so it reads as a leaderboard ad,
       not a poster. Recommend uploading 1200x200. */
    aspect-ratio: 6 / 1;
    background: rgba(255,255,255,.04);
    text-decoration: none;
    overflow: hidden;
}
@supports not (aspect-ratio: 6 / 1) {
    .ec-banner { padding-top: 16.67%; }
}
.ec-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.ec-banner:hover img { transform: scale(1.015); }

/* Mobile: a touch shorter so it doesn't dominate the small viewport */
@media (max-width: 575.98px) {
    /* 5:1 on mobile — a touch taller than the 6:1 desktop ratio for more
       presence on a small screen. contain (below) keeps the full image
       visible so the slightly different ratio never crops content. */
    .ec-banner { aspect-ratio: 5 / 1; }
    @supports not (aspect-ratio: 5 / 1) {
        .ec-banner { padding-top: 20%; }
    }
    /* Show the whole image even if an upload isn't exactly 6:1 — a thin
       letterbox is better than chopping off content on a small screen. */
    .ec-banner img { object-fit: contain; }
    .ec-hero-banners { margin-bottom: 24px; }
}

/* Pagination dots — bottom centre, overlaid on the image */
.ec-banners-pagination {
    position: absolute;
    left: 0; right: 0;
    bottom: 10px !important;
    z-index: 3;
    text-align: center;
}
.ec-banners-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px;
    background: rgba(255,255,255,.55);
    opacity: 1;
    margin: 0 4px !important;
    transition: background .15s ease, width .2s ease;
}
.ec-banners-pagination .swiper-pagination-bullet-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Burger appears */
    .ec-toggler { display: inline-flex; }
    .ec-nav .navbar-collapse {
        margin: 16px -15px 0;
        padding: 16px 15px;
        border-top: 1px solid var(--ec-border);
    }
    .ec-nav-main, .ec-nav-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .ec-nav-cta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ec-border); }
    .ec-nav-main .nav-link, .ec-nav-cta .nav-link { padding: 12px 0; }
    .ec-nav-cta .ec-btn { width: 100%; margin-top: 8px; }
}

@media (max-width: 767.98px) {
    .ec-hero-inner {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .ec-search {
        flex-direction: column;
        padding: 12px;
        gap: 6px;
    }
    .ec-search-divider { display: none; }
    .ec-search-field {
        background: var(--ec-bg-alt);
        border-radius: var(--ec-radius-sm);
        padding: 4px 14px;
    }
    .ec-search-field input,
    .ec-search-field select { padding: 12px 0; }
    .ec-search-submit {
        width: 100%;
        margin-top: 6px;
        padding: 14px;
    }

    .ec-section { padding: 56px 0; }
    .ec-section-tight { padding: 48px 0 24px; }

    .ec-cta { padding: 56px 0; }
    .ec-cta-card { padding: 32px 24px; }
    .ec-cta-actions .ec-btn { flex: 1; }
}

@media (max-width: 575.98px) {
    .ec-hero-title { font-size: 30px; }
    .ec-cat-grid { grid-template-columns: 1fr; }
}