/* ==========================================================================
   responsive.css
   --------------------------------------------------------------------------
   Responsive overrides. Loaded last so it can override previous CSS files.
   Single primary breakpoint at 768px (mobile -> desktop).
   A secondary 1024px breakpoint expands the 4-column grid only.
   ========================================================================== */


/* ==========================================================================
   Tablet / desktop  ( >= 768px )
   --------------------------------------------------------------------------
   - Show desktop nav, hide hamburger and mobile panel
   - Multi-column grids
   - Footer columns expand 1.5fr / 1fr / 1fr
   - Footer EU + bottom rows become horizontal
   ========================================================================== */

@media (min-width: 768px) {

    .site-container {
        padding-inline: var(--container-padding-lg);
    }

    /* Keep the section divider aligned with the wider container padding */
    .section-divider {
        width: calc(100% - 2 * var(--container-padding-lg));
        max-width: calc(var(--container-width) - 2 * var(--container-padding-lg));
    }

    /* ----- Header / nav ------------------------------------------------- */

    .site-nav {
        display: block;
    }

    .site-header__menu-toggle {
        display: none;
    }

    .mobile-nav {
        display: none !important;
    }

    /* ----- Layout grids ------------------------------------------------- */

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

    /* ----- Footer ------------------------------------------------------- */

    .site-footer__columns {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
    }

    .site-footer__eu {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - HOME PAGE
   ========================================================================== */

@media (min-width: 768px) {

    /* ----- Hero: stacked text then connected collage until ~960px ------ */

    body[data-page="home"] .home-hero {
        padding-block: 5rem 4rem;
    }

    body[data-page="home"] .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    body[data-page="home"] .home-hero__visual {
        max-width: 650px;
        margin-inline: auto;
    }

    /* Keep the connected 28fr/9fr × 3fr/4fr collage intact on tablet */
    body[data-page="home"] .home-hero__collage {
        grid-template-columns: 28fr 9fr;
        grid-template-rows: 3fr 4fr;
        gap: 0;
        aspect-ratio: 37 / 21;
    }

    /* ----- Project at a Glance: split layout ---------------------------- */

    body[data-page="home"] .home-glance {
        padding-block: 4rem;
    }

    body[data-page="home"] .home-glance__inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    /* ----- Focus Areas: 3-column row ------------------------------------ */

    body[data-page="home"] .home-focus {
        padding-block: 4rem;
    }

    body[data-page="home"] .home-focus__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        align-items: stretch;
    }

    /* ----- Partners: 2 columns on tablet -------------------------------- */

    body[data-page="home"] .home-partners__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* ----- Activity Highlights: more breathing room --------------------- */

    body[data-page="home"] .home-activities {
        padding-block: 4rem 5rem;
    }

    body[data-page="home"] .home-activities__date {
        font-size: 0.875rem;
    }

    body[data-page="home"] .home-activities__name {
        font-size: 1.125rem;
    }
}


/* ==========================================================================
   Large tablet / small desktop  ( >= 960px ) - HOME HERO SIDE-BY-SIDE
   ========================================================================== */

@media (min-width: 960px) {

    body[data-page="home"] .home-hero__inner {
        grid-template-columns: 45% 55%;
        gap: 3rem;
        align-items: center;
    }

    body[data-page="home"] .home-hero__visual {
        max-width: 650px;
        margin-inline: 0 0;
        justify-self: end;
        width: 100%;
    }

    body[data-page="home"] .home-hero__collage {
        grid-template-columns: 28fr 9fr;
        grid-template-rows: 3fr 4fr;
        gap: 0;
        aspect-ratio: 37 / 21;
        max-width: none;
        margin-inline: 0;
    }
}

@media (min-width: 1100px) {

    body[data-page="home"] .home-hero__inner {
        gap: 3.5rem;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - PROJECT PAGE
   ========================================================================== */

@media (min-width: 768px) {

    /* ----- Intro: side-by-side text + visual ---------------------------- */

    body[data-page="project"] .project-intro {
        padding-block: 5rem 4rem;
    }

    body[data-page="project"] .project-intro__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
    }

    body[data-page="project"] .project-intro__visual {
        max-width: 32.5rem;
        margin-inline: 0 0;
        justify-self: end;
        width: 100%;
    }

    body[data-page="project"] .project-model {
        padding: 1.375rem 1.25rem 1.25rem;
        gap: 0.875rem;
    }

    /* Orbital constellation: absolute nodes around central logo disc */
    body[data-page="project"] .project-model__wheel {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 28rem;
        margin-inline: auto;
        padding: 0;
    }

    body[data-page="project"] .project-model__orbit {
        display: block;
        position: absolute;
        inset: 8%;
        width: 84%;
        height: 84%;
        margin: auto;
        color: rgba(122, 132, 80, 0.22);
        z-index: 0;
        pointer-events: none;
    }

    body[data-page="project"] .project-model__orbit-ring {
        opacity: 1;
    }

    body[data-page="project"] .project-model__connectors {
        opacity: 0.55;
    }

    body[data-page="project"] .project-model__center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        grid-column: auto;
        grid-row: auto;
        margin: 0;
        width: 7.25rem;
        height: 7.25rem;
        padding: 0.875rem;
        z-index: 2;
    }

    body[data-page="project"] .project-model__logo {
        max-width: 5.25rem;
        max-height: 5.25rem;
    }

    body[data-page="project"] .project-model__node {
        position: absolute;
        order: unset;
        grid-column: auto;
        width: auto;
        max-width: none;
        justify-self: auto;
        white-space: nowrap;
        transition:
            transform var(--transition-fast),
            border-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    /* Balanced constellation around the logo */
    body[data-page="project"] .project-model__node--drama {
        top: 2.5%;
        left: 50%;
        transform: translateX(-50%);
    }

    body[data-page="project"] .project-model__node--dance {
        top: 22%;
        left: 1%;
    }

    body[data-page="project"] .project-model__node--art {
        top: 22%;
        right: 1%;
        left: auto;
    }

    body[data-page="project"] .project-model__node--sport {
        bottom: 14%;
        left: 4%;
        top: auto;
    }

    body[data-page="project"] .project-model__node--yoga {
        bottom: 14%;
        right: 4%;
        left: auto;
        top: auto;
    }

    body[data-page="project"] .project-model__node-label {
        font-size: 0.8125rem;
    }

    body[data-page="project"] .project-model__stats {
        padding-top: 1rem;
    }

    body[data-page="project"] .project-model__stat-value {
        font-size: 1.375rem;
    }

    body[data-page="project"] .project-model__stat-label {
        font-size: 0.75rem;
    }

    /* ----- Why This Project Exists: two-column paragraphs --------------- */

    body[data-page="project"] .project-why {
        padding-block: 4rem;
    }

    body[data-page="project"] .project-why__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* ----- Project Objectives: a touch more space ----------------------- */

    body[data-page="project"] .project-objectives {
        padding-block: 4rem;
    }

    /* ----- Target Groups: groups side by side --------------------------- */

    body[data-page="project"] .project-target-groups {
        padding-block: 4rem;
    }

    body[data-page="project"] .project-target-groups__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* ----- Expected Results: stacked (Main Outputs above, then Impact)
            Main Outputs uses 2 columns of full accent blocks.
            Capacity & Impact uses 3 columns of lighter impact items.
            ------------------------------------------------------------- */

    body[data-page="project"] .project-results {
        padding-block: 4rem;
    }

    /* Extra breathing room between Main Outputs and Capacity & Impact
       on desktop (mobile keeps the 3rem default from pages.css). */
    body[data-page="project"] .project-results__main {
        margin-bottom: 4rem;
    }

    body[data-page="project"] .project-results__main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    body[data-page="project"] .project-results__impact-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* ----- Project Timeline: alternating left/right --------------------- */

    body[data-page="project"] .project-timeline {
        padding-block: 4rem 5rem;
    }

    /* Center vertical line */
    body[data-page="project"] .project-timeline__list::before {
        left: 50%;
        transform: translateX(-0.5px);
    }

    /* Each item is a 2-column grid; content goes in one side, the other
       side stays empty so the dot sits exactly on the centered line. */
    body[data-page="project"] .project-timeline__item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0 0 1.25rem;
    }

    /* Dot recentred on the line */
    body[data-page="project"] .project-timeline__dot {
        top: 0.45rem;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Odd items: content on the LEFT, right-aligned to the centre line */
    body[data-page="project"] .project-timeline__item:nth-child(odd) .project-timeline__content {
        grid-column: 1;
        text-align: right;
        padding-right: 2.25rem;
    }

    /* Even items: content on the RIGHT, left-aligned from the centre line */
    body[data-page="project"] .project-timeline__item:nth-child(even) .project-timeline__content {
        grid-column: 2;
        padding-left: 2.25rem;
    }
}


/* Optional hover lift for discipline nodes (desktop pointer devices only) */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    body[data-page="project"] .project-model__node--drama:hover {
        transform: translateX(-50%) translateY(-2px);
        border-color: rgba(196, 92, 84, 0.45);
        box-shadow: 0 2px 8px rgba(30, 30, 30, 0.06);
    }

    body[data-page="project"] .project-model__node--dance:hover,
    body[data-page="project"] .project-model__node--sport:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(30, 30, 30, 0.06);
    }

    body[data-page="project"] .project-model__node--dance:hover {
        border-color: rgba(92, 122, 176, 0.45);
    }

    body[data-page="project"] .project-model__node--sport:hover {
        border-color: rgba(122, 132, 80, 0.5);
    }

    body[data-page="project"] .project-model__node--art:hover,
    body[data-page="project"] .project-model__node--yoga:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(30, 30, 30, 0.06);
    }

    body[data-page="project"] .project-model__node--art:hover {
        border-color: rgba(196, 140, 64, 0.45);
    }

    body[data-page="project"] .project-model__node--yoga:hover {
        border-color: rgba(90, 148, 120, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="project"] .project-model__node {
        transition: none;
    }
}


