/* ========================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach using Bootstrap 5 breakpoints
   ======================================== */

/* ---- Extra Small (< 576px) ---- */
@media (max-width: 575.98px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .hero-banner {
        min-height: 55vh;
        padding: var(--space-3xl) var(--space-md);
    }

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

    .hero-content p {
        font-size: 1rem;
    }

    .page-hero {
        min-height: 25vh;
    }

    .page-hero h1 {
        font-size: 1.75rem;
    }

    .post-header {
        min-height: 35vh;
    }

    .post-header__title {
        font-size: 1.5rem;
    }

    .post-header__meta {
        gap: var(--space-md);
    }

    .section-padding {
        padding: var(--space-2xl) 0;
    }

    .section-title {
        margin-bottom: var(--space-xl);
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .btn-gold {
        width: 100%;
    }

    .author-bio {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }

    .author-bio__avatar {
        margin: 0 auto;
    }

    .social-share {
        justify-content: center;
        flex-wrap: wrap;
    }

    .comment-list--children {
        padding-left: var(--space-lg);
    }

    /* Timeline goes single column */
    .timeline::before {
        left: 15px;
    }

    .timeline-item {
        width: 100%;
        padding-left: var(--space-2xl);
        padding-right: 0;
    }

    .timeline-item:nth-child(even) {
        margin-left: 0;
        padding-left: var(--space-2xl);
    }

    .timeline-item__dot {
        left: 7px;
        right: auto;
    }

    .timeline-item:nth-child(even) .timeline-item__dot {
        left: 7px;
    }

    .error-page__code {
        font-size: 5rem;
    }

    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: var(--space-sm);
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ---- Small (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-banner {
        min-height: 60vh;
    }

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

    .post-header__title {
        font-size: 2rem;
    }

    .newsletter-form {
        max-width: 400px;
    }
}

/* ---- Medium & below (< 768px) ---- */
@media (max-width: 767.98px) {
    .category-card {
        padding: var(--space-lg);
    }

    .category-card__icon {
        width: 50px;
        height: 50px;
    }

    .contact-info {
        margin-top: var(--space-2xl);
    }

    .map-placeholder {
        height: 250px;
    }
}

/* ---- Large & below (< 992px) ---- */
@media (max-width: 991.98px) {
    /* Top bar hidden on mobile, language switcher moves to navbar */
    .top-bar {
        display: none;
    }

    .lang-switcher--mobile {
        display: flex !important;
    }

    /* Sidebar stacks below content */
    .sidebar {
        margin-top: var(--space-3xl);
        padding-top: var(--space-2xl);
        border-top: 2px solid var(--clr-border);
    }

    /* Social share - fixed bottom bar */
    .social-share--floating {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        background: var(--clr-white);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: var(--space-sm) var(--space-md);
        border-top: 1px solid var(--clr-border);
    }

    .social-share--floating .social-share__label {
        display: none;
    }

    /* Make post content wider without sidebar */
    .single-post-area {
        padding-bottom: 70px; /* space for fixed share bar */
    }

    /* Navigation adjustments */
    .navbar-nav {
        padding: var(--space-md) 0;
        border-top: 1px solid var(--clr-border);
        margin-top: var(--space-md);
    }

    .site-navbar .nav-link {
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid rgba(209, 202, 171, 0.2);
    }

    .site-navbar .nav-link::after {
        display: none;
    }

    /* Quote banner */
    .quote-banner__text {
        font-size: 1.35rem;
    }
}

/* ---- Large (992px+) ---- */
@media (min-width: 992px) {
    .lang-switcher--mobile {
        display: none !important;
    }

    /* Sticky sidebar */
    .sidebar-sticky {
        position: sticky;
        top: 90px;
    }

    /* Floating social share */
    .social-share--floating {
        flex-direction: column;
        position: sticky;
        top: 100px;
    }

    .social-share--floating .social-share__label {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
    }
}

/* ---- Extra Large (1200px+) ---- */
@media (min-width: 1200px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }

    .post-header__title {
        font-size: 2.75rem;
    }
}

/* ---- Print Styles ---- */
@media print {
    .top-bar,
    .site-navbar,
    .search-overlay,
    .sidebar,
    .social-share,
    .back-to-top,
    .newsletter-section,
    .comment-respond,
    .related-posts,
    .site-footer {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .post-content a::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}