/* Mobile/PWA cleanup: keep the responsive shell light without changing off-canvas behavior. */
@media (max-width: 767.98px) {
  html body .main-wrapper .sg-offcanvas:not(.active) > .sg-offcanvas-sidebar:has(.vf-rail) {
    content-visibility: auto;
    contain-intrinsic-size: 0 100dvh;
  }

  html body .main-wrapper .sg-offcanvas.active > .sg-offcanvas-sidebar:has(.vf-rail) {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

/* Groups and Events retain their useful category filters, styled as one family of navigation. */
html body .main-wrapper .vf-directory-shell .vf-directory-category-rail {
  border: 1px solid rgba(132, 158, 197, .25) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 10px 26px rgba(28, 60, 106, .08) !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .card-body.with-nav {
  padding: 12px !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-title {
  margin: 2px 8px 8px !important;
  color: #60708a !important;
  font-size: .7rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav {
  display: grid !important;
  gap: 3px !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav > li > a {
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  color: #31425e !important;
  font-size: .88rem !important;
  font-weight: 720 !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav > li > a:hover {
  background: rgba(45, 124, 238, .08) !important;
  color: #176ee5 !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav > li.active > a {
  background: linear-gradient(135deg, #2e82ee, #3a70e7) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 14px rgba(40, 112, 227, .18) !important;
}

html body .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav > li.active > a :is(i, span) {
  color: inherit !important;
}

body.night-mode .main-wrapper .vf-directory-shell .vf-directory-category-rail {
  border-color: rgba(122, 158, 208, .24) !important;
  background: linear-gradient(180deg, #172236 0%, #121c2d 100%) !important;
}

body.night-mode .main-wrapper .vf-directory-shell .vf-directory-category-title,
body.night-mode .main-wrapper .vf-directory-shell .vf-directory-category-rail .side-nav > li > a {
  color: #d6e4f7 !important;
}

/* Portrait tablets are used like a PWA: the content gets the full canvas and
   primary destinations live in the bottom app navigation. This prevents the
   halfway desktop rail from consuming a third of an iPad portrait screen. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  /* This element lives after the main wrapper, but make its viewport anchoring
     explicit for iPad Safari rather than inheriting any desktop bar rule. */
  html body > .footer-bottom-bar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2147482000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  html body .main-wrapper {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .main-wrapper .sg-offcanvas-sidebar:has(.vf-rail),
  html body.vf-page-index #vf-main-content .vf-newsfeed-shell .vf-modern-rail-column,
  html body.vf-page-index #vf-main-content .vf-newsfeed-shell .vf-side-rail {
    display: none !important;
  }

  html body.vf-page-index #vf-main-content .vf-newsfeed-shell > .vf-modern-rail-row,
  html body.vf-page-index #vf-main-content .vf-newsfeed-shell .sg-offcanvas-mainbar > .row {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.vf-page-index #vf-main-content .vf-newsfeed-shell .sg-offcanvas-mainbar,
  html body.vf-page-index #vf-main-content .vf-newsfeed-shell .sg-offcanvas-mainbar > .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
  }
}

/* Landscape tablets preserve the editorial feed. On larger tablets the right
   rail stays visible, but all three columns use tablet-appropriate widths. */
@media (min-width: 768px) and (max-width: 1439.98px) and (orientation: landscape) {
  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-home-quick-links {
    display: none !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero {
    position: relative !important;
    display: block !important;
    isolation: isolate !important;
    height: 166px !important;
    min-height: 166px !important;
    margin: 0 0 18px !important;
    padding: 21px 158px 18px 25px !important;
    overflow: hidden !important;
    border: 1px solid #d9e7f4 !important;
    border-radius: 20px !important;
    background: linear-gradient(110deg, #ffffff 0%, #fbfdff 57%, #f0f8ff 100%) !important;
    box-shadow: 0 13px 32px rgba(51, 92, 140, .09) !important;
  }
}

/* 768–1199px landscape does not render a right rail in the source markup, so
   make the feed the one available content column rather than squeezing it. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .sg-offcanvas-mainbar > .row {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .sg-offcanvas-mainbar > .row > .col-xl-9 {
    display: block !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    flex: 0 0 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-rail-art {
    display: none !important;
  }
}

/* A larger landscape tablet can support the supporting widgets. Bootstrap
   normally keeps that markup at xl-only, so explicitly promote it here and
   give every column a real, non-clipping width. */
@media (min-width: 1024px) and (max-width: 1199.98px) and (orientation: landscape) {
  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .sg-offcanvas-mainbar > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 680px) 220px !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .sg-offcanvas-mainbar > .row > .col-xl-9 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-side-rail {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }
}

/* iPad Pro and similar landscape widths retain a real right rail. The former
   270/320px desktop columns left too little room for the feed and clipped
   both rail widgets and the banner. */
@media (min-width: 1200px) and (max-width: 1439.98px) and (orientation: landscape) {
  html body.vf-page-index.vf-view-default #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row {
    /* The fixed Neighborhood rail is 270px. The earlier 190px grid track
       allowed that rail to overlap and visually crop the feed. */
    grid-template-columns: 270px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row > .vf-modern-rail-column,
  html body.vf-page-index.vf-view-default #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row > .vf-modern-rail-column > .theiaStickySidebar {
    width: 270px !important;
    max-width: 270px !important;
    flex: 0 0 270px !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .sg-offcanvas-mainbar > .row {
    display: grid !important;
    /* Feed contracts first; the 320px widget rail never gets clipped. */
    grid-template-columns: minmax(520px, 680px) 320px !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-side-rail {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1439.98px) and (orientation: landscape) {
  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero h1,
  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero p {
    position: relative !important;
    z-index: 2 !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero h1 {
    margin: 0 !important;
    color: #101b4f !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(1.9rem, 3.25vw, 2.65rem) !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero p {
    margin: 6px 0 0 !important;
    color: #46547c !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(.95rem, 1.4vw, 1.1rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  html body.vf-page-index.vf-view-default #vf-main-content .vf-home-look-neighborhood .vf-neighborhood-hero-art {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: right center !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}