/**
 * First Plugin — Frontend Styles (Composable Section)
 *
 * Loaded only when Elementor renders a page that includes
 * the Composable Section widget.
 *
 * @package First_Plugin
 * @since   1.0.0
 */

/* ── Core composable section ───────────────────────────────────────────────── */
.fp-composable-section {
    position: relative;        /* anchor for ::before overlay */
    width: 100%;
}

/* Background overlay (optional ::before layer) */
.fp-composable-section::before {
    content: "";
    position: absolute;
    inset: 0;                  /* top/right/bottom/left: 0 */
    pointer-events: none;
    z-index: 0;
}

.fp-composable-section__content {
    position: relative;
    z-index: 1;                /* above the ::before overlay */
    width: 100%;
}

/* Overlay sibling element (for JS-driven or video backgrounds) */
.fp-composable-section__overlay {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Responsive visibility helpers ─────────────────────────────────────────── */

/* Desktop (≥ 1025px): hide when .fp-hide-desktop-yes */
@media (min-width: 1025px) {
    .fp-hide-desktop-yes {
        display: none !important;
    }
}

/* Tablet (481px – 1024px): hide when .fp-hide-tablet-yes */
@media (min-width: 481px) and (max-width: 1024px) {
    .fp-hide-tablet-yes {
        display: none !important;
    }
}

/* Mobile (≤ 480px): hide when .fp-hide-mobile-yes */
@media (max-width: 480px) {
    .fp-hide-mobile-yes {
        display: none !important;
    }
}

/* ── Animation: ensure Elementor's animate.css classes work ────────────────── */
.fp-composable-section.animated {
    animation-fill-mode: both;
}

/* ── Print: reset visibility overrides ─────────────────────────────────────── */
@media print {
    .fp-hide-desktop-yes,
    .fp-hide-tablet-yes,
    .fp-hide-mobile-yes {
        display: block !important;
    }
}