/*
Theme Name: Joeh Faber Techno Theme
Author: ChatGPT
Version: 2.0
Description: Tema WordPress DJ/Producer pixel-perfect
*/

/* ==================================================
   ROOT VARIABLES
================================================== */
:root{
  --bg:#050505;
  --bg-alt:#0d0d0d;
  --text:#ffffff;
  --muted:#cfcfcf;
  --accent:#8B5CF6;
  --border:rgba(255,255,255,.08);

  --radius:20px;
  --transition:.3s ease;
}

/* ==================================================
   RESET
================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

body.admin-bar .site-header{
  top:32px;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

/* ==================================================
   CUSTOM FONTS
================================================== */

@font-face{
  font-family:'Granite';
  src:url('./assets/fonts/granite.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

/* ==================================================
   GLOBAL WRAPPER
================================================== */
#site-wrapper{
  width:100%;
  overflow:hidden;
}

/* ==================================================
   CONTAINER
================================================== */
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
}

/* ==================================================
   TYPOGRAPHY
================================================== */
h1,h2,h3,h4{
  font-weight:900;
  text-transform:uppercase;
}

.section-title{
  font-size:clamp(2rem,4vw,4rem);
  margin-bottom:50px;
  line-height:1;
}

/* ==================================================
   HEADER
================================================== */
.site-header{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:90px;

  z-index:999;

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(255,255,255,.05);

  transition:all .3s ease;
}

.header-inner{
  width:100%;
  height:90px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.logo a{
  font-size:1rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* MENU */
.nav-list{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
}

.nav-list a{
  font-size:.95rem;
  font-weight:600;
  transition:var(--transition);
}

.nav-list a:hover{
  color:var(--accent);
}

/* SOCIAL */
.header-socials{
  display:flex;
  align-items:center;
  gap:15px;
}

.header-socials a{
  font-size:1rem;
  transition:var(--transition);
}

.header-socials a:hover{
  color:var(--accent);
}

/* ==================================================
   HERO PREMIUM
================================================== */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  text-align:center;

  padding:
    calc(90px + 80px)
    20px
    80px;
}

/* BG IMAGE */
.hero-bg{

  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  z-index:1;

  transform:scale(1.02);
}

/* VIDEO */
.hero-video{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:2;
}

/* OVERLAY */
.hero-overlay{

  position:absolute;
  inset:0;

  z-index:3;
}

/* CONTENT */
.hero-content{

  position:relative;

  z-index:5;

  width:100%;
  max-width:900px;
}

/* ==================================================
   BUTTONS
================================================== */
.btn-wrap{
  margin-top:40px;
}

.btn{
  display:inline-block;

  padding:16px 34px;
  margin:10px;

  border-radius:60px;

  background:var(--accent);

  font-weight:700;

  transition:var(--transition);
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(139,92,246,.45);
}

.btn.secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
}

/* ==================================================
   SECTIONS
================================================== */
.section{
  width:100%;
  padding:140px 0;
}

/* ==================================================
   ABOUT
================================================== */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:80px;
  align-items:center;
}

.about p{
  color:var(--muted);
  font-size:1.05rem;
}

.about img{
  border-radius:var(--radius);
}

/* ==================================================
   EVENTS
================================================== */
.events-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.event-card{
  background:#111;

  border:1px solid var(--border);
  border-radius:var(--radius);

  padding:32px;

  transition:var(--transition);
}

.event-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
}

.event-date{
  color:var(--accent);
  font-weight:700;
  margin-bottom:10px;
}

.event-content{
  margin-top:15px;
  color:var(--muted);
}

/* ==================================================
   MUSIC
================================================== */
.music-embed iframe{
  width:100%;
  height:550px;
  border-radius:var(--radius);
  overflow:hidden;
}

/* ==================================================
   GALLERY
================================================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

.gallery img{
  width:100%;
  height:360px;

  object-fit:cover;

  border-radius:var(--radius);

  transition:var(--transition);
}

.gallery img:hover{
  transform:scale(1.02);
}

/* ==================================================
   CTA
================================================== */
.cta{
  background:
    linear-gradient(
      135deg,
      #111,
      #050505
    );

  text-align:center;
}

