/* ============================================================
   Veltyra Final Visual QA Layer
   Loaded AFTER the accumulated legacy stylesheet.
   Goal: predictable, image-aware desktop composition without
   disturbing the mobile art direction.
   ============================================================ */

/* ---------- Shared visual discipline ---------- */
img{image-rendering:auto}
.history-graphic,.poster-graphic{object-fit:contain!important}

@media (min-width: 781px){
  /* A slightly calmer desktop canvas */
  .wrap{max-width:1180px}
  .section{padding-top:88px;padding-bottom:88px}
  .section-tight{padding-top:58px;padding-bottom:58px}

  /* ----------------------------------------------------------
     HOME: management portrait should support the copy, not
     dominate a full screen. Full portrait stays visible.
     ---------------------------------------------------------- */
  .page-home .home-team-layout{
    grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;
    gap:76px!important;
    align-items:center!important;
  }
  .page-home .home-team-visual{
    width:100%!important;
    max-width:360px!important;
    margin:0!important;
    padding:14px!important;
    background:#ece8e1!important;
    border:1px solid #d8d3ca!important;
    box-shadow:none!important;
  }
  .page-home .home-team-visual .portrait-feature{
    display:block!important;
    width:100%!important;
    height:420px!important;
    max-height:420px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#171c20!important;
  }
  .page-home .home-team-visual .image-caption{
    margin:0!important;
    padding:11px 2px 0!important;
    font-size:.72rem!important;
  }
  .page-home .home-team-copy{max-width:700px}

  /* ----------------------------------------------------------
     TEAM INTRO + LEADERSHIP
     ---------------------------------------------------------- */
  .page-team .section:first-of-type>.wrap>.split{
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
    gap:64px!important;
    align-items:center!important;
    margin-bottom:68px!important;
  }
  .page-team .team-intro-photo{
    width:100%!important;
    height:390px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center 46%!important;
    padding:0!important;
    border:1px solid #d8d4cc!important;
    background:#ebe8e2!important;
  }

  .page-team .team-leadership{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;
    gap:28px!important;
    align-items:stretch!important;
    margin-bottom:70px!important;
  }
  .page-team .team-lead-card{
    display:grid!important;
    grid-template-columns:300px minmax(0,1fr)!important;
    min-height:420px!important;
    height:auto!important;
    overflow:hidden!important;
  }
  .page-team .team-lead-photo{
    width:300px!important;
    min-height:420px!important;
    height:420px!important;
    padding:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#181e22!important;
  }
  .page-team .team-lead-photo .portrait-feature{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:384px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#181e22!important;
  }
  .page-team .team-lead-copy{
    padding:38px 38px 40px!important;
    justify-content:center!important;
  }
  .page-team .team-lead-copy h2{font-size:2.55rem!important}

  .page-team .team-legacy-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:420px!important;
    overflow:hidden!important;
  }
  .page-team .team-legacy-card>.legacy-photo{
    width:100%!important;
    height:250px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:14px!important;
    background:#f1eee8!important;
  }
  .page-team .team-legacy-copy{padding:25px 28px 28px!important}

  /* ----------------------------------------------------------
     TEAM ROSTER: smaller, calmer 3-column cards. No face crop.
     A fixed photo stage keeps the layout consistent while
     object-fit:contain guarantees the entire source portrait.
     ---------------------------------------------------------- */
  .page-team .team-roster-head{margin-bottom:28px!important}
  .page-team .team-grid-people{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:42px 28px!important;
    align-items:start!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card){
    display:block!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card)>.portrait-source{
    display:block!important;
    width:100%!important;
    height:300px!important;
    max-height:300px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:18px!important;
    border:1px solid #dad6cf!important;
    background:#efebe4!important;
  }
  .page-team .team-grid-people .team-body{
    padding:14px 2px 0!important;
  }
  .page-team .team-grid-people .team-body h3{
    font-size:1.22rem!important;
    margin-bottom:5px!important;
  }
  .page-team .team-grid-people .team-role{
    font-size:.86rem!important;
    line-height:1.42!important;
    margin:0!important;
  }
  .page-team .team-grid-people .team-cta-card{
    min-height:300px!important;
    height:300px!important;
    aspect-ratio:auto!important;
    padding:28px!important;
  }

  /* ----------------------------------------------------------
     CAREER: the artwork contains text, therefore NEVER crop it.
     Give it its own square stage instead of stretching to card
     height. Applies on home + team page.
     ---------------------------------------------------------- */
  .karriere-card{
    grid-template-columns:minmax(0,1fr) 340px!important;
    gap:54px!important;
    align-items:center!important;
    padding:48px 52px!important;
  }
  .karriere-side{
    width:340px!important;
    max-width:340px!important;
    align-self:center!important;
  }
  .karriere-side .poster-graphic{
    display:block!important;
    width:340px!important;
    height:340px!important;
    max-height:340px!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0 0 18px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
  }
  .karriere-side h3{margin:0 0 7px!important}
  .karriere-side p{margin:0!important}

  /* ----------------------------------------------------------
     HISTORY GRAPHICS: documents/graphics stay fully readable.
     ---------------------------------------------------------- */
  .history-graphic{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:520px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:12px!important;
    border:1px solid #ddd8cf!important;
    background:#f7f5f1!important;
  }

  /* ----------------------------------------------------------
     NEWS: newspaper clipping is a document, team photo is a
     photograph. They should not share the same crop behavior.
     ---------------------------------------------------------- */
  .page-news .news-card--document{
    display:block!important;
    padding:0 0 44px!important;
    margin-bottom:44px!important;
  }
  .page-news .news-card--document .news-document-image{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    border:1px solid #dcd8d0!important;
    background:#f7f5f1!important;
  }
  .page-news .news-card--document .news-body{
    padding:24px 0 0!important;
    max-width:800px!important;
  }
  .page-news .news-card--photo{
    display:grid!important;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr)!important;
    gap:38px!important;
    align-items:center!important;
    padding:34px 0!important;
  }
  .page-news .news-card--photo .news-photo-image{
    width:100%!important;
    height:300px!important;
    object-fit:cover!important;
    object-position:center 45%!important;
  }
  .page-news .news-card--photo .news-body{padding:0!important}

  /* ----------------------------------------------------------
     SERVICES: source photos are landscape; keep their natural
     photographic proportions and avoid vertical stretching.
     ---------------------------------------------------------- */
  .page-services .svc-img{
    width:320px!important;
    height:auto!important;
    aspect-ratio:3/2!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0 0 18px 30px!important;
  }

  /* ----------------------------------------------------------
     REFERENCES + PARTNERS: consistent but non-invasive.
     ---------------------------------------------------------- */
  .page-references .gallery-grid img{
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .page-partners .partner-logo{
    min-height:128px!important;
    padding:24px!important;
  }
  .page-partners .partner-logo img{
    width:auto!important;
    max-width:100%!important;
    max-height:62px!important;
    object-fit:contain!important;
  }
}

