/*
 * Frontend CSS for FC Annaberg Sponsor Magic (v2)
 * Strictly scoped to .fca-sponsor-grid-wrap.
 */

.fca-sponsor-grid-wrap {
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    /* Establish a size containment context so group labels can use `cqw`
       to scale with the grid width (frontend viewport OR admin preview pane). */
    container-type: inline-size;
    /* Defensive: never let a parent flex/grid layout squeeze or clip the grid —
       grow freely with sponsor count, regardless of where the shortcode sits. */
    flex-shrink: 0;
    min-height: 0;
    overflow: visible;
}

.fca-sponsor-grid-wrap * {
    box-sizing: border-box;
}

.fca-sponsor-grid-wrap .fca-sponsor-title {
    text-align: center;
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fca-sponsor-grid-wrap .fca-sponsor-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.fca-sponsor-grid-wrap .fca-sponsor-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fca-sponsor-grid-wrap .fca-sponsor-group-label {
    text-align: center;
    /* Fluid default: 10 px floor → ~16 px at 1200 cqw → 16 px max. Inline style
       from the admin overrides this with a clamp() calibrated to the user's
       chosen max size. */
    font-size: clamp(10px, 1.333cqw, 16px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.9;
}

.fca-sponsor-grid-wrap .fca-sponsor-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 40px;
}

.fca-sponsor-grid-wrap .fca-sponsor-item {
    width: var(--fca-item-size, 200px);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    position: relative;
}

.fca-sponsor-grid-wrap .fca-sponsor-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
}

/* =========================================================
   REFLOW MODE (Default): logos keep their desktop pixel size
   until the *container* cannot fit them — then they shrink and
   wrap naturally. Container queries (`cqw`) instead of viewport
   units so the rules also fire when the grid lives in a narrow
   Elementor column or footer, not only at narrow viewports.
   ========================================================= */

@container (max-width: 900px) {
    .fca-sponsor-grid-wrap.fca-mode-reflow .fca-sponsor-flow {
        gap: 22px 28px;
    }
    .fca-sponsor-grid-wrap.fca-mode-reflow .fca-sponsor-item {
        width: min(var(--fca-item-size, 200px), 40cqw);
    }
}

@container (max-width: 600px) {
    .fca-sponsor-grid-wrap.fca-mode-reflow .fca-sponsor-flow {
        gap: 16px 20px;
    }
    .fca-sponsor-grid-wrap.fca-mode-reflow .fca-sponsor-item {
        width: min(var(--fca-item-size, 200px), 45cqw);
    }
}

/* =========================================================
   Elementor mobile safety net:
   Some themes / Elementor templates apply mobile-specific height or overflow
   constraints on footer containers that end up clipping tall sponsor grids.
   Below 768 px viewport, force every Elementor-ish ancestor of the grid to
   grow with content.

   The class is tripled (e.g. `.elementor-element.elementor-element.elementor-element`)
   purely to raise CSS specificity. Elementor emits per-page selectors like
   `.elementor-738 .elementor-element.elementor-element-XXXX` with specificity 30;
   tripling our class brings us to 40 so `!important` actually applies.
   Uses `:has()` — baseline-supported since late 2023.
   ========================================================= */
@media (max-width: 767px) {
    html body .elementor-element.elementor-element.elementor-element:has(.fca-sponsor-grid-wrap),
    html body .e-con.e-con.e-con:has(.fca-sponsor-grid-wrap),
    html body .elementor-section.elementor-section.elementor-section:has(.fca-sponsor-grid-wrap),
    html body .elementor-column.elementor-column.elementor-column:has(.fca-sponsor-grid-wrap),
    html body .elementor-widget.elementor-widget.elementor-widget:has(.fca-sponsor-grid-wrap),
    html body footer:has(.fca-sponsor-grid-wrap) {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================================
   SCALE MODE (opt-in per profile): desktop layout is kept
   intact and the entire grid is proportionally shrunk on
   small screens — same approach as the FC Bayern page.
   ========================================================= */

@media (max-width: 768px) {
    .fca-sponsor-grid-wrap.fca-mode-scale .fca-sponsor-grid {
        zoom: 0.6;
    }
}

@media (max-width: 480px) {
    .fca-sponsor-grid-wrap.fca-mode-scale .fca-sponsor-grid {
        zoom: 0.38;
    }
}