/* Load before the legacy page skins: one card and map-link geometry for lists. */
@layer discovery-list-components {
  @container discovery-results (max-width: 620px) {
    body[data-discovery-list="networks"] .network-provider-card {
      grid-template-columns: 30% minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      min-height: 260px !important;
    }
    body[data-discovery-list="networks"] .network-provider-card__identity { grid-column:1 !important; grid-row:1 / 3 !important; height:auto !important; }
    body[data-discovery-list="networks"] .network-provider-card__main { grid-column:2 !important; grid-row:1 !important; padding:14px 12px 10px !important; }
    body[data-discovery-list="networks"] .network-provider-card__title { font-size:17px !important; line-height:1.3 !important; overflow-wrap:anywhere !important; }
    body[data-discovery-list="networks"] .network-provider-card__location { font-size:13px !important; }
    body[data-discovery-list="networks"] .network-provider-card__rail { grid-column:2 !important; grid-row:2 !important; display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important; gap:10px !important; padding:0 12px 12px !important; }
    body[data-discovery-list="networks"] .discovery-quality-score { grid-column:1 / -1; grid-row:1; justify-self:end; }
    body[data-discovery-list="networks"] .network-provider-card__action { grid-column:1 / -1; grid-row:2; min-height:44px !important; white-space:nowrap !important; }
    body[data-discovery-list="networks"] .network-provider-card__logo .provider-logo-image { padding:12px !important; }
  }
  body[data-discovery-list] {
    --list-surface: var(--q-surface, var(--places-surface, var(--surface, #fff)));
    --list-ink: var(--q-ink, var(--places-ink, var(--text, #151923)));
    --list-muted: var(--q-muted, var(--places-muted, var(--muted, #647084)));
    --list-line: var(--q-line, var(--places-line, var(--line, #e2e5eb)));
  }
  [data-discovery-list] .discovery-list-map-preview {
    position: relative !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 142px !important; min-height: 142px !important;
    margin: 0 0 24px !important; padding: 0 !important; overflow: hidden !important;
    border: 1px solid var(--list-line) !important; border-radius: 12px !important;
    background: #e1ece7 !important; color: var(--list-ink) !important;
    text-decoration: none !important; isolation: isolate;
  }
  [data-discovery-list] .discovery-list-map-preview > img {
    position: absolute !important; width: 256px !important; height: 256px !important;
    max-width: none !important; margin: 0 !important; border-radius: 0 !important;
  }
  [data-discovery-list] .discovery-list-map-preview > span {
    position: relative !important; z-index: 1; padding: 9px 14px !important;
    border-radius: 30px !important; background: var(--list-surface) !important;
    color: var(--list-ink) !important; font: 600 13px/1.4 'DM Sans', sans-serif !important;
  }
  [data-discovery-list] .discovery-list-map-preview > small {
    position: absolute; z-index: 1; right: 2px; bottom: 0;
    background: #fffc; color: #445; font: 400 8px/1.4 sans-serif;
  }
  [data-discovery-list] .discovery-list-map-preview:focus-visible { outline: 3px solid #176cf4; outline-offset: 3px; }
  [data-discovery-list="places"] .discovery-list-sidebar { display: none !important; }
  [data-discovery-list="places"] .places-list-toolbar:empty { display: none !important; }

  /* Booking and venue content differ; their outer card dimensions do not. */
  body[data-discovery-list]:not([data-discovery-list="networks"]) .results-list {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important; gap: 12px !important; min-width: 0 !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important;
    container: q-cards / inline-size !important;
  }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-result-card {
    position: relative !important; display: grid !important;
    grid-template-columns: 38% minmax(0, 1fr) !important; grid-template-rows: auto !important;
    gap: 0 !important; width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 400px !important; max-height: none !important;
    box-sizing: border-box !important; margin: 0 !important; padding: 4px !important;
    border: 1px solid var(--list-line) !important; border-radius: 17px !important;
    background: var(--list-surface) !important; overflow: hidden !important;
  }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-media {
    position: relative !important; grid-column: 1 !important; grid-row: 1 !important;
    align-self: stretch !important; width: 100% !important; height: 100% !important;
    min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
    border-radius: 12px !important; overflow: hidden !important;
  }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-media > img {
    position: absolute !important; inset: 0 !important; display: block !important;
    width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important;
  }
  [data-discovery-list="places"] .hotel-card-media > [aria-label] { padding: 10px !important; text-align: center; white-space: normal !important; overflow-wrap: anywhere; }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-body {
    position: static !important; grid-column: 2 !important; grid-row: 1 !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; gap: 10px !important; min-width: 0 !important;
    height: auto !important; padding: 8px 8px 6px 10px !important;
    background: var(--list-surface) !important; overflow: visible !important;
  }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-title {
    display: block !important; max-height: none !important; -webkit-line-clamp: unset !important;
    margin: 2px 0 4px !important; color: var(--list-ink) !important;
    font: 600 16px/1.25 'DM Sans', sans-serif !important;
    white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important;
  }
  body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-location {
    margin: 4px 0 !important; color: var(--list-muted) !important;
    font: 400 12px/1.4 'DM Sans', sans-serif !important; white-space: normal !important;
  }
  body[data-discovery-list="places"] .hotel-card-booking {
    flex-direction: column !important; align-items: flex-end !important; margin-top: auto !important;
  }
  body[data-discovery-list="places"] .hotel-availability-btn {
    width: auto !important; min-width: 0 !important; min-height: 36px !important;
    padding: 8px 12px !important; font: 600 11px/1.3 'DM Sans', sans-serif !important;
  }
  @container q-cards (min-width: 350px) {
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-result-card { min-height: 364px !important; }
  }
  @container q-cards (min-width: 480px) {
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-result-card { min-height: 336px !important; }
  }
  @container q-cards (min-width: 700px) {
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-result-card { grid-template-columns: 200px minmax(0,1fr) !important; min-height: 286px !important; padding: 0 !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-media { border-radius: 0 !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-body { display: grid !important; grid-template-columns: minmax(0,1fr) 200px !important; grid-template-rows: auto 1fr !important; padding: 14px 14px 12px 16px !important; gap: 12px !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-main { grid-column: 1 !important; grid-row: 1 / 3 !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-title { font-size: 18px !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-location { font-size: 14px !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-review-summary { grid-column: 2 !important; grid-row: 1 !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .hotel-card-booking { grid-column: 2 !important; grid-row: 2 !important; align-self: end !important; }
  }
  @media (min-width: 1100px) {
    [data-discovery-list="places"] :is(.nav-global,.nav-inner) { min-height: 84px !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .page-wrap > .container { max-width: 1200px !important; padding: 36px 12px 60px !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .results-layout { display: grid !important; grid-template-columns: 288px minmax(0,1fr) !important; gap: 24px !important; align-items: start !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .results-layout > section { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; }
    [data-discovery-list="places"] .discovery-list-sidebar { display: block !important; min-width: 0; }
    [data-discovery-list="places"] .places-list-toolbar { display: none !important; }
    [data-discovery-list="places"] .results-head-main { min-height: 40px !important; margin-bottom: 12px !important; }
    [data-discovery-list="places"] .results-head-main h1 { font: 700 16px/1.35 'DM Sans', sans-serif !important; }
  }
  /* Keep the Networks filter as a direct child for its existing responsive sheet. */
  @media (min-width: 761px) {
    [data-discovery-list="networks"] .results-layout { grid-template-columns: 288px minmax(0,1fr) !important; grid-template-rows: 142px auto !important; gap: 24px !important; }
    [data-discovery-list="networks"] .results-layout > .discovery-list-map-preview { grid-column: 1 !important; grid-row: 1 !important; margin-bottom: 0 !important; }
    [data-discovery-list="networks"] #networkFilters { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; }
    [data-discovery-list="networks"] #networkFilters .filters-body { grid-template-columns: minmax(0, 1fr) !important; }
    [data-discovery-list="networks"] .results-layout > section { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  }
  @media (max-width: 760px) {
    [data-discovery-list="networks"] .discovery-list-map-preview { display: none !important; }
  }
  @media (max-width: 1099px) {
    [data-discovery-list="stays"] .discovery-list-map-preview { display: none !important; }
    body[data-discovery-list]:not([data-discovery-list="networks"]) .page-wrap > .container { padding-inline: 12px !important; }
  }
}