/* =========================================================
     ANDREAS ESPENES – MUSIKKEN MIN
     3-KOLONNERS UTGIVELSER + YOUTUBE-SPILLELISTE
     Nyeste først
     ========================================================= */

  .ae-releases,
  .ae-releases * {
    box-sizing: border-box;
  }

  .ae-releases {
    --ae-black: #090909;
    --ae-dark: #12100f;
    --ae-brown: #241815;

    --ae-gold: #c39b53;
    --ae-gold-light: #e0be79;
    --ae-gold-dark: #86632d;

    --ae-cream: #f2eae0;
    --ae-text: #cfc5ba;
    --ae-muted: #92867c;

    position: relative;
    left: 50%;

    width: 100vw;
    margin-left: -50vw;

    overflow: hidden;

    color: var(--ae-cream);

    background:
      radial-gradient(
        circle at 8% 15%,
        rgba(195, 155, 83, 0.11),
        transparent 28%
      ),
      radial-gradient(
        circle at 91% 82%,
        rgba(116, 61, 53, 0.14),
        transparent 28%
      ),
      linear-gradient(
        120deg,
        #090909 0%,
        #14110f 48%,
        #211512 100%
      );

    font-family: inherit;
  }


  /* =========================================================
     BAKGRUNNSDEKOR
     ========================================================= */

  .ae-releases::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -330px;
    top: -330px;

    border:
      1px solid rgba(195, 155, 83, 0.07);

    border-radius: 50%;

    box-shadow:
      0 0 0 52px rgba(195, 155, 83, 0.012),
      0 0 0 105px rgba(195, 155, 83, 0.007);

    pointer-events: none;
  }


  /* =========================================================
     INNHOLD
     ========================================================= */

  .ae-releases__inner {
    position: relative;
    z-index: 2;

    width:
      min(1220px, calc(100% - 64px));

    margin: 0 auto;

    padding:
      74px 0 80px;
  }


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

  .ae-releases__header {
    max-width: 820px;

    margin:
      0 auto 42px;

    text-align: center;
  }

  .ae-releases__eyebrow {
    display: inline-flex;

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

    gap: 11px;

    margin:
      0 0 14px !important;

    color:
      var(--ae-gold-light);

    font-size: 14px;
    font-weight: 800;

    letter-spacing:
      0.15em;

    text-transform:
      uppercase;
  }

  .ae-releases__eyebrow::before,
  .ae-releases__eyebrow::after {
    content: "";

    width: 32px;
    height: 1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        var(--ae-gold)
      );
  }

  .ae-releases__eyebrow::after {
    background:
      linear-gradient(
        90deg,
        var(--ae-gold),
        transparent
      );
  }

  .ae-releases__title {
    margin:
      0 0 17px !important;

    color:
      #f4ede5 !important;

    font-size:
      clamp(39px, 4.3vw, 56px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing:
      -0.035em;
  }

  .ae-releases__intro {
    max-width: 720px;

    margin:
      0 auto !important;

    color:
      var(--ae-text);

    font-size: 16px;

    line-height: 1.72;
  }


  /* =========================================================
     3-GRID
     ========================================================= */

  .ae-releases__grid {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 22px;
  }


  /* =========================================================
     UTGIVELSESKORT
     ========================================================= */

  .ae-release {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border:
      1px solid rgba(212, 174, 101, 0.20);

    border-radius: 20px;

    background:
      linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.065),
        rgba(255, 255, 255, 0.022)
      );

    box-shadow:
      0 22px 55px rgba(0, 0, 0, 0.24);

    backdrop-filter:
      blur(5px);

    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

  .ae-release:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(224, 190, 121, 0.43);

    box-shadow:
      0 30px 65px rgba(0, 0, 0, 0.34);
  }


  /* =========================================================
     COVER
     ========================================================= */

  .ae-release__cover-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background: #151311;
  }

  .ae-release__cover {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
      transform 0.45s ease;
  }

  .ae-release:hover
  .ae-release__cover {
    transform:
      scale(1.025);
  }


  /* diskret mørk overgang */

  .ae-release__cover-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        180deg,
        transparent 68%,
        rgba(8, 8, 7, 0.28) 100%
      );

    pointer-events: none;
  }


  /* =========================================================
     TYPE-LABEL
     ========================================================= */

  .ae-release__badge {
    position: absolute;

    z-index: 3;

    left: 16px;
    bottom: 15px;

    padding:
      6px 10px;

    border:
      1px solid rgba(232, 206, 148, 0.24);

    border-radius:
      999px;

    background:
      rgba(9, 9, 9, 0.70);

    color:
      #e7d3a5;

    font-size: 9px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing:
      0.10em;

    text-transform:
      uppercase;

    backdrop-filter:
      blur(6px);
  }


  /* =========================================================
     KORTINNHOLD
     ========================================================= */

  .ae-release__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding:
      23px 22px 22px;
  }

  .ae-release__title {
    margin:
      0 0 5px !important;

    color:
      #f1e9df !important;

    font-size: 21px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing:
      -0.02em;
  }

  .ae-release__artist {
    margin:
      0 0 18px !important;

    color:
      var(--ae-gold-light);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing:
      0.07em;

    text-transform:
      uppercase;
  }


  /* =========================================================
     LÅTLISTE
     ========================================================= */

  .ae-release__tracks {
    display: grid;

    gap: 0;

    margin-bottom: 21px;
  }

  .ae-release__track-head {
    display: grid;

    grid-template-columns:
      36px minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    padding:
      0 0 7px;

    color:
      #8f8378;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing:
      0.09em;

    text-transform:
      uppercase;
  }

  .ae-release__track-head-main {
    display: flex;

    min-width: 0;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
  }

  .ae-release__track-head-streams {
    flex: 0 0 auto;

    color:
      var(--ae-gold-light);

    text-align: right;
  }

  .ae-release__track {
    display: grid;

    grid-template-columns:
      36px minmax(0, 1fr);

    gap: 8px;

    align-items: start;

    padding:
      8px 0;

    border-top:
      1px solid rgba(255, 255, 255, 0.065);

    color:
      #c8bfb5;

    font-size: 12px;

    line-height: 1.45;
  }

  .ae-release__track:first-child {
    border-top: 0;
  }

  .ae-release__track-number {
    color:
      #7f7368;

    font-size: 10px;

    font-weight: 700;

    padding-top: 1px;
  }

  @media (max-width: 600px) {
    .ae-release__track-main {
      align-items: baseline;
      flex-direction: row;
      gap: 8px;
    }
  }


  /* =========================================================
     ALBUM MED MANGE SPOR
     ========================================================= */

  .ae-release__tracks--album {
    max-height: 218px;

    padding-right: 8px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
      rgba(195, 155, 83, 0.42)
      rgba(255, 255, 255, 0.035);
  }

  .ae-release__tracks--album::-webkit-scrollbar {
    width: 5px;
  }

  .ae-release__tracks--album::-webkit-scrollbar-track {
    background:
      rgba(255, 255, 255, 0.025);
  }

  .ae-release__tracks--album::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
      rgba(195, 155, 83, 0.42);
  }


  /* =========================================================
     SPOTIFY-KNAPP
     ========================================================= */

  .ae-release__button {
    display: inline-flex;

    width: 100%;
    min-height: 45px;

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

    gap: 8px;

    margin-top: auto;

    padding:
      10px 16px;

    border:
      1px solid rgba(195, 155, 83, 0.48);

    border-radius:
      999px;

    background:
      rgba(195, 155, 83, 0.07);

    color:
      #efe5d8 !important;

    font-size: 12px;
    font-weight: 800;

    text-decoration:
      none !important;

    transition:
      transform 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }

  .ae-release__button:hover {
    transform:
      translateY(-2px);

    border-color:
      var(--ae-gold);

    background:
      linear-gradient(
        135deg,
        #cfa85e,
        #95702f
      );

    color:
      #120e08 !important;
  }

  .ae-release__button--upcoming {
    cursor: default;

    border-color:
      rgba(224, 190, 121, 0.28);

    background:
      rgba(255, 255, 255, 0.035);

    color:
      #cfc5ba !important;
  }

  .ae-release__button--upcoming:hover {
    transform: none;

    border-color:
      rgba(224, 190, 121, 0.28);

    background:
      rgba(255, 255, 255, 0.035);

    color:
      #cfc5ba !important;
  }


  /* Spotify-symbol */

  .ae-release__spotify-icon {
    display: inline-flex;

    width: 18px;
    height: 18px;

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

    border:
      1px solid currentColor;

    border-radius: 50%;

    font-size: 8px;

    line-height: 1;
  }


  /* =========================================================
     YOUTUBE-DEL
     ========================================================= */

  .ae-youtube {
    position: relative;

    margin-top: 70px;

    padding-top: 58px;

    border-top:
      1px solid rgba(224, 190, 121, 0.14);
  }


  /* =========================================================
     YOUTUBE HEADER
     ========================================================= */

  .ae-youtube__header {
    max-width: 760px;

    margin:
      0 auto 31px;

    text-align:
      center;
  }

  .ae-youtube__eyebrow {
    display: block;

    margin:
      0 0 11px !important;

    color:
      var(--ae-gold-light);

    font-size: 12px;
    font-weight: 800;

    letter-spacing:
      0.14em;

    text-transform:
      uppercase;
  }

  .ae-youtube__title {
    margin:
      0 0 13px !important;

    color:
      #f3ece3 !important;

    font-size:
      clamp(32px, 3.5vw, 44px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing:
      -0.03em;
  }

  .ae-youtube__intro {
    max-width: 650px;

    margin:
      0 auto !important;

    color:
      var(--ae-text);

    font-size: 15px;

    line-height:
      1.65;
  }


  /* =========================================================
     VIDEO-RAMME
     ========================================================= */

  .ae-youtube__frame {
    position: relative;

    max-width: 980px;

    margin: 0 auto;

    padding: 11px;

    overflow: hidden;

    border:
      1px solid rgba(211, 174, 102, 0.28);

    border-radius: 22px;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.018)
      );

    box-shadow:
      0 26px 65px rgba(0, 0, 0, 0.32);
  }

  .ae-youtube__video {
    position: relative;

    overflow: hidden;

    width: 100%;

    aspect-ratio:
      16 / 9;

    border-radius: 14px;

    background: #000;
  }

  .ae-youtube__video iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
  }


  /* =========================================================
     YOUTUBE KNAPP
     ========================================================= */

  .ae-youtube__actions {
    display: flex;

    justify-content: center;

    margin-top: 24px;
  }

  .ae-youtube__button {
    display: inline-flex;

    min-height: 47px;

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

    padding:
      10px 21px;

    border:
      1px solid rgba(221, 187, 116, 0.38);

    border-radius:
      999px;

    background:
      rgba(255, 255, 255, 0.035);

    color:
      #eee4d8 !important;

    font-size: 12px;
    font-weight: 800;

    text-decoration:
      none !important;

    transition:
      transform 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }

  .ae-youtube__button:hover {
    transform:
      translateY(-2px);

    border-color:
      var(--ae-gold);

    background:
      rgba(195, 155, 83, 0.09);
  }


  /* =========================================================
     TABLET
     ========================================================= */

  @media (max-width: 950px) {

    .ae-releases__inner {
      width:
        min(100% - 44px, 800px);

      padding:
        64px 0 70px;
    }

    .ae-releases__grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }
  }


  /* =========================================================
     MOBIL
     ========================================================= */

  @media (max-width: 600px) {

    .ae-releases__inner {
      width:
        calc(100% - 34px);

      padding:
        51px 0 57px;
    }

    .ae-releases__header {
      margin-bottom:
        31px;
    }

    .ae-releases__eyebrow {
      font-size: 11px;
    }

    .ae-releases__eyebrow::before,
    .ae-releases__eyebrow::after {
      width: 20px;
    }

    .ae-releases__title {
      font-size:
        clamp(34px, 10vw, 44px);
    }

    .ae-releases__intro {
      font-size: 15px;
    }

    .ae-releases__grid {
      grid-template-columns:
        1fr;

      gap: 20px;
    }

    .ae-release {
      border-radius:
        18px;
    }

    .ae-release__body {
      padding:
        21px 19px 20px;
    }

    .ae-release__title {
      font-size: 20px;
    }

    .ae-release__tracks--album {
      max-height: 250px;
    }

    .ae-youtube {
      margin-top: 52px;

      padding-top: 45px;
    }

    .ae-youtube__eyebrow {
      font-size: 10px;
    }

    .ae-youtube__title {
      font-size:
        clamp(29px, 9vw, 38px);
    }

    .ae-youtube__frame {
      padding: 7px;

      border-radius: 16px;
    }

    .ae-youtube__video {
      border-radius: 10px;
    }

    .ae-youtube__button {
      width: 100%;
    }
  }



  /* =========================================================
     ARTISTSEKSJONER
     ========================================================= */

  .ae-artist-section + .ae-artist-section {
    margin-top: 76px;
    padding-top: 58px;
    border-top: 1px solid rgba(224, 190, 121, 0.17);
  }

  .ae-artist-section__header {
    max-width: 790px;
    margin: 0 0 31px;
  }

  .ae-artist-section__label {
    margin: 0 0 9px !important;
    color: var(--ae-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .ae-artist-section__title {
    margin: 0 0 11px !important;
    color: var(--ae-cream) !important;
    font-size: clamp(29px, 3.6vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
  }

  .ae-artist-section__intro {
    margin: 0 !important;
    color: var(--ae-text);
    font-size: 15px;
    line-height: 1.72;
  }

  .ae-youtube__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 780px;
    margin: 0 auto;
  }

  .ae-youtube__link-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    border: 1px solid rgba(211, 174, 102, 0.25);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.22);
  }

  .ae-youtube__link-card h3 {
    margin: 0 0 8px !important;
    color: var(--ae-cream) !important;
    font-size: 21px;
  }

  .ae-youtube__link-card p {
    flex: 1;
    margin: 0 0 20px !important;
    color: var(--ae-text);
    font-size: 13px;
    line-height: 1.6;
  }

  .ae-youtube__link-card .ae-youtube__button {
    width: 100%;
    text-align: center;
  }

  @media (max-width: 600px) {
    .ae-artist-section + .ae-artist-section {
      margin-top: 52px;
      padding-top: 45px;
    }

    .ae-youtube__links {
      grid-template-columns: 1fr;
    }
  }



  /* =========================================================
     COVER LABELS – RELEASE TYPE LEFT, RELEASE DATE RIGHT
     The existing badge appearance is shared by both labels.
     ========================================================= */

  .ae-release__cover-labels {
    position: absolute;
    z-index: 3;

    left: 16px;
    right: 16px;
    bottom: 15px;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;
  }

  .ae-release__cover-labels .ae-release__badge {
    position: static;

    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ae-release__cover-labels .ae-release__date {
    flex: 0 0 auto;

    margin-left: auto;

    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }