/* ==========================================================================
   AIOS MUSIC — CATALOG LEAD LANDSCAPE COMPONENT V1

   Strict target:
     #collectionExperience .featured-catalog

   Existing artist-collections.js remains authoritative for:
     - lead collection identity
     - catalog position
     - title / theme / description
     - track count / year
     - View Details
     - Open Playlist

   Presentation only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   OUTER LANDSCAPE LEAD
   -------------------------------------------------------------------------- */

#collectionExperience
.featured-catalog {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    minmax(320px, 0.9fr)
    minmax(0, 1.1fr) !important;

  grid-template-rows:
    minmax(0, 1fr) !important;

  align-items: stretch !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height: 300px !important;
  max-height: 360px !important;

  margin-top: 0 !important;
  margin-bottom: 32px !important;

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  box-sizing: border-box !important;
}


/* Remove legacy child sizing authority without changing DOM. */

#collectionExperience
.featured-catalog
> * {
  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;

  box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   ARTWORK — LEFT / FULL / UNCROPPED
   -------------------------------------------------------------------------- */

#collectionExperience
.featured-catalog__art {
  position: relative !important;

  display: flex !important;

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

  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 300px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  aspect-ratio: auto !important;
}


#collectionExperience
.featured-catalog__art
img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;
}


/* --------------------------------------------------------------------------
   CONTENT — RIGHT
   -------------------------------------------------------------------------- */

#collectionExperience
.featured-catalog__content {
  display: grid !important;

  grid-column: 2 !important;
  grid-row: 1 !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-auto-rows:
    max-content !important;

  align-content: center !important;

  gap: 9px !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding:
    22px 24px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}


