/**
 * SEREM Prove Fisiche — Design System CSS
 * Palette "Atletica Vera" da CLAUDE.md
 * Font: Inter
 * Mobile-first
 */

/* ============================================
   CSS CUSTOM PROPERTIES — Palette Atletica Vera
   ============================================ */

:root {
    /* Primary — Blu atletico */
    --spf-blu-50: #E6F1FB;
    --spf-blu-100: #B5D4F4;
    --spf-blu-300: #5A9FD4;
    --spf-blu-500: #1B6B93;
    --spf-blu-600: #145571;
    --spf-blu-700: #0E3F54;
    --spf-blu-900: #072736;

    /* Ghiaccio — CTA morbide, accent */
    --spf-ghiaccio-100: #C8E1F0;
    --spf-ghiaccio-200: #A8CFE8;
    --spf-ghiaccio-300: #88BDE0;
    --spf-ghiaccio-400: #6AADD6;

    /* Pista — Terracotta tartan CONI */
    --spf-pista-50: #F5E6E2;
    --spf-pista-100: #E8BFB5;
    --spf-pista-300: #D4877A;
    --spf-pista-500: #C2523A;
    --spf-pista-600: #A03E2B;
    --spf-pista-700: #7A2E1F;
    --spf-pista-900: #4E1D14;

    /* Campo — Verde prato atletica */
    --spf-campo-50: #EAF2E5;
    --spf-campo-100: #C1D9B2;
    --spf-campo-300: #8AB876;
    --spf-campo-500: #4A7C3F;
    --spf-campo-600: #356230;
    --spf-campo-700: #2D5A1E;
    --spf-campo-900: #1A3A12;

    /* Struttura — Acciaio/cromato */
    --spf-acciaio-50: #F4F5F6;
    --spf-acciaio-100: #D8DADD;
    --spf-acciaio-300: #A8ABB0;
    --spf-acciaio-400: #8C8E91;
    --spf-acciaio-500: #5C5F64;
    --spf-acciaio-700: #3D4148;
    --spf-acciaio-900: #1E2024;

    /* Font */
    --spf-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --spf-space-xs: 0.25rem;
    --spf-space-sm: 0.5rem;
    --spf-space-md: 1rem;
    --spf-space-lg: 1.5rem;
    --spf-space-xl: 2rem;
    --spf-space-2xl: 3rem;
    --spf-space-3xl: 4rem;

    /* Border radius */
    --spf-radius-sm: 4px;
    --spf-radius-md: 8px;
    --spf-radius-lg: 12px;
    --spf-radius-full: 9999px;

    /* Shadows */
    --spf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --spf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --spf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================
   BASE — Font e body
   ============================================ */

body {
    font-family: var(--spf-font-family);
    color: var(--spf-acciaio-700);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--spf-font-family);
    font-weight: 700;
    color: var(--spf-blu-700);
    line-height: 1.2;
}

/* ============================================
   BOTTONI — Sistema Mentalista
   ============================================ */

/* Ghiaccio — Invito dolce, curiosità */
.spf-btn-ghiaccio {
    background-color: var(--spf-ghiaccio-100);
    color: var(--spf-blu-700);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--spf-radius-md);
    font-family: var(--spf-font-family);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    min-height: 48px;
    line-height: 1.4;
}
.spf-btn-ghiaccio:hover {
    background-color: var(--spf-ghiaccio-200);
    transform: translateY(-1px);
}

/* Blu brand — Fiducia, sicurezza */
.spf-btn-blu {
    background-color: var(--spf-blu-500);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--spf-radius-md);
    font-family: var(--spf-font-family);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    min-height: 48px;
    line-height: 1.4;
}
.spf-btn-blu:hover {
    background-color: var(--spf-blu-600);
    color: #fff;
    transform: translateY(-1px);
}

/* Pista — Azione, start, urgenza calda */
.spf-btn-pista {
    background-color: var(--spf-pista-500);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--spf-radius-md);
    font-family: var(--spf-font-family);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    min-height: 48px;
    line-height: 1.4;
}
.spf-btn-pista:hover {
    background-color: var(--spf-pista-600);
    color: #fff;
    transform: translateY(-1px);
}

