/* ==========================================================================
   AIOS MUSIC — SAVED COLLECTIONS LANDSCAPE COMPONENT V1

   Scope:
     .saved-collections only

   Existing Saved Collections renderer remains authoritative for:
     - saved album identity
     - View Details
     - Open Playlist
     - Remove Saved / Save state
     - local-browser persistence

   This file owns presentation only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SAVED COLLECTIONS SHELL
   -------------------------------------------------------------------------- */

.saved-collections {
  box-sizing: border-box !important;

  min-width: 0 !important;

  overflow: hidden !important;
}


/* --------------------------------------------------------------------------
   SAVED COLLECTION GRID
   -------------------------------------------------------------------------- */

.saved-collections__grid {
  display: grid !important;

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

  gap: 14px !important;

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

  align-items: stretch !important;
}


/* --------------------------------------------------------------------------
   LANDSCAPE SAVED COLLECTION BOX
   -------------------------------------------------------------------------- */

.saved-collections
.saved-collection-card {
  display: grid !important;

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

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

  width: 100% !important;

  min-width: 0 !important;

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

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

  overflow: hidden !important;

  border-radius: 16px !important;

  box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   ARTWORK — FULL IMAGE / NO CROP
   -------------------------------------------------------------------------- */

.saved-collections
.saved-collection-card__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: 0 !important;

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

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

  overflow: hidden !important;

  aspect-ratio: auto !important;

  box-sizing: border-box !important;
}


.saved-collections
.saved-collection-card__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;

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


/* --------------------------------------------------------------------------
   BODY
   -------------------------------------------------------------------------- */

.saved-collections
.saved-collection-card__body {
  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: 7px !important;

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

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

  max-width: none !important;

  margin: 0 !important;

  padding: 14px 16px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}


.saved-collections
.saved-collection-card__body
> * {
  min-width: 0 !important;
  max-width: 100% !important;

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


.saved-collections
.saved-collection-card
:is(
  h3,
  h4,
  strong,
  p,
  span
) {
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */

.saved-collections
.saved-collection-card__actions {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 6px !important;

  width: 100% !important;

  min-width: 0 !important;

  margin-top: 3px !important;
}


.saved-collections
.saved-collection-card__actions
> * {
  width: auto !important;

  min-width: 0 !important;

  margin: 0 !important;
}


/* --------------------------------------------------------------------------
   LAPTOP / TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

  .saved-collections__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .saved-collections
  .saved-collection-card {
    grid-template-columns:
      minmax(190px, 0.82fr)
      minmax(0, 1.18fr) !important;

    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE — STILL LANDSCAPE
   -------------------------------------------------------------------------- */

@media (max-width: 650px) {

  .saved-collections__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 10px !important;
  }

  .saved-collections
  .saved-collection-card {
    grid-template-columns:
      minmax(132px, 0.82fr)
      minmax(0, 1.18fr) !important;

    width: 100% !important;

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

    border-radius: 14px !important;
  }

  .saved-collections
  .saved-collection-card__body {
    gap: 4px !important;

    padding: 9px 10px !important;
  }

  .saved-collections
  .saved-collection-card__actions {
    gap: 4px !important;

    margin-top: 1px !important;
  }

  .saved-collections
  .saved-collection-card__actions
  :is(
    button,
    a
  ) {
    padding: 6px 7px !important;
  }
}