/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   768px  = tablet
   1024px = desktop
   ============================================================ */

/* ---- Small / base (< 768px) ---- */
@media (max-width: 767px) {

    /* Nav */
    .hamburger {
        display: flex;
    }

    .main-nav {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        display: none;
        z-index: 99;
    }

    .main-nav.nav-open {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
    }

    .nav-link {
        padding: 0.65rem 0.75rem;
        width: 100%;
    }

    /* Grids → single column */
    .grid-tools {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-categories {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Tool layout → single column on mobile */
    .tool-layout {
        grid-template-columns: 1fr;
    }

    /* Contact layout → single column */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    /* V2 grids → single column on mobile */
    .category-showcase { grid-template-columns: 1fr; }
    .benefits-grid      { grid-template-columns: 1fr; }

    /* Stat box span reset */
    .stat-box--large {
        grid-column: span 1;
    }

    /* Password output row */
    .pwd-output-row {
        flex-direction: row;
    }

    /* Username item */
    .uname-item {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero */
    .hero {
        padding: 3rem 0 2.5rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Tool stats — 2 cols on small screens */
    .tool-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tool controls */
    .tool-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .tool-controls-right {
        margin-left: 0;
    }

    /* Related tools */
    .related-tools-grid {
        grid-template-columns: 1fr;
    }

    /* Username list */
    .username-item {
        font-size: 0.85rem;
    }
}

/* ---- Tablet (768px – 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {

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

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

    .grid-2 {
        grid-template-columns: 1fr 260px;
    }

    .tool-layout {
        grid-template-columns: 1fr 260px;
    }

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

    .contact-layout     { grid-template-columns: 1fr 260px; }
    .category-showcase  { grid-template-columns: 1fr; }
    .benefits-grid      { grid-template-columns: repeat(2, 1fr); }

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Nav still visible on tablet */
    .hamburger {
        display: none;
    }
}

/* ---- Desktop (>= 1024px) ---- */
@media (min-width: 1024px) {
    .container {
        padding-inline: 2rem;
    }
}

/* ---- Wide desktop ---- */
@media (min-width: 1280px) {
    .grid-tools {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Print ---- */
@media print {
    .site-header,
    .site-footer,
    .ad-placeholder,
    .copy-btn,
    .hamburger {
        display: none !important;
    }

    .tool-wrapper {
        border: none;
        box-shadow: none;
    }
}