.cta h2{
  font-size:clamp(2.5rem,5vw,5rem);
}

.cta-text{
  margin:30px auto;
  max-width:700px;
  color:var(--muted);
}

/* ==================================================
   FOOTER
================================================== */
.site-footer{
  padding:80px 0;
  border-top:1px solid var(--border);
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;

  text-align:center;
}

.socials{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.footer-menu{
  display:flex;
  gap:20px;
  flex-wrap:wrap;

  list-style:none;
}

.footer-menu a{
  color:var(--muted);
  transition:var(--transition);
}

.footer-menu a:hover{
  color:var(--accent);
}

.copyright{
  color:#777;
  font-size:.9rem;
}

/* ==================================================
   SINGLE PAGES
================================================== */
.event-single,
.music-single{
  max-width:1000px;
  margin:0 auto;
}

.music-content,
.event-content{
  color:#ddd;
}

/* ==================================================
   RESPONSIVE
================================================== */
@media(max-width:900px){

  .grid-2{
    grid-template-columns:1fr;
    gap:50px;
  }

  .nav-list{
    display:none;
  }

  .hero h1{
    letter-spacing:3px;
  }

  .hero{
    padding-top:160px;
  }

  .music-embed iframe{
    height:320px;
  }

  .section{
    padding:100px 0;
  }
  }

/* ==================================================
   YOUTUBE PLAYLIST PRO
================================================== */

.music-embed{
  width:100%;
}

/* PLAYER WRAPPER */
.ytp-wrap{
  display:flex !important;
  flex-direction:column !important;

  gap:25px;

  background:transparent !important;

  padding:0 !important;
}

/* BIG PLAYER */
.ytp-player{
  width:100% !important;

  min-height:700px !important;

  border-radius:24px;

  overflow:hidden;

  box-shadow:
    0 10px 40px rgba(0,0,0,.45);
}

/* SIDEBAR */
.ytp-sidebar{

  width:100% !important;

  max-height:350px !important;

  overflow:auto;

  padding-right:5px;
}

/* SEARCH */
.ytp-search{

  width:100%;

  padding:14px 18px;

  border:none;

  border-radius:14px;

  background:#111;

  color:#fff;

  margin-bottom:18px;

  font-size:1rem;
}

/* ITEMS */
.ytp-item{

  display:flex;

  align-items:center;

  gap:14px;

  padding:12px;

  margin-bottom:10px;

  background:#111;

  border:1px solid rgba(255,255,255,.05);

  border-radius:16px;

  transition:.3s ease;
}

.ytp-item:hover{

  transform:translateX(6px);

  border-color:var(--accent);

  background:#151515;
}

.ytp-item.active{

  border-color:var(--accent);

  background:rgba(139,92,246,.12);
}

/* THUMB */
.ytp-item img{

  width:140px !important;

  border-radius:12px;

  object-fit:cover;
}

/* TITLE */
.ytp-item div{

  font-size:.95rem;

  font-weight:600;

  line-height:1.4;
}

/* FALLBACK */
.yt-fallback{

  width:100%;

  aspect-ratio:16/9;
}

.yt-fallback iframe{

  width:100%;

  height:100%;

  border:none;

  border-radius:24px;
}

/* ==================================================
   RESPONSIVE PLAYLIST MOBILE
================================================== */

@media(max-width:900px){

  /* PLAYER PRINCIPALE */
  .ytp-player{
    min-height:240px !important;
    border-radius:18px;
    overflow:hidden;
  }

  /* SIDEBAR PLAYLIST */
  .ytp-sidebar{
    max-height:none !important;
    overflow:visible;
    padding-right:0;
  }

  /* CARD VIDEO */
  .ytp-item{
    display:flex;
    flex-direction:row;
    align-items:center;

    gap:12px;

    padding:10px;

    border-radius:14px;
  }

  /* THUMBNAIL PICCOLA */
  .ytp-item img{
    width:120px !important;
    min-width:120px;

    height:70px;

    object-fit:cover;

    border-radius:10px;
  }

  /* TESTO VIDEO */
  .ytp-item div{
    font-size:.85rem;
    line-height:1.35;
  }
}

/* ==================================================
   EVENT CARDS IMPROVEMENT
================================================== */
.event-card h3{
  margin-top:10px;
  font-size:1.3rem;
}

.event-location{
  margin-top:12px;
  color:var(--muted);
}


/* ==================================================
   HEADER IMPROVEMENTS
================================================== */
.site-header{
  transition:all .3s ease;
}

.site-header.scrolled{
  backdrop-filter:blur(18px);
}


/* ==================================================
   LOGO IMAGE
================================================== */
.custom-logo{
  max-height:60px;
  width:auto;
}


/* ==================================================
   FOOTER BOOKING
================================================== */
.footer-booking h3{
  margin-bottom:10px;
}

.footer-booking a{
  color:var(--muted);
  transition:var(--transition);
}

.footer-booking a:hover{
  color:var(--accent);
}


/* ==================================================
   SMOOTHER IMAGES
================================================== */
img{
  image-rendering:auto;
}


/* ==================================================
   SOCIAL ICONS FINAL CLEAN SYSTEM
================================================== */

.header-socials,
.socials{
  display:flex;
  align-items:center;
  gap:16px;
}

/* BUTTON BASE */
.header-socials a,
.socials a{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);

  color:#fff;

  position:relative;
  overflow:hidden;

  transition:all .25s ease;
  backdrop-filter:blur(10px);
}

