/**
 * AMH Single Post — 5 Layout Visivi
 *
 * Layout disponibili (boxed e fw per ognuno):
 *   1. Hero       — featured image fullwidth sopra il titolo
 *   2. Split      — immagine sinistra 50% / contenuto destra 50%
 *   3. Minimal    — solo tipografia, nessuna immagine in evidenza
 *   4. Magazine   — immagine boxed + titolo sovrapposto + sidebar destra
 *   5. Immersive  — immagine fullscreen con parallax, titolo in overlay
 *
 * Classi BEM sul wrapper:
 *   .amh-single-hero / .amh-single-hero-fw
 *   .amh-single-split / .amh-single-split-fw
 *   .amh-single-minimal / .amh-single-minimal-fw
 *   .amh-single-magazine / .amh-single-magazine-fw
 *   .amh-single-immersive / .amh-single-immersive-fw
 *
 * @package  Impera Core / Animah ATL
 * @version  1.0.0
 */

/* ════════════════════════════════════════════════════════════════════════════
   RESET / BASE COMUNI
   ════════════════════════════════════════════════════════════════════════════ */

.amh-single-hero,
.amh-single-hero-fw,
.amh-single-split,
.amh-single-split-fw,
.amh-single-minimal,
.amh-single-minimal-fw,
.amh-single-magazine,
.amh-single-magazine-fw,
.amh-single-immersive,
.amh-single-immersive-fw {
    width: 100%;
}

/* Contenuto post: tipografia base */
.amh-post-body {
    font-size:   clamp(15px, 1.5vw, 17px);
    line-height: 1.75;
    color:       inherit;
}

.amh-post-body > * + * {
    margin-top: 1.5em;
}

.amh-post-body h2,
.amh-post-body h3,
.amh-post-body h4 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    line-height: 1.25;
}

.amh-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.amh-post-body blockquote {
    border-left: 3px solid currentColor;
    margin-left: 0;
    padding-left: 1.5em;
    opacity: 0.75;
    font-style: italic;
}

/* Wrapper article comune */
.amh-single-article {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   1. HERO — immagine fullwidth sopra, contenuto sotto centrato
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Immagine hero ── */
.amh-hero-image {
    width: 100%;
    max-height: 560px;
    overflow: hidden;
    background: #111;
    position: relative;
}

.amh-hero-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    max-height: 560px;
}

/* FW: altezza maggiore */
.amh-single-hero-fw .amh-hero-image {
    max-height: 640px;
}
.amh-single-hero-fw .amh-hero-image img {
    max-height: 640px;
}

/* ── Corpo hero ── */
.amh-hero-body {
    max-width: 780px;
    margin:    0 auto;
    padding:   48px 24px 80px;
}

.amh-single-hero-fw .amh-hero-body {
    max-width: 860px;
}

