/* JSV mobile Groups presentation.
 * The shared mobile frame owns outer gutters. This sheet only adjusts the
 * discovery hero and named group-detail rows; swipe cards and chat stay intact.
 */
@media (max-width:900px) {
  html body .jsgl-page .jsgl-hero {
    --jsv-groups-art-height:200px;
    position:relative!important;
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate;
    border-radius:14px!important;
    background-color:#0d3558!important;
  }

  /* Keep the existing artwork above the form, with contrast behind the copy. */
  html body .jsgl-page .jsgl-hero > img,
  html body .jsgl-page .jsgl-hero .jsgl-hero-shade {
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:var(--jsv-groups-art-height)!important;
    max-height:var(--jsv-groups-art-height)!important;
    margin:0!important;
    pointer-events:none;
  }
  html body .jsgl-page .jsgl-hero > img {
    display:block!important;
    z-index:0;
    object-fit:cover!important;
    object-position:center!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-shade {
    z-index:1;
    background:linear-gradient(90deg,rgba(5,26,45,.78),rgba(5,26,45,.36)),linear-gradient(0deg,#0d3558,rgba(13,53,88,0) 62%)!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy {
    position:relative!important;
    inset:auto!important;
    z-index:2;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:var(--jsv-groups-art-height)!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:22px 18px!important;
    box-sizing:border-box!important;
    color:#fff!important;
    overflow-wrap:anywhere;
    text-shadow:0 2px 10px rgba(2,19,34,.6);
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy h1 {
    max-width:100%!important;
    margin:0!important;
    color:#fff!important;
    font-size:34px!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy p {
    margin:10px 0 0!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.5!important;
    letter-spacing:0!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy p b {
    color:#f4d16f!important;
    padding:0 4px!important;
  }

  /* Search, filters and Create remain the existing form in normal document flow. */
  html body .jsgl-page .jsgl-hero .jsgl-hero-search {
    position:relative!important;
    inset:auto!important;
    z-index:2;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box!important;
    background:#0d3558!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search > * {
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search > label,
  html body .jsgl-page .jsgl-hero .jsgl-hero-search .jsgl-create {
    grid-column:1/-1!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search label,
  html body .jsgl-page .jsgl-hero .jsgl-hero-search select,
  html body .jsgl-page .jsgl-hero .jsgl-hero-search .jsgl-create {
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    border-radius:9px!important;
    font-size:16px!important;
    line-height:1.25!important;
    box-sizing:border-box!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search label {
    padding:0 10px!important;
    gap:8px!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search label span {
    flex:0 0 18px;
    font-size:18px!important;
    line-height:1!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search input {
    min-width:0!important;
    width:100%!important;
    height:42px!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.25!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search select {
    padding:0 8px!important;
    font-weight:600!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-search .jsgl-create {
    padding:8px 12px!important;
    font-size:14px!important;
    color:#102f4d!important;
    white-space:normal!important;
  }

  /* The category strip scrolls locally without occupying a full hero section. */
  html body .jsgl-page .jsgl-hero .jsgl-hero-cats {
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:76px!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-cats::-webkit-scrollbar {
    display:none;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-cats a {
    display:flex!important;
    flex:1 0 100px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:100px!important;
    min-height:76px!important;
    padding:9px 7px!important;
    gap:5px!important;
    box-sizing:border-box!important;
    color:#133754!important;
    font-size:11px!important;
    line-height:1.3!important;
    text-align:center!important;
    white-space:normal!important;
    scroll-snap-align:start;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-cats i {
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1!important;
  }
  html body .jsgl-page .jsgl-hero :is(a,button,input,select):focus-visible {
    outline:3px solid #8bbde0!important;
    outline-offset:2px!important;
  }

  /* Named group detail rows can shrink without changing the full-screen chat. */
  html body .jsf-gm-page .jsf-gm-member-tools label {
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  html body .jsf-gm-page .jsf-gm-member-tools input,
  html body .jsf-gm-page .jsf-gm-member-tools select {
    min-width:0!important;
    max-width:100%!important;
  }
  html body .jsf-gm-page .jsf-gm-event-card {
    grid-template-columns:95px minmax(0,1fr) auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html body .jsf-gm-page .jsf-gm-event-card > * {
    min-width:0!important;
    box-sizing:border-box!important;
  }
  html body .jsf-gm-page .jsf-gm-event-card :is(h3,p,small) {
    overflow-wrap:anywhere;
  }
  html body .jsf-gm-page .jsf-gm-details-card dl {
    grid-template-columns:minmax(0,100px) minmax(0,1fr)!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html body .jsf-gm-page .jsf-gm-details-card :is(dt,dd) {
    min-width:0!important;
    margin:0!important;
    overflow-wrap:anywhere;
  }
}

@media (max-width:520px) {
  html body .jsgl-page .jsgl-hero {
    --jsv-groups-art-height:176px;
    border-radius:12px!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy {
    padding:18px 15px!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy h1 {
    font-size:30px!important;
  }
  html body .jsgl-page .jsgl-hero .jsgl-hero-copy p {
    font-size:12px!important;
  }
  html body .jsf-gm-page .jsf-gm-event-card {
    grid-template-columns:95px minmax(0,1fr)!important;
  }
  html body .jsf-gm-page .jsf-gm-event-card :is(.jsf-gm-btn,form) {
    grid-column:1/-1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin-top:0!important;
    white-space:normal!important;
  }
}

@media (max-width:360px) {
  /* Native select labels keep a readable width on the smallest phone screens. */
  html body .jsgl-page .jsgl-hero .jsgl-hero-search {
    grid-template-columns:minmax(0,1fr)!important;
  }
}