/* Campo — Gratificazione, successo */
.spf-btn-campo {
    background-color: var(--spf-campo-500);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--spf-radius-md);
    font-family: var(--spf-font-family);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    min-height: 48px;
    line-height: 1.4;
}
.spf-btn-campo:hover {
    background-color: var(--spf-campo-600);
    color: #fff;
    transform: translateY(-1px);
}

/* Tap target minimo 48px per mobile (WCAG) */
.spf-btn-ghiaccio,
.spf-btn-blu,
.spf-btn-pista,
.spf-btn-campo {
    min-height: 48px;
    min-width: 48px;
}


/* ============================================
   UX "LIBRO SPORTIVO" — Sezioni come pagine
   ============================================ */
.spf-page{position:relative;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem);background:#fff;overflow:hidden}
.spf-page::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent 0%,var(--spf-acciaio-100) 20%,var(--spf-acciaio-300) 50%,var(--spf-acciaio-100) 80%,transparent 100%)}
.spf-page--alt{background:var(--spf-acciaio-50)}
.spf-page--dark{background:linear-gradient(135deg,var(--spf-blu-900) 0%,var(--spf-blu-700) 100%);color:#fff}
.spf-page--dark h1,.spf-page--dark h2,.spf-page--dark h3{color:#fff}
.spf-page--shadow{box-shadow:inset 0 8px 12px -8px rgba(0,0,0,0.06),inset 0 -8px 12px -8px rgba(0,0,0,0.04)}

/* Separatore capitolo */
.spf-chapter-divider{display:flex;align-items:center;gap:1rem;margin:var(--spf-space-xl) auto;max-width:300px}
.spf-chapter-divider::before,.spf-chapter-divider::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--spf-pista-300),transparent)}

/* ============================================
   HERO — Apertura libro
   ============================================ */
