/* =========================================================================
   DAVIDE PICCI — FOGLIO DI STILE PER TELEFONO
   -------------------------------------------------------------------------
   Caricato solo sugli schermi stretti, dal <link> di ogni pagina:

       <link href="style.css" rel="stylesheet">
       <link href="style-mobile.css" rel="stylesheet" media="(max-width: 768px)">

   Il "media" nel link lascia decidere al browser in base alla larghezza
   reale della finestra, non al tipo di dispositivo dichiarato: così
   funziona anche su tablet, in orizzontale e quando si ridimensiona la
   finestra sul computer, casi in cui il riconoscimento del dispositivo
   sbaglia. Il file viene comunque scaricato, ma il browser gli dà bassa
   priorità e non blocca il disegno della pagina quando non serve.

   Qui dentro le regole valgono già entro i 768px: non serve avvolgerle in
   un @media. Più in fondo c'è un blocco per i telefoni piccoli (≤480px).
   ========================================================================= */

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
body,
body.page-2 {
    /* Su telefono lo sfondo fisso costa molto in scorrimento */
    background-attachment: scroll;
    -webkit-text-size-adjust: 100%;
}

/* -------------------------------------------------------------------------
   TESTATA E NAVIGAZIONE
   ------------------------------------------------------------------------- */
.navbar {
    padding: 0.9rem 0 0.6rem;
}

.logo-symbol { height: 62px; }

.logo-title {
    font-size: 1.25rem;
    letter-spacing: 0.22em;
}

.logo-subtitle {
    margin-top: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.42em;
}

.navbar-nav-custom {
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0.6rem;
    margin-top: 0.7rem;
}

/* Aree toccabili piene, non solo il testo */
.navbar-nav-custom a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    font-size: 17px;
    letter-spacing: 0.06em;
}

.navbar-nav-custom a:hover { transform: none; }
.navbar-nav-custom a.is-current { color: var(--saffron); }

/* Il menu a tendina non ha "passaggio del mouse": si apre toccandolo */
.dropdown-content {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    padding: 0;
}

.dropdown-content li a {
    font-size: 16px;
    padding: 10px 14px;
    border-left: none;
}

/* -------------------------------------------------------------------------
   HOME — copertina ed eventi
   ------------------------------------------------------------------------- */
.hero-slideshow { height: 100svh; }

.slide-img { object-position: center 28%; }

.event {
    padding: 42px 0;
}

.events-grid {
    grid-template-columns: 1fr;
    row-gap: 42px;
    padding: 0 22px;
}

.event-card { gap: 9px; }
.date-time { font-size: 16px; }
.title { font-size: 15px; }
.description, .artists { font-size: 14px; }

/* -------------------------------------------------------------------------
   BIO — una colonna, foto sopra il testo
   ------------------------------------------------------------------------- */
.bio-section {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 2.6rem 1.4rem;
}

/* Anche nella sezione "rovesciata" la foto resta in alto */
.bio-section .photo-right,
.bio-section .photo-left,
.bio-section-reverse .photo-left { order: 1; }

.bio-section .bio-text,
.bio-section-reverse .bio-text { order: 2; }

.photo-right,
.photo-left {
    width: min(100%, 330px);
    height: auto;
    aspect-ratio: 3 / 4;
}

.bio-text {
    font-size: 15px;
    line-height: 1.85;
    text-align: left;   /* il testo giustificato su schermo stretto apre buchi */
    max-width: none;
}

.bio-text::before { margin-bottom: 20px; }

/* -------------------------------------------------------------------------
   MEDIA — il percorso in una sola colonna
   ------------------------------------------------------------------------- */
.media-hero {
    height: 86svh;
    min-height: 460px;
}

.media-hero-content {
    padding: 0 1.4rem 8.5rem;
}

.media-hero-title { letter-spacing: 0.1em; }

.media-hero-lede {
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: none;
}

.media-scroll-cue { bottom: 1.6rem; }
.cue-line { height: 38px; }

.media-flow {
    grid-template-columns: 1fr;
    row-gap: 3.2rem;
    padding: 3rem 1.1rem 4.5rem;
}

.media-item.is-full,
.media-item.is-wide,
.media-item.is-half,
.media-item.is-portrait,
.media-item.is-portrait.is-right,
.media-item.is-portrait.is-centre,
.media-note {
    grid-column: 1 / -1;
}

/* Niente sfalsamenti in colonna singola: creerebbero solo vuoti */
.media-item.is-offset { margin-top: 0; }

.media-item.is-full .media-frame { aspect-ratio: 4 / 3; }
.media-item.is-wide .media-frame { aspect-ratio: 16 / 9; }
.media-item.is-half .media-frame { aspect-ratio: 3 / 2; }
.media-item.is-portrait .media-frame { aspect-ratio: 3 / 4; }

