/*
 * Guayama FC — Mobile Experience
 * Activated at ≤ 767px. Desktop styles are untouched.
 */

/* ══════════════════════════════════════════
   MOBILE BREAKPOINT — ≤ 767px
══════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Body ───────────────────────────────
       Top padding clears the fixed header with the 10-link nav. */
    body {
        padding-top: 206px;
    }

    /* ── Header: fixed + fade on scroll ──── */
    header {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 300 !important;
        padding: 0 !important;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    header.nav-hidden {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }

    /* ── Nav: two rows (logo + links) ─────── */
    nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    /* Row 1 — Logo */
    .nav-logo {
        display: flex !important;
        align-items: center !important;
        padding: 8px 16px !important;
        gap: 10px !important;
    }

    .nav-logo img  { height: 32px !important; }
    .logo-badge    { width: 30px !important; height: 30px !important; font-size: 0.46rem !important; }
    .nav-club-name { font-size: 0.8rem !important; letter-spacing: 2px !important; }

    /* Row 2 — All links in a 3×3 grid, fully visible */
    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        list-style: none !important;
        padding: 0 !important;
        gap: 0 !important;
        border-top: 1px solid #222 !important;
        overflow: visible !important;
    }

    .nav-links li {
        border-right: 1px solid #1e1e1e;
        border-bottom: 1px solid #1e1e1e;
    }

    /* Remove right border on every 3rd item */
    .nav-links li:nth-child(3n) { border-right: none; }

    .nav-links a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 4px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.2px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        color: #aaa !important;
        font-weight: 500 !important;
        width: 100% !important;
        transition: background 0.15s, color 0.15s !important;
    }

    .nav-links a.active {
        color: #E85A0C !important;
        background: rgba(232, 90, 12, 0.1) !important;
        font-weight: 700 !important;
    }

    .nav-links a:active {
        background: rgba(232, 90, 12, 0.18) !important;
        color: #fff !important;
    }

    /* ── Sections ───────────────────────────  */
    section { padding: 44px 20px !important; }
    section h2 { font-size: 1.1rem !important; }

    .why-guayama-section {
        padding: 68px 18px !important;
    }

    .why-guayama-header h2 {
        font-size: clamp(3rem, 15vw, 4.6rem) !important;
        line-height: 0.9 !important;
    }

    /* ── Hero (index.html) ──────────────── */
    .hero {
        min-height: 94vh;
        padding: 60px 20px 56px !important;
    }

    .hero h1    { font-size: clamp(2.8rem, 13vw, 4.5rem) !important; }
    .hero-sub   { font-size: 0.88rem !important; }
    .hero-logo  { height: clamp(80px, 20vw, 120px) !important; }
    .hero-scroll { display: none !important; }

    .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-btn, .hero-btn-ghost {
        text-align: center !important;
        padding: 16px 20px !important;
    }

    /* ── Category Hero ──────────────────── */
    .category-hero { padding: 48px 20px 40px !important; }
    .category-hero h1 { font-size: clamp(2.4rem, 11vw, 3.5rem) !important; }
    .hero-copy { font-size: 0.88rem !important; margin-bottom: 28px !important; }

    /* ── Quick Nav — horizontal scroll ─── */
    .quick-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
    }
    .quick-nav::-webkit-scrollbar { display: none; }
    .quick-nav a { flex-shrink: 0 !important; white-space: nowrap !important; }

    /* ── Values Grid ────────────────────── */
    .valores-grid { grid-template-columns: 1fr !important; }
    .valor-card   { padding: 28px 20px !important; }

    /* ── Category Cards ─────────────────── */
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2px !important; }
    .cat-card { min-height: 150px !important; padding: 20px 16px 16px !important; }
    .cat-name { font-size: clamp(2.2rem, 8vw, 2.8rem) !important; }
    .superior-banner { padding: 18px 20px !important; }
    .sb-arrow  { display: none !important; }
    .sb-title  { font-size: 1.2rem !important; }

    /* ── Info Cards ─────────────────────── */
    .info-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
    .info-card { padding: 24px 20px !important; }

    /* ── Focus List ─────────────────────── */
    .focus-list { grid-template-columns: 1fr !important; }

    /* ── Match Fixture ──────────────────── */
    .match-fixture { margin: 0 !important; }

    .fixture-teams {
        grid-template-columns: 1fr auto 1fr !important;
        padding: 28px 16px 24px !important;
        gap: 8px !important;
    }

    .team-badge          { width: 68px !important; height: 68px !important; }
    .fixture-team-name   { font-size: 0.9rem !important; letter-spacing: 1.5px !important; }
    .fixture-vs          { font-size: 2rem !important; }
    .fixture-competition { font-size: 0.46rem !important; }
    .fixture-countdown   { padding: 20px 16px 24px !important; }
    .countdown           { gap: 6px !important; }
    .cd-unit             { width: 64px !important; padding: 12px 4px 10px !important; }
    .cd-number           { font-size: 2rem !important; }
    .cd-sep              { font-size: 1.8rem !important; }

    /* ── Partido Rows ───────────────────── */
    .partido-fila {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }
    .partido-fecha-col { min-width: auto !important; }

    /* ── CTA Sections ───────────────────── */
    .cta-inscripcion { padding: 52px 20px !important; }
    .cta-inscripcion h2 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }

    .cta-band {
        flex-direction: column !important;
        padding: 36px 20px !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* ── Page Headers ───────────────────── */
    .page-header     { padding: 40px 20px 32px !important; }
    .page-header h1  { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
    .page-header .subtitle { font-size: 0.75rem !important; }

    /* ── Contact ────────────────────────── */
    .contact-layout  { grid-template-columns: 1fr !important; }
    .contact-grid    { grid-template-columns: 1fr 1fr !important; }
    .contact-form    { padding: 20px 16px !important; }
    .form-grid       { grid-template-columns: 1fr !important; }
    .field.full      { grid-column: auto !important; }
    .contact-section { padding: 36px 20px !important; }

    /* ── Social / Redes ─────────────────── */
    .social-grid    { grid-template-columns: 1fr !important; }
    .social-section { padding: 36px 20px !important; }
    .social-icon-area { padding: 32px 20px !important; }

    /* ── Gallery ────────────────────────── */
    .gallery-grid, .photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }
    .video-grid { gap: 16px !important; }

    /* ── News ───────────────────────────── */
    .news-grid { flex-direction: column !important; }
    .news-card  { min-width: unset !important; }

    /* ── Staff / Players ────────────────── */
    .staff-grid-photo { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .jugador-grid     { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }

    /* ── Footer ─────────────────────────── */
    footer        { padding: 40px 20px 28px !important; }
    .footer-inner { flex-direction: column !important; gap: 24px !important; }
    .footer-bottom { font-size: 0.7rem !important; }

    /* ── Hashtag Banner ─────────────────── */
    .hashtag-banner { padding: 20px !important; font-size: 0.82rem !important; }
}

/* ══════════════════════════════════════════
   SMALL PHONES — ≤ 400px
══════════════════════════════════════════ */
@media (max-width: 400px) {
    .cat-grid     { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .jugador-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cd-unit      { width: 56px !important; }
    .cd-number    { font-size: 1.7rem !important; }
}

/* Premium responsive polish */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    section,
    .page-header,
    .page-hero,
    .category-hero,
    footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    section {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .page-header,
    .page-hero,
    .category-hero {
        padding-top: 52px !important;
        padding-bottom: 46px !important;
    }

    .page-header h1,
    .page-hero h1,
    .category-hero h1,
    .hero h1 {
        font-size: clamp(2.7rem, 12.5vw, 4rem) !important;
        letter-spacing: 0 !important;
        line-height: 0.92 !important;
    }

    section h2 {
        font-size: clamp(1.22rem, 6vw, 1.7rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 26px !important;
    }

    .subtitle,
    .hero-sub,
    .hero-copy,
    .academia-intro,
    .categories-intro,
    .pathway-section-text {
        font-size: 0.9rem !important;
        line-height: 1.72 !important;
    }

    .cat-card,
    .category-card,
    .pilar-card,
    .path-step,
    .info-card,
    .featured-card,
    .featured-photo,
    .news-card,
    .communique-card,
    .gallery-item,
    .video-card,
    .social-card,
    .contact-form,
    .contact-panel,
    .contact-card,
    .method,
    .superior-card,
    .staff-card,
    .staff-card-p,
    .player-card,
    .jugador-card-p,
    .timeline-card,
    .history-panel,
    .pathway-feature,
    .pathway-card,
    .match-fixture,
    .match-card,
    .fixture-card,
    .stat-card,
    .intro-card,
    .coach-card {
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28) !important;
    }

    .category-grid,
    .pilares-grid,
    .info-grid,
    .social-grid,
    .gallery-grid,
    .video-grid,
    .staff-grid,
    .player-grid,
    .news-grid,
    .contact-grid,
    .pathway,
    .focus-list {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .staff-grid-photo {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .jugador-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .contact-form,
    .contact-panel,
    .featured-body,
    .pilar-card,
    .info-card,
    .path-step,
    .category-card,
    .superior-card,
    .social-card,
    .method {
        padding: 22px !important;
    }

    .hero-btn,
    .hero-btn-ghost,
    .cta-btn-blanco,
    .submit-btn,
    .pathway-btn,
    .why-guayama-button {
        width: 100% !important;
        min-height: 46px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 0.68rem !important;
        letter-spacing: 1.8px !important;
    }
}