/**
 * Responsive Breakpoints for Canon Wireframes
 * Mobile-first approach with 3-tier system
 * Base: 320px+ (mobile)
 * Tablet: 768px+
 * Desktop: 1024px+
 */

/* ========================================
   BREAKPOINT UTILITIES
   ======================================== */

:root {
    --mobile-max: 767px;
    --tablet-min: 768px;
    --desktop-min: 1024px;
}

/* ========================================
   BASE (MOBILE): 320px+
   No media query needed - mobile first
   ======================================== */

/* Container adjustments for mobile */
body {
    min-width: 320px;
}

main {
    padding: 0 16px; /* Reduce side padding on mobile */
}

/* Navigation responsive base */
.nav {
    padding: 12px 16px; /* Smaller padding on mobile */
}

.nav__logo {
    font-size: 14px; /* Slightly smaller logo */
}

/* ========================================
   TABLET: 768px+
   ======================================== */

@media (min-width: 768px) {
    main {
        padding: 0 24px;
    }

    .nav {
        padding: 12px 24px;
    }

    .nav__logo {
        font-size: 15px;
    }
}

/* ========================================
   DESKTOP: 1024px+
   ======================================== */

@media (min-width: 1024px) {
    main {
        padding: 0 32px;
    }

    .nav {
        padding: 12px 32px;
    }

    .nav__logo {
        font-size: 16px;
    }
}

/* ========================================
   GRID RESPONSIVE PATTERNS
   ======================================== */

/* 2-column grid */
.grid-2,
.comparison__grid,
.products__grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: 16px;
}

@media (min-width: 768px) {
    .grid-2,
    .comparison__grid,
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* 3-column grid */
.grid-3,
.quick-links__grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: 16px;
}

@media (min-width: 768px) {
    .grid-3,
    .quick-links__grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .grid-3,
    .quick-links__grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cols on desktop */
        gap: 24px;
    }
}

/* 4-column grid */
.grid-4,
.stats {
    display: grid;
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: 12px;
}

@media (min-width: 768px) {
    .grid-4,
    .stats {
        grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .grid-4,
    .stats {
        grid-template-columns: repeat(4, 1fr); /* 4 cols on desktop */
        gap: 24px;
    }
}

/* 5-column grid (for fund stage pills, etc.) */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cols on mobile */
    gap: 8px;
}

@media (min-width: 768px) {
    .grid-5 {
        grid-template-columns: repeat(3, 1fr); /* 3 cols on tablet */
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .grid-5 {
        grid-template-columns: repeat(5, 1fr); /* 5 cols on desktop */
        gap: 16px;
    }
}

/* ========================================
   TABLE RESPONSIVE
   ======================================== */

.table-container {
    width: 100%;
    overflow-x: auto; /* Horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.table {
    min-width: 800px; /* Ensure table doesn't collapse too much */
}

@media (min-width: 1024px) {
    .table-container {
        overflow-x: visible; /* No scroll on desktop */
    }

    .table {
        min-width: auto;
    }
}

/* Make table text smaller on mobile */
@media (max-width: 767px) {
    .table {
        font-size: 13px;
    }

    .table th,
    .table td {
        padding: 10px 12px; /* Reduce padding */
    }
}

/* ========================================
   FORM ELEMENTS RESPONSIVE
   ======================================== */

/* Filters - stack vertically on mobile */
.filters,
.controls {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 12px;
}

@media (min-width: 768px) {
    .filters,
    .controls {
        flex-direction: row; /* Horizontal on tablet+ */
        gap: 16px;
        align-items: center;
    }
}

/* Search input full-width on mobile */
input[type="search"],
input[type="text"],
select {
    width: 100%;
}

@media (min-width: 768px) {
    input[type="search"],
    input[type="text"] {
        width: auto;
        min-width: 240px;
    }

    select {
        width: auto;
        min-width: 160px;
    }
}

/* ========================================
   SIDEBAR LAYOUTS
   ======================================== */

.layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: 24px;
}

@media (min-width: 1024px) {
    .layout-with-sidebar {
        grid-template-columns: 280px 1fr; /* Sidebar + content on desktop */
        gap: 32px;
    }

    .layout-with-sidebar.sidebar-right {
        grid-template-columns: 1fr 280px; /* Reversed for right sidebar */
    }
}

/* ========================================
   HERO / STATS RESPONSIVE
   ======================================== */

.hero__title,
.section-title {
    font-size: 28px; /* Smaller on mobile */
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero__title,
    .section-title {
        font-size: 36px;
    }
}

@media (min-width: 1024px) {
    .hero__title {
        font-size: 48px;
    }

    .section-title {
        font-size: 40px;
    }
}

.hero__subtitle {
    font-size: 16px;
}

@media (min-width: 768px) {
    .hero__subtitle {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .hero__subtitle {
        font-size: 20px;
    }
}

/* Stats value sizing */
.stats__value {
    font-size: 24px;
}

@media (min-width: 768px) {
    .stats__value {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .stats__value {
        font-size: 32px;
    }
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.button-group,
.cta__buttons {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 12px;
}

@media (min-width: 768px) {
    .button-group,
    .cta__buttons {
        flex-direction: row;
        gap: 16px;
    }
}

/* Make buttons full-width on mobile */
@media (max-width: 767px) {
    .btn,
    button {
        width: 100%;
    }
}

/* ========================================
   MODAL RESPONSIVE
   ======================================== */

.modal {
    width: calc(100% - 32px); /* Nearly full-width on mobile */
    max-width: 600px;
    margin: 16px;
}

@media (min-width: 768px) {
    .modal {
        width: 90%;
        margin: 32px auto;
    }
}

@media (min-width: 1024px) {
    .modal {
        width: auto;
        margin: 48px auto;
    }
}

/* ========================================
   SPACING ADJUSTMENTS
   ======================================== */

section {
    padding: 32px 0; /* Reduce vertical spacing on mobile */
}

@media (min-width: 768px) {
    section {
        padding: 48px 0;
    }
}

@media (min-width: 1024px) {
    section {
        padding: 64px 0;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Hide on tablet+ */
.hide-tablet {
    display: block !important;
}

@media (min-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
.hide-desktop {
    display: block !important;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* ========================================
   OVERFLOW PREVENTION
   ======================================== */

* {
    max-width: 100%; /* Prevent any element from causing horizontal scroll */
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* ========================================
   TOUCH TARGETS (Mobile Accessibility)
   ======================================== */

@media (max-width: 767px) {
    /* Ensure all interactive elements are at least 44x44px */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exception for inline text links */
    p a,
    li a {
        min-height: auto;
        min-width: auto;
    }
}