/* Discover layout fix v2
   Compact hero + more visual priority to the swipe card. */
@media (min-width: 1100px) {
  body:has(.discover-page) .page-shell,
  body:has(.discover-page) main {
    padding-top: 8px !important;
  }

  .discover-page {
    min-height: calc(100vh - 78px) !important;
    padding-top: 0 !important;
  }

  /* Header/intro: smaller and shallower. */
  .discover-page .discover-hero,
  .discover-page .discover-header,
  .discover-page .page-hero {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .discover-page .discover-hero h1,
  .discover-page .discover-header h1,
  .discover-page .page-hero h1,
  .discover-page > h1 {
    font-size: clamp(2.25rem, 3.25vw, 3.55rem) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    margin: 0 0 8px !important;
    max-width: 640px !important;
  }

  .discover-page .discover-hero p,
  .discover-page .discover-header p,
  .discover-page .page-hero p {
    margin: 0 !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
  }

  /* Main 3-column area: center gets priority. */
  .discover-page .discover-grid,
  .discover-page .discover-layout,
  .discover-page .swipe-layout {
    grid-template-columns: minmax(210px, .72fr) minmax(430px, 1.55fr) minmax(220px, .78fr) !important;
    column-gap: clamp(28px, 4vw, 76px) !important;
    align-items: center !important;
    margin-top: 12px !important;
  }

  /* Center card: larger without making the page taller than viewport. */
  .discover-page .swipe-stage,
  .discover-page .swipe-stack,
  .discover-page .discover-center {
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  .discover-page .profile-card,
  .discover-page .swipe-card {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
  }

  .discover-page .profile-card img,
  .discover-page .swipe-card img,
  .discover-page .profile-photo {
    object-fit: cover !important;
  }

  /* Side columns are support content, not the focal point. */
  .discover-page .discover-how,
  .discover-page .discover-matches,
  .discover-page .how-it-works,
  .discover-page .matches-panel {
    align-self: center !important;
  }
}

/* Large desktop: use the extra width for the actual match card. */
@media (min-width: 1500px) and (min-height: 820px) {
  .discover-page .discover-grid,
  .discover-page .discover-layout,
  .discover-page .swipe-layout {
    grid-template-columns: minmax(220px, .68fr) minmax(500px, 1.7fr) minmax(230px, .72fr) !important;
  }

  .discover-page .swipe-stage,
  .discover-page .swipe-stack,
  .discover-page .discover-center,
  .discover-page .profile-card,
  .discover-page .swipe-card {
    width: min(100%, 550px) !important;
    max-width: 550px !important;
  }
}

/* Short desktop screens: keep everything visible. */
@media (min-width: 1100px) and (max-height: 780px) {
  .discover-page .discover-hero h1,
  .discover-page .discover-header h1,
  .discover-page .page-hero h1,
  .discover-page > h1 {
    font-size: 2.15rem !important;
  }

  .discover-page .discover-hero p,
  .discover-page .discover-header p,
  .discover-page .page-hero p {
    font-size: .88rem !important;
  }

  .discover-page .discover-grid,
  .discover-page .discover-layout,
  .discover-page .swipe-layout {
    margin-top: 6px !important;
  }
}