/* Nessun ingrandimento: senza parallasse servirebbe solo a tagliare */
.media-item.is-full .media-frame img,
.media-item.is-portrait .media-frame img {
    transform: none;
    will-change: auto;
}

/* Senza passaggio del mouse le didascalie restano sempre leggibili */
.media-caption { padding-top: 0.9rem; }
.media-title { font-size: 1.02rem; }
.media-frame::after { border-color: rgba(244, 196, 48, 0.18); }

.media-item:hover .media-frame img,
.media-item:hover .media-play { transform: none; }

.media-note { padding: 0.5rem 0; }
.media-note p { font-size: 1.05rem; line-height: 1.7; }
.media-note-rule { height: 46px; margin-bottom: 1.4rem; }

/* -------------------------------------------------------------------------
   VISORE — comandi raggiungibili col pollice
   ------------------------------------------------------------------------- */
.media-viewer { padding: 1rem 0.8rem 6.5rem; }

.media-viewer-stage.is-photo img { max-height: 58vh; }

.media-viewer-caption { margin-top: 1rem; }
.viewer-title { font-size: 1rem; }

.media-viewer-close {
    top: 0.8rem;
    right: 0.9rem;
    width: 46px;
    height: 46px;
    font-size: 2rem;
}

/* Le frecce scendono in basso, dove arriva il pollice */
.media-viewer-arrow {
    top: auto;
    bottom: 1.4rem;
    transform: none;
    width: 58px;
    height: 58px;
    font-size: 2.1rem;
    border: 1px solid rgba(244, 196, 48, 0.35);
    border-radius: 50%;
    background: rgba(14, 12, 10, 0.75);
}

.media-viewer-arrow:hover { transform: none; }
.media-viewer-arrow.is-prev { left: 1.4rem; }
.media-viewer-arrow.is-next { right: 1.4rem; }

/* -------------------------------------------------------------------------
   CONTATTI — una colonna
   ------------------------------------------------------------------------- */
.contacts-wrapper { padding: 2.6rem 1.2rem 4.5rem; }

.contact-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 3rem;
}

.contact-card { padding: 1.5rem 1.3rem; }
.contact-card:hover { transform: none; }

.contact-lower {
    grid-template-columns: 1fr;
    gap: 2.8rem;
}

.contact-aside {
    border-left: none;
    border-top: 1px solid rgba(201, 168, 106, 0.16);
    padding-left: 0;
    padding-top: 2.2rem;
}

/* 16px evita che il telefono ingrandisca la pagina al tocco sul campo */
.field input,
.field textarea { font-size: 16px; }

.contact-submit {
    align-self: stretch;
    text-align: center;
    padding: 1rem 1.5rem;
}

.contact-social a:hover { padding-left: 0; }

/* -------------------------------------------------------------------------
   INTESTAZIONI DI SEZIONE
   ------------------------------------------------------------------------- */
.section-head { margin-bottom: 2.4rem; }
.section-subtitle { font-size: 0.92rem; line-height: 1.75; }
.section-rule { margin-top: 1.6rem; }

/* -------------------------------------------------------------------------
   COMANDI TORNA SU / HOME
   ------------------------------------------------------------------------- */
.home-dock {
    right: 0.9rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
}

.home-dock-btn {
    width: 50px;
    height: 50px;
}

.home-dock-btn:hover { transform: none; }

/* -------------------------------------------------------------------------
   PIÈ DI PAGINA
   ------------------------------------------------------------------------- */
.site-footer { padding: 28px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer-container { gap: 16px; }
.social-links { gap: 26px; }
.social-links a { font-size: 24px; }

/* =========================================================================
   TELEFONI PICCOLI
   ========================================================================= */
@media (max-width: 480px) {
    .logo-symbol { height: 54px; }
    .logo-title { font-size: 1.08rem; letter-spacing: 0.18em; }
    .logo-subtitle { font-size: 0.68rem; letter-spacing: 0.34em; }

    .navbar-nav-custom a { font-size: 15px; padding: 0 0.6rem; }

    .media-hero-lede { font-size: 0.88rem; }
    .media-flow { padding: 2.4rem 0.9rem 3.5rem; }

    .contacts-wrapper { padding: 2rem 1rem 3.5rem; }
    .contact-card { padding: 1.3rem 1.1rem; }

    .media-viewer-arrow { width: 52px; height: 52px; font-size: 1.9rem; }
}

/* Sul telefono la copertina è alta quanto lo schermo */
.hero-spacer { height: 78svh; }
.event { margin-top: 0; }