/* ICON */
.header-socials a i,
.socials a i{
  position:relative;
  z-index:2;
  font-size:1rem;
}

/* GLOW EFFECT */
.header-socials a::before,
.socials a::before{
  content:"";
  position:absolute;
  inset:0;

  background:radial-gradient(
    circle at center,
    rgba(139,92,246,.45),
    transparent 70%
  );

  opacity:0;
  transition:.3s ease;
}

/* HOVER */
.header-socials a:hover,
.socials a:hover{
  transform:translateY(-4px) scale(1.05);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 18px rgba(139,92,246,.35);
}

/* SHOW GLOW */
.header-socials a:hover::before,
.socials a:hover::before{
  opacity:1;
}

/* ACTIVE */
.header-socials a:active,
.socials a:active{
  transform:scale(.95);
}

/* MOBILE */
@media(max-width:768px){
  .header-socials a,
  .socials a{
    width:42px;
    height:42px;
  }
}
  /* ==================================================
   SOCIAL ICON FIX (FINAL SAFE PATCH)
================================================== */

.header-socials a,
.socials a{
  position: relative;
  isolation: isolate; /* CRUCIALE: separa stacking context */
}

/* ICONA SEMPRE VISIBILE */
.header-socials a i,
.socials a i{
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;

  color: #fff !important;
  opacity: 1 !important;

  font-size: 1rem;
  line-height: 1;

  position: relative;
  z-index: 10 !important;
  display: block;
}

/* PSEUDO ELEMENTO SEMPRE SOTTO */
.header-socials a::before,
.socials a::before{
  z-index: 0 !important;
}

