/* =========================================================
   AmaeRilde – Base UI
   ========================================================= */

/* Root & Reset */
:root{
    --bg:#0b0b0f; --ink:#f7f7fb; --muted:#b7b9c1; --accent:#71d1ff;
    --card:#14141b; --line:#232330
  }
  *{ box-sizing:border-box }
  html,body{
    margin:0; padding:0; background:var(--bg); color:var(--ink);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
  }
  a{ color:var(--accent); text-decoration:none }
  a:hover{ text-decoration:underline }
  img{ max-width:100%; height:auto }
  
  .wrap{ max-width:1100px; margin:0 auto; padding:20px }
  
  /* =========================================================
     Header
     ========================================================= */
  header{
    position:sticky; top:0; z-index:20;
    background:rgba(11,11,15,.85);
    backdrop-filter:saturate(140%) blur(6px);
    border-bottom:1px solid var(--line)
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:16px }
  .brand{ display:flex; align-items:center; gap:10px }
  .brand img{ display:block; height:auto }
  .brand-logo{ max-width:220px; height:45px; width:auto }
  @media (max-width:580px){ .brand-logo{ height:35px } }
  
  .menu{ display:flex; gap:16px }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 16px; border-radius:12px; border:1px solid var(--line);
    background:var(--card); color:var(--ink); font-weight:600
  }
  .btn:hover{ transform:translateY(-1px) }
  .btn.primary{ background:linear-gradient(135deg,#5ed0ff,#a7f3d0); color:#0b0b0f; border:none }
  
  /* =========================================================
     Hero & Cards
     ========================================================= */
  .hero{
    display:grid; grid-template-columns:1.2fr 1fr; gap:24px;
    align-items:stretch; padding:32px 0
  }
  .hero-card{
    background:
      linear-gradient(180deg,rgba(20,20,27,.6),rgba(20,20,27,.4)),
      url('/assets/img/og-cover.jpg') center/cover no-repeat;
    border:1px solid var(--line); border-radius:20px; min-height:340px;
    display:flex; flex-direction:column; justify-content:flex-end; padding:20px
  }
  .pill{
    display:inline-block; padding:6px 10px; border:1px solid var(--line);
    border-radius:999px; color:var(--muted); font-size:12px;
    text-transform:uppercase; letter-spacing:.12em
  }
  h1{ margin:8px 0 6px; font-size:40px }
  .sub{ color:var(--muted) }
  .cta{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
  
  section{ margin:28px 0 }
  .card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px }
  
  /* BIO‑kortet i hero */
  .hero > .card{
    min-height:340px; display:flex; flex-direction:column; justify-content:center;
    padding:16px
  }
  .hero > .card h4{ margin:0 0 8px }
  .hero > .card p{ margin:0 0 .6rem; line-height:1.45 }
  .hero > .card p:last-of-type{ margin-bottom:0 }
  
  /* =========================================================
     Grids & Lists
     ========================================================= */
  .grid{ display:grid; gap:16px }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr) }
  
  .disc-item{ display:flex; gap:14px; align-items:center }
  .disc-item img{
    width:72px; height:72px; border-radius:12px; object-fit:cover; border:1px solid var(--line)
  }
  .mute{ color:var(--muted); font-size:14px }
  
  /* =========================================================
     INDEX Top-3 – samma höjd som omslaget + länkar i nederkant
     ========================================================= */
     #index-top3 .disc-item{
        display:flex; gap:12px; align-items:flex-start;
        background:var(--card);
        border:1px solid rgba(218,165,32,.8);
        border-radius:20px; padding:14px;
      }
      
      #index-top3 .disc-item img{
        width:84px; height:84px; flex:0 0 84px;
        border-radius:12px; border:1px solid var(--line);
        object-fit:cover; display:block;
      }
      
      /* Gör textkolumnen exakt lika hög som bilden */
      #index-top3 .disc-item .meta{
        flex:1; min-width:0;
        display:grid;
        grid-template-rows:auto auto 1fr auto; /* title, date, spacer, links */
        height:84px;                             /* -> länkar hamnar på samma baslinje som omslaget */
      }
      
      /* Titel 1–2 rader, datum 1 rad */
      #index-top3 .disc-item .title{
        margin:0 0 .25rem; font-weight:700; line-height:1.2;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      }
      #index-top3 .disc-item .date{ color:var(--muted); font-size:13px; margin:0 }
      
      /* Länkar – nederkant alltid. Desktop: en rad; Mobil: får bryta/komprimeras */
      #index-top3 .disc-item .links{
        margin:0; align-self:end; line-height:1;
      }
