/* ==========================================================================
   sections.css
   Section containers for design system pages (Section Structure in the
   handoff doc), background variants, card sections and a few one-off
   section styles.

   01. Section Variables
   02. Standard Section Layout
   03. Background Variants
   04. Legacy Section Containers
   05. Card Section Layout
   06. Feature Container
   07. Video Aspect
   08. FUSE Conference Section
   ========================================================================== */

/* ==== 01. Section Variables ==== */
:root {
    /* Inner Content Max Width */
    --inner-content-max-width: 1160px;
    --inner-content-wide-max-width: 1920px;

    /* Section Top Padding */
    --vertical-padding-desktop: 100px;
    --vertical-padding-tablet: 60px;
    --vertical-padding-mobile: 60px;
    --vertical-padding-zero: 0px;

    /* Inner Section Padding on Smaller Devices */
    --side-padding-narrow: 20px;
    --side-padding-standard: 20px;
    --side-padding-wide: 40px;

    /* Gap Designations */
    --gap-standard: 40px;
    --gap-wide: 120px;
}

/* ==== 02. Standard Section Layout ==== */

/* Outer container */
.section-container-outer {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
}

/* Inner container */
.section-container-inner {
    width: 100%;
    max-width: var(--inner-content-max-width);
    margin: var(--vertical-padding-desktop) auto;
    padding: 0;
    box-sizing: border-box;
    display: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;
}

/* Outer container with background video */
.section-container-outer.video {
    padding: 0 20px !important;
}

/* Mobile: remove padding entirely */
@media (max-width: 767px) {
    .section-container-outer.video {
        padding: 0 !important;
    }
}

.section-container-inner.video {
    position: relative;
    overflow: hidden;
    max-width: var(--inner-content-wide-max-width);
    border-radius: var(--image-border-radius);
    min-height: clamp(360px, 56.25vw, 788px);
    margin: 0 !important;
}

/* Mobile: remove rounded corners */
@media (max-width: 767.98px) {
    .section-container-inner.video {
        border-radius: 0 !important;
        /* Stop the clamp from making it too tall */
        min-height: 0;
        height: auto;
        /* Lock the video container to 16:9 on mobile */
        aspect-ratio: 1 / 1;
    }
}

/* Wide inner container (background video) */
.section-container-inner.wide {
    position: relative;
    overflow: hidden;
    max-width: var(--inner-content-wide-max-width);
    border-radius: var(--image-border-radius);
    margin: 0;
}

/* Mobile: remove rounded corners */
@media (max-width: 767.98px) {
    .section-container-inner.wide {
        border-radius: 0 !important;
    }
}

/* Wide hero/carousel container */
.section-container-inner.carousel {
    position: relative; /* so the bg video can anchor */
    overflow: hidden;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wide hero/video container */
.section-container-inner.embedded {
    margin: 0 auto var(--vertical-padding-desktop) auto;
}

/* Remove all vertical margin, stay horizontally centered */
.section-container-inner.margin-zero {
    margin: 0 auto !important;
}

.section-container-inner.shallow-bottom {
    margin: var(--vertical-padding-desktop) auto 60px auto !important;
}

.section-container-inner.margin-medium {
    margin: 40px auto !important;
}

.section-container-inner .nine-sixty-text {
    max-width: 960px;
    padding: 0px;
    margin: 0px;
}

/* Apply narrow vertical margin, stay horizontally centered */
.section-container-inner.margin-narrow {
    margin: 16px auto !important;
}

/* Small desktop (1366px and below) */
@media (max-width: 1366px) {
    .section-container-inner {
        margin: var(--vertical-padding-desktop) auto;
        padding: 0 var(--side-padding-narrow);
    }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .section-container-inner {
        margin: var(--vertical-padding-tablet) auto;
        padding: 0 var(--side-padding-standard);
    }
    .section-container-inner.shallow-bottom {
        margin: var(--vertical-padding-tablet) auto 60px auto !important;
    }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
    .section-container-inner {
        margin: var(--vertical-padding-mobile) auto;
        padding: 0 var(--side-padding-narrow);
    }
    .section-container-inner.shallow-bottom {
        margin: var(--vertical-padding-mobile) auto 60px auto !important;
    }
}

/* ==== 03. Background Variants ==== */
/* Can be added to .section-container-outer or .section-container-inner */

/* Primary inverse */
.section-container-outer.inverse,
.section-container-inner.inverse {
    background-color: var(--background-primary-inverse);
}

/* Secondary */
.section-container-outer.secondary,
.section-container-inner.secondary {
    background-color: var(--background-secondary);
}

/* Secondary + inverse */
.section-container-outer.secondary.inverse,
.section-container-inner.secondary.inverse {
    background-color: var(--background-secondary-inverse);
}

/* Tertiary */
.section-container-outer.tertiary,
.section-container-inner.tertiary {
    background-color: var(--background-tertiary);
}

/* Tertiary + inverse */
.section-container-outer.tertiary.inverse,
.section-container-inner.tertiary.inverse {
    background-color: var(--background-tertiary-inverse);
}

/* ==== 04. Legacy Section Containers ==== */
/* Older .section-outer / .section-inner classes. Still used on the Partners
   page. Remove once no page uses them. */

/* Section Outer - Full Width Base */
.section-outer {
    width: 100%;
    padding: 0 0 var(--vertical-padding-desktop) 0;
    background-color: var(--background-primary);

    /* Elementor default column gap override */
    --e-con-container-default-gap: 0px;
}

/* Background Color Variants */
.section-outer.inverse {
    background-color: var(--background-primary-inverse);
}

.section-outer.secondary {
    background-color: var(--background-secondary);
}

.section-outer.secondary.inverse {
    background-color: var(--background-secondary-inverse);
}

.section-outer.tertiary {
    background-color: var(--background-tertiary);
}

.section-outer.tertiary.inverse {
    background-color: var(--background-tertiary-inverse);
}

/* Responsive Margins for Outer */
@media (max-width: 1024px) {
    .section-outer {
        padding: 0 0 var(--vertical-padding-tablet) 0;
    }
}

/* Responsive Margins for Outer */
@media (max-width: 767px) {
    .section-outer {
        padding: 0 0 var(--vertical-padding-mobile) 0;
    }
}

/* Section Inner - Fixed Boxed Container */
.section-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--inner-content-max-width);
    margin: 0 auto;
}