/* BACKDROP NON INTERFERISCE */
.header-socials a{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ==================================================
   SCREEN READER TEXT FIX
================================================== */

.screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* ==================================================
   HEADER MOTTO
================================================== */

.header-motto{
  display:block;
  flex:1;

  text-align:center;

  font-size:.9rem;
  font-weight:500;

  letter-spacing:2px;
  text-transform:uppercase;

  color:var(--muted);

  padding:0 20px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ==================================================
   FINAL MOBILE HEADER FIX
================================================== */

@media(max-width:768px){

    .site-header{
        height:auto;
        padding:12px 0 14px;
    }

    .header-inner{

        display:grid !important;

        grid-template-columns:1fr 125px;

        grid-template-areas:
            "logo logo"
            "motto socials";

        align-items:center;

        gap:8px 12px;

        height:auto;
    }

    .logo{
        grid-area:logo;
        min-width:0;
    }

    .logo a{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .logo img,
    .custom-logo{
        max-height:42px;
        width:auto;
    }

    .header-socials{

        grid-area:socials;

        display:flex;

        justify-content:flex-end;

        align-items:center;

        gap:4px;

        flex-wrap:nowrap;
		
		width:140px;
		
    }

    .header-socials a{

        width:28px;
        height:28px;

        min-width:28px;
    }

    .header-socials a i{
        font-size:.75rem;
    }

    .header-motto{

        grid-area:motto;

        display:block !important;

        width:100%;
		
		max-width:100%;

        text-align:left;

        font-size:.60rem;

        line-height:1;

        letter-spacing:.2px;

        color:var(--muted);

        white-space:nowrap;

        overflow:hidden;

        text-overflow:clip;

        padding:0;

        margin-top:2px;
		
		min-width:0;
    }

    .main-nav{
        display:none;
    }
}



/* ==================================================
   HIDE EMPTY MOTTO
================================================== */

.header-motto:empty{
  display:none !important;
}

@media(max-width:768px){

  .header-motto:empty{
    display:none !important;
  }

  .header-inner:has(.header-motto:empty){

    grid-template-areas:
      "logo socials";
  }
}

/* ==================================================
   DESKTOP / MOBILE MOTTO SWITCH
================================================== */

/* MOBILE NASCOSTO SU DESKTOP */
.mobile-motto{
  display:none;
}

/* MOBILE */
@media(max-width:768px){

  /* DESKTOP MOTTO OFF */
  .desktop-motto{
    display:none !important;
  }

  /* MOBILE MOTTO ON */
  .mobile-motto{
    display:block;
  }
}

/* ==================================================
   BOOKING PANEL PRO
================================================== */

#booking-panel{

  position:fixed;
  inset:0;

  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:.35s ease;
}

/* OPEN */
#booking-panel.active{
  opacity:1;
  visibility:visible;
}

/* OVERLAY */
.booking-overlay{

  position:absolute;
  inset:0;

  background:rgba(0,0,0,.86);

  backdrop-filter:blur(18px);
}

/* CONTENT */
.booking-content{

  position:relative;

  width:92%;
  max-width:620px;

  background:linear-gradient(
    180deg,
    rgba(18,18,18,.96),
    rgba(10,10,10,.98)
  );

  border:1px solid rgba(255,255,255,.06);

  border-radius:28px;

  padding:42px;

  z-index:2;

  transform:translateY(30px) scale(.96);

  opacity:0;

  transition:.4s ease;

  box-shadow:
    0 25px 80px rgba(0,0,0,.55);
}

/* OPEN */
#booking-panel.active .booking-content{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* TITLE */
.booking-content h2{

  font-size:clamp(1.8rem,4vw,3rem);

  margin-bottom:28px;

  text-transform:uppercase;

  letter-spacing:3px;

  line-height:1;
}

/* CLOSE */
#booking-close{

  position:absolute;

  top:16px;
  right:16px;

  width:40px;
  height:40px;

  border:none;

  border-radius:50%;

  background:rgba(255,255,255,.05);

  color:#fff;

  cursor:pointer;

  font-size:1rem;

  transition:.25s ease;
}

#booking-close:hover{
  background:var(--accent);
  transform:rotate(90deg);
}

/* FORM LAYOUT */
.booking-form-wrap p{
  margin-bottom:16px;
}

/* INPUTS */
.booking-form-wrap input,
.booking-form-wrap textarea{

  width:100%;

  background:#111;

  border:1px solid rgba(255,255,255,.06);

  border-radius:16px;

  padding:15px 18px;

  color:#fff;

  font-size:.95rem;

  transition:.25s ease;
}

/* TEXTAREA */
.booking-form-wrap textarea{
  min-height:140px;
  resize:none;
}

/* FOCUS */
.booking-form-wrap input:focus,
.booking-form-wrap textarea:focus{

  outline:none;

  border-color:rgba(139,92,246,.6);

  box-shadow:
    0 0 0 3px rgba(139,92,246,.12);
}

/* PLACEHOLDER */
.booking-form-wrap ::placeholder{
  color:#777;
}

/* SUBMIT */
.booking-form-wrap input[type="submit"]{

  width:100%;

  background:var(--accent);

  border:none;

  border-radius:18px;

  padding:16px;

  margin-top:10px;

  color:#fff;

  font-weight:700;

  font-size:.95rem;

  cursor:pointer;

  transition:.3s ease;
}