/* Skapa separator via CSS – smalare än " · " i HTML */
#index-top3 .disc-item .meta .links a + a::before{
    content:"·";
    margin:0 4px;        /* kontrollerad luft */
    color:var(--muted);
  }  
  
  /* =========================================================
     Spotlight (index)
     ========================================================= */
  .spotlight-card{ display:grid; gap:12px }
  
  .spotlight-media{
    position:relative; border-radius:20px; overflow:hidden;
    border:1px solid var(--line)
  }
  .spotlight-media picture,
  .spotlight-media img{ display:block; width:100%; height:auto }
  
  .spotlight-overlay{
    position:absolute; left:0; right:0; bottom:0;
    padding:16px; display:flex; flex-direction:column; gap:8px;
    background:linear-gradient(180deg,rgba(11,11,15,0) 0%, rgba(11,11,15,.65) 55%, rgba(11,11,15,.85) 100%)
  }
  .spotlight-overlay .pill{ align-self:flex-start }
  .spotlight-overlay h3{ margin:0; font-size:22px; line-height:1.2 }
  .spotlight-overlay p{ margin:0; color:var(--muted) }
  .spotlight-overlay .cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
  
  .spotlight-summary{ margin-top:6px }
  @media (min-width:900px){ .spotlight-overlay h3{ font-size:26px } }
  
  /* =========================================================
     Nyheter
     ========================================================= */
  .news-hero{ display:grid; gap:16px }
  @media (min-width:900px){ .news-hero{ grid-template-columns:2fr 1fr } }
  
  .news-list{ display:grid; gap:16px }
  .news-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px }
  .news-card h3{ margin:0 0 6px }
  .news-card .sub{ color:var(--muted); margin:0 0 10px }
  .news-card .more{ margin-top:10px }
  
  /* Bilder */
  .news-feature .hero-img{
    display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line);
    aspect-ratio:16/9; object-fit:cover
  }
/* Nyheter – runda hörn på alla kortbilder i listorna */
.news-list img,
.news-flow img,
.news-card img,
.news-card .thumb{
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
  object-fit:cover;
}

  .news-list img {
    border-radius: 12px;
    border: 1px solid var(--line);
    display: block;
    object-fit: cover;
  }  
  /* Högerkolumn */
  .news-aside{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px }
  
  /* Utility i nyheter */
  .pad{ padding:12px 0 0 }
  
  /* Flödet under heron – två kolumner på desktop */
  .news-flow{ display:grid; gap:16px }
  @media (min-width:900px){ .news-flow{ grid-template-columns:1fr 1fr; align-items:start } }
  
  /* =========================================================
     Musik (musik.html) — CARD LAYOUT (fixad)
     ========================================================= */
  .page-musik main h1{ margin:20px 0 6px }
  .page-musik .sub{ color:var(--muted) }
  
  .page-musik .grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
  .page-musik .card{
    background:var(--card); border:1px solid var(--line); border-radius:20px;
    padding:14px; display:flex; gap:12px
  }
  
  /* Lås bildkolumnen (länk → picture → img) */
  .page-musik .card > a{ flex:0 0 84px; display:block }
  .page-musik .card > a picture{ width:84px; height:84px; display:block }
  .page-musik .card > a img{
    width:84px; height:84px; object-fit:cover;
    border-radius:12px; border:1px solid var(--line);
    max-width:none
  }
  
  /* Textkolumn */
  .page-musik .meta{ flex:1; display:flex; flex-direction:column; min-width:0 }
  .page-musik .title{
    font-weight:700; line-height:1.2; margin:0 0 .25rem; color:inherit; text-decoration:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden
  }
  .page-musik .title:hover{ text-decoration:underline }
  .page-musik .muted{ color:var(--muted); font-size:13px; margin:0 0 .5rem }
  .page-musik .links{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap }
  
  /* Musik – grid-responsiv */
  @media (max-width:900px){ .page-musik .grid{ grid-template-columns:1fr 1fr } }
  @media (max-width:580px){ .page-musik .grid{ grid-template-columns:1fr } }
  
  /* Titlar: desktop fri radbrytning, mobil klipp till 2 rader */
  @media (min-width:901px){
    .page-musik .title{
      display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset;
      overflow:visible; overflow-wrap:anywhere; word-break:break-word
    }
  }
  @media (max-width:900px){
    .page-musik .title{
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden
    }
  }
  
  /* =========================================================
     Footer
     ========================================================= */
  footer{ border-top:1px solid var(--line); padding:24px 0; margin-top:40px; color:var(--muted) }
  
  /* =========================================================
     Global responsive tweaks
     ========================================================= */
  @media (max-width:900px){
    .hero{ grid-template-columns:1fr }
    .grid.cols-3{ grid-template-columns:1fr 1fr }
    .hero > .card{ min-height:auto; justify-content:flex-start }
  }
  @media (max-width:580px){
    .grid.cols-3{ grid-template-columns:1fr }
  }
  
  /* Header – mobil: stapla logga överst, meny under (horisontell scroll) */
  @media (max-width:700px){
    .nav{ flex-direction:column; align-items:flex-start; gap:8px }
    .menu{
      width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
      gap:12px; flex-wrap:nowrap; scrollbar-width:none
    }
    .menu::-webkit-scrollbar{ display:none }
    .menu .btn{ flex:0 0 auto; padding:10px 14px; font-size:15px }
  }
  
  /* =========================================================
     Utilities
     ========================================================= */
  .hide{ display:none }
  .visually-hidden{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
  }

