/* ============================================
   Mobile & responsive overrides
   Load after main.css. Breakpoints: 768px, 480px portrait.
   ============================================ */

/* ---------- 768px: Logo ---------- */
@media (max-width: 768px) {
    .logo picture,
    .logo picture img {
        max-width: 150px;
        max-height: 150px;
    }
    .thumbnail {
        display: none;
    }
}

/* ---------- 768px: Page title ---------- */
@media (max-width: 768px) {
    .page-title-section {
        padding-top: calc(var(--nav-height, 80px) + var(--spacing-lg));
        padding-bottom: var(--spacing-md);
    }
}

/* ---------- 768px: Submenu (spacers, tap) ---------- */
@media (max-width: 768px) {
    .submenu-spacer-left {
        flex-shrink: 0;
        width: calc(51.25vw - 75px);
        min-width: 70px;
    }

    .submenu-spacer-right {
        flex-shrink: 0;
        width: calc(52.5vw - 75px);
        min-width: 100px;
    }

    .submenu-track {
        padding-left: 0;
        padding-right: 0;
    }

    .submenu-link:not(.active) {
        -webkit-tap-highlight-color: transparent !important;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        outline: none !important;
    }

    .submenu-link:not(.active):active,
    .submenu-link:not(.active):focus {
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .submenu-link.active:focus {
        outline: none !important;
    }
}

/* ---------- 768px: Nav container & layout ---------- */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .nav-container .logo {
        order: 1;
    }

    .nav-about-wrapper-mobile {
        display: flex;
        align-items: center;
        order: 2;
        flex: 0 0 auto;
    }

    .nav-about-wrapper-mobile .nav-about {
        text-decoration: none;
        color: var(--neutral-black);
        font-weight: 500;
        padding: var(--spacing-xs) var(--spacing-sm);
        display: inline-block;
    }

    .nav-about-desktop {
        display: none;
    }

    .nav-list {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xs);
    }

    .nav-link {
        min-width: 100px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .submenu-nav {
        position: sticky !important;
        top: var(--nav-height, 80px) !important;
        left: 0;
        right: 0;
        z-index: 998;
        margin-top: 0;
        width: 100%;
    }

    .page-section {
        padding: calc(140px + var(--spacing-lg)) var(--spacing-sm) var(--spacing-lg);
    }

    /* Half gap between sections on mobile (between section end and next section's title/content) */
    .page-section.content-block:not(:has(.impact-section)) {
        padding-top: calc((140px + var(--spacing-lg)) * 0.5);
        padding-bottom: calc(var(--spacing-lg) * 0.5);
    }

    /* Keep CTA sections with no bottom padding so button can sit on seam (match create.php behaviour) */
    .page-create .content-block:has(.create-section-cta),
    .page-facilitate .content-block:has(.create-section-cta),
    .page-strategise .content-block:has(.create-section-cta) {
        padding-bottom: 0;
    }
}

/* ---------- 768px: Impact section (carousel + hero at bottom) ---------- */
@media (max-width: 768px) {
    .page-section.content-block:has(.impact-section),
    .page-section.content-block:has(.impact-section) .section-container,
    .page-section.content-block:has(.impact-section) .section-content {
        padding-left: 0;
        padding-right: 0;
    }
    .impact-section .impact-overlay {
        display: none;
    }
    .impact-carousel-wrap {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 52%;
        transform: translateY(-50%);
        z-index: 4;
        padding: 0 var(--spacing-md);
        min-height: 140px;
        overflow: hidden;
        cursor: pointer;
    }
    .impact-section .impact-portrait,
    .impact-portrait {
        left: 40%;
        right: auto;
        top: auto;
        bottom: 0;
        transform: translateX(-30%) translateY(1.9%);
        max-width: 380px;
        margin: 0 auto;
    }
    .page-create .impact-portrait {
        max-width: 480px;
        width:70%;
        left: 50%;
    }
    .impact-section .impact-quote.alex-quote {
        margin-left: 0;
    }
    .impact-section .impact-stat .impact-stat-number {
        font-size: 2.5rem;
    }
    .impact-section .impact-quote.alex-quote .quote-text {
        font-size: 1.2rem;
    }
    .impact-section .impact-quote.client-quote .quote-text {
        font-size: 1.1rem;
    }
    .page-strategise .impact-section .impact-quote.client-quote .quote-text {
        font-size: 1.0rem;
    }
    .impact-carousel-wrap .impact-carousel-slide .impact-stat-number {
        font-size: 2.5rem;
    }
    .impact-carousel-wrap .impact-carousel-slide .impact-quote.alex-quote .quote-text {
        font-size: 1.2rem;
    }
    .impact-carousel-wrap .impact-carousel-slide .impact-quote.client-quote .quote-text {
        font-size: 1.1rem;
    }
    .page-strategise .impact-carousel-wrap .impact-carousel-slide .impact-quote.client-quote .quote-text {
        font-size: 1.0rem;
    }
}

