/* =====================================================
   DAYALU JI WEBSITE — RESPONSIVE STYLESHEET
   Load this AFTER style.css in header.php
   Breakpoints: 1200 (large tablet/small laptop) | 1024 (tablet landscape)
                768 (tablet portrait) | 600 (large mobile) | 480 (mobile)
                360 (small mobile)
   ===================================================== */

/* =====================================================
   1200px — LARGE TABLET / SMALL LAPTOP
   ===================================================== */
@media (max-width: 1200px) {
    .container { padding: 0 20px; }

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

/* =====================================================
   1024px — TABLET LANDSCAPE
   ===================================================== */
@media (max-width: 1024px) {

    /* Hero */
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-content { order: 1; }
    .hero-image { order: 0; margin: 0 auto; flex-direction: column; }
    .hero-quote { position: static; margin: 20px auto 0; max-width: 100%; }
    .hero-tags { justify-content: center; }
    .hero-buttons { justify-content: center; }
    .hero-image::before { width: 480px; height: 480px; }
    .hero-subtext { margin-left: auto; margin-right: auto; }

    .stats-bar { gap: 24px 16px; }

    /* About */
    .about-grid { grid-template-columns: 1fr 1fr; }
    .about-focus { grid-column: span 2; }

    /* About page (photo + content) */
    .about-grid.about-grid-2col { grid-template-columns: 1fr 1fr !important; }
    .about-grid.about-grid-2col .about-video img { min-height: 380px; }

    /* Achievements / Initiatives */
    .achievements-grid { grid-template-columns: repeat(3, 1fr); }
    .initiatives-grid { grid-template-columns: repeat(3, 1fr); }

    /* Media / News / Events */
    .media-news-grid { grid-template-columns: 1fr 1fr; }
    .col-events { grid-column: span 2; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Work & Initiatives detail, full grids */
    .achievements-full-grid { grid-template-columns: repeat(2, 1fr); }
    .media-full-grid { grid-template-columns: repeat(2, 1fr); }
    .news-full-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-full-grid { grid-template-columns: repeat(3, 1fr); }

    /* Contact page */
    .contact-grid { grid-template-columns: 1fr; }

    /* ============ HEADER (tablet) ============
       Collapse into the hamburger menu earlier (was only <768px) so the
       full nav list never has to squeeze in next to the logo + CTA button
       on tablet widths — this was causing the logo to wrap onto 2 lines
       and the nav links to overlap the "Get In Touch" button. */
    .nav-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        gap: 14px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .nav-menu.open { display: flex; }
    .main-header-inner { padding: 14px 20px; }

    /* Keep the logo on a single line and give it breathing room now that
       the nav list is out of the way (premium, uncluttered header) */
    .site-logo { flex-shrink: 0; }
    .logo-text-main,
    .footer-logo-main { white-space: nowrap; }
    .header-cta { padding: 12px 22px; font-size: 14px; }

    /* ============ WORK & INITIATIVES (tablet) ============
       Stack image above text intentionally (same treatment as mobile)
       instead of letting flex-wrap break the row awkwardly mid-width. */
    .initiative-detail,
    .initiative-detail.reverse { flex-direction: column; }
    .initiative-detail-image {
        position: static;
        flex: none;
        width: 100%;
    }
    .initiative-detail-image img {
        width: 100%;
        height: 320px;
        margin: 0 auto;
    }
    .initiative-detail-text { width: 100%; }

    /* ============ FOOTER (tablet polish) ============ */
    .footer-grid { gap: 40px 30px; }
    .footer-col h4 {
        padding-bottom: 10px;
        border-bottom: 1px solid #4a1b22;
        margin-bottom: 18px;
    }
}

/* =====================================================
   TABLET-ONLY (769px–1024px) — header button + toggle grouping.
   Scoped with min-width so it NEVER applies at mobile widths (<=768px),
   where the header-cta is hidden and the toggle must stay pinned to the
   far-right via the default space-between (untouched, unbroken here).
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-header-inner { justify-content: flex-start; }
    .header-cta { order: 2; margin-left: auto; }
    .main-nav { order: 3; margin-left: 14px; }
}

/* =====================================================
   768px — TABLET PORTRAIT
   ===================================================== */
@media (max-width: 768px) {

    /* Top bar */
    .top-bar-inner { flex-direction: column; gap: 6px; text-align: center; }
    .top-bar-left a:last-child { margin-right: 0; }
    .top-bar-right { justify-content: center; flex-wrap: wrap; }
    .lang-dropdown { right: auto; left: 50%; transform: translateX(-50%); max-width: 90vw; }

    /* Navigation */
    .nav-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        gap: 14px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .nav-menu.open { display: flex; }
    .header-cta { display: none; }
    .main-header-inner { padding: 12px 20px; }

    /* Hero */
    .hero-content h1 { font-size: 30px; }
    .hero-image::before { width: 340px; height: 340px; }
    .hero-content::before { display: none; }
    .hero-image img { max-height: 320px; }

    /* Journey timeline */
    .timeline-item { padding-left: 54px; }
    .timeline-icon { width: 40px; height: 40px; font-size: 15px; }
    .timeline::before { left: 19px; }

    /* Stats bar */
    .stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 14px;
        padding: 22px 18px;
    }
    .stat-item { width: auto; min-width: 0; }

    /* About */
    .about-grid { grid-template-columns: 1fr; }
    .about-focus { grid-column: span 1; }
    .about-text h2 { font-size: 26px; }

    /* Center the "Read More About My Journey" button only; keep label/heading/paragraph as-is */
    .about-text { text-align: center; }
    .about-text .section-label,
    .about-text h2,
    .about-text p { text-align: left; }

    /* About page (photo + content) — stack photo above text */
    .about-grid.about-grid-2col { grid-template-columns: 1fr !important; }
    .about-grid.about-grid-2col .about-video img { height: 280px; min-height: 0; }

    /* Achievements */
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }

    /* Initiatives — list-row layout on mobile (image left, text + arrow right) */
    .initiatives-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .initiative-card {
        height: auto;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px;
        background: var(--white);
        box-shadow: var(--shadow);
    }
    .initiative-card img {
        width: 68px;
        height: 68px;
        border-radius: 10px;
        flex-shrink: 0;
    }
    .initiative-overlay {
        position: static;
        inset: auto;
        background: none;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        padding: 0;
        flex: 1;
        min-width: 0;
        color: var(--text-dark);
    }
    .initiative-overlay > i { display: none; }
    .initiative-overlay h5 {
        grid-column: 1;
        grid-row: 1;
        color: var(--text-dark);
        font-size: 14.5px;
        margin-bottom: 3px;
    }
    .initiative-overlay p {
        grid-column: 1;
        grid-row: 2;
        color: var(--text-gray);
        font-size: 12.5px;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .initiative-overlay a {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        background: var(--maroon);
        color: var(--white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    /* Media / News / Events */
    .media-news-grid { grid-template-columns: 1fr; }
    .col-events { grid-column: span 1; }

    /* Quote strip */
    .quote-text { font-size: 20px; }

    /* Newsletter */
    .newsletter-inner { flex-direction: column; text-align: center; }
    .newsletter-form { width: 100%; justify-content: center; }
    .newsletter-form input { flex: 1; min-width: 0; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }
    .footer-grid > div:nth-child(1),
    .footer-grid > div:nth-child(4) {
        grid-column: 1 / -1;
    }
    .footer-logo-brand { justify-content: center; }
    .footer-socials { justify-content: center; }
    .footer-grid > div:nth-child(4) { text-align: center; }
    .footer-contact li { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; gap: 6px; }

    /* Inner page banner */
    .page-banner { padding: 50px 0; }
    .page-banner h1 { font-size: 26px; }

    /* Work & Initiatives detail — stack image/text, remove reverse order */
    .initiative-detail,
    .initiative-detail.reverse { flex-direction: column; }
    .initiative-detail-image {
        position: static;
        flex: none;
        width: 100%;
    }
    .initiative-detail-image img {
        width: 100%;
        height: 240px;
        margin: 0 auto;
    }

    /* Full grids -> 2 columns / stacked */
    .achievements-full-grid { grid-template-columns: repeat(2, 1fr); }
    .media-full-grid { grid-template-columns: 1fr; }
    .news-full-grid { grid-template-columns: 1fr; }
    .gallery-full-grid { grid-template-columns: repeat(2, 1fr); }

    /* Contact & legal pages */
    .contact-grid { grid-template-columns: 1fr; }
    .legal-content { padding: 30px 22px; }

    /* Mobile bottom navigation bar */
    body { padding-bottom: 64px; }
    .mobile-bottom-nav { display: flex; }

    /* Floating WhatsApp + language buttons: sit above the bottom nav bar, slightly smaller */
    .floating-actions { bottom: 80px; right: 14px; gap: 10px; }
    .floating-btn { width: 46px; height: 46px; font-size: 23px; }
    .floating-lang { font-size: 16px; }
}

/* =====================================================
   600px — LARGE MOBILE
   ===================================================== */
@media (max-width: 600px) {
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn { justify-content: center; }

    /* Achievements — swipeable single-card carousel */
    .achievements-grid {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .achievements-grid::-webkit-scrollbar { display: none; }
    .achievement-card {
        flex: 0 0 90%;
        scroll-snap-align: center;
        padding: 10px 12px;
    }
    .achievement-card img { width: 150px; margin-bottom: 6px; }
    .achievement-card h5 { font-size: 16px; }
    .achievement-card span { font-size: 13px; }

    .event-item { flex-wrap: wrap; }
    .event-item a { margin-left: 0; }

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

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

/* =====================================================
   480px — MOBILE
   ===================================================== */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    .hero-content h1 { font-size: 26px; }
    .hero-subtext { font-size: 14px; }
    .hero-image::before { width: 260px; height: 260px; }
    .hero-image img { max-height: 260px; }

    .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    .achievement-card { flex-basis: 90%; }

    .about-text h2 { font-size: 22px; }

    /* About page (photo + content) */
    .about-grid.about-grid-2col .about-video img { height: 350px; }

    .quote-text { font-size: 17px; }
    .quote-strip { padding: 40px 0; }

    .newsletter-form input { min-width: 100%; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form button { width: 100%; justify-content: center; }

    .footer-col h4 { margin-bottom: 12px; }

    .page-banner h1 { font-size: 22px; }
    .page-banner p { font-size: 13.5px; }

    .gallery-full-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .form-row { grid-template-columns: 1fr; }
    .contact-info-card, .contact-form-card { padding: 24px 20px; }
    .legal-content { padding: 24px 18px; }
}

/* =====================================================
   360px — SMALL MOBILE
   ===================================================== */
@media (max-width: 360px) {
    .hero-content h1 { font-size: 22px; }
    .site-logo img { height: 42px; }
    .logo-text { font-size: 17px; }
    .btn { padding: 11px 20px; font-size: 13.5px; }
    .achievement-card { flex-basis: 94%; }
}

/* =====================================================
   ACCESSIBILITY — reduced motion support
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-init { opacity: 1 !important; transform: none !important; }
}

/* =====================================================
   VISIBLE KEYBOARD FOCUS (accessibility)
   ===================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .initiative-detail,
    .initiative-detail.reverse { grid-template-columns: 1fr; }
    .initiative-detail.reverse .initiative-detail-image,
    .initiative-detail.reverse .initiative-detail-text { order: 0; }
    .initiative-detail-image img { height: 240px; }
}

/* NOTE: the .achievements-full-grid / .media-full-grid / .gallery-full-grid / .media-filter-tabs
   rules that used to sit here were NOT wrapped in a @media query, so they were overriding the
   desktop layout at every screen width. They've been moved into the correct 1024px / 768px / 600px
   blocks above; .media-filter-tabs mobile behaviour is added to the 768px block below. */
@media (max-width: 768px) {
    .media-filter-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}