/* ============================================================
   FLEX-E Project Website – Responsive Media Queries
   ============================================================
   Breakpoints:
     - 1024px  Tablets (landscape / large tablets)
     - 768px   Phones (portrait / small tablets)
     - 600px   Small phones
     - 769px+  Desktop (hamburger hidden)
   ============================================================ */

/* ============================================================
   1. TABLETS (max-width: 1024px)
   ============================================================
   Narrow main container, switch news grid to 2 columns,
   stack budget banner vertically.
   ============================================================ */
@media (max-width: 1024px) {

    /* Widen container slightly and reduce vertical margin */
    .main-container {
        margin: 20px auto;
    }

    /* ── Navbar: hide links, show hamburger ── */
    /* Nav links: hidden by default, shown as vertical dropdown when .open is toggled via JS */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: var(--color-teal-dark);
        padding: 16px 24px;
        gap: 4px;
        z-index: 99;
    }

    /* Nav links: visible when hamburger is clicked (.open class added by JS) */
    .nav-links.open {
        display: flex;
    }

    /* Hamburger button: visible on small screens */
    .nav-hamburger {
        display: flex;
    }

    /* ── Layout adjustments ── */

    /* Add horizontal padding inside nav container */
    .nav-container {
        padding: 0 20px;
    }

    /* News grid: 3 columns → 2 columns */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Budget banner: stack budget info and duration vertically */
    .budget-banner {
        flex-direction: column;
        gap: 20px;
    }

    /* Adjust typography for the intro section on medium screens */
    .intro-headline {
        font-size: 1.3rem;
    }
    
    .intro-orange-link {
        font-size: 1.1rem;
    }

    .section-plain h5.text-center {
        max-width: 80%;
    }

    /* Reduce section-plain horizontal padding on tablets */
    .section-plain {
        padding: 32px 32px;
    }

    .section-plain .flex-row,
    .section-plain .flex-row-reverse {
        flex-direction: column; /* Stacks image and text vertically on mobile */
        text-align: center;
    }
    
    .section-plain .flex-row .img-wrapper,
    .section-plain .flex-row-reverse .img-wrapper {
        width: 100%;
    }

    .section-news {
        padding: 32px 32px;
    }

    .section-near-black {
        padding: 32px 32px;
    }

    .features-grid {
        grid-template-columns: 1fr; /* Stacks everything safely into a single track column */
        gap: 60px;
        margin: 0 32px;
    }
    
    /* Rearranges the graphic block to sit nicely between the features on tablet views */
    .features-col-right {
        gap: 60px;
    }

    .partners-section {
        padding: 32px 24px; /* Softened section boundaries to prevent layout squeezing on smaller devices */
    }

    .partners-grid,
    .partners-row-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .partners-grid:has(.partners-row-track) {
        gap: 32px;
    }

    /* Vision cards grid: 3 columns → 2 columns on tablets */
    .vision-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6%;
        width: 90%;
    }

    /* Vision banner: reduce bottom padding so card overlap is less extreme */
    .vision-banner {
        padding-bottom: 100px;
    }

    /* Contact grid: reduce gap on tablets */
    .contact-grid {
        gap: 32px;
    }

    /* Packages section: reduce horizontal margin on tablets */
    .packages-section {
        margin: 32px 32px;
    }

    /* Logo banner: reduce max height on tablets */
    .logo-banner img {
        max-height: 150px;
    }
}

/* ============================================================
   2. PHONES (max-width: 768px)
   ============================================================
   Mobile navbar with hamburger toggle, single-column layouts,
   collapsed sidebar, reduced padding on muted sections.
   ============================================================ */