/* ---------- 768px: Pipeline tabs – 3 rows, two buttons per row separated by arrow; ghost ↻ = 6th slot ---------- */
@media (max-width: 768px) {
    .pipeline-tab-buttons {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto;
        width: 100%;
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-xs) var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .pipeline-tab-buttons .pipeline-tab-button:nth-child(1) { grid-row: 1; grid-column: 1; }
    .pipeline-tab-buttons .pipeline-arrow:nth-child(2) { grid-row: 1; grid-column: 2; }
    .pipeline-tab-buttons .pipeline-tab-button:nth-child(3) { grid-row: 1; grid-column: 3; }
    .pipeline-tab-buttons .pipeline-tab-button:nth-child(5) { grid-row: 2; grid-column: 1; }
    .pipeline-tab-buttons .pipeline-arrow:nth-child(4) { grid-row: 2; grid-column: 2; }
    .pipeline-tab-buttons .pipeline-tab-button:nth-child(7) { grid-row: 2; grid-column: 3; }
    .pipeline-tab-buttons .pipeline-tab-button:nth-child(9) { grid-row: 3; grid-column: 1; }
    .pipeline-tab-buttons .pipeline-arrow:nth-child(6) { grid-row: 3; grid-column: 2; }
    .pipeline-tab-buttons .pipeline-arrow:nth-child(8) { grid-row: 3; grid-column: 3; }

    .pipeline-tab-button {
        font-size: 0.85rem;
        padding: var(--spacing-sm) var(--spacing-xs);
    }

    .pipeline-arrow {
        align-self: center;
        font-size: 1rem;
    }

    /* Ghost 6th slot: circle arrow, clickable – activates Listen */
    .pipeline-tab-buttons .pipeline-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3em;
        padding: 0 var(--spacing-sm);
        border-radius: 12px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: opacity 0.25s ease;
    }

    .pipeline-tab-buttons .pipeline-ghost.pipeline-ghost-easter {
        font-style: italic;
        font-size: 0.6rem;
        line-height: 3rem;
    }
}

/* ---------- 768px: Create – Album, Short Film, Fire Choir, section gaps ---------- */
@media (max-width: 768px) {
    /* Composition intro tabs: full width, no side margin */
    .composition-intro-tab-buttons {
        padding-left: 0;
        padding-right: 0;
    }
    .composition-intro-tab-button {
        flex: 1;
        min-width: 0;
    }

    .album-reviews-container {
        flex-direction: column;
        width: 100%;
    }
    .album-review-box {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-sm);
    }
    .album-image-container {
        max-width: 380px;
        margin: 0 auto;
        position: relative;
        top:-25px;
    }
    .page-section.content-block:not(:first-of-type) .subsection-title {
        margin-top: calc(var(--spacing-xl) / 2);
    }
    .film-left,
    .film-left .youtube-overlay-container {
        width: 100%;
        max-width: 100%;
    }
    .film-section {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: var(--spacing-md);
        column-gap: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .film-left {
        grid-column: 1;
        grid-row: 1;
    }
    .film-right {
        grid-column: 1;
        grid-row: 2;
    }
    .film-boxes {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: 1fr;
        padding: 0;
    }
    .film-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .fire-choir-section ul {
        padding-left: 1.5em;
        list-style-position: outside;
    }
    .fire-choir-section .fire-choir-right {
        order: -1;
    }
    .fire-choir-section .fire-choir-left {
        order: 1;
    }
    .fire-choir-section {
        display: flex;
        flex-direction: column;
    }
}