/* Target the inner container for padding */
.section-inner > .e-con-inner {
    padding-left: var(--side-padding-standard);
    padding-right: var(--side-padding-standard);
}

/* Apply horizontal padding at 1136px and up */
@media (min-width: 1136px) {
    .section-inner > .e-con-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Set Gap for Inner Section */
.section-inner .e-con-inner {
    gap: var(--gap-standard);
}

/* Override for wide layout */
.section-inner.wide .e-con-inner {
    gap: var(--gap-wide);
}

/* ==== 05. Card Section Layout ==== */

/* Card spacing tokens */
:root {
    --card-gap: 40px;
    --card-mb-lg: 40px;
    --card-mb-sm: 20px;
}

/* Small desktop and larger (default) */
.card-section {
    margin-bottom: var(--card-mb-lg);
}

/* The gap must be on the inner wrapper */
.card-section > .e-con-inner {
    display: flex; /* reinforce Elementor's default */
    flex-wrap: wrap; /* allows row gaps if items wrap */
    gap: var(--card-gap) !important;
}

/* Tablet and smaller (≤1024px) */
@media (max-width: 1024px) {
    .card-section {
        margin-bottom: var(--card-mb-lg);
    }
    .card-section > .e-con-inner {
        gap: var(--card-mb-sm) !important;
    }
}

/* Tablet and smaller (≤1024px) */
@media (max-width: 767px) {
    .card-section {
        margin-bottom: var(--card-mb-lg);
    }
    .card-section > .e-con-inner {
        gap: var(--card-mb-lg) !important;
    }
}

/* ==== 06. Feature Container ==== */
/* .feature-container-pon: image and text side by side, stacked on tablet and mobile */

/* Reset spacing (all breakpoints) */

.feature-container-pon,
.feature-container-pon .fc-image,
.feature-container-pon .fc-text {
    margin: 0;
    padding: 0;
}

/* Base layout (all breakpoints) */

.feature-container-pon {
    display: flex;
    width: 100%;
}

/* Force children to behave as columns */
.feature-container-pon > .fc-image,
.feature-container-pon > .fc-text {
    flex: 1 1 0;
}

/* Vertically center text content */
.feature-container-pon .fc-text {
    display: flex;
    align-items: center;
}

/* Image handling — preserve aspect ratio */
.feature-container-pon .fc-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Desktop (1200px and up) */

@media (min-width: 1200px) {
    .feature-container-pon {
        flex-direction: row !important;
        gap: 140px;
    }

    .feature-container-pon .fc-image {
        display: flex;
        justify-content: center;
    }

    .feature-container-pon .fc-image img {
        height: 700px;
        width: auto;
    }
}

/* Laptop (992px to 1199px) */

@media (min-width: 992px) and (max-width: 1199px) {
    .feature-container-pon {
        flex-direction: row !important;
        gap: 60px;
    }

    .feature-container-pon .fc-image {
        display: flex;
        justify-content: center;
    }

    .feature-container-pon .fc-image img {
        height: 700px;
        width: auto;
    }
}

/* Tablet and mobile (991px and below) */

@media (max-width: 991px) {
    .feature-container-pon {
        flex-direction: column !important;
        gap: 40px;
    }

    .feature-container-pon .fc-image img {
        width: 100%;
        height: auto;
    }
}

/* ==== 07. Video Aspect ==== */
/* Desktop and laptop: flexbox handles sizing, no explicit height */
.pon-video-aspect {
    height: auto;
    aspect-ratio: unset;
}

/* Tablet */
@media (max-width: 1024px) {
    .pon-video-aspect {
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .pon-video-aspect {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

.pon-video-aspect video,
.pon-video-aspect .elementor-background-video-container video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ==== 08. FUSE Conference Section ==== */
.fuse-link-item,
.fuse-link-item:link,
.fuse-link-item:visited,
.fuse-link-item:hover,
.fuse-link-item:active,
.fuse-link-item:focus {
    text-decoration: none !important;
    padding: 12px 8px;
}

.fuse-link-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}