/* PERUTTAVA 1400 PX -KOKEILU: poista tämän CSS:n ja kokeilu-JS:n HTML-viittaukset. */
.desktop-map-return { display: none; }
@media (min-width: 961px) and (max-width: 1400px) {
  .app-shell { width:100%; max-width:none; margin-inline:auto; grid-template-columns:minmax(0,1fr); grid-template-areas:none; align-content:start; }
  .app-shell > .map-stage, .app-shell > .detail-panel, .app-shell > .comment-section, .app-shell > .share-section { grid-area:auto; grid-column:1; min-width:0; }
  .map-stage { min-height:0; align-content:start; }
  .detail-panel { min-height:0; max-height:none; overflow:visible; border-left:0; border-top:3px solid rgba(23,20,15,.82); scroll-margin-top:16px; padding:24px 32px; }
  body:not(.has-mobile-selection) .map-stage { grid-row:1; }
  body:not(.has-mobile-selection) .detail-panel { grid-row:2; }
  body.has-mobile-selection .map-stage { display:contents; }
  body.has-mobile-selection .topbar { grid-row:1; }
  body.has-mobile-selection .detail-panel { grid-row:2; }
  body.has-mobile-selection .map-wrap { grid-row:3; }
  body.has-mobile-selection .mobile-map-return { grid-row:4; }
  body.has-mobile-selection .comment-section { grid-row:5; }
  body.has-mobile-selection .share-section { grid-row:6; }
  .desktop-map-return { display:inline-block; margin-bottom:20px; }
  .detail-panel > .panel-section, .detail-panel .description, .detail-panel .intro-note { width:100%; max-width:none; }
  .detail-panel:not(.is-intro) > .panel-section:first-of-type:has(> #bandPhotoWrap:not([hidden])) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:32px; align-items:start; }
  .detail-panel > .panel-section:first-of-type > * { grid-column:1; }
  .detail-panel > .panel-section:first-of-type > #bandPhotoWrap { grid-column:2; grid-row:1 / span 6; margin-top:0; }
  .detail-panel .band-photo img { max-height:560px; object-fit:contain; }
  .detail-panel .musician-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}

/* Leveillä näytöillä etusivu säilyy kaksipalstaisena. Valinnan jälkeen
   bändin tai muusikon tiedot tulevat ensin ja kartta niiden alapuolelle. */
@media (min-width: 1401px) {
  body.has-mobile-selection .app-shell { width:100%; max-width:1280px; margin-inline:auto; grid-template-columns:minmax(0,1fr); grid-template-areas:none; align-content:start; }
  body.has-mobile-selection .app-shell > .map-stage, body.has-mobile-selection .app-shell > .detail-panel, body.has-mobile-selection .app-shell > .comment-section, body.has-mobile-selection .app-shell > .share-section { grid-area:auto; grid-column:1; min-width:0; }
  body.has-mobile-selection .map-stage { display:contents; }
  body.has-mobile-selection .topbar { grid-row:1; }
  body.has-mobile-selection .detail-panel { grid-row:2; min-height:0; max-height:none; overflow:visible; border-left:0; border-top:3px solid rgba(23,20,15,.82); scroll-margin-top:16px; padding:24px 32px; }
  body.has-mobile-selection .map-wrap { grid-row:3; }
  body.has-mobile-selection .mobile-map-return { grid-row:4; }
  body.has-mobile-selection .comment-section { grid-row:5; }
  body.has-mobile-selection .share-section { grid-row:6; }
  body.has-mobile-selection .desktop-map-return { display:inline-block; margin-bottom:20px; }
  body.has-mobile-selection .detail-panel .description, body.has-mobile-selection .detail-panel .intro-note { max-width:78ch; }
  body.has-mobile-selection .detail-panel:not(.is-intro) > .panel-section:first-of-type:has(> #bandPhotoWrap:not([hidden])) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:32px; align-items:start; }
  body.has-mobile-selection .detail-panel > .panel-section:first-of-type > * { grid-column:1; }
  body.has-mobile-selection .detail-panel > .panel-section:first-of-type > #bandPhotoWrap { grid-column:2; grid-row:1 / span 6; margin-top:0; }
  body.has-mobile-selection .detail-panel .band-photo img { max-height:560px; object-fit:contain; }
  body.has-mobile-selection .detail-panel .musician-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}