/* ── Titolo AMH page-title override: nessun bg, padding ridotto ── */
.amh-single-hero .amh-page-title-wrap,
.amh-single-hero-fw .amh-page-title-wrap {
    padding-top:    0;
    padding-bottom: 32px;
    background:     transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. SPLIT — immagine sinistra, testo destra (sticky su desktop)
   ════════════════════════════════════════════════════════════════════════════ */

.amh-split-wrap {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: start;
}

.amh-single-split-fw .amh-split-wrap {
    grid-template-columns: 45% 55%;
}

/* ── Colonna immagine ── */
.amh-split-image {
    position:   sticky;
    top:        0;
    height:     100vh;
    overflow:   hidden;
    background: #111;
}

.amh-split-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Colonna contenuto ── */
.amh-split-content {
    padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
    min-height: 100vh;
}

.amh-split-content .amh-page-title-wrap {
    padding-top:    0;
    padding-bottom: 32px;
    background:     transparent !important;
}

/* ── No immagine: colonna immagine si nasconde ── */
.amh-split-wrap.amh-no-image {
    grid-template-columns: 1fr;
}

.amh-split-wrap.amh-no-image .amh-split-image {
    display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. MINIMAL — solo testo, tipografia centrata, nessuna immagine hero
   ════════════════════════════════════════════════════════════════════════════ */

.amh-minimal-body {
    max-width: 680px;
    margin:    0 auto;
    padding:   clamp(48px, 8vw, 96px) 24px;
}

.amh-single-minimal-fw .amh-minimal-body {
    max-width: 760px;
}

/* Titolo centrato in minimal */
.amh-single-minimal .amh-page-title-wrap,
.amh-single-minimal-fw .amh-page-title-wrap {
    --pt-align:      center;
    --pt-align-flex: center;
    padding-top:    0;
    padding-bottom: 40px;
    background:     transparent !important;
}

/* Separatore più sottile e corto */
.amh-single-minimal .amh-page-title-sep,
.amh-single-minimal-fw .amh-page-title-sep {
    --pt-sep-width: 40px;
    --pt-sep-h:     1px;
    opacity: 0.25;
}

/* Drop cap primo paragrafo */
.amh-single-minimal .amh-post-body > p:first-of-type::first-letter,
.amh-single-minimal-fw .amh-post-body > p:first-of-type::first-letter {
    float:       left;
    font-size:   3.5em;
    line-height: 0.85;
    margin:      0.05em 0.1em 0 0;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. MAGAZINE — immagine boxed con titolo sovrapposto + sidebar destra
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header magazine: immagine con overlay titolo ── */
.amh-magazine-header {
    position:   relative;
    width:      100%;
    max-height: 480px;
    overflow:   hidden;
    background: #111;
}

.amh-magazine-header img {
    width:      100%;
    max-height: 480px;
    object-fit: cover;
    display:    block;
}

/* Overlay gradiente per leggibilità titolo */
.amh-magazine-header-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}

/* Titolo sovrapposto all'immagine */
.amh-magazine-header .amh-page-title-wrap {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    32px 40px !important;
    background: transparent !important;
    color:      #fff !important;
    --pt-color: #fff;
    --pt-accent: rgba(255,255,255,0.8);
}

/* Senza immagine: titolo normale sopra il layout */
.amh-magazine-header.amh-no-image {
    max-height: none;
    background: transparent;
}

.amh-magazine-header.amh-no-image .amh-magazine-header-overlay {
    display: none;
}

.amh-magazine-header.amh-no-image .amh-page-title-wrap {
    position: relative;
    color:    inherit !important;
    --pt-color: '';
    --pt-accent: '';
    padding:  32px 0 !important;
}

/* ── Layout a due colonne: contenuto + sidebar ── */
.amh-magazine-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   48px;
    padding:               48px 0 80px;
    align-items:           start;
}

.amh-single-magazine-fw .amh-magazine-layout {
    grid-template-columns: 1fr 320px;
    gap:                   56px;
}

/* ── Sidebar ── */
.amh-magazine-sidebar {
    position: sticky;
    top:      32px;
}

.amh-sidebar-widget {
    padding:       24px;
    border:        1px solid rgba(128,128,128,0.15);
    border-radius: 8px;
    margin-bottom: 24px;
}

.amh-sidebar-widget-title {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity:        0.5;
    margin:         0 0 16px;
}

/* Related posts nella sidebar */
.amh-related-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.amh-related-list li + li {
    margin-top:  12px;
    padding-top: 12px;
    border-top:  1px solid rgba(128,128,128,0.1);
}

.amh-related-list a {
    text-decoration: none;
    font-size:       14px;
    line-height:     1.4;
    color:           inherit;
    display:         flex;
    gap:             10px;
    align-items:     center;
}

.amh-related-list a:hover {
    opacity: 0.7;
}

.amh-related-thumb {
    width:         48px;
    height:        48px;
    object-fit:    cover;
    border-radius: 4px;
    flex-shrink:   0;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. IMMERSIVE — immagine fullscreen con parallax, titolo in overlay
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cover fullscreen ── */
.amh-immersive-cover {
    position:   relative;
    width:      100%;
    height:     100vh;
    min-height: 500px;
    overflow:   hidden;
    background: #111;
    display:    flex;
    align-items: flex-end;
}

.amh-immersive-cover-image {
    position:   absolute;
    inset:      0;
    will-change: transform;
}

.amh-immersive-cover-image img {
    width:      100%;
    height:     115%; /* sovradimensionata per il parallax */
    object-fit: cover;
    display:    block;
    transform:  translateY(0);
    transition: transform 0s linear; /* gestito da JS */
}

/* Overlay gradiente */
.amh-immersive-cover-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.3)  50%,
        rgba(0,0,0,0.05) 100%
    );
}

