/**
 * Group Block Styles
 *
 * CSS for group blocks and section containers.
 * Loaded conditionally when core/group blocks are present.
 *
 * @package Condor
 */

/* ==========================================================================
   WordPress Block Style Variations
   ========================================================================== */

/* Group: Feature Section (with padding for two-col features) */
:root :where(.wp-block-group.is-style-feature-section) {
    padding: 50px 0;

    @media (min-width: 768px) {
        padding-bottom: 100px;
    }

    @media (min-width: 1024px) {
        padding: 100px 0 140px 0;
    }
}

/* Group: News Section (white background with shadow) */
:root :where(.wp-block-group.is-style-news-section) {
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--70) 0;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Three Columns Layout (.three-columns)
   ========================================================================== */

section.three-columns {
    padding-block: var(--wp--preset--spacing--70);

    & + * {
        padding-block-start: var(--wp--preset--spacing--70);
    }

    & + section.three-columns {
        padding-block-start: 0;
    }
}

section.cover + section.three-columns {
    padding-block-start: var(--wp--preset--spacing--50);
}

/* Individual column styling */
.column {
    display: flex;

    @media (min-width: 768px) {
        padding: 0.6125rem;
    }

    /* Column icon */
    & .icon {
        width: 100%;
        max-width: 48px;

        @media (min-width: 768px) {
            max-width: 32px;
        }

        @media (min-width: 1280px) {
            max-width: 48px;
        }

        & img {
            width: 100%;
        }
    }

    & .icon + .info {
        padding-left: 1.25rem;
    }

    /* Column info */
    & .info {
        flex: 1;

        & .headline {
            padding-bottom: var(--wp--preset--spacing--20);
        }

        @media (min-width: 768px) {
            & .copy {
                padding-right: var(--wp--preset--spacing--60);
            }
        }

        & .cta {
            padding-top: var(--wp--preset--spacing--60);
        }
    }
}

.column-icon {
    width: 100%;
    max-width: 48px;

    @media (min-width: 768px) {
        max-width: 32px;
    }

    @media (min-width: 1280px) {
        max-width: 48px;
    }

    & img {
        width: 100%;
    }
}

/* Three column grid */
.three-col {
    display: grid;
    grid-gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);

    @media (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);

        & .col-1,
        & .col-2 {
            border-right: 2px solid var(--wp--preset--color--blue);
        }
    }
}

/* Four column grid */
.four-col {
    display: grid;
    grid-gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);

    @media (min-width: 568px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);

        & .col-1,
        & .col-2,
        & .col-3 {
            border-right: 2px solid var(--wp--preset--color--blue);
        }
    }

    & .column {
        display: block;
    }

    & .icon,
    & .column-icon {
        width: 100%;
        max-width: 100%;
        padding-bottom: var(--wp--preset--spacing--40);

        & img {
            max-width: 48px;
            max-height: 48px;
            object-fit: contain;
        }
    }

    & .info {
        width: 100%;
    }

    & .icon + .info {
        padding-left: 0;
    }
}

/* ==========================================================================
   News Updates Section (.news-updates)
   ========================================================================== */

section.news-updates {
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--70) 0;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}

.news-updates__header,
.news-updates .section-header {
    padding-bottom: var(--wp--preset--spacing--40);
}

.news-updates__grid,
.news-updates .news-updates-grid {
    display: grid;
    gap: var(--wp--preset--spacing--60);
    grid-template-columns: repeat(1, 1fr);

    @media (min-width: 568px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
    }
}

/* Individual news update column */
.news-update {

    & .col-header {
        padding-bottom: var(--wp--preset--spacing--20);

        & h5 {
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            font-size: var(--wp--preset--font-size--small);
        }
    }

    & .copy {

        & strong,
        & b {
            font-weight: 900;
        }

        & a {
            color: var(--wp--preset--color--bright-red);
        }
    }

    & ul {
        margin-left: var(--wp--preset--spacing--40);
    }

    & li + li {
        padding-top: var(--wp--preset--spacing--40);
    }
}

/* ==========================================================================
   Page Header Section (.page-header)
   ========================================================================== */

.page-header {
    padding-bottom: var(--wp--preset--spacing--20);

    &.aligncenter {
        text-align: center;

        & .headline,
        & .copy {
            margin: 0 auto;
        }

        & .headline.underline::after {
            margin: var(--wp--preset--spacing--20) auto var(--wp--preset--spacing--40) auto;
        }
    }

    & .headline {
        padding-bottom: var(--wp--preset--spacing--20);
    }

    /* Basic page variant */
    &.basic-page h5 {
        font-weight: bold;
        color: var(--wp--preset--color--blue);
        padding-bottom: 0;
        font-size: var(--wp--preset--font-size--medium);

        & + p {
            padding-top: 0;
        }
    }
}

/* Spacing after page header */
section.page-header + * {
    padding-top: var(--wp--preset--spacing--70);

    @media (min-width: 1024px) {
        padding-top: 6rem;
    }
}

section.hero-photo + section.page-header {
    padding-top: var(--wp--preset--spacing--70);

    @media (min-width: 1024px) {
        padding-top: var(--wp--preset--spacing--80);
    }
}

/* ==========================================================================
   Video Play Button Overlay (.discover-play-btn)
   ========================================================================== */

/* Video trigger link container */
.video-trigger {
    display: block;
    position: relative;
}

/* Discover/Feature play button - concentric circles with icon */
.discover-play-btn {
    position: relative;
    display: block;

    /* Outer circle (larger, more transparent) */
    &::after {
        display: inline-block;
        content: "";
        border-radius: 50%;
        position: absolute;
        transition: all 0.4s ease-in;
        width: 112px;
        height: 112px;
        top: calc(50% - 56px);
        left: calc(50% - 56px);
        z-index: 10;
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    }

    /* Inner circle (smaller, more opaque) */
    &::before {
        display: inline-block;
        content: "";
        border-radius: 50%;
        position: absolute;
        transition: all 0.4s ease-in;
        width: 96px;
        height: 96px;
        top: calc(50% - 48px);
        left: calc(50% - 48px);
        z-index: 11;
        background: rgba(255, 255, 255, 0.4);
    }

    /* Play icon using FontAwesome */
    & .icon {
        font-family: FontAwesome;
        color: var(--wp--preset--color--white);
        font-size: 2.5rem;

        &::before {
            content: "\f04b"; /* FontAwesome play icon */
            position: absolute;
            display: inline-block;
            width: 40px;
            height: 40px;
            top: calc(50% - 20px);
            left: calc(50% - 12px);
            z-index: 12;
            transition: all 0.4s ease-in;
        }
    }

    /* Hover state - brighten circles and change icon color */
    &:hover {

        &::before {
            background: rgba(255, 255, 255, 0.75);
        }

        &::after {
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
        }

        & .icon::before {
            color: var(--wp--preset--color--light-blue);
        }
    }

    /* Video duration badge */
    & .duration {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 11;
        background: rgba(255, 255, 255, 0.75);
        color: var(--wp--preset--color--light-blue);
        font-family: var(--wp--preset--font-family--body);
        display: inline-block;
        padding: 8px 10px;
        border-radius: 5px;
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 700;
        letter-spacing: 0.05em;
    }
}