/* =====================================================
   RESPONSIVE.CSS
   Fine-tuning on top of Tailwind's utility classes.
   Tailwind already handles most layout breakpoints
   (grid-cols-1 md:grid-cols-2, flex-col md:flex-row, etc).
   This file covers everything Tailwind utilities in the
   markup don't: fluid typography, fixed-px widgets,
   spacing rhythm, and the mobile nav menu.
   ===================================================== */

/* Required by Alpine.js: hide elements using x-cloak until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* ===== FLUID SECTION SPACING =====
   Sections use py-20 (5rem) everywhere by default, which is
   too much breathing room on small phones. */
@media (max-width: 767px) {
    section.py-20 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ===== HERO SECTION (Home) ===== */
@media (max-width: 480px) {
    /* Prevent the big animated headline from feeling oversized on small phones */
    h1.text-5xl {
        font-size: 2.5rem;
        line-height: 1.15;
    }

    /* Section headings across the site (Featured Projects, Tech Blog, etc.) */
    h2.text-5xl {
        font-size: 2.25rem;
        line-height: 1.2;
    }
}

/* Avatar circle on the hero: 256px is comfortable on tablets/desktop
   but crowds very small phones. Scale it down gracefully. */
@media (max-width: 480px) {
    .floating.glow {
        width: 11rem !important;
        height: 11rem !important;
        font-size: 3rem !important;
    }
}

/* Hero stats row (Years / Projects / Passion): keep 3 columns but
   tighten the numbers so they don't wrap awkwardly on narrow screens */
@media (max-width: 400px) {
    .grid.grid-cols-3 .text-4xl {
        font-size: 1.5rem;
    }
    .grid.grid-cols-3 .text-sm {
        font-size: 0.7rem;
    }
}

/* ===== LOTTIE ANIMATIONS =====
   Several dotlottie-wc widgets across the site (Contact icons,
   Projects header, Send button) use fixed inline pixel widths
   (e.g. 300px) which can overflow narrow viewports or look
   oversized. Cap them responsively. */
dotlottie-wc {
    max-width: 100%;
}

@media (max-width: 640px) {
    /* Large decorative lottie animations (contact info icons, projects header) */
    .icon-pr dotlottie-wc,
    .flex.items-center.gap-4 dotlottie-wc {
        width: 96px !important;
        height: 96px !important;
    }
}

/* ===== NAVBAR ===== */
@media (max-width: 767px) {
    nav .max-w-6xl {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
}

/* ===== CARDS / GRIDS =====
   Tailwind already stacks these to 1 column on mobile via
   grid-cols-1 md:grid-cols-2/3, this just tightens the gap
   so cards don't feel too spaced out on small screens. */
@media (max-width: 640px) {
    .grid.gap-8 {
        gap: 1.25rem;
    }
    .grid.gap-6 {
        gap: 1rem;
    }
}

/* ===== RESUME PAGE: CV download card =====
   Keep the download button full-width and centered on mobile
   instead of being squeezed next to the title. */
@media (max-width: 640px) {
    .card-hover.glow.rounded-3xl {
        text-align: center;
    }
    .card-hover.glow.rounded-3xl a[download] {
        width: 100%;
        display: block;
    }
}

/* ===== CONTACT PAGE: lightbox / form spacing on small screens ===== */
@media (max-width: 480px) {
    input, textarea {
        font-size: 16px; /* Prevents iOS Safari from auto-zooming on focus */
    }
}

/* ===== CERTIFICATE / BLOG-POST LIGHTBOX & PROSE ===== */
@media (max-width: 640px) {
    .prose {
        font-size: 0.95rem;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 480px) {
    footer.py-10 {
        padding-top: 2rem;
        padding-bottom: 2rem;
        font-size: 0.75rem;
    }
}