/* Mid-width tablet: stack Intro when the orbit would be cramped */
@media (min-width: 768px) and (max-width: 959px) {

    body[data-page="project"] .project-intro__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    body[data-page="project"] .project-intro__visual {
        max-width: 30rem; /* ~480px */
        margin-inline: auto;
        justify-self: center;
    }
}

@media (min-width: 960px) {

    body[data-page="project"] .project-intro__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
        align-items: center;
    }

    body[data-page="project"] .project-intro__visual {
        max-width: 33.75rem; /* ~540px */
        margin-inline: 0 0;
        justify-self: end;
    }

    body[data-page="project"] .project-model__center {
        width: 7.75rem;
        height: 7.75rem;
    }

    body[data-page="project"] .project-model__logo {
        max-width: 5.5rem;
        max-height: 5.5rem;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - PARTNERS PAGE
   ========================================================================== */

@media (min-width: 768px) {

    body[data-page="partners"] .partners-intro {
        padding-block: 5rem 4rem;
    }

    body[data-page="partners"] .partners-grid-section {
        padding-block: 4rem;
    }

    body[data-page="partners"] .partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        align-items: stretch;
    }

    body[data-page="partners"] .partner-card {
        padding: 1.75rem;
    }

    body[data-page="partners"] .partner-profile-modal {
        max-height: calc(100vh - 3rem);
    }

    body[data-page="partners"] .partner-profile-modal__panel {
        max-height: calc(100vh - 3rem);
        padding: 2rem 2.25rem 2rem;
    }

    body[data-page="partners"] .partner-profile-modal__close {
        top: 0;
        margin: 0 0 0.75rem 1rem;
    }

    body[data-page="partners"] .partner-profile-modal__header {
        flex-direction: row;
        gap: 1.5rem;
        padding-right: 0;
    }

    body[data-page="partners"] .partner-profile-modal__logo {
        width: 8.25rem;
        height: 8.25rem;
    }

    body[data-page="partners"] .partner-profile-modal__logo--wide {
        width: 11rem;
        height: 8.25rem;
    }

    body[data-page="partners"] .partner-profile-modal__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="partners"] .partners-collaboration {
        padding-block: 4rem 5rem;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - ACTIVITIES PAGES
   ========================================================================== */

@media (min-width: 768px) {

    body[data-page^="activities-"] .activities-intro {
        padding-block: 5rem 4rem;
    }

    body[data-page^="activities-"] .activities-page {
        padding-block: 4rem;
    }

    body[data-page^="activities-"] .activity-gallery-wrap {
        margin-top: 2.25rem;
        padding-top: 1.75rem;
    }

    body[data-page^="activities-"] .activity-gallery--kickoff,
    body[data-page^="activities-"] .activity-gallery--framed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    body[data-page^="activities-"] .activity-country-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - PROJECT RESULTS PAGE
   ========================================================================== */

@media (min-width: 768px) {

    body[data-page="project-results"] .results-intro {
        padding-block: 5rem 4rem;
    }

    body[data-page="project-results"] .results-overview {
        padding-block: 4rem;
    }

    body[data-page="project-results"] .results-overview__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        align-items: stretch;
    }

    body[data-page="project-results"] .results-overview-facts {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 2.25rem;
        padding-top: 1.5rem;
    }

    body[data-page="project-results"] .results-overview-facts__item + .results-overview-facts__item {
        border-left: 1px solid var(--color-border);
    }

    body[data-page="project-results"] .results-resource {
        padding-block: 4rem;
    }

    body[data-page="project-results"] .results-resource__panel {
        padding: 2.25rem 2rem;
    }

    body[data-page="project-results"] .results-language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem;
    }

    body[data-page="project-results"] .results-guidance {
        padding-block: 4rem 5rem;
    }
}


/* ==========================================================================
   Tablet / desktop  ( >= 768px ) - POLICY PAGES
   ========================================================================== */

@media (min-width: 768px) {

    body[data-page="privacy-policy"] .policy-page,
    body[data-page="cookie-policy"] .policy-page {
        padding-block: 5rem 5rem;
    }
}


/* ==========================================================================
   Wide desktop  ( >= 1024px )
   --------------------------------------------------------------------------
   - Layout helper: 4-column grid expands to 4 columns
   - Home: partner grid uses 3 columns × 3 rows for nine DDAYS partners
   ========================================================================== */

@media (min-width: 1024px) {

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

    body[data-page="home"] .home-partners__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.75rem;
        max-width: 60rem;
    }

    body[data-page="partners"] .partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
        max-width: 68rem;
    }

    body[data-page^="activities-"] .activity-country-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}