/* =============================================================
   Nejat Before After Gallery Widget
   ============================================================= */

/* Fix: At ≤767px Elementor sets --flex-wrap:wrap on every .e-con.e-flex
   container, which constrains the height of its flex items. The gallery
   widget can overflow multiple rows so this clips the bottom rows.
   Override only the direct parent container of this widget. */
@media (max-width: 767px) {
    .e-con.e-flex:has(> .elementor-widget-nejat-before-after-gallery) {
        --flex-wrap: nowrap;
    }
}

/* ── Root wrapper (controls vertical section spacing) ───────── */
.nejat-ba-gallery {
    padding-top: var(--nejat-section-pad-v);
    padding-bottom: var(--nejat-section-pad-v);
}

/* ── Section header wrapper ─────────────────────────────────── */
.nejat-ba-gallery__header-wrap {
    padding-bottom: var(--nejat-gap-md);
}

.nejat-ba-gallery__header-inner {
    max-width: var(--nejat-max-width);
    margin: 0 auto;
    padding-left: var(--nejat-gutter);
    padding-right: var(--nejat-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nejat-gap-md);
}

.nejat-ba-gallery__header-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nejat-ba-gallery__eyebrow {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #4ab3c8;
    margin: 0;
}

.nejat-ba-gallery__headline {
    font-size: clamp(22px, 2.8vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0;
}

/* Gallery link (top-right) */
.nejat-ba-gallery__gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #4ab3c8;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap 0.2s ease;
}

.nejat-ba-gallery__gallery-link:hover {
    gap: 10px;
    color: #4ab3c8;
    text-decoration: none;
}

.nejat-ba-gallery__gallery-link-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Grid wrapper ────────────────────────────────────────────── */
.nejat-ba-gallery__grid-wrap {
    max-width: var(--nejat-max-width);
    margin: 0 auto;
    padding-left: var(--nejat-gutter);
    padding-right: var(--nejat-gutter);
}

/* ── Grid ────────────────────────────────────────────────────── */
.nejat-ba-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Individual card ─────────────────────────────────────────── */
.nejat-ba-gallery__item {
    /* Let the web component fill the grid cell */
    display: block;
    min-width: 0; /* prevent grid blowout */
}

/* ── Web Component host overrides ────────────────────────────── */
/* External styles win over :host rules inside Shadow DOM */
.nejat-ba-gallery__grid before-after {
    display: block;
    width: 100%;
    border-radius: 12px;
    /* aspect-ratio: 16/9 is set inside the shadow DOM */
}

/* ── Responsive — tablet ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .nejat-ba-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ── Responsive — mobile ─────────────────────────────────────── */
@media (max-width: 560px) {
    .nejat-ba-gallery__grid-wrap .nejat-ba-gallery__grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .nejat-ba-gallery__header-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}