/* ==========================================================================
   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: flex-start;
        gap: 2.25rem;
    }

    .site-footer__eu-logo-img {
        width: 210px;
    }

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


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

@media (min-width: 768px) {

    /* ----- Hero: asymmetrical text + slideshow -------------------------- */

    body[data-page="home"] .home-hero {
        padding-block: clamp(4rem, 7vw, 5.5rem) clamp(3rem, 5vw, 4.5rem);
    }

    body[data-page="home"] .home-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
        align-items: end;
    }

    body[data-page="home"] .home-hero__text {
        align-self: center;
        padding-bottom: 1rem;
    }

    body[data-page="home"] .home-hero__visual {
        justify-self: end;
        max-width: 32.5rem;
    }

    /* ----- 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;
    }

    /* ----- Partners: 3 columns ------------------------------------------ */

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

    /* ----- 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;
    }
}


/* ==========================================================================
   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;
    }

    /* ----- 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;
    }
}


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

@media (min-width: 768px) {

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

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

    body[data-page="partners"] .partners-country + .partners-country {
        margin-top: 3.5rem;
    }

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

    body[data-page="partners"] .partners-country__grid--three .partner-card:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 1.5rem) / 2);
    }

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

    body[data-page="partners"] .partner-card__meta {
        min-height: 3rem;
    }

    body[data-page="partners"] .partner-card__name {
        min-height: 2.8em;
    }

    body[data-page="partners"] .partner-profile-modal__panel {
        padding: 2rem 2.25rem 2rem;
    }

    body[data-page="partners"] .partner-profile-modal__close {
        top: 1.25rem;
        right: 1.25rem;
    }

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

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

    body[data-page="partners"] .partner-profile-modal__logo img {
        max-height: 6.5rem;
    }

    body[data-page="partners"] .partner-card__logo {
        height: 6.5rem;
    }

    body[data-page="partners"] .partner-card__logo img {
        max-width: min(100%, 14rem);
        max-height: 6.5rem;
    }

    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 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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


/* ==========================================================================
   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-feature {
        padding-block: 4rem;
    }

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

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

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

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

    body[data-page="project-results"] .results-language-row:nth-child(odd):nth-last-child(1) {
        border-bottom: 0;
    }

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

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

    body[data-page="project-results"] .results-resource-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
    }

    body[data-page="project-results"] .results-resource-row__info {
        flex: 1;
        min-width: 0;
    }

    body[data-page="project-results"] .results-resource-row__languages {
        flex-shrink: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 1.25rem;
        width: min(100%, 15rem);
    }

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

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

@media (min-width: 1024px) {

    body[data-page="project-results"] .results-feature__meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    body[data-page="project-results"] .results-language-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        border-bottom: 0;
        padding-block: 0;
    }

    body[data-page="project-results"] .results-language-row + .results-language-row {
        padding-left: 1.5rem;
        border-left: 1px solid var(--color-border);
    }
}


/* ==========================================================================
   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 strip expands to 6 columns (matches Figma)
   ========================================================================== */

@media (min-width: 1024px) {

    .site-footer__eu-logo-img {
        width: 240px;
    }

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

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

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

    body[data-page="partners"] .partners-country__grid--three .partner-card:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }

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