/* ============================================================
   Cape Kulcha Tours — Responsive Stylesheet
   ============================================================
   Mobile-first approach using min-width breakpoints.
   Base styles (mobile) are in style.css.
   This file overrides and enhances for larger screens.
   ============================================================ */


/* ============================================================
   MOBILE BASE OVERRIDES (max-width: 768px)
   These handle the mobile-specific layouts
   ============================================================ */
@media (max-width: 768px) {

    /* ─── Navigation ─── */
    #navbar {
        padding: 20px 25px;
    }

    #navbar.scrolled {
        padding: 15px 25px;
    }

    .nav-logo {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        background: var(--dark);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 100px 40px 40px;
        gap: 0;
        transition: right 0.5s var(--ease-out);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        z-index: 1050;
    }

    .nav-links.open {
        right: 0;
    }

    .nav-links a,
    .dropbtn {
        font-size: 0.8rem;
        padding: 18px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        letter-spacing: 3px;
    }

    /* Toggle group stacks vertically on mobile */
    .toggle-group {
        flex-direction: row;
        gap: 20px;
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 20px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }

    .picker span {
        font-size: 0.75rem;
    }

    /* Dropdown on mobile */
    .dropdown {
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .dropdown-content {
        position: static;
        display: none;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: none;
        min-width: 100%;
    }

    .dropdown:hover .dropdown-content,
    .dropdown.open .dropdown-content {
        display: block;
    }

    .dropdown-content a {
        text-align: left;
        padding: 14px 20px;
        font-size: 0.7rem;
    }

    /* Mobile close button */
    .mobile-nav-close {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        color: var(--white);
        font-size: 2rem;
        background: none;
        border: none;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s;
        font-family: var(--font-body);
        line-height: 1;
    }

    .mobile-nav-close:hover {
        opacity: 1;
    }

    /* Mobile overlay when nav is open */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* ─── Hero ─── */
    .hero-label {
        font-size: 0.6rem;
        letter-spacing: 4px;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        padding: 0 20px;
    }


    /* ─── Sections ─── */
    section {
        padding: 70px 6%;
    }

    .split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }


    /* ─── About Section ─── */
    #about .image-box {
        height: 350px;
        order: -1;
    }

    .upgrade-quote {
        padding-left: 20px;
        margin: 25px 0;
        font-size: 1rem;
    }


    /* ─── Township Section ─── */
    #township .image-box {
        order: -1;
    }

    #township .image-box img {
        height: 400px;
    }

    .book-box {
        padding: 25px;
    }


    /* ─── Signature Tours ─── */
    .signature-container {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
    }

    .tour-sidebar {
        order: -1;
    }

    #tour-visual-portal {
        height: 250px;
        margin-bottom: 20px;
    }

    .tour-menu {
        border-right: none;
        padding-right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    .tour-menu-item {
        padding: 12px 0;
        font-size: 0.6rem;
        letter-spacing: 1px;
        flex: 1 1 50%;
    }

    .tour-info h3 {
        font-size: 2rem;
    }

    .tour-essentials {
        flex-direction: column;
        gap: 15px;
    }


    /* ─── Modals ─── */
    .modal-overlay {
        padding: 20px 10px;
        align-items: flex-start;
    }

    .modal-content {
        padding: 30px 20px;
        max-height: 95vh;
        width: 100%;
    }

    /* Journal Modal */
    .journal-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .journal-image {
        height: 300px;
    }

    .journal-quote {
        font-size: 1.1rem;
    }

    /* Bucket List Modal */
    .bucket-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .bucket-menu {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    /* Impact Modal */
    .impact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .impact-card {
        padding: 20px;
    }

    .kit-price {
        position: static;
        margin-bottom: 8px;
    }

    .impact-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .total-display {
        text-align: center;
    }


    /* ─── WhatsApp ─── */
    #whatsapp-wrapper {
        bottom: 20px;
        right: 15px;
    }

    .wa-text {
        display: none;
    }

    .wa-icon {
        width: 52px;
        height: 52px;
    }

    .wa-icon svg {
        width: 26px;
        height: 26px;
    }


    /* ─── Bucket List Page ─── */
    .bucket-page-intro {
        padding: 60px 6% 40px;
    }

    .bucket-builder-section {
        padding: 0 4% 70px;
    }

    .bucket-step {
        margin-bottom: 50px;
    }

    .bucket-items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bucket-card__image {
        height: 140px;
    }

    .bucket-card__content {
        padding: 10px;
    }

    .bucket-card__label {
        font-size: 0.68rem;
    }

    .bucket-card__desc {
        font-size: 0.6rem;
    }

    .bucket-logic-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bucket-logic-card {
        padding: 25px 20px;
    }

    .bucket-purpose-card {
        padding: 25px 20px;
        gap: 15px;
    }

    .bucket-final-form {
        padding: 30px 20px;
    }

    .bucket-final-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* ─── Journal Page ─── */
    .journal-article-section {
        padding: 60px 6% 50px;
    }

    .journal-article-header {
        margin-bottom: 40px;
        padding-bottom: 25px;
    }

    .journal-article-title {
        font-size: 1.8rem;
    }

    .journal-featured-image img {
        height: 280px;
    }

    .journal-lede p {
        font-size: 1rem;
    }

    .journal-pullquote {
        margin: 35px 0;
        padding-left: 20px;
    }

    .journal-pullquote p {
        font-size: 1.2rem;
    }

    .journal-inline-image img {
        height: 250px;
    }

    .journal-article-body h3 {
        font-size: 1.3rem;
        margin-top: 35px;
    }

    .journal-artisan-profile {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 30px 25px;
        text-align: center;
    }

    .artisan-profile-image img {
        height: 250px;
        max-width: 250px;
        margin: 0 auto;
    }

    .journal-cta-section {
        padding: 70px 6%;
    }

    .journal-cta-heading {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    .journal-cta-actions .cta-btn {
        width: 100%;
        text-align: center;
    }

    /* ─── Contact Page ─── */
    .contact-info-section {
        padding: 0 5%;
        margin-top: -40px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-info-card {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 30px 25px;
    }

    .contact-info-card:last-child {
        border-bottom: none;
    }

    .contact-form-section {
        padding: 70px 6%;
    }

    .contact-form-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-form-box {
        padding: 30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-map-section iframe {
        height: 300px;
    }

    /* ─── Premium Banner ─── */
    .premium-banner-section {
        padding: 0 0 40px;
    }

    .premium-banner {
        grid-template-columns: 1fr;
    }

    .premium-banner__left {
        padding: 35px 25px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        align-items: center;
    }

    .premium-price__value {
        font-size: 2.2rem;
    }

    .premium-banner__right {
        padding: 30px 25px;
    }

    .premium-includes {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tour-card__badges {
        top: 10px;
        left: 10px;
    }

    .tour-badge {
        font-size: 0.5rem;
        padding: 4px 8px;
        letter-spacing: 1px;
    }

    /* ─── Tours Page ─── */
    .tours-intro-section {
        padding: 70px 6% 50px;
    }

    .tours-grid-section {
        padding: 0 0 40px;
    }

    .tour-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tour-card--reversed {
        direction: ltr;
    }

    .tour-card__image {
        height: 300px;
    }

    .tour-card__content {
        padding: 35px 25px;
    }

    .tour-card__title {
        font-size: 1.5rem;
    }

    .tour-card__desc {
        font-size: 0.85rem;
    }

    .tour-card__btn {
        align-self: stretch;
        text-align: center;
    }

    /* Difference section */
    .difference-section {
        padding: 70px 6%;
    }

    .difference-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .difference-cta-btn {
        padding: 14px 35px;
    }

    /* CTA Section */
    .cta-section {
        padding: 70px 6%;
    }

    .cta-heading {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    .cta-btn {
        padding: 14px 35px;
        width: 100%;
        text-align: center;
    }

    /* ─── Footer ─── */
    footer {
        padding: 60px 6%;
    }

    .footer-brand {
        font-size: 1.4rem;
    }

    /* ─── Page Hero (inner pages) ─── */
    .page-hero {
        height: 45vh;
        min-height: 300px;
    }

    .page-hero-content h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    /* ─── Our Story ─── */
    .story-section {
        padding: 70px 6%;
    }

    .story-body p {
        font-size: 0.92rem;
        line-height: 1.8;
    }

    /* ─── FAQ ─── */
    .faq-section {
        padding: 70px 6%;
    }

    .faq-container > h2 {
        margin-bottom: 40px;
    }

    .faq-question {
        padding: 22px 0;
        gap: 15px;
    }

    .faq-q-text {
        font-size: 0.8rem;
    }

    .faq-answer-inner {
        padding: 0 0 25px 45px;
    }

    .faq-answer-inner p {
        font-size: 0.85rem;
    }
}


/* ============================================================
   SMALL MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

    #navbar {
        padding: 15px 18px;
    }

    .nav-logo {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    section {
        padding: 55px 5%;
    }

    h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    p {
        font-size: 0.88rem;
    }

    .label {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    #about .image-box {
        height: 250px;
    }

    #township .image-box img {
        height: 300px;
    }

    .tour-menu-item {
        flex: 1 1 100%;
    }

    .tour-info h3 {
        font-size: 1.6rem;
    }

    .bucket-items-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bucket-card {
        display: grid;
        grid-template-columns: 100px 1fr;
    }

    .bucket-card__image {
        height: 100%;
        min-height: 90px;
    }

    .book-box {
        padding: 20px 15px;
    }

    .impact-card h3 {
        font-size: 1.2rem;
    }
}


/* ============================================================
   TABLET (min-width: 769px) and (max-width: 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    #navbar {
        padding: 25px 40px;
    }

    #navbar.scrolled {
        padding: 16px 40px;
    }

    section {
        padding: 90px 6%;
    }

    .split-grid {
        gap: 50px;
    }

    #about .image-box {
        height: 500px;
    }

    #township .image-box img {
        height: 550px;
    }

    .signature-container {
        grid-template-columns: 350px 1fr;
        gap: 50px;
    }

    .tour-info h3 {
        font-size: 2.2rem;
    }

    .nav-links a,
    .dropbtn {
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }

    .nav-links {
        gap: 18px;
    }

    .toggle-group {
        gap: 12px;
        padding-right: 12px;
        margin-right: 5px;
    }

    /* Tours page tablet */
    .tour-card__content {
        padding: 40px;
    }

    .tour-card__title {
        font-size: 1.6rem;
    }

    .difference-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Bucket list tablet */
    .bucket-items-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bucket-logic-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   LARGE DESKTOP (min-width: 1400px)
   ============================================================ */
@media (min-width: 1400px) {

    section {
        padding: 140px 12%;
    }

    .signature-container {
        grid-template-columns: 500px 1fr;
        gap: 100px;
    }

    #tour-visual-portal {
        height: 420px;
    }

    #about .image-box {
        height: 720px;
    }
}


/* ============================================================
   ULTRA-WIDE (min-width: 1800px)
   ============================================================ */
@media (min-width: 1800px) {

    section {
        padding: 160px 15%;
    }

    .modal-content {
        max-width: 1100px;
    }
}