/* ============================================================
   ILD SINGLE POST
   Percorso: /wp-content/themes/ILoveDisco/assets/css/ild-single-post.css
   ============================================================ */

/* ── Reset Hello Elementor per template custom ── */
body.single-post .site-main,
body.single-post #content,
body.single-post .content-area,
body.single-post article.post {
    max-width:  100% !important;
    width:      100% !important;
    padding:    0    !important;
    margin:     0    !important;
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.ild-sp-hero {
    position:            relative;
    min-height:          78vh;
    display:             flex;
    align-items:         flex-end;
    background-color:    var(--ild-black, #080808);
    background-size:     cover;
    background-position: center 30%;
    background-repeat:   no-repeat;
    padding:             0 60px 80px;
    overflow:            hidden;
}

.ild-sp-hero__overlay {
    position:   absolute;
    inset:      0;
    background:
            linear-gradient(to top,  rgba(8,8,8,.97) 0%,
            rgba(8,8,8,.55) 40%,
            rgba(8,8,8,.15) 100%);
    z-index: 1;
}

.ild-sp-hero__inner {
    position:  relative;
    z-index:   2;
    max-width: 860px;
    width:     100%;
}

/* Breadcrumb */
.ild-sp-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-bottom: 18px;
}

.ild-sp-breadcrumb a,
.ild-sp-breadcrumb span {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       11px;
    letter-spacing:  1px;
    color:           rgba(245,240,232,.35);
    text-decoration: none;
    transition:      color .2s;
}

.ild-sp-breadcrumb a:hover { color: var(--ild-gold, #c9a84c); }

/* Categoria badge */
.ild-sp-hero__cat {
    display:         inline-block;
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  4px;
    text-transform:  uppercase;
    color:           var(--ild-magenta, #ff00ff);
    text-decoration: none;
    margin-bottom:   16px;
    transition:      opacity .2s;
}

.ild-sp-hero__cat:hover { opacity: .7; }

/* Titolo */
.ild-sp-hero__title {
    font-family:  var(--ild-font-serif, 'Playfair Display', serif);
    font-size:    clamp(34px, 5.5vw, 72px);
    font-weight:  700;
    line-height:  1.1;
    color:        #fff;
    margin:       0 0 32px;
    text-shadow:  0 2px 24px rgba(0,0,0,.6);
}

/* Meta autore */
.ild-sp-hero__meta {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.ild-sp-hero__avatar {
    width:         42px;
    height:        42px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid rgba(201,168,76,.3);
    flex-shrink:   0;
}

.ild-sp-hero__meta-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.ild-sp-hero__author-name {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       13px;
    font-weight:     500;
    color:           rgba(245,240,232,.85);
    text-decoration: none;
    transition:      color .2s;
}

.ild-sp-hero__author-name:hover { color: var(--ild-gold, #c9a84c); }

.ild-sp-hero__meta-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   12px;
    color:       rgba(245,240,232,.40);
}

.ild-sp-hero__dot { color: rgba(245,240,232,.2); }

/* Scroll hint */
.ild-sp-hero__scroll {
    position:  absolute;
    bottom:    32px;
    right:     60px;
    z-index:   2;
}

.ild-sp-hero__scroll span {
    display:    block;
    width:      1px;
    height:     52px;
    background: linear-gradient(to bottom, var(--ild-gold, #c9a84c), transparent);
    animation:  ild-sp-pulse 2s ease-in-out infinite;
}

@keyframes ild-sp-pulse {
    0%,100% { opacity: .3; transform: scaleY(.5) translateY(0); }
    50%     { opacity: 1;  transform: scaleY(1)  translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   LAYOUT — 3 colonne
   [Share 56px] [Content 1fr] [Info 280px]
══════════════════════════════════════════════════════════ */
.ild-sp-layout {
    display:               grid;
    grid-template-columns: 56px 1fr 280px;
    gap:                   0 52px;
    max-width:             1360px;
    margin:                0 auto;
    padding:               68px 48px 80px;
    align-items:           start;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR SINISTRA — share verticale
══════════════════════════════════════════════════════════ */
.ild-sp-share-col {
    position: sticky;
    top:      96px;
}

.ild-sp-share-sticky {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
}

.ild-sp-share-label {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       9px;
    letter-spacing:  2px;
    text-transform:  uppercase;
    color:           rgba(245,240,232,.2);
    writing-mode:    vertical-rl;
    text-orientation: mixed;
    margin-bottom:   4px;
}

.ild-sp-share-btn {
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid rgba(201,168,76,.15);
    color:           rgba(245,240,232,.30);
    text-decoration: none;
    background:      transparent;
    cursor:          pointer;
    transition:      .25s;
    outline:         none;
}

.ild-sp-share-btn:hover {
    border-color: var(--ild-gold, #c9a84c);
    color:        var(--ild-gold, #c9a84c);
    background:   rgba(201,168,76,.06);
}

/* Feedback "copiato" */
.ild-sp-copy-btn.copied {
    border-color: #5bef8a;
    color:        #5bef8a;
}

.ild-sp-share-line {
    width:      1px;
    height:     48px;
    background: linear-gradient(to bottom, rgba(201,168,76,.2), transparent);
}

/* ══════════════════════════════════════════════════════════
   CONTENUTO — area popolata da Elementor o editor classico
══════════════════════════════════════════════════════════ */
.ild-sp-main {
    min-width: 0;
}

/* ── Stili tipografici per il contenuto del post ──
   Vengono applicati se il contenuto è dell'editor classico.
   Se è Elementor, Elementor usa i suoi stili (e questi
   non interferiscono grazie al selettore .ild-sp-content >).  */
.ild-sp-content > p,
.ild-sp-content > .wp-block-paragraph {
    font-family:   var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:     16px;
    font-weight:   300;
    line-height:   1.9;
    color:         rgba(245,240,232,.78);
    margin-bottom: 24px;
}

.ild-sp-content > h2 {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(24px, 3vw, 36px);
    font-weight: 700;
    color:       #fff;
    margin:      52px 0 16px;
    line-height: 1.15;
}

.ild-sp-content > h3 {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    color:       #fff;
    margin:      40px 0 12px;
}

.ild-sp-content > h4 {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
    margin:         32px 0 10px;
}

.ild-sp-content a {
    color:                 var(--ild-gold, #c9a84c);
    text-decoration:       underline;
    text-underline-offset: 3px;
    transition:            color .2s;
}

.ild-sp-content a:hover { color: var(--ild-gold-light, #f0d080); }

.ild-sp-content > blockquote {
    border-left: 3px solid var(--ild-magenta, #ff00ff);
    padding:     18px 28px;
    margin:      40px 0;
    background:  rgba(255,0,255,.04);
}

.ild-sp-content > blockquote p {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   20px;
    font-style:  italic;
    color:       #fff;
    margin:      0;
    line-height: 1.55;
}

.ild-sp-content > blockquote cite {
    display:    block;
    margin-top: 10px;
    font-size:  11px;
    font-style: normal;
    color:      var(--ild-gold, #c9a84c);
    letter-spacing: 1px;
}

.ild-sp-content img {
    max-width: 100%;
    height:    auto;
    display:   block;
    margin:    32px auto;
}

.ild-sp-content figure { margin: 36px 0; }

.ild-sp-content figcaption {
    font-size:  12px;
    color:      rgba(245,240,232,.35);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

.ild-sp-content > ul,
.ild-sp-content > ol {
    padding-left:  24px;
    margin-bottom: 24px;
}

.ild-sp-content li {
    font-family:   var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:     16px;
    font-weight:   300;
    line-height:   1.75;
    color:         rgba(245,240,232,.78);
    margin-bottom: 8px;
}

.ild-sp-content > ul li::marker { color: var(--ild-gold, #c9a84c); }

.ild-sp-content hr {
    border:     none;
    height:     1px;
    background: rgba(201,168,76,.15);
    margin:     48px 0;
}

/* ── Tag ── */
.ild-sp-tags {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-top:  48px;
    padding-top: 28px;
    border-top:  1px solid rgba(201,168,76,.12);
}

.ild-sp-tags__label {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(245,240,232,.25);
    margin-right:   4px;
}

.ild-sp-tag {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       11px;
    color:           rgba(245,240,232,.50);
    text-decoration: none;
    border:          1px solid rgba(201,168,76,.12);
    padding:         5px 12px;
    transition:      .25s;
}

.ild-sp-tag:hover {
    border-color: var(--ild-gold, #c9a84c);
    color:        var(--ild-gold, #c9a84c);
}

.ild-sp-updated {
    margin-top:  12px;
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   11px;
    font-style:  italic;
    color:       rgba(245,240,232,.20);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR DESTRA — info sticky
══════════════════════════════════════════════════════════ */
.ild-sp-info-col {
    position: sticky;
    top:      90px;
}

.ild-sp-info-sticky {
    background: var(--ild-card, #111008);
    border:     1px solid rgba(201,168,76,.10);
}

/* Mini autore */
.ild-sp-info-author {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     18px;
    border-bottom: 1px solid rgba(201,168,76,.08);
}

.ild-sp-info-author__avatar {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    border:        2px solid rgba(201,168,76,.2);
}

.ild-sp-info-author > div {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.ild-sp-info-author__label {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(245,240,232,.22);
}

.ild-sp-info-author__name {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       14px;
    font-weight:     500;
    color:           rgba(245,240,232,.85);
    text-decoration: none;
    transition:      color .2s;
}

.ild-sp-info-author__name:hover { color: var(--ild-gold, #c9a84c); }

/* Righe info */
.ild-sp-info-rows { padding: 4px 0; }

.ild-sp-info-row {
    display:       grid;
    grid-template-columns: 90px 1fr;
    gap:           8px;
    align-items:   start;
    padding:       11px 18px;
    border-bottom: 1px solid rgba(201,168,76,.06);
}

.ild-sp-info-row:last-child { border-bottom: none; }

.ild-sp-info-row__label {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          rgba(245,240,232,.22);
    line-height:    1.5;
    white-space:    nowrap;
}

.ild-sp-info-row__val {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   13px;
    color:       rgba(245,240,232,.70);
    line-height: 1.5;
}

.ild-sp-info-row__cat,
.ild-sp-info-row__tag {
    color:           var(--ild-magenta, #ff00ff);
    text-decoration: none;
    transition:      opacity .2s;
}

.ild-sp-info-row__cat:hover,
.ild-sp-info-row__tag:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════
   BOX AUTORE
══════════════════════════════════════════════════════════ */
.ild-sp-author-box {
    background:    var(--ild-deep, #0d0d0d);
    border-top:    1px solid rgba(201,168,76,.10);
    border-bottom: 1px solid rgba(201,168,76,.10);
    padding:       60px;
}

.ild-sp-author-box__inner {
    display:     flex;
    align-items: flex-start;
    gap:         32px;
    max-width:   860px;
    margin:      0 auto;
}

.ild-sp-author-box__avatar-wrap {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    border:        3px solid rgba(201,168,76,.2);
}

.ild-sp-author-box__avatar-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ild-sp-author-box__content {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.ild-sp-author-box__eyebrow {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
}

.ild-sp-author-box__name {
    font-family:     var(--ild-font-serif, 'Playfair Display', serif);
    font-size:       clamp(20px, 2.5vw, 28px);
    font-weight:     700;
    color:           #fff;
    text-decoration: none;
    line-height:     1.1;
    transition:      color .2s;
}

.ild-sp-author-box__name:hover { color: var(--ild-gold, #c9a84c); }

.ild-sp-author-box__bio {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   14px;
    font-weight: 300;
    color:       rgba(245,240,232,.60);
    line-height: 1.75;
    margin:      0;
}

.ild-sp-author-box__link {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  2px;
    text-transform:  uppercase;
    color:           var(--ild-gold, #c9a84c);
    text-decoration: none;
    margin-top:      4px;
    transition:      color .2s;
}

.ild-sp-author-box__link:hover { color: var(--ild-gold-light, #f0d080); }

/* ══════════════════════════════════════════════════════════
   NAVIGAZIONE PREV / NEXT
══════════════════════════════════════════════════════════ */
.ild-sp-nav {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2px;
}

.ild-sp-nav__item {
    display:         flex;
    align-items:     center;
    gap:             20px;
    padding:         28px 36px;
    background:      var(--ild-card, #111008);
    text-decoration: none;
    overflow:        hidden;
    transition:      background .3s;
}

.ild-sp-nav__item:hover { background: rgba(201,168,76,.04); }

.ild-sp-nav__item--next { justify-content: flex-end; }

.ild-sp-nav__thumb {
    width:       80px;
    height:      56px;
    flex-shrink: 0;
    overflow:    hidden;
}

.ild-sp-nav__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s;
}

.ild-sp-nav__item:hover .ild-sp-nav__thumb img { transform: scale(1.07); }

.ild-sp-nav__body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.ild-sp-nav__body--right { text-align: right; }

.ild-sp-nav__dir {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
    line-height:    1;
}

.ild-sp-nav__cat {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--ild-magenta, #ff00ff);
    line-height:    1;
}

.ild-sp-nav__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   17px;
    font-weight: 700;
    line-height: 1.2;
    color:       rgba(245,240,232,.85);
    transition:  color .25s;
}

.ild-sp-nav__item:hover .ild-sp-nav__title { color: var(--ild-gold, #c9a84c); }

/* ══════════════════════════════════════════════════════════
   ARTICOLI CORRELATI
══════════════════════════════════════════════════════════ */
.ild-sp-related {
    padding:     80px 60px 100px;
    background:  var(--ild-deep, #0d0d0d);
}

.ild-sp-related__head {
    margin-bottom: 40px;
}

.ild-sp-related__eyebrow {
    display:        block;
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
    margin-bottom:  10px;
}

.ild-sp-related__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(28px, 4vw, 48px);
    line-height: 1.1;
    color:       #fff;
    margin:      0;
}

.ild-sp-related__title em {
    font-style: italic;
    color:      var(--ild-gold, #c9a84c);
}

.ild-sp-related__grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   32px;
}

/* Card correlata */
.ild-sp-rel-card {
    display:        flex;
    flex-direction: column;
    cursor:         pointer;
    transition:     transform .3s;
}

.ild-sp-rel-card:hover { transform: translateY(-4px); }

.ild-sp-rel-card__thumb-wrap {
    display:  block;
    overflow: hidden;
}

.ild-sp-rel-card__thumb {
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   linear-gradient(135deg,#1a1209,#0d0d0d);
}

.ild-sp-rel-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .55s, filter .3s;
    filter:     grayscale(15%);
}

.ild-sp-rel-card:hover .ild-sp-rel-card__thumb img {
    transform: scale(1.05);
    filter:    grayscale(0%);
}

.ild-sp-rel-card__nothumb {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       52px;
}

.ild-sp-rel-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top,rgba(0,0,0,.2),transparent);
}

.ild-sp-rel-card__body {
    padding:        18px 0 0;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.ild-sp-rel-card__cat {
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  3px;
    text-transform:  uppercase;
    color:           var(--ild-magenta, #ff00ff);
    text-decoration: none;
}

.ild-sp-rel-card__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(17px, 2vw, 21px);
    font-weight: 700;
    line-height: 1.2;
    margin:      0;
    color:       rgba(245,240,232,.90);
    transition:  color .25s;
}

.ild-sp-rel-card__title a {
    color:           inherit;
    text-decoration: none;
}

.ild-sp-rel-card:hover .ild-sp-rel-card__title { color: var(--ild-gold, #c9a84c); }

.ild-sp-rel-card__meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   11px;
    color:       rgba(138,128,112,.50);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
    .ild-sp-layout { grid-template-columns: 48px 1fr 240px; gap: 0 36px; padding: 52px 36px 64px; }
}

@media (max-width:1024px) {
    .ild-sp-hero   { padding: 0 32px 60px; min-height: 60vh; }
    .ild-sp-hero__scroll { display: none; }

    /* Layout: share nascosta, info sopra il contenuto */
    .ild-sp-layout {
        grid-template-columns: 1fr;
        padding: 40px 32px 60px;
        gap:     40px 0;
    }
    .ild-sp-share-col { display: none; }
    .ild-sp-info-col {
        position: static;
        order:    -1;          /* info box sopra il contenuto */
    }
    .ild-sp-info-sticky { display: grid; grid-template-columns: 1fr 1fr; }
    .ild-sp-info-author { border-bottom: none; border-right: 1px solid rgba(201,168,76,.08); }

    .ild-sp-author-box  { padding: 48px 32px; }
    .ild-sp-nav         { grid-template-columns: 1fr 1fr; }
    .ild-sp-related     { padding: 60px 32px 80px; }
    .ild-sp-related__grid { grid-template-columns: repeat(3,1fr); gap: 20px; }
}

@media (max-width:768px) {
    .ild-sp-hero  { min-height: 55vh; padding: 0 20px 48px; }
    .ild-sp-hero__title { font-size: clamp(30px,9vw,52px); }

    .ild-sp-layout { padding: 32px 20px 48px; gap: 32px 0; }
    .ild-sp-info-sticky { grid-template-columns: 1fr; }
    .ild-sp-info-author { border-right: none; border-bottom: 1px solid rgba(201,168,76,.08); }

    .ild-sp-content > p,
    .ild-sp-content li { font-size: 15px; }

    .ild-sp-author-box { padding: 40px 20px; }
    .ild-sp-author-box__inner { flex-direction: column; align-items: center; text-align: center; }

    .ild-sp-nav { grid-template-columns: 1fr; }
    .ild-sp-nav__item--next { justify-content: flex-start; }
    .ild-sp-nav__body--right { text-align: left; }

    .ild-sp-related  { padding: 48px 20px 64px; }
    .ild-sp-related__grid { grid-template-columns: 1fr; gap: 28px; }
}