/* ---------- 768px: Footer ---------- */
@media (max-width: 768px) {
    .site-footer {
        padding: calc(var(--spacing-lg) + 50px) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
    }

    .footer-content {
        gap: var(--spacing-md);
    }

    .footer-link {
        font-size: var(--font-size-sm);
    }
}

/* ---------- 768px: Facilitate – expanded card mobile layout ---------- */
@media (max-width: 768px) {
    /* Vertical stack: content starts ~20% down */
    .facilitate-card.expanded .facilitate-expanded-content {
        padding: 10vh var(--spacing-sm) 80px var(--spacing-md);
    }

    .facilitate-card.expanded .facilitate-expanded-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        min-height: auto;
        align-items: stretch;
    }

    .facilitate-card.expanded .facilitate-expanded-col-1,
    .facilitate-card.expanded .facilitate-expanded-col-2,
    .facilitate-card.expanded .facilitate-expanded-col-3 {
        order: unset;
        align-self: stretch;
        padding-top: 0;
        width: 100%;
    }

    .facilitate-card.expanded .facilitate-expanded-col-1 {
        order: 1;
    }

    .facilitate-card.expanded .facilitate-expanded-col-3 {
        order: 2;
    }

    .facilitate-card.expanded .facilitate-expanded-col-2 {
        order: 3;
    }

    /* Close button - expanded card: flush top-left, semi-circular bubble (top half cut off) */
    .facilitate-close {
        position: fixed;
        top: -10px;
        left: -10px;
        z-index: 10002;
        width: 60px;
        height: 60px;
        margin: 0;
        border: none;
        border-radius: 80%;
        background: rgba(255, 255, 255, 0.85);
        color: var(--neutral-black);
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.2s ease;
        /* Clip to bottom half so it appears as a rounded bubble (semi-circular) */
    }

    .facilitate-close:hover {
        background: var(--neutral-white);
    }

    .facilitate-scroll-hint {
        display: flex !important;
        position: fixed;
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        z-index: 10002;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        color: var(--facilitation-primary);
        font-size: 24px;
        animation: facilitate-bounce 1.5s ease-in-out infinite;
    }

    .facilitate-scroll-hint span {
        display: block;
        line-height: 1;
    }
}

@keyframes facilitate-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ---------- 768px: Reviews carousel ---------- */
@media (max-width: 768px) {
    .reviews-carousel-wrapper {
        width: 100%;
        position: relative;
    }

    .review-content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        min-height: 280px;
        position: relative;
    }

    /* Mobile: one paragraph at a time; quote area height = tallest paragraph (no jump); author + photo below */
    .review-content-wrapper .review-content {
        order: 1;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    /* All paragraphs in same grid cell so row height = max of all (fixed area, no resizing) */
    .review-content-wrapper .review-content .review-quote,
    .review-content-wrapper .review-content .review-paragraph,
    .review-content-wrapper .review-content .review-project,
    .review-content-wrapper .review-content .review-impact {
        grid-row: 1;
        grid-column: 1;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
        margin: 0;
    }

    .review-content-wrapper .review-content .review-quote.review-visible,
    .review-content-wrapper .review-content .review-paragraph.review-visible,
    .review-content-wrapper .review-content .review-project.review-visible,
    .review-content-wrapper .review-content .review-impact.review-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Tap hint: above author, at bottom of quote area; show on mobile (main.css hides by default) */
    .review-content-wrapper .review-content .review-tap-hint {
        display: block;
        grid-row: 1;
        grid-column: 1;
        position: absolute;
        bottom: 25%;
        right: 5%;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(255, 220, 100, 0.25);
        pointer-events: none;
        animation: review-pulse 2s ease-in-out infinite;
        z-index: 10;
    }

    .review-content-wrapper .review-content .review-author {
        grid-row: 2;
        grid-column: 1;
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-xs);
    }

    .review-content-wrapper .review-photo {
        order: 2;
        width: 72px;
        height: 72px;
        margin: 0 auto;
    }

    .review-quote {
        font-size: var(--font-size-base);
        margin-bottom: 0;
    }

    .review-author {
        font-size: var(--font-size-sm);
    }

    @keyframes review-pulse {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.15); opacity: 0.35; }
    }

    /* Swipe-only on mobile: hide prev/next buttons */
    .reviews-carousel-wrapper .carousel-controls {
        display: none;
    }
}

