/* ============================================================
   Escuela de Tatuadores — Responsive
   Breakpoints: 1024px | 768px | 480px
   ============================================================ */

/* ── 1024px — Tablet / Nav collapse ─────────────────────────── */
@media (max-width: 1024px) {

    /* Header — hide desktop nav & show toggle */
    .ed-nav {
        display: none;
    }

    .ed-header__rating {
        display: none;
    }

    .ed-header__toggle {
        display: flex;
    }

    /* Stack CTA after toggle, hide in header row */
    .ed-header__container > .ed-btn--nav {
        display: none;
    }

    /* Mobile menu — shown via .is-open in components.css */
    .ed-header__mobile.is-open {
        display: block;
    }

    /* Cards grid — 2 columns */
    .ed-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer grid — 2 columns */
    .ed-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--ed-space-8);
    }

    /* Stats */
    .ed-stats {
        gap: var(--ed-space-8);
    }

    /* Section padding */
    .ed-section {
        padding-block: var(--ed-space-16);
    }

    /* Section titles */
    .ed-section-title {
        font-size: var(--ed-text-2xl);
    }

    /* Sticky CTA — show on tablet too */
    .ed-sticky-cta {
        display: block;
    }

    /* Add body padding so sticky CTA doesn't cover content */
    body {
        padding-bottom: 72px;
    }

    /* WhatsApp — move up on mobile */
    .ed-whatsapp {
        bottom: calc(var(--ed-space-8) + 72px);
    }
}

/* ── 768px — Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Container padding */
    .ed-container {
        padding-inline: var(--ed-space-4);
    }

    /* Header */
    .ed-header__logo-img {
        height: 40px;
    }

    .ed-header__container {
        padding-block: 0.75rem;
    }

    /* Cards grid — 1 column */
    .ed-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Footer grid — 1 column */
    .ed-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--ed-space-10);
    }

    /* Footer bottom */
    .ed-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--ed-space-3);
        padding-inline: var(--ed-space-4);
    }

    /* Stats — 2 per row */
    .ed-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ed-space-6);
    }

    .ed-stat__number {
        font-size: var(--ed-text-3xl);
    }

    /* Typography scale down */
    .ed-section-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .ed-text-4xl {
        font-size: var(--ed-text-3xl);
    }

    /* Section spacing */
    .ed-section {
        padding-block: var(--ed-space-12);
    }

    .ed-section--sm {
        padding-block: var(--ed-space-10);
    }

    /* Buttons */
    .ed-btn--lg {
        padding: 0.85rem 1.75rem;
        font-size: var(--ed-text-base);
    }

    /* Post CTA */
    .ed-post-cta {
        padding: var(--ed-space-6);
    }

    /* WhatsApp — compact on mobile */
    .ed-whatsapp span {
        display: none;
    }

    .ed-whatsapp {
        padding: 0.9rem;
        border-radius: 50%;
        right: var(--ed-space-4);
        bottom: calc(var(--ed-space-5) + 72px);
    }

    /* Flex stacks */
    .ed-flex-row {
        flex-direction: column;
    }
}

/* ── 480px — Small mobile ────────────────────────────────────── */
@media (max-width: 480px) {

    /* Typography */
    .ed-section-title {
        font-size: 1.6rem;
    }

    /* Stats — single column */
    .ed-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Container no padding reduction — stay at 1rem */
    .ed-container {
        padding-inline: var(--ed-space-4);
    }

    /* Cards — full width */
    .ed-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--ed-space-4);
    }

    /* Footer */
    .ed-footer {
        padding-top: var(--ed-space-12);
    }

    /* Sticky CTA */
    .ed-sticky-cta .ed-btn {
        font-size: var(--ed-text-base);
    }

    /* Header mobile menu larger touch targets */
    .ed-nav__mobile-menu li a {
        font-size: var(--ed-text-xl);
        padding-block: var(--ed-space-4);
    }

    /* Section header */
    .ed-section-header {
        margin-bottom: var(--ed-space-8);
    }
}

/* ── Desktop only overrides ──────────────────────────────────── */
@media (min-width: 1025px) {

    /* Sticky CTA — hidden on desktop */
    .ed-sticky-cta {
        display: none;
    }

    /* Mobile menu — hidden on desktop */
    .ed-header__mobile {
        display: none !important;
    }
}