.spf-hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(3rem,10vw,6rem) clamp(1rem,4vw,2rem);background:linear-gradient(135deg,var(--spf-blu-900) 0%,var(--spf-blu-700) 50%,var(--spf-pista-900) 100%);overflow:hidden}
.spf-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(194,82,58,0.15) 0%,transparent 60%);pointer-events:none}
.spf-hero>*{position:relative;z-index:1}
.spf-hero__title{font-size:clamp(1.75rem,5vw,3.5rem);font-weight:800;color:#fff;margin-bottom:var(--spf-space-md);line-height:1.1}
.spf-hero__sub{font-size:clamp(1rem,2.2vw,1.25rem);color:rgba(255,255,255,0.85);line-height:1.7;max-width:650px;margin:0 auto var(--spf-space-xl)}
.spf-hero__stats{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;margin-top:var(--spf-space-xl)}
.spf-hero__stat-num{display:block;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;color:var(--spf-pista-300)}
.spf-hero__stat-lbl{font-size:clamp(0.75rem,1.5vw,0.9rem);color:rgba(255,255,255,0.7)}

/* ============================================
   CARD FORZA — Hub Prove Fisiche
   ============================================ */
.spf-forza-card{position:relative;background:#fff;border-radius:var(--spf-radius-lg);overflow:hidden;box-shadow:var(--spf-shadow-md);transition:transform 0.25s ease,box-shadow 0.25s ease}
.spf-forza-card:hover{transform:translateY(-6px);box-shadow:var(--spf-shadow-lg)}
.spf-forza-card__strip{height:4px;background:var(--force-color,var(--spf-blu-500))}
.spf-forza-card__header{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem 0.75rem}
.spf-forza-card__stemma{width:64px;height:64px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))}
.spf-forza-card__name{font-size:clamp(0.95rem,2vw,1.1rem);font-weight:700;color:var(--force-color,var(--spf-blu-700));margin:0 0 0.25rem}
.spf-forza-card__count{display:inline-block;background:var(--force-light,var(--spf-blu-50));color:var(--force-color,var(--spf-blu-500));padding:0.15rem 0.6rem;border-radius:var(--spf-radius-full);font-size:0.78rem;font-weight:600}
.spf-forza-card__list{list-style:none;padding:0.75rem 1.25rem;margin:0}
.spf-forza-card__list li{position:relative;padding:0.3rem 0 0.3rem 1rem;font-size:0.88rem;color:var(--spf-acciaio-500);line-height:1.5}
.spf-forza-card__list li::before{content:'';position:absolute;left:0;top:0.65rem;width:5px;height:5px;border-radius:50%;background:var(--force-color,var(--spf-pista-500))}
.spf-forza-card__cta{display:flex;align-items:center;justify-content:center;margin:0.5rem 1.25rem 1.25rem;background:var(--force-color,var(--spf-blu-500));color:#fff;text-align:center;padding:0.7rem 1rem;border-radius:var(--spf-radius-md);font-size:0.9rem;font-weight:600;text-decoration:none;transition:filter 0.2s ease,transform 0.15s ease;min-height:48px}
.spf-forza-card__cta:hover{filter:brightness(0.9);transform:translateY(-1px);color:#fff}

/* ============================================
   SFONDO ATLETICO — Compositing CSS (Opzione A)
   ============================================ */
.spf-athletic-bg{position:relative;background-size:cover;background-position:center}
.spf-athletic-bg::before{content:'';position:absolute;inset:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(7,39,54,0.65)}
.spf-athletic-bg>*{position:relative;z-index:1}

/* ============================================
   TIPOGRAFIA RESPONSIVE
   ============================================ */
h1{font-size:clamp(1.75rem,5vw,3rem)}
h2{font-size:clamp(1.4rem,3.5vw,2.25rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.5rem)}
.spf-lead{font-size:clamp(1rem,2vw,1.15rem);line-height:1.7;color:var(--spf-acciaio-500)}

/* ============================================
   TABELLA PROVE FISICHE — Responsive
   ============================================ */
.spf-prove-table{width:100%;border-collapse:collapse;border-radius:var(--spf-radius-md);overflow:hidden;box-shadow:var(--spf-shadow-sm)}
.spf-prove-table thead{background:var(--spf-blu-700);color:#fff}
.spf-prove-table th{padding:0.85rem 1rem;font-weight:600;font-size:0.9rem;text-align:left}
.spf-prove-table td{padding:0.75rem 1rem;font-size:0.9rem;border-bottom:1px solid var(--spf-acciaio-100)}
.spf-prove-table tbody tr:nth-child(even){background:var(--spf-pista-50)}
.spf-prove-table tbody tr:hover{background:var(--spf-ghiaccio-100)}

@media(max-width:767px){
.spf-prove-table,.spf-prove-table thead,.spf-prove-table tbody,.spf-prove-table th,.spf-prove-table td,.spf-prove-table tr{display:block}
.spf-prove-table thead{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.spf-prove-table tr{background:#fff;border-radius:var(--spf-radius-md);box-shadow:var(--spf-shadow-sm);margin-bottom:var(--spf-space-md);padding:var(--spf-space-md)}
.spf-prove-table td{border:none;padding:0.4rem 0;font-size:0.9rem}
.spf-prove-table td::before{content:attr(data-label);font-weight:600;color:var(--spf-blu-700);display:block;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.15rem}
}

/* ============================================
   ANIMAZIONI LEGGERE — Fade in on scroll
   ============================================ */
.spf-fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease-out,transform 0.5s ease-out}
.spf-fade-in.spf-visible{opacity:1;transform:translateY(0)}
.spf-fade-in:nth-child(2){transition-delay:0.1s}
.spf-fade-in:nth-child(3){transition-delay:0.2s}
.spf-fade-in:nth-child(4){transition-delay:0.3s}
.spf-fade-in:nth-child(5){transition-delay:0.4s}
.spf-fade-in:nth-child(6){transition-delay:0.5s}
.spf-fade-in:nth-child(7){transition-delay:0.6s}

@media(prefers-reduced-motion:reduce){
.spf-fade-in{opacity:1;transform:none;transition:none}
}

/* ============================================
   UTILITIES
   ============================================ */
.spf-container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.spf-text-center{text-align:center}
.spf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Colori per-forza (variabili CSS inline sulle card) */
.spf-forza-esercito{--force-color:#4B6F2F;--force-light:#f0f5eb}
.spf-forza-marina{--force-color:#1B4F7A;--force-light:#e8f0f8}
.spf-forza-aeronautica{--force-color:#2E5B8A;--force-light:#e9f0f7}
.spf-forza-carabinieri{--force-color:#1A237E;--force-light:#e8eaf6}
.spf-forza-gdf{--force-color:#F9A825;--force-light:#fef8e1}
.spf-forza-polizia{--force-color:#0D47A1;--force-light:#e3f2fd}
.spf-forza-polpen{--force-color:#4A148C;--force-light:#f3e5f5}