#collectionExperience
.featured-catalog__content
> * {
  min-width: 0 !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


#collectionExperience
.featured-catalog__content
:is(
  h2,
  h3,
  h4,
  strong,
  p,
  span
) {
  max-width: 100% !important;

  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   ACTIONS — PRESERVE EXISTING BUTTONS
   -------------------------------------------------------------------------- */

#collectionExperience
.featured-catalog__actions {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 8px !important;

  width: 100% !important;

  min-width: 0 !important;

  margin-top: 4px !important;
}


#collectionExperience
.featured-catalog__actions
> * {
  width: auto !important;

  min-width: 0 !important;

  margin: 0 !important;
}


/* --------------------------------------------------------------------------
   LAPTOP / TABLET — LANDSCAPE REMAINS
   -------------------------------------------------------------------------- */

@media (min-width: 651px) and (max-width: 1100px) {

  #collectionExperience
  .featured-catalog {
    grid-template-columns:
      minmax(270px, 0.84fr)
      minmax(0, 1.16fr) !important;

    min-height: 280px !important;
    max-height: 330px !important;
  }

  #collectionExperience
  .featured-catalog__art {
    min-height: 280px !important;
  }

  #collectionExperience
  .featured-catalog__content {
    padding:
      18px 20px !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE — STILL LANDSCAPE, NOT PORTRAIT STACK
   -------------------------------------------------------------------------- */

@media (max-width: 650px) {

  #collectionExperience
  .featured-catalog {
    grid-template-columns:
      minmax(140px, 0.82fr)
      minmax(0, 1.18fr) !important;

    min-height: 185px !important;
    max-height: 220px !important;

    margin-bottom:
      28px !important;

    border-radius:
      15px !important;
  }

  #collectionExperience
  .featured-catalog__art {
    min-height:
      185px !important;
  }

  #collectionExperience
  .featured-catalog__content {
    gap:
      5px !important;

    padding:
      10px 11px !important;
  }

  #collectionExperience
  .featured-catalog__actions {
    gap:
      5px !important;

    margin-top:
      2px !important;
  }

  #collectionExperience
  .featured-catalog__actions
  :is(
    button,
    a
  ) {
    min-height:
      34px !important;

    padding:
      6px 8px !important;
  }
}

/* ========================================================================== */
/* AIOS MUSIC — CATALOG LEAD MOBILE TRUE-LANDSCAPE AUTHORITY                  */
/* Mobile correction only. Desktop/laptop authorities remain unchanged.       */
/* ========================================================================== */

@media (max-width: 650px) {

  #collectionExperience
  .featured-catalog {
    grid-template-columns:
      minmax(130px, 0.76fr)
      minmax(0, 1.24fr) !important;

    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;

    overflow: hidden !important;
  }


  #collectionExperience
  .featured-catalog__art {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }


  #collectionExperience
  .featured-catalog__art img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  #collectionExperience
  .featured-catalog__content {
    height: 178px !important;
    min-height: 0 !important;
    max-height: 178px !important;

    align-content: center !important;

    gap: 3px !important;

    padding:
      7px 9px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;

    scrollbar-width: thin;
  }


  /*
   * Compact typography only inside Catalog Lead mobile.
   * Content remains present; nothing is deleted from the renderer.
   */

  #collectionExperience
  .featured-catalog__content
  :is(
    p,
    span,
    small
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    font-size:
      0.72rem !important;

    line-height:
      1.28 !important;
  }


  #collectionExperience
  .featured-catalog__content
  :is(
    h3,
    h4,
    strong
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    line-height:
      1.12 !important;
  }


  #collectionExperience
  .featured-catalog__actions {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;

    margin-top:
      3px !important;
  }


  #collectionExperience
  .featured-catalog__actions
  :is(
    button,
    a
  ) {
    width: 100% !important;

    min-height: 30px !important;

    padding:
      5px 6px !important;

    font-size:
      0.72rem !important;

    line-height:
      1.1 !important;
  }
}

/* ========================================================================== */
/* AIOS MUSIC — CATALOG LEAD MOBILE TRUE-LANDSCAPE AUTHORITY                  */
/* Mobile correction only. Desktop/laptop authorities remain unchanged.       */
/* ========================================================================== */

@media (max-width: 650px) {

  #collectionExperience
  .featured-catalog {
    grid-template-columns:
      minmax(130px, 0.76fr)
      minmax(0, 1.24fr) !important;

    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;

    overflow: hidden !important;
  }


  #collectionExperience
  .featured-catalog__art {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }


  #collectionExperience
  .featured-catalog__art img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  #collectionExperience
  .featured-catalog__content {
    height: 178px !important;
    min-height: 0 !important;
    max-height: 178px !important;

    align-content: center !important;

    gap: 3px !important;

    padding:
      7px 9px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;

    scrollbar-width: thin;
  }


  /*
   * Compact typography only inside Catalog Lead mobile.
   * Content remains present; nothing is deleted from the renderer.
   */

  #collectionExperience
  .featured-catalog__content
  :is(
    p,
    span,
    small
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    font-size:
      0.72rem !important;

    line-height:
      1.28 !important;
  }


  #collectionExperience
  .featured-catalog__content
  :is(
    h3,
    h4,
    strong
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    line-height:
      1.12 !important;
  }


  #collectionExperience
  .featured-catalog__actions {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;

    margin-top:
      3px !important;
  }


  #collectionExperience
  .featured-catalog__actions
  :is(
    button,
    a
  ) {
    width: 100% !important;

    min-height: 30px !important;

    padding:
      5px 6px !important;

    font-size:
      0.72rem !important;

    line-height:
      1.1 !important;
  }
}

/* ==========================================================================
   AIOS MUSIC — FEATURED CATALOG MOBILE LANDSCAPE FINAL
   Replaces the old 180px two-column mobile card.
   ========================================================================== */

@media (max-width:650px) {

  #collectionExperience .featured-catalog {
    display:flex !important;
    flex-direction:column !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:0 !important;

    overflow:hidden !important;
  }


  /* Full-width landscape artwork */

  #collectionExperience .featured-catalog__art {
    display:block !important;

    width:100% !important;
    height:auto !important;

    min-width:100% !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:none !important;

    aspect-ratio:16 / 9 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    flex:0 0 auto !important;
  }


  #collectionExperience .featured-catalog__art img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;
  }


  /* Information beneath artwork */

  #collectionExperience .featured-catalog__body,
  #collectionExperience .featured-catalog__content {
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:16px 18px 20px !important;

    overflow:visible !important;
  }


  #collectionExperience .featured-catalog__actions {
    display:grid !important;
    grid-template-columns:1fr !important;

    width:100% !important;

    gap:10px !important;

    margin-top:14px !important;
  }


  #collectionExperience .featured-catalog__actions > * {
    width:100% !important;
  }
}