/* Final desktop header-rail sizing. Kept last so legacy masthead rules cannot hide or overlap it. */
@media (min-width: 1280px) and (max-width: 1550px) {
  .site-header .header-side-promos { display: flex; top: 45px; height: 112px; gap: 6px; }
  .site-header .header-side-promos-left { left: 14px; }
  .site-header .header-side-promos-right { right: 14px; height: 112px; }
  .site-header .header-side-promos-left .header-side-ad { width: 112px; height: 112px; flex-basis: 112px; }
  .site-header .header-info-widget,
  .site-header .header-user-widget { width: 174px; height: 112px; min-height: 112px; }
  .site-header .masthead {
    min-height: 112px;
    grid-template-columns: 178px minmax(290px, 500px) 72px;
    gap: 10px;
    padding-right: 372px;
    padding-left: 250px;
  }
  .site-header .brand { width: 178px; }
  .site-header .brand .podoko-logo { width: 112px; height: 88px; transform: none; }
  .site-header .main-search { width: 100%; transform: none; }
}

/* Match the desktop category rail to the search field and search-button edges. */
@media (min-width: 721px) {
  .site-header .category-nav {
    width: var(--desktop-category-width, min(985px, calc(100% - 56px))) !important;
    max-width: calc(100% - 28px) !important;
    margin-right: 0 !important;
    margin-left: var(--desktop-category-left, auto) !important;
    box-sizing: border-box;
  }
  .site-header .category-primary {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-content: space-between !important;
    gap: clamp(4px, .55vw, 10px) !important;
    box-sizing: border-box;
  }
  .site-header .category-primary > a,
  .site-header .category-primary > .category-more-toggle {
    font-size: clamp(10px, .78vw, 12px) !important;
  }
}

@media (min-width: 721px) and (max-width: 1350px) {
  .site-header .category-primary { gap: 1px !important; }
  .site-header .category-primary > a,
  .site-header .category-primary > .category-more-toggle {
    font-size: 8.5px !important;
    letter-spacing: -.06em;
  }
}

/* Responsive desktop header for reduced browser windows.
   Keep both side rails in their own space and let the center shrink fluidly. */
@media (min-width: 1280px) and (max-width: 1550px) {
  .site-header .header-side-promos-left .header-side-ad {
    width: clamp(96px, 7.25vw, 112px);
    height: clamp(102px, 7.25vw, 112px);
    flex-basis: clamp(96px, 7.25vw, 112px);
  }

  .site-header .header-info-widget,
  .site-header .header-user-widget {
    width: clamp(154px, 11.25vw, 174px);
  }

  .site-header .masthead {
    width: 100%;
    min-width: 0;
    grid-template-columns: clamp(150px, 12vw, 178px) minmax(0, 1fr) 72px;
    padding-right: clamp(326px, 24vw, 372px);
    padding-left: clamp(216px, 18.5vw, 250px);
    box-sizing: border-box;
  }

  .site-header .brand {
    width: 100%;
    min-width: 0;
  }

  .site-header .brand .podoko-logo {
    width: clamp(98px, 8vw, 112px);
    max-width: 100%;
  }

  .site-header .podoko-intro-line {
    width: 100%;
    min-width: 0;
    transform: none;
  }

  .site-header .masthead .main-search {
    width: 100%;
    min-width: 0;
    transform: translateY(-14px);
  }

  .site-header .masthead .post-button {
    min-width: 0;
  }
}

/* Final detail-media override: preserve complete originals, including tall images. */
.post-media-detail {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
}

.post-media-detail .media-item.media-image {
  overflow: visible;
  min-height: 0;
  background: transparent;
}

.post-media-detail .media-item.media-image img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: top center;
}

/* Massage detail images keep their intrinsic size and only shrink when the panel is narrower. */
.massage-detail-card .post-media-detail .media-item.media-image img {
  width: auto !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* Definitive collision-free desktop header layout.
   Side rails participate in grid layout, so center controls can never overlap them. */
@media (min-width: 1280px) {
  .site-header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
  }

  .site-header .utility {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .site-header .header-side-promos {
    position: static;
    top: auto;
    align-self: start;
  }

  .site-header .header-side-promos-left {
    grid-column: 1;
    grid-row: 2 / 4;
    margin: 0 10px 0 14px;
  }

  .site-header .header-side-promos-right {
    grid-column: 3;
    grid-row: 2 / 4;
    margin: 0 14px 0 10px;
  }

  .site-header .masthead {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    grid-template-columns: clamp(126px, 11vw, 178px) minmax(0, 1fr) clamp(70px, 5vw, 82px);
    gap: clamp(8px, .8vw, 14px);
    padding: 12px 8px;
    box-sizing: border-box;
  }

  .site-header .brand {
    width: 100%;
    min-width: 0;
  }

  .site-header .brand .podoko-logo {
    width: clamp(98px, 7vw, 122px);
    max-width: 100%;
    transform: none;
  }

  .site-header .podoko-intro-line {
    width: 100%;
    min-width: 0;
    transform: none;
  }

  .site-header .masthead .main-search {
    width: 100%;
    min-width: 0;
    transform: translateY(-14px);
  }

  .site-header .masthead .post-button {
    width: 100%;
    min-width: 0;
  }

  .site-header .category-nav {
    grid-column: 2;
    grid-row: 3;
    width: auto !important;
    max-width: none !important;
    margin: -28px 8px 0 !important;
    padding: 4px calc(clamp(70px, 5vw, 82px) + clamp(8px, .8vw, 14px)) 12px calc(clamp(126px, 11vw, 178px) + clamp(8px, .8vw, 14px)) !important;
    box-sizing: border-box;
  }
}

/* Final detail-page scroll contract: every category detail uses the document scroll. */
html body.listing-detail-open .dashboard.detail-mode .result-panel,
html body.listing-detail-open .dashboard.detail-mode .results,
html body.listing-detail-open .dashboard.detail-mode .detail-card {
  height: auto !important;
  max-height: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* Keep both desktop detail advertisement rails at the same original width. */
@media (min-width: 1051px) {
  html body .dashboard.detail-mode {
    grid-template-columns: 180px minmax(0, 1040px) 180px !important;
  }

  html body .dashboard.detail-mode .detail-side-promos-left,
  html body .dashboard.detail-mode .detail-side-promos-right {
    box-sizing: border-box;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    justify-self: stretch;
  }

  html body .dashboard.detail-mode .detail-side-promos .detail-side-card,
  html body .dashboard.detail-mode .detail-side-promos .managed-promo-content,
  html body .dashboard.detail-mode .detail-side-promos .managed-promo-image {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Massage details can be rendered immediately after the board layout.
     Keep the detail rails visible even if the generic detail class is
     momentarily superseded by the board render cycle. */
  html body.listing-detail-open .dashboard.massage-mode {
    grid-template-columns: 180px minmax(0, 1040px) 180px !important;
    justify-content: center !important;
  }

  html body.listing-detail-open .dashboard.massage-mode > .side-panel,
  html body.listing-detail-open .dashboard.massage-mode > .map-panel,
  html body.listing-detail-open .dashboard.massage-mode .board-result-promos,
  html body.listing-detail-open .dashboard.massage-mode .home-result-promos {
    display: none !important;
  }

  html body.listing-detail-open .dashboard.massage-mode > .detail-side-promos {
    position: sticky;
    top: 14px;
    display: grid !important;
    align-self: start;
    box-sizing: border-box;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    gap: 10px;
  }

  html body.listing-detail-open .dashboard.massage-mode > .detail-side-promos-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.listing-detail-open .dashboard.massage-mode > .result-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  html body.listing-detail-open .dashboard.massage-mode > .detail-side-promos-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}