/* ---------- 768px: Book, Tools, Case study ---------- */
@media (max-width: 768px) {
    .book-hero {
        flex-direction: column;
        gap: var(--spacing-lg);
        min-height: auto;
        padding: var(--spacing-lg) 0;
    }

    .book-words-left,
    .book-words-right {
        gap: var(--spacing-md);
    }

    .book-word {
        font-size: 1.5rem !important;
    }

    .book-hero-photo {
        width: 200px;
        height: 200px;
    }

    .process-steps-alternative {
        grid-template-columns: 1fr;
    }

    .process-steps-alternative::before,
    .process-steps-alternative::after {
        display: none;
    }

    .case-study-modal-content {
        max-width: 95%;
        margin: var(--spacing-sm);
    }

    /* Tools tabs: one line, max 1/4 width each so they don’t spill */
    .tools-tab-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }

    .tool-tab-break-mobile {
        display: block;
    }

    .tool-tab-button {
        flex: 1 1 0;
        min-width: 0;
        max-width: 25%;
        font-size: 0.85em;
        padding: var(--spacing-xs) 0.25em;
        text-align: center;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
    }

    .tool-tab-button.active {
        border-left-color: transparent;
        border-bottom-color: var(--neutral-white);
    }

    .tool-tab-pane {
        padding-top: 0;
    }

    /* Organisations carousel: flush to viewport left/right on mobile; no logo fading – full opacity */
    .organisations-section .carousel-container {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .organisations-section .carousel-item,
    .organisations-section .org-logo {
        opacity: 1 !important;
    }
}

/* ---------- 480px portrait ---------- */
@media (max-width: 480px) and (orientation: portrait) {
    .main-nav {
        padding: var(--spacing-xs) 0;
    }

    .nav-list {
        gap: var(--spacing-xs);
    }

    .nav-link {
        padding: var(--spacing-xs);
        font-size: 0.85rem;
        min-width: 90px;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .section-tagline {
        font-size: 1.1rem;
    }

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

    .facilitate-grid,
    .services-grid,
    .arts-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

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

    .about-intro {
        grid-template-columns: 1fr;
    }

    .about-portrait {
        max-width: 200px;
        margin: 0 auto;
    }

    .section-buttons {
        flex-direction: column;
        gap: var(--spacing-lg);
        perspective: none;
    }

    .section-button {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 200px;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        transform: none !important;
    }

    .section-button:hover {
        transform: scale(1.05) !important;
    }

    .about-hero {
        padding-top: 120px;
    }

    .about-hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .about-photo-container {
        max-width: 100%;
    }

    .section-buttons {
        min-height: 480px;
    }

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

    .hero-tagline {
        font-size: var(--font-size-lg);
    }

    .pipeline-visual {
        flex-direction: column;
    }

    .pipeline-connector {
        width: 3px;
        height: 40px;
        transform: rotate(90deg);
    }

    .pipeline-connector::after {
        content: none;
    }

    .relationships-visual {
        height: 300px;
    }

    .relationship-node {
        width: 80px;
        height: 80px;
    }

    .relationship-node.center-node {
        width: 100px;
        height: 100px;
    }

    .stats-infographic {
        min-height: 400px;
    }

    .stats-overlay {
        min-height: 400px;
        padding: var(--spacing-md);
    }

    .stat-number-large {
        font-size: 4rem;
    }

    .stat-number-medium {
        font-size: 3rem;
    }

    .stat-number-small {
        font-size: 2rem;
    }

    .stat-top-left,
    .stat-top-right,
    .stat-bottom-left,
    .stat-bottom-center {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        margin: var(--spacing-md);
    }

    .album-section,
    .fire-choir-section,
    .film-section {
        grid-template-columns: 1fr;
    }

    .film-boxes {
        grid-template-columns: 1fr;
    }

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

    .page-title {
        font-size: var(--font-size-3xl);
    }

    .page-tagline {
        font-size: var(--font-size-lg);
    }

    .submenu-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .submenu-track {
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-sm);
        justify-content: flex-start;
    }

    .submenu-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}