/**
 * uwAdmin 6 - Frontend Pubblico CSS
 * Stili custom per il frontend
 */

/* ============================================================================
   BASE
   ============================================================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Rendering tipografico Inter: legature/kerning più nitidi su display */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

/* Focus visible per accessibilità */
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: #3b82f6;
    color: white;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* Font display (Sora) per titoli e headline; il corpo del testo resta Inter.
   Cattura tutti gli h1/h2/h3 dei template senza dover toccare i singoli file. */
h1, h2, h3, .font-display {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* Prose improvements */
.prose img {
    margin-left: auto;
    margin-right: auto;
}

.prose figure {
    margin: 2rem 0;
}

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

/* Dropdown animation */
nav .group:hover > ul {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   CARDS & BLOCKS
   ============================================================================ */

/* Card hover effect */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
}

/* ============================================================================
   HOMEPAGE BLOCKS
   ============================================================================ */

/* Hero section gradient overlay */
.hero-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
}

/* Hero gradient - classe custom per compatibilità CDN Tailwind.
   Profondità data da due sorgenti radiali sopra il gradiente di base:
   evita l'effetto "fondo piatto" dell'empty-state. */
.hero-blue-gradient {
    background:
        radial-gradient(120% 120% at 85% -10%, rgba(96,165,250,.45) 0%, transparent 55%),
        radial-gradient(90% 90% at 0% 110%, rgba(29,78,216,.55) 0%, transparent 60%),
        linear-gradient(120deg, #1d4ed8 0%, #1e40af 55%, #172554 100%) !important;
}

/* Velo a griglia sottile per dare texture all'hero senza immagini */
.hero-grid-overlay {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* Overlay gradient per testate */
.overlay-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3), transparent) !important;
}

/* ============================================================================
   HERO PREMIUM (Ken Burns + ingresso testo)
   ============================================================================ */

/* Zoom lento e impercettibile sull'immagine dell'hero */
@keyframes heroKenBurns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}
.hero-kenburns {
    animation: heroKenBurns 16s ease-out forwards;
    transform-origin: 50% 45%;
    will-change: transform;
}

/* Ingresso in salita del testo dell'hero (stagger via animation-delay inline) */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
.hero-anim {
    opacity: 0;
    animation: heroRise .85s cubic-bezier(.16,1,.3,1) forwards;
    will-change: opacity, transform;
}

/* ============================================================================
   CARD SYSTEM (radius/ombra coerenti su tutto il template di default)
   ============================================================================ */

.uw-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}

.uw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 34px rgba(16,24,40,.10);
    border-color: #dbe3f0;
}

/* Header: ombra che compare allo scroll (toggle via Alpine: .is-scrolled) */
.site-header {
    transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 1px 0 rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}

/* Micro-reveal all'ingresso in viewport.
   IMPORTANTE: di default .reveal è VISIBILE. Il nascondimento iniziale è applicato
   dal JS (classe .reveal-armed) solo quando può garantire la rivelazione tramite
   IntersectionObserver. Così, se il JS non gira, il contenuto resta sempre visibile. */
.reveal {
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-armed {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================================
   FORMS
   ============================================================================ */

/* Input focus */
input:focus,
textarea:focus,
select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Aspect ratio fallback */
.aspect-video {
    aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
    .aspect-video {
        position: relative;
        padding-bottom: 56.25%;
    }
    .aspect-video > * {
        position: absolute;
        inset: 0;
    }
}

/* Skip link for accessibility */
.sr-only:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/* Fade in animation */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Slide up animation */
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rispetto delle preferenze di movimento ridotto (accessibilità):
   annulla animazioni, reveal e smooth-scroll per chi le disabilita. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal,
    .reveal-armed {
        opacity: 1 !important;
        transform: none !important;
    }
    .uw-card:hover {
        transform: none !important;
    }
    .hero-kenburns {
        animation: none !important;
        transform: none !important;
    }
    .hero-anim {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    .prose {
        max-width: none;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================================================
   GRADIENTI
   ============================================================================ */

/*
 * Le utility `bg-gradient-to-*` di Tailwind non funzionano in questo stack: il
 * CSS di Flowbite 4 le ridefinisce in sintassi Tailwind 4
 * (`--tw-gradient-position … in oklab`) sovrascrivendo quelle generate dalla
 * Play CDN v3, mentre le fermate `from-*`/`to-*` restano v3 — risultato, ogni
 * gradiente rende trasparente.
 *
 * Finché il progetto non passa a Tailwind 4, i gradienti stanno qui, scritti per
 * esteso. NON riconvertirli in classi utility: tornerebbero invisibili. I valori
 * corrispondono uno a uno ai colori Tailwind che sostituiscono.
 */

/* Testate: velatura dal basso + velo laterale sinistro (carousel/hero.php) */
.uw-grad-hero-bottom {
    background-image: linear-gradient(to top,
        rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, 0) 100%);
}
.uw-grad-hero-side {
    background-image: linear-gradient(to right,
        rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Didascalia sui banner di gruppo (blocks/banner_gruppo.php) */
.uw-grad-caption {
    background-image: linear-gradient(to top,
        rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Pulsante di riproduzione audio — blue-500 → purple-600 */
.uw-grad-audio-icon {
    background-image: linear-gradient(to bottom right, #3b82f6 0%, #9333ea 100%);
}

/* Sfondo dei video senza anteprima — gray-700 → gray-900 */
.uw-grad-video-placeholder {
    background-image: linear-gradient(to bottom right, #374151 0%, #111827 100%);
}

/* Pulsante social nel dettaglio news — purple-500 → pink-500, con hover */
.uw-grad-social {
    background-image: linear-gradient(to right, #a855f7 0%, #ec4899 100%);
}
.uw-grad-social:hover {
    background-image: linear-gradient(to right, #9333ea 0%, #db2777 100%);
}