.booking-form-wrap input[type="submit"]:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 24px rgba(139,92,246,.35);
}

/* CF7 RESPONSE */
.wpcf7-response-output{

  margin-top:18px !important;

  border-radius:14px !important;

  padding:14px !important;

  font-size:.9rem;
}

/* MOBILE */
@media(max-width:768px){

  .booking-content{

    width:94%;

    padding:28px 22px;

    border-radius:24px;
  }

  .booking-content h2{

    font-size:1.6rem;

    letter-spacing:2px;
  }

  .booking-form-wrap input,
  .booking-form-wrap textarea{

    padding:14px 16px;

    border-radius:14px;
  }

  .booking-form-wrap textarea{
    min-height:120px;
  }

  .booking-form-wrap input[type="submit"]{
    padding:15px;
  }
}
/* ==================================================
   BOOKING PANEL IMPROVED
================================================== */

#booking-panel{
  padding:20px;
}

/* CONTENT */
.booking-content{

  position:relative;

  width:100%;
  max-width:620px;

  max-height:88vh;

  overflow-y:auto;

  background:#0b0b0b;

  border:1px solid rgba(255,255,255,.06);

  border-radius:24px;

  padding:38px;

  scrollbar-width:thin;

  box-shadow:
    0 20px 60px rgba(0,0,0,.55);
}

/* CUSTOM SCROLLBAR */
.booking-content::-webkit-scrollbar{
  width:6px;
}

.booking-content::-webkit-scrollbar-track{
  background:transparent;
}

.booking-content::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,.5);
  border-radius:20px;
}

/* TITLE */
.booking-content h2{

  font-size:clamp(1.8rem,3vw,3rem);

  margin-bottom:28px;

  line-height:1;

  letter-spacing:2px;
}

/* CLOSE */
#booking-close{

  width:40px;
  height:40px;

  top:16px;
  right:16px;

  font-size:1rem;
}

/* FORM WRAPPER */
.booking-form-wrap{
  width:100%;
}

/* LABELS */
.booking-form-wrap p{
  margin-bottom:14px;
}

/* INPUT */
.booking-form-wrap input,
.booking-form-wrap textarea,
.booking-form-wrap select{

  width:100%;

  background:#111;

  border:1px solid rgba(255,255,255,.08);

  border-radius:14px;

  padding:14px 16px;

  color:#fff;

  font-size:.95rem;

  transition:.25s ease;
}

/* FOCUS */
.booking-form-wrap input:focus,
.booking-form-wrap textarea:focus,
.booking-form-wrap select:focus{

  outline:none;

  border-color:rgba(139,92,246,.7);

  box-shadow:
    0 0 0 3px rgba(139,92,246,.15);
}

/* TEXTAREA */
.booking-form-wrap textarea{

  min-height:140px;

  resize:vertical;
}

/* SUBMIT */
.booking-form-wrap input[type="submit"]{

  width:100%;

  margin-top:10px;

  background:var(--accent);

  border:none;

  border-radius:16px;

  padding:16px;

  font-weight:700;

  cursor:pointer;

  transition:.3s ease;
}

.booking-form-wrap input[type="submit"]:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 25px rgba(139,92,246,.35);
}

/* CONTACT FORM 7 RESPONSE */
.wpcf7-response-output{

  margin-top:18px !important;

  border-radius:14px !important;

  color:#fff !important;
}

/* MOBILE */
@media(max-width:768px){

  #booking-panel{
    padding:14px;
  }

  .booking-content{

    width:100%;

    max-height:92vh;

    padding:
      28px
      20px;

    border-radius:20px;
  }

  .booking-content h2{

    font-size:1.6rem;

    margin-bottom:22px;
  }

  .booking-form-wrap input,
  .booking-form-wrap textarea,
  .booking-form-wrap select{

    padding:13px 14px;

    font-size:.92rem;
  }

  .booking-form-wrap textarea{
    min-height:120px;
  }
}

/* ==================================================
   BOOKING POPUP TITLE MOBILE
================================================== */

@media(max-width:768px){

  .booking-popup-title{
    font-size:.88rem !important;

    line-height:1.2;

    letter-spacing:.8px;

    padding-right:55px;

    margin-bottom:12px;
  }

}