/* =======================
   RELEASE — CLEAN & FINAL
   ======================= */

/* --- Bas-variabler (desktop) --- */
:root{
    --cover-size: 900px;   /* bildens kvadrat i hero (desktop) */
    --hero-pad: 80px;      /* ramen runt bilden (desktop) */
    --list-top: 16px;      /* tracklist topp-offset */
    --list-side: 16px;     /* tracklist sidoinset i bilden */
    --track-scale: 1.6;    /* ~60% större tracklist på desktop */
    --back-gap: 8px;       /* desktop: liten luft under bilden för back-raden */
  }
  
  /* --- HERO-kortet (desktop default) --- */
  .page-release .release-hero{
    position:relative;
    max-width:1200px;
    margin:0 auto 14px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--card);
    overflow:hidden;                 /* klipp allt i rundade hörn */
    padding:var(--hero-pad);
    display:flex; flex-direction:column;
  }
  
  /* COVER – centrerad kvadrat */
  .page-release .release-cover{
    position:relative; margin:0 auto;
    width:100%; max-width:var(--cover-size);
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  }
  .page-release .release-cover picture{ display:block; width:100%; height:auto; border-radius:20px; overflow:hidden }
  .page-release .release-cover img{ display:block; width:100%; height:auto; border-radius:20px }
  
  /* TRACKLIST – overlay över bilden, “underscore”-beteende */
  .page-release .release-cover .tracklist{
    position:absolute; top:var(--list-top); left:50%; transform:translateX(-50%);
    width:min(calc(100% - (2*var(--list-side))), calc(var(--cover-size) - (2*var(--list-side))));
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:max-content 1fr auto; row-gap:8px;
    font-size:calc(1rem * var(--track-scale));
  }
  .page-release .release-cover .tracklist li{ display:contents }
  .page-release .release-cover .tracklist .t{
    grid-column:1; display:block; width:100%;
    padding:6px 12px; border-radius:10px;
    background:rgba(11,11,15,.65); box-shadow:0 6px 14px rgba(0,0,0,.35);
    color:var(--ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .page-release .release-cover .tracklist .d{
    grid-column:3; justify-self:end;
    display:inline-block; padding:6px 12px;
    border-radius:999px; border:1px solid var(--line);
    background:rgba(20,20,27,.85); color:var(--ink);
    text-decoration:none; font-weight:700; font-variant-numeric:tabular-nums;
  }
  
  /* BACK (desktop) – under bilden, inne i heron (påverkar inte layoutens höjd) */
  .page-release .release-back{
    position:absolute; left:50%; transform:translateX(-50%);
    top: calc(var(--hero-pad) + var(--cover-size) + var(--back-gap));
    width:min(var(--cover-size), calc(100% - (2 * var(--hero-pad))));
    display:flex; align-items:center; gap:10px;
    margin:0; padding:0; border:0; background:transparent; white-space:nowrap; z-index:2;
  }
  .page-release .release-back a,
  .page-release .release-back .hint{
    padding:4px 6px; line-height:1; border:1px solid var(--line); border-radius:999px;
  }
  .page-release .release-back a{ background:var(--card); color:var(--ink); font-weight:600; font-size:12px }
  .page-release .release-back .hint{
    background:rgba(20,20,27,.65); color:var(--muted); font-size:12px;
    max-width:60vw; overflow:hidden; text-overflow:ellipsis
  }
  
  /* =========================================================
   TRACK NOTES (Album & Singlar) – shared component
   ========================================================= */
.release-notes .intro { margin-bottom:16px; line-height:1.6 }
.release-notes h3 { margin:50px 0 6px; font-size:1.15rem }

.track-notes { list-style:none; padding:0; margin:10px 0 0 }
.track-notes li {
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0;
  background:rgba(255,255,255,.03)
}

.track-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap }

.badge{
  display:inline-block; min-width:28px; text-align:center; font-weight:700;
  border-radius:999px; padding:2px 10px; font-size:.85rem;
  background:linear-gradient(135deg,#6ee7ff,#a78bfa); color:#0a0a0a
}

.title{ font-weight:700 }
.title[data-c="blue"]{ color:#8dd3ff } /* aktiv färg för denna sida */

.track-desc{ margin:6px 0 0; line-height:1.55; color:#d9d9d9 }

@media (max-width:640px){
  .release-notes h2{ font-size:1.25rem }
  .track-desc{ font-size:.95rem }
}

/* ============================
   RELEASE – MOBIL (≤700px)
   ============================ */
   @media (max-width:700px){
    .page-release{
      --hero-pad: 0px;
      --back-gap: 0px;
      --list-top: 12px;
      --list-side: 12px;
      --track-scale: 1.0;
    }
  
    /* Hero: ingen grå låda, ingen border, inga konstiga spill */
    .page-release .release-hero{
      position:relative;
      padding:0;
      margin:0;
      border:none;
      border-radius:0;
      background:transparent;         /* bort med grått */
      overflow:visible;
    }
  
    /* Bilden = rundning */
    .page-release .release-cover{ max-width:100%; aspect-ratio:auto; border-radius:20px; overflow:hidden }
    .page-release .release-cover picture,
    .page-release .release-cover img{ display:block; width:100%; height:auto; border-radius:20px }
  
    /* Tracklist kompakt */
    .page-release .release-cover .tracklist{
      top:10px; left:50%; transform:translateX(-50%);
      width:calc(100% - 12px);
      font-size:0.62rem; row-gap:4px;
      grid-template-columns:max-content 1fr auto;
    }
    .page-release .release-cover .tracklist .t{
      padding:2px 6px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.25); line-height:1.1;
    }
    .page-release .release-cover .tracklist .d{
      padding:2px 6px; line-height:1.1; display:inline-flex; align-items:center;
      border-width:1px; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
  
    /* Raden under bilden: back + text (utan ellipsis-klipp) */
    .page-release .release-back{
      position:static;
      display:flex; align-items:center; gap:8px;
      margin:8px 2px 0; padding:0 2px; background:transparent;
    }
    .page-release .release-back a{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 10px; font-size:13px; line-height:1;
      border-radius:999px; border:1px solid var(--line);
      background:rgba(20,20,27,.9); text-decoration:none;
    }
    .page-release .release-back .hint{
      padding:4px 0; font-size:13px; color:var(--muted);
      /* VIKTIGT: neutralisera desktop-beteende */
      max-width:none; overflow:visible; text-overflow:clip; white-space:normal;
      flex:1;                                    /* låt texten ta resten av raden */
      background:transparent; border:none;
    }
  
    /* Sista barnet i heron ska inte skapa extra luft */
    .page-release .release-hero > *:last-child{ margin-bottom:0 }
  }
  @media (max-width:700px){
    .page-release .release-back{
      position: static;
      left: auto;           /* nollställ desktop */
      top: auto;            /* nollställ desktop */
      transform: none;      /* <- den här var boven */
      width: 100%;          /* sträck ut raden */
      white-space: normal;  /* låt texten bryta */
      overflow: visible;    /* extra säkerhet */
      margin: 8px 0 0;
      padding: 0 8px;       /* lite sidluft */
      z-index: 3;
    }
  
    .page-release .release-back .hint{
      flex: 1;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }
  
/* RELEASE NOTES — färg & badge (alla skärmar) */
.release-notes .track-head .badge{
  display:inline-block; min-width:28px; padding:2px 10px;
  font-weight:700; border-radius:999px;
  background:linear-gradient(135deg,#6ee7ff,#a78bfa);
  color:#0a0a0a; flex:0 0 auto;
}
.release-notes .track-head .title{ font-weight:700 }
.release-notes .track-head .title[data-c="blue"]{ color:#8dd3ff }

/* MOBIL — håll ihop badge + titel på samma rad */
@media (max-width:700px){
  .release-notes .track-head{
    display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  }
  .release-notes .track-head .badge{ flex:0 0 auto }
  .release-notes .track-head .title{
    flex:1 1 auto; min-width:0; overflow-wrap:break-word;
  }
}

    /* Om du fortfarande ser grå yta under: */
    .page-release .release-hero{ background: transparent !important; border: none !important; }
  }