/* Large-desktop refinement: keep content substantial, never huge. */
@media (min-width: 1280px){
  .page-team .team-grid-people .team-card:not(.team-cta-card)>.portrait-source{
    height:320px!important;
    max-height:320px!important;
  }
  .page-team .team-grid-people .team-cta-card{
    height:320px!important;
    min-height:320px!important;
  }
}

/* Preserve the successful mobile direction, with only image-safety fixes. */
@media (max-width: 780px){
  .poster-graphic,.history-graphic{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card)>.portrait-source{
    object-fit:cover!important;
  }
  .page-team .team-lead-photo .portrait-feature,
  .page-home .home-team-visual .portrait-feature{
    object-fit:cover!important;
  }
  .page-news .news-document-image{
    object-fit:contain!important;
    height:auto!important;
    aspect-ratio:auto!important;
  }
}


/* ------------------------------------------------------------
   Hotfix v7: robust mobile team roster layout
   Problem observed on real device: some portraits stretched down
   the left side with large empty space. Force a stable row layout.
   ------------------------------------------------------------ */
@media (max-width: 780px){
  .page-team .team-grid-people{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card){
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
    padding:16px 0!important;
    border-top:1px solid var(--line)!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card) > .portrait-source{
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:136px!important;
    max-height:136px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center 20%!important;
    display:block!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:#e9e4dc!important;
  }
  .page-team .team-grid-people .team-body{
    flex:1 1 auto!important;
    min-width:0!important;
    padding:0!important;
    align-self:center!important;
  }
  .page-team .team-grid-people .team-body h3,
  .page-team .team-grid-people .team-role{
    overflow-wrap:anywhere;
  }
  .page-team .team-grid-people .team-cta-card{
    margin-top:22px!important;
  }
}

@media (max-width: 480px){
  .page-team .team-grid-people .team-card:not(.team-cta-card){
    gap:14px!important;
    padding:14px 0!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card) > .portrait-source{
    flex-basis:100px!important;
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    height:126px!important;
    max-height:126px!important;
  }
}

@media (max-width: 360px){
  .page-team .team-grid-people .team-card:not(.team-cta-card){
    gap:12px!important;
  }
  .page-team .team-grid-people .team-card:not(.team-cta-card) > .portrait-source{
    flex-basis:92px!important;
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    height:116px!important;
    max-height:116px!important;
  }
}