/*
  ALIVO Desktop Responsive v1 — 2026-10-11
  Optional desktop-only layout extension for the phone-master source snapshot.
  Does not modify application routing, scroll memory, API, or mobile layout.
  Enabled on desktop viewports from 1024px; narrower widths inherit ALIVO styles.
*/

@media screen and (min-width: 1024px) {
  /* Header and page shells use the same fluid horizontal rhythm. */
  .market-header .market-header-inner {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: 1680px !important;
    padding: 10px 0 !important;
    margin-inline: auto !important;
  }

  #app > .wrap:is(
    .home-modern,
    .favorites-page,
    .listing-page,
    .account-wow,
    .admin-dashboard-wow,
    .admin-support-wow,
    .admin-settings-wow,
    .admin-owner-wow,
    .admin-business-screen,
    .alivo-marketing,
    .business-page,
    .public-profile-page,
    .chats-modern-page
  ) {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: 1680px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Main page: make the hero and category/listing sections fill the desktop. */
  #app > .wrap.home-modern {
    padding-top: 24px !important;
  }

  .home-modern .home-hero {
    padding: clamp(24px, 2.4vw, 40px) !important;
  }

  .home-modern .home-hero h1 {
    font-size: clamp(31px, 2.45vw, 42px) !important;
  }

  .home-modern .home-section {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: clamp(20px, 1.7vw, 30px) !important;
  }

  .home-modern .home-category-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: clamp(10px, 0.9vw, 16px) !important;
  }

  .home-modern .home-category {
    min-width: 0 !important;
    width: auto !important;
  }

  .home-modern .home-category-icon {
    height: clamp(115px, 9vw, 164px) !important;
  }

  .home-modern .home-category-name {
    min-height: 48px !important;
    padding: 12px 12px 14px !important;
  }

  .home-modern .home-listings-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.15vw, 22px) !important;
  }

  .home-modern .home-listings-grid .market-listing-card,
  .favorites-page .favorites-grid > * {
    min-width: 0 !important;
  }

  .home-modern .home-listings-grid .market-card-photo,
  .favorites-page .market-listing-card .market-card-photo {
    height: clamp(190px, 17vw, 255px) !important;
    min-height: 0 !important;
  }

  .favorites-page .favorites-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.15vw, 22px) !important;
  }

  /* Listing detail: readable sidebar and controlled photo height on wide PCs. */
  .listing-page .listing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
    column-gap: clamp(22px, 2vw, 34px) !important;
  }

  .listing-page .listing-photo-stage {
    aspect-ratio: auto !important;
    height: clamp(440px, 40vw, 660px) !important;
  }

  /* Account listings remain legible instead of creating one huge column. */
  .account-wow .account-listings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .account-wow .account-listing-card {
    min-width: 0 !important;
  }

  /* Creation/editor keeps its two-column form, with more working room. */
  #app > .wrap.listing-editor {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }

  /* Marketing metrics and dashboard tiles already use grids; wider shells
     let these native layouts grow without changing their functionality. */
  .alivo-marketing .alivo-marketing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .admin-dashboard-wow > .panel > .grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  }
}

@media screen and (min-width: 1380px) {
  .home-modern .home-listings-grid,
  .favorites-page .favorites-grid,
  .public-profile-page .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .account-wow .account-listings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1780px) {
  .home-modern .home-listings-grid,
  .favorites-page .favorites-grid,
  .public-profile-page .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}