/*
 * Shared responsive guardrails.  This file deliberately comes last: the site
 * has accumulated page-specific desktop treatments, and these rules keep
 * those treatments from retaining a wide-screen minimum at smaller CSS
 * viewports (including those produced by browser zoom).
 */

html body :is(.content-shell, .page-intro-panel, .ranking-layout,
  .ranking-sidebar-column, .ranking-main-column, .explore-page, .profile-page,
  .hero, .section-header, .podcast-detail-sheet, .podcast-detail-sheet__body,
  .podcast-detail-sheet__content, .podcast-detail-sheet__main,
  .podcast-detail-sheet__related, .podcast-detail-sheet__episodes) {
  min-width: 0;
}

html body :is(.podcast-grid, .recent-grid, .explore-grid, .explore-genre-grid,
  .profile-grid, .profile-list-dialog__list, .podcast-detail-sheet__related-list) > * {
  min-width: 0;
}

html body :is(.desktop-header-search__input, .desktop-user-button__copy,
  .desktop-user-button__label, .desktop-user-button__meta, .site-nav,
  .section-header > *, .podcast-detail-sheet__header-copy,
  .podcast-detail-sheet__episode-copy, .podcast-detail-sheet__related-copy) {
  min-width: 0;
}

/* Cards retain a useful reading width instead of squeezing into four or five
 * columns as a desktop viewport narrows. */
@media (min-width: 769px) {
  html body .podcast-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  }

  html body .recent-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)) !important;
  }

  html body :is(.explore-grid, .explore-genre-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
  }

  html body .podcast-detail-sheet__related-card {
    flex: 0 0 clamp(150px, 19vw, 205px) !important;
    min-width: 0 !important;
  }
}

/* Compact desktop safeguards for content outside the header. */
@media (min-width: 901px) and (max-width: 1280px) {
  html body.page-ranglister .ranking-layout {
    grid-template-columns: minmax(210px, 25%) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.5vw, 32px) !important;
  }

  html body.page-ranglister .ranking-sidebar-column {
    width: auto !important;
    min-width: 0 !important;
  }

  html body.page-ranglister .ranking-filter-panel {
    padding: clamp(16px, 2vw, 24px) !important;
  }

  html body.page-ranglister .genre-chips {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.page-ranglister .genre-chip[data-genre="Underholdning"] {
    grid-column: auto !important;
  }

  html body :is(.section-header, .ranking-toolbar, .podcast-detail-sheet__episodes-head) {
    gap: 12px !important;
  }
}

/* The only intermediate header layout: reuse the compact search button so
 * every control stays in one row until the full desktop grid takes over. */
@media (min-width: 901px) and (max-width: 1299.59px) {
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar {
    grid-template-columns: minmax(0, 1fr) max-content 42px minmax(168px, 250px) !important;
    grid-template-areas: "brand nav search account" !important;
    grid-template-rows: 76px !important;
    column-gap: clamp(10px, 1.5vw, 18px) !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .sidebar-logo {
    grid-area: brand !important;
    min-width: 0 !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .site-nav {
    grid-area: nav !important;
    justify-self: center !important;
    width: max-content !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: clamp(9px, 1.5vw, 18px) !important;
    white-space: nowrap !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .site-nav__link {
    min-height: 76px !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .site-nav__link::after {
    bottom: 11px !important;
    height: 2px !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopUserButton {
    grid-area: account !important;
    min-width: 0 !important;
    width: min(100%, 250px) !important;
    justify-self: end !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch {
    display: none !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch.is-mobile-open {
    display: grid !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #mobileHeaderSearchButton {
    grid-area: search !important;
    position: static !important;
    z-index: auto !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    justify-self: center !important;
  }

  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #mobileHeaderSearchButton svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}