/* Discover Card Layout v3
   Uses the real dashboard selectors already present in viewport-compact-v1.css. */

@media (min-width:1101px) {
  /* Keep the title clearly below the fixed header. */
  .member-shell.swipe-dashboard{
    padding-top: 82px !important;
    padding-bottom: 22px !important;
    max-width: 1240px !important;
  }

  .swipe-topbar{
    margin-bottom: 20px !important;
    align-items:flex-start !important;
  }

  .swipe-topbar h1{
    font-size:clamp(2rem,2.6vw,2.75rem) !important;
    line-height:.96 !important;
    letter-spacing:-.05em !important;
    margin:0 !important;
  }

  .swipe-topbar > div > p{
    margin-top:7px !important;
    font-size:.9rem !important;
  }

  /* Give the center column most of the page. */
  .discovery-layout{
    height:auto !important;
    min-height:590px !important;
    grid-template-columns:minmax(210px, .72fr) minmax(500px, 1.65fr) minmax(220px, .76fr) !important;
    gap:42px !important;
    align-items:center !important;
  }

  .swipe-deck{
    height:auto !important;
    min-height:590px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  /* Card becomes a normal vertical profile card instead of an overlay poster. */
  .swipe-card{
    position:relative !important;
    width:min(100%,520px) !important;
    max-width:520px !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:28px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .swipe-photo{
    position:relative !important;
    height:365px !important;
    min-height:365px !important;
    overflow:hidden !important;
    flex:0 0 365px !important;
  }

  .swipe-photo > img,
  .swipe-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 24% !important;
  }

  /* Name / age / role / tags: no longer over the face.
     Move the old absolute persona block into a dark information band. */
  .persona-content{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:17px 22px 12px !important;
    background:#111016 !important;
    color:inherit !important;
    z-index:4 !important;
  }

  .persona-name-row h2{
    font-size:1.85rem !important;
    line-height:1 !important;
    margin:0 !important;
  }

  /* The description follows the identity block. */
  .swipe-card-detail{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px 22px 18px !important;
    background:#111016 !important;
  }

  .swipe-card-detail p{
    font-size:.88rem !important;
    line-height:1.45 !important;
    margin:0 !important;
  }

  /* Actions belong under the profile, never over the photo. */
  .swipe-controls{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    z-index:10 !important;
    width:100% !important;
    max-width:520px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:22px !important;
    margin:16px auto 0 !important;
  }

  .swipe-pass,
  .swipe-match{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:62px !important;
    height:62px !important;
  }

  .swipe-hint{
    margin-top:9px !important;
  }
}

/* Very large desktop: make the person/photo genuinely prominent. */
@media (min-width:1500px) and (min-height:850px){
  .member-shell.swipe-dashboard{
    max-width:1320px !important;
  }

  .discovery-layout{
    grid-template-columns:minmax(220px,.65fr) minmax(560px,1.8fr) minmax(230px,.7fr) !important;
  }

  .swipe-card,
  .swipe-controls{
    width:min(100%,560px) !important;
    max-width:560px !important;
  }

  .swipe-photo{
    height:395px !important;
    min-height:395px !important;
    flex-basis:395px !important;
  }
}

/* Shorter desktop: preserve the structure, just reduce photo height. */
@media (min-width:1101px) and (max-height:820px){
  .member-shell.swipe-dashboard{
    padding-top:74px !important;
  }

  .swipe-topbar h1{
    font-size:2rem !important;
  }

  .discovery-layout{
    min-height:520px !important;
  }

  .swipe-deck{
    min-height:520px !important;
  }

  .swipe-photo{
    height:300px !important;
    min-height:300px !important;
    flex-basis:300px !important;
  }

  .persona-content{
    padding-top:13px !important;
    padding-bottom:9px !important;
  }

  .swipe-card-detail{
    padding-top:9px !important;
    padding-bottom:13px !important;
  }

  .swipe-pass,.swipe-match{
    width:56px !important;
    height:56px !important;
  }
}