/**
 * ============================================================================
 * RESPONSIVE STYLES — All media queries in one file
 * ============================================================================
 *
 * APPROACH: Mobile-first responsive design.
 * Base styles (in other files) target mobile. This file scales up
 * for larger screens.
 *
 * BREAKPOINTS:
 * Mobile:       < 576px   (base styles — no query needed)
 * Phablet:      ≥ 576px
 * Tablet:       ≥ 768px
 * Desktop:      ≥ 992px
 * Wide:         ≥ 1200px
 * Ultra-wide:   ≥ 1600px  (TV screens, large monitors)
 *
 * @package Oraculi
 * @since   1.0.0
 * ============================================================================
 */


/* =================================================================
   GLOBAL — Force full-width on all wrappers
   ================================================================= */

.site-wrapper,
.oraculi-site-content,
#page,
#oraculi-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all sections span full width */
.section,
.hero,
.impact-section,
.cta-section,
.newsletter-section,
.site-footer,
.site-header {
    width: 100%;
    max-width: 100%;
}


/* =================================================================
   MOBILE BASE OVERRIDES (max-width: 575px)
   ================================================================= */

@media ( max-width: 575px ) {

    /* Smaller hero text on very small screens */
    .hero__title {
        font-size: var(--text-3xl);
    }

    .hero__subtitle {
        font-size: var(--text-base);
    }

    /* Stack hero buttons vertically */
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Hero carousel mobile adjustments */
    .hero-carousel {
        min-height: 75vh;
    }

    .hero-carousel__slide-title {
        font-size: var(--text-3xl);
    }

    .hero-carousel__slide-subtitle {
        font-size: var(--text-base);
    }

    .hero-carousel__slide-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-carousel__slide-actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-carousel__dots {
        bottom: 60px;
    }

    /* Stack form halves */
    .form-row--half {
        grid-template-columns: 1fr;
    }

    /* Newsletter form stacks */
    .newsletter-form__group {
        flex-direction: column;
    }

    .newsletter-form__input {
        border-right: 2px solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    .newsletter-form__btn {
        border-radius: var(--radius-sm);
    }

    /* Single column for all grids on mobile */
    .card-grid,
    .card-grid--2,
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: 1fr;
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }

    /* Remove stat dividers on mobile */
    .impact-stat + .impact-stat::before {
        display: none;
    }

    .impact-stat__number {
        font-size: var(--text-3xl);
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    /* Founder section stacks */
    .founder-section__inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Programme detail stacks on mobile */
    .programme-detail,
    .programme-detail--reverse {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .programme-detail--reverse .programme-detail__image,
    .programme-detail--reverse .programme-detail__intro {
        order: unset;
    }

    .programme-detail__image {
        position: static;
    }

    .programme-detail__body {
        grid-template-columns: 1fr;
    }

    /* Footer stacks */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .site-footer__col--brand {
        padding-right: 0;
    }

    /* Reduce section padding */
    .section {
        padding-top: var(--section-padding-sm);
        padding-bottom: var(--section-padding-sm);
    }

    /* Reduce heading sizes */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* Same scale, locked, for editor (Gutenberg) content */
    .entry-content h1 { font-size: var(--text-3xl) !important; }
    .entry-content h2 { font-size: var(--text-2xl) !important; }
    .entry-content h3 { font-size: var(--text-xl) !important; }

    /* Header logo */
    .site-header__logo img,
    .site-header__logo .custom-logo {
        max-height: 70px;
    }

    /* Container padding tighter on small phones */
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}


/* =================================================================
   TABLET & MOBILE NAVIGATION (max-width: 991px)
   ================================================================= */
@media ( max-width: 991px ) {
    /* Show hamburger menu */
    .site-header__menu-toggle {
        display: block;
    }

    /* Hide desktop nav */
    .site-header__nav {
        display: none;
    }

    /* Hide desktop donate button (shown inside mobile menu) */
    .site-header__donate {
        display: none;
    }
}


/* =================================================================
   PHABLET (≥ 576px) — Large phones, small tablets
   ================================================================= */

@media ( min-width: 576px ) {

    /* Two-column grids */
    .card-grid--2,
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Founder section still stacked on phablet */
    .founder-section__inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Footer: 2 columns */
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .site-footer__col--brand {
        grid-column: 1 / -1;       /* Brand column spans full width */
    }
}


/* =================================================================
   TABLET (≥ 768px) — iPads, medium tablets
   ================================================================= */

@media ( min-width: 768px ) {

    /* Three-column grids for 3-col layouts */
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Still 2 columns for 4-col grids on tablet */
    .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA grid at 2 columns */
    .cta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Founder section side by side on tablet */
    .founder-section__inner {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-2xl);
    }

    /* Footer: 3 columns */
    .site-footer__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-xl);
    }

    .site-footer__col--brand {
        grid-column: 1 / -1;
    }

    /* Impact grid at 4 columns on tablet */
    .impact-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Show stat dividers */
    .impact-stat + .impact-stat::before {
        display: block;
    }

    /* Reduce section padding slightly */
    .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Header logo */
    .site-header__logo img,
    .site-header__logo .custom-logo {
        max-height: 90px;
    }
}


/* =================================================================
   DESKTOP (≥ 992px) — Laptops, desktops
   ================================================================= */

@media ( min-width: 992px ) {

    /* Larger hero */
    .hero__title {
        font-size: var(--text-5xl);
    }

    /* 3-column grids */
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 4-column impact stats */
    .impact-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Show stat dividers */
    .impact-stat + .impact-stat::before {
        display: block;
    }

    .cta-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Full 5-column footer */
    .site-footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }

    .site-footer__col--brand {
        grid-column: auto;
    }

    /* Body text bump */
    body {
        font-size: var(--text-md);
    }

    /* Section padding bump */
    .section {
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
    }

    /* Header logo */
    .site-header__logo img,
    .site-header__logo .custom-logo {
        max-height: 120px;
    }
}


/* =================================================================
   WIDE SCREENS (≥ 1200px) — Large desktops
   ================================================================= */

@media ( min-width: 1200px ) {

    /* Even larger hero heading */
    .hero__title {
        font-size: 3.75rem;     /* 60px */
    }

    /* Bigger impact numbers */
    .impact-stat__number {
        font-size: var(--text-5xl);
    }
}


/* =================================================================
   ULTRA-WIDE / TV SCREENS (≥ 1600px)
   ================================================================= */

@media ( min-width: 1600px ) {

    /* Increase container max-width for large screens */
    .container {
        max-width: 1400px;
    }

    /* Scale up hero for TV viewing */
    .hero:not(.hero--inner) {
        min-height: 80vh;
    }

    .hero__title {
        font-size: 4.5rem;       /* 72px */
    }

    .hero__subtitle {
        font-size: var(--text-xl);
    }


    /* Increase section padding */
    .section {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }

    /* Wider footer */
    .site-footer__grid {
        gap: var(--space-3xl);
    }
}


/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {

    /* Hide non-essential elements when printing */
    .site-header,
    .announcement-bar,
    .mobile-menu,
    .mobile-menu__overlay,
    .whatsapp-float,
    .newsletter-section,
    .site-footer__social,
    .btn,
    .partner-carousel,
    video,
    iframe {
        display: none !important;
    }

    /* Reset colors for readability */
    body {
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Show URLs after links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}