@media (max-width: 768px) {

    /* Budget banner: stacked column layout */
    .budget-banner {
        flex-direction: column;
        gap: 20px;
    }

    /* Budget flex group: stack icon above text on phones */
    .budget-flex-group {
        flex-direction: column;
        gap: 12px;
    }

    /* Shrink budget card icon on phones */
    .budget-card-icon {
        width: 72px;
    }

    /* Budget fancy card: fully remove negative margin on mobile */
    .budget-card {
        margin-bottom: 0;
        width: 80%;
    }

    /* Budget text side: stack below card on mobile */
    .budget-text-side {
        width: 80%;
        padding: 1.5rem;
        text-align: center;
        margin-inline: auto;
    }

    /* Budget banner overlay: stack vertically on mobile */
    .budget-banner-overlay {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        padding: 1rem 4%;
    }

    /* Muted grey section: reduced margin and padding */
    .section-muted-grey {
        margin: 20px;
        padding: 25px;
    }

    /* Muted green section: reduced margin and padding */
    .section-muted-green {
        margin: 20px;
        padding: 25px;
    }

    /* News grid: single column */
    .news-grid {
        grid-template-columns: 1fr;
    }

    /* Main partner banner: smaller max height */
    .main-partner-banner {
        max-height: 100px;
    }

    /* Sidebar layout: collapse to single column */
    .sidebar-layout {
        grid-template-columns: 1fr;
    }

    /* Sidebar: no longer sticky on mobile */
    .sidebar {
        position: static;
    }

    .section-intro .intro-wrapper {
        display: block;
        background-size: cover;
        padding: 2rem 1.5rem;
    }

    /* Content block takes full width and flows naturally */
    .intro-content {
        position: relative;
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
    }

    .intro-headline {
        font-size: 1.25rem; /* Slightly smaller text for mobile viewports */
        margin-bottom: 1.5rem;
    }

    .intro-links {
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .intro-orange-link {
        font-size: 1.1rem;
    }

    .intro-news-btn {
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
    }

    /* Hide or reposition social badge on mobile */
    .intro-social-block {
        position: absolute;
        top: auto;
        bottom: 2rem;
        right: 5%;
        z-index: 2;
    }

    /* Option: Hide background image completely on mobile for better readability */
    .intro-bg {
        display: none;
    }

    .linkedin-badge {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }

    .section-near-black {
        padding: 32px 20px;
    }

    .section-plain h5.text-center {
        max-width: 90%;
    }

    /* Reduce section-plain padding on mobile */
    .section-plain {
        padding: 32px 20px;
    }

    .section-news {
        padding: 32px 32px;
    }

    /* Collapse two column fields into a stacked single column list flow */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .benefit-item {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .benefit-icon {
        width: 44px;
        height: 44px;
    }

    .package-row {
        grid-template-columns: 1fr; /* Stacks column cells vertically on restricted screen resolutions */
        gap: 16px;
    }

    /* Packages section: reduce horizontal margin on mobile */
    .packages-section {
        margin: 24px 24px;
    }

    .partners-section {
        padding: 24px 16px;
    }

    .partners-grid,
    .partners-row-track {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .partners-grid:has(.partners-row-track) {
        gap: 24px;
    }

    .partner-card {
        min-height: auto;
    }

    /* Vision cards grid: single column on phones */
    .vision-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 95%;
        margin-top: -50px;
    }

    /* Vision banner: reduce padding further on phones */
    .vision-banner {
        padding: 48px 16px 80px 16px;
    }

    /* Vision banner content: allow text to use full width */
    .vision-text-container {
        max-width: 90%;
    }

    /* Vision banner text: increase left padding on mobile */
    .vision-banner-content {
        padding-left: 16px;
    }

    /* Contact grid: stack columns vertically on phones */
    .contact-grid {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    /* Contact last column (LinkedIn): center on mobile */
    .contact-grid .contact-column:last-child {
        align-self: flex-start;
    }

    /* Logo banner: reduce max height on phones */
    .logo-banner img {
        max-height: 100px;
    }

    /* Logo banner: reduce padding on phones */
    .logo-banner {
        padding: 16px 12px;
    }

    /* Fix read-more ::after overlay – remove it on mobile to prevent click blocking */
    .news-card-content .read-more::after {
        display: none;
    }
}

/* ============================================================
   3. SMALL PHONES (max-width: 600px)
   ============================================================
   Stack footer content vertically and center-align text.
   ============================================================ */
@media (max-width: 600px) {

    /* Footer: stack items vertically, center text */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .feature-header {
        padding: 45px 16px 20px 16px; /* Increases top padding to wrap text below the icon on mobile screens */
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-icon-wrapper {
        top: -25px;
        left: 16px;
    }

    /* Budget card: nearly full width on very small phones */
    .budget-card {
        width: 92%;
    }

    /* Vision cards: full width on very small phones */
    .vision-cards-grid {
        width: 100%;
    }

    /* Section plain: minimal padding on very small phones */
    .section-plain {
        padding: 24px 16px;
    }

    .section-news {
        padding: 32px 32px;
    }

    .section-near-black {
        padding: 24px 16px;
    }

    /* Contact section: reduce padding on very small phones */
    .section-contact {
        padding: 40px 16px 20px 16px;
    }

    /* Logo banner: even smaller on very small phones */
    .logo-banner img {
        max-height: 70px;
    }
}

/* ============================================================
   4. DESKTOP (min-width: 769px)
   ============================================================
   Ensure hamburger button is hidden on desktop screens.
   ============================================================ */
@media (min-width: 1025px) {

    /* Hamburger button: hidden on desktop */
    .nav-hamburger {
        display: none;
    }
}