/* Titolo nell'overlay */
.amh-immersive-cover .amh-page-title-wrap {
    position:   relative;
    z-index:    2;
    width:      100%;
    padding:    48px clamp(24px, 5vw, 80px) 56px !important;
    background: transparent !important;
    color:      #fff !important;
    --pt-color:  #fff;
    --pt-accent: rgba(255,255,255,0.75);
}

/* Scroll indicator */
.amh-immersive-scroll-hint {
    position:  absolute;
    bottom:    24px;
    left:      50%;
    transform: translateX(-50%);
    z-index:   3;
    display:   flex;
    flex-direction: column;
    align-items: center;
    gap:       6px;
    opacity:   0.6;
    animation: amh-bounce 2s ease-in-out infinite;
}

.amh-immersive-scroll-hint span {
    font-size:      11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          #fff;
}

.amh-immersive-scroll-arrow {
    width:  20px;
    height: 20px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

@keyframes amh-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Corpo contenuto sotto la cover ── */
.amh-immersive-body {
    max-width:  820px;
    margin:     0 auto;
    padding:    clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px);
    position:   relative;
    z-index:    1;
}

.amh-single-immersive-fw .amh-immersive-body {
    max-width: 960px;
}

/* Card-like: il contenuto emerge sopra la cover con ombra */
.amh-immersive-body-card {
    background:    var(--amh-body-bg, #fff);
    border-radius: 12px 12px 0 0;
    margin-top:    -48px;
    position:      relative;
    z-index:       10;
    padding:       clamp(40px, 5vw, 64px);
    box-shadow:    0 -8px 32px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED: NAVIGAZIONE POST (prev/next)
   ════════════════════════════════════════════════════════════════════════════ */

.amh-post-nav {
    display:         flex;
    justify-content: space-between;
    gap:             24px;
    padding:         40px 0 0;
    margin-top:      48px;
    border-top:      1px solid rgba(128,128,128,0.15);
}

.amh-post-nav a {
    text-decoration: none;
    max-width:       45%;
    display:         flex;
    flex-direction:  column;
    gap:             4px;
}

.amh-post-nav a:last-child {
    text-align: right;
    align-items: flex-end;
}

.amh-post-nav-label {
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity:        0.45;
    font-weight:    600;
}

.amh-post-nav-title {
    font-size:   15px;
    font-weight: 600;
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED: COMMENTI
   ════════════════════════════════════════════════════════════════════════════ */

.amh-comments {
    margin-top:  64px;
    padding-top: 48px;
    border-top:  1px solid rgba(128,128,128,0.15);
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* Split: stack verticale */
    .amh-split-wrap,
    .amh-single-split-fw .amh-split-wrap {
        grid-template-columns: 1fr;
    }

    .amh-split-image {
        position:   relative;
        height:     55vw;
        max-height: 400px;
    }

    .amh-split-content {
        padding: 40px 24px;
        min-height: auto;
    }

    /* Magazine: stack verticale */
    .amh-magazine-layout,
    .amh-single-magazine-fw .amh-magazine-layout {
        grid-template-columns: 1fr;
        gap:                   40px;
    }

    .amh-magazine-sidebar {
        position: relative;
        top:      auto;
    }

    /* Immersive: cover meno alta */
    .amh-immersive-cover {
        height: 70vh;
    }
}

@media (max-width: 600px) {

    .amh-hero-body,
    .amh-minimal-body {
        padding: 32px 20px 60px;
    }

    .amh-immersive-cover {
        height: 60vh;
    }

    .amh-immersive-body-card {
        margin-top: -24px;
        padding:    32px 20px;
    }

    .amh-magazine-header .amh-page-title-wrap {
        padding: 24px 20px !important;
    }

    .amh-post-nav {
        flex-direction: column;
        gap: 16px;
    }

    .amh-post-nav a,
    .amh-post-nav a:last-child {
        max-width:  100%;
        text-align: left;
        align-items: flex-start;
    }
}