/* ==================================================
   GALLERY CUSTOMIZER SECTION
================================================== */

.gallery-section{
  position:relative;
}

.gallery img{
  width:100%;
  aspect-ratio:1/1.2;

  object-fit:cover;

  border-radius:20px;

  transition:all .35s ease;
}

.gallery img:hover{
  transform:scale(1.03);

  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

@media(max-width:768px){

  .gallery{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .gallery img{
    border-radius:14px;
  }
}

/* ==================================================
   EVENT BUTTONS
================================================== */

.event-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;

  margin-top:24px;
}

.event-buttons .btn{
  margin:0;
  padding:14px 24px;

  font-size:.9rem;
}

@media(max-width:768px){

  .event-buttons{
    flex-direction:column;
  }

  .event-buttons .btn{
    width:100%;
    text-align:center;
  }
}

/* ==================================================
   PROMO SUBTITLE
================================================== */

.promo-subtitle{

  width:100%;
  max-width:700px;

  margin:
    -20px 0
    50px;

  text-align:left;

  color:var(--muted);

  font-size:1rem;

  line-height:1.7;

  opacity:.9;
}

/* ==================================================
   PROMO PLAYER PRO
================================================== */

.promo-player-wrap{

    display:flex;

    flex-direction:column;

    gap:30px;
}

/* PLAYER */

.promo-player{

    background:
    linear-gradient(
        180deg,
        rgba(20,20,20,.96),
        rgba(10,10,10,.98)
    );

    border:
    1px solid rgba(255,255,255,.06);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
}

/* COVER */

.promo-cover-wrap{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#050505;
}

.promo-cover-wrap img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* CONTENT */

.promo-player-content{

    padding:28px;
}

/* META */

.promo-track-meta h3{

    font-size:1.5rem;

    margin-bottom:6px;
}

.promo-track-meta p{

    color:#999;

    margin-bottom:24px;
}

/* PLAYER ROW */

.promo-player-row{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    margin-top:20px;
	
	flex-wrap:nowrap;
}

/* NAV BUTTONS */

.promo-nav-btn{

    width:54px;
    height:54px;

    min-width:54px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.06);

    color:#fff;

    cursor:pointer;

    transition:.25s ease;
}

.promo-nav-btn:hover{

    background:var(--accent);

    transform:translateY(-2px);
}

/* AUDIO WRAP */

.promo-audio-wrap{

    position:relative;

    flex:1;
}

/* HIDE DEFAULT */

#promo-audio{
    display:none;
}

/* PROGRESS */

#promo-progress{

    width:100%;

    appearance:none;
    -webkit-appearance:none;

    height:8px;

    border-radius:30px;

    background:rgba(139,92,246,.9);

    border:1px solid rgba(139,92,246,.9);

    outline:none;

    box-shadow:
        0 0 8px rgba(139,92,246,.55),
        0 0 18px rgba(139,92,246,.30);

    cursor:pointer;
}


#promo-progress::-webkit-slider-thumb{

    -webkit-appearance:none;
    appearance:none;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#fff;

    border:none;

    cursor:pointer;

    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(255,255,255,.45);
}

#promo-progress::-moz-range-thumb{

    width:16px;
    height:16px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(255,255,255,.45);

    cursor:pointer;
}


/* PLAYLIST */

.promo-playlist{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.promo-item{

    display:flex;

    gap:14px;

    align-items:center;

    padding:14px;

    border-radius:18px;

    background:#101010;

    border:
    1px solid rgba(255,255,255,.05);

    cursor:pointer;

    transition:.25s ease;
}

.promo-item:hover{

    transform:translateX(6px);

    border-color:var(--accent);
}

.promo-item.active{

    background:
    rgba(139,92,246,.12);

    border-color:var(--accent);
}

.promo-item img{

    width:72px;
    height:72px;

    border-radius:14px;

    object-fit:cover;
}

.promo-item strong{

    display:block;

    margin-bottom:5px;
}

.promo-item span{
    color:#999;
}

/* MOBILE */

@media(max-width:980px){

    .promo-player-row{

        gap:12px;
    }

    .promo-nav-btn{

        width:48px;
        height:48px;

        min-width:48px;
    }
}

/* PLAY BUTTON */

.promo-play-btn{

    width:62px;
    height:62px;

    min-width:62px;

    border:none;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    font-size:1rem;

    cursor:pointer;

    transition:.25s ease;
}

.promo-play-btn:hover{

    transform:scale(1.05);

    box-shadow:
    0 0 25px rgba(139,92,246,.45);
}

/* PROGRESS */

.promo-progress-wrap{
    display:flex;
    align-items:center;
    gap:10px;
	flex:1;
    margin-top:18px;
    width:100%;
	min-width:0;
}

#promo-current-time,
#promo-duration{

    font-size:.82rem;

    color:#aaa;

    min-width:42px;
}



/* INLINE EQ */

.promo-inline-eq{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:3px;

    width:60px;

    min-width:60px;

    height:22px;

    flex-shrink:0;

    opacity:.75;
}

.promo-inline-eq span{

    width:3px;

    height:8px;

    background:var(--accent);

    border-radius:20px;
	
	box-shadow:
	0 0 6px var(--accent),
	0 0 12px var(--accent),
	0 0 20px rgba(139,92,246,.8);

    animation:promoEQ .8s infinite ease-in-out;
	
	animation-play-state:paused;
	
}

.promo-inline-eq.active span{
    animation-play-state:running;
    opacity:1;
}

.promo-inline-eq span:nth-child(odd){
    animation-duration:.6s;
}

.promo-inline-eq span:nth-child(3n){
    animation-duration:1s;
}

.promo-inline-eq span:nth-child(4n){
    animation-duration:1.3s;
}

@keyframes promoEQ{

    0%{
        height:5px;
    }

    50%{
        height:22px;
    }

    100%{
        height:8px;
    }
}

/* RIGA PLAYER MOBILE */

@media(max-width:768px){

    .promo-player-row{

        gap:6px;

        width:100%;

        overflow:hidden;
    }

    /* pulsanti più piccoli */

    .promo-nav-btn{

        width:38px;
        height:38px;

        min-width:38px;
    }

    .promo-play-btn{

        width:46px;
        height:46px;

        min-width:46px;
    }

    /* tempi più compatti */

    #promo-current-time,
    #promo-duration{

        min-width:32px;

        font-size:.78rem;
		
		font-weight:600;
		
		color:#fff;
		
		text-shadow:0 0 6px rgba(255,255,255,.25);
    }

    /* barra flessibile */

    #promo-progress{

        flex:1;
        
		min-width:40px;
		
		height:6px;
		
		#background:rgba(139,92,246,.9);
		
		#border:1px solid rgba(139,92,246,.9);
		
		#border-radius:30px;
		
		#box-shadow:
		0 0 8px rgba(139,92,246,.6),
		0 0 16px rgba(139,92,246,.35);
    }

#promo-progress::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

    border:none;

    box-shadow:
        0 0 8px rgba(255,255,255,.8);
}

#promo-progress::-moz-range-thumb{

    width:14px;

    height:14px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.8);
}

    /* equalizzatore più piccolo */

    .promo-inline-eq{

        width:32px;

        min-width:32px;

        height:16px;

        gap:2px;
    }

    .promo-inline-eq span{

        width:2px;
    }
}

@media(max-width:480px){

    #promo-duration{
        display:none;
    }
}

/* ==================================================
   HERO MOBILE FINAL
================================================== */

@media (max-width:768px){

    .hero-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .hero-content h1{
        width:100%;
        text-align:center;
        line-height:.95;
        margin:0 auto;
		padding-left:8px;
		font-size:clamp(2.8rem,11vw,4rem);
    }

    .hero-content p{
        width:100%;
        text-align:center;

        white-space:nowrap;

        margin-top:14px;
    }

    .btn-wrap{

        display:flex;

        justify-content:center;

        gap:16px;

        flex-wrap:nowrap;

        width:100%;
    }

    .btn-wrap .btn{

        margin:0;

        flex:1;

        max-width:145px;
		
		padding:12px 14px;
		
		font-size:.82rem;

        text-align:center;
    }

    .section-title{

        font-size:1.9rem;
    }

}