/* ==========================================================================
   IMAGE FRAMING — big, uniform, face-friendly
   Loaded last. Photos are portrait (~4:5), so every frame below uses a 4:5
   box and anchors the crop to the TOP (heads/hair/faces never get cut).
   Clicking portfolio items still opens the full uncropped photo in the lightbox.
   ========================================================================== */

/* ---- Homepage hero: clean split — copy on dark, big sharp photo on the right ---- */
@media(min-width:901px){
  .jb-hero__media{background:#14100d!important;background-image:none!important}
  .jb-hero__media img,.jb-hero__media video{
    position:absolute!important;top:0;bottom:0;right:0;left:auto;
    width:min(46%,720px)!important;height:100%!important;
    object-fit:cover!important;object-position:center 10%!important}
  .jb-hero__veil{background:linear-gradient(0deg,rgba(14,11,9,.45),transparent 30%)!important}
  .jb-hero__copy{max-width:min(640px,calc(54% - 40px))}
}
@media(max-width:900px){
  .jb-hero__media img,.jb-hero__media video{object-position:center 10%!important}
}

/* ---- Services: equal cards, 4:5 photo, top-anchored ---- */
.jb-service-grid{align-items:stretch}
.jb-service__media{aspect-ratio:4/5!important}
.jb-service__media img{width:100%;height:100%!important;object-fit:cover!important;object-position:center 15%!important}
.related-service-card img{width:100%;height:auto!important;aspect-ratio:4/5;object-fit:cover!important;object-position:center 15%!important}

/* ---- Portfolio / work: equal 3-column grid, 4:5 frames ---- */
.jb-work-grid{display:grid!important;grid-template-columns:repeat(3,1fr);column-count:auto;gap:18px}
.premium-portfolio-grid{display:grid!important;grid-template-columns:repeat(3,1fr);column-count:auto;gap:18px}
.jb-work-item,.premium-portfolio-item{display:block;width:auto;margin:0;grid-column:auto!important}
.jb-work-media,.premium-portfolio-media{aspect-ratio:4/5!important;height:auto}
.premium-portfolio-item--1 .premium-portfolio-media,.premium-portfolio-item--4 .premium-portfolio-media{aspect-ratio:4/5!important}
.jb-work-media img,.jb-work-media video,
.premium-portfolio-media img,.premium-portfolio-media video{width:100%;height:100%!important;object-fit:cover!important;object-position:center 15%!important;display:block}
@media(max-width:900px){.jb-work-grid,.premium-portfolio-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ---- Studio story / About / Service-detail big image panels ---- */
.jb-story__image,.premium-story__image,.luxury-story__image{aspect-ratio:4/5;min-height:0;max-height:none;background:#14100d}
.jb-story__image img,.premium-story__image img,.luxury-story__image img{width:100%;height:100%;object-fit:cover!important;object-position:center 12%!important}
.feature-image{background:#14100d}
.feature-image img{width:100%;height:100%;object-fit:cover!important;object-position:center 12%!important}
.service-detail-image>img{width:100%;height:100%;object-fit:cover!important;object-position:center 12%!important}
@media(max-width:900px){.jb-story__image{aspect-ratio:4/5;min-height:0}}

/* ---- Team: equal 4:5 portraits, top-anchored ---- */
.jb-team-card>div,.premium-team-card>div,.luxury-team-card>div,.team-photo{aspect-ratio:4/5;height:auto!important}
.jb-team-card img,.premium-team-card img,.luxury-team-card img,.team-photo img{width:100%;height:100%;object-fit:cover!important;object-position:center 12%!important}
.team-modal-dialog img{width:min(240px,42%);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%}
@media(max-width:600px){.team-modal-dialog img{float:none;width:100%;max-width:320px;margin:0 auto 18px}}

/* ---- About gallery: equal 4:5 tiles ---- */
.about-gallery-grid{display:grid!important;grid-template-columns:repeat(3,1fr);column-count:auto;gap:16px}
.about-gallery-item{display:block;width:auto;margin:0}
.about-gallery-item img{width:100%;height:auto!important;aspect-ratio:4/5;object-fit:cover!important;object-position:center 12%}
@media(max-width:680px){.about-gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Lightbox: always the full, uncropped photo ---- */
.premium-media-modal__content img,.premium-media-modal__content video{object-fit:contain!important}

/* ========================================================================
   MOBILE SOCIAL RAIL — floating glass pill, right edge, vertically centred.
   Loaded last on purpose: earlier files hid the rail on phones.
   Selector weight beats every earlier !important rule. Public pages only.
   ======================================================================== */
@media (max-width: 680px){
  html body:not(.admin-page) nav.social-rail{
    display:flex!important;
    position:fixed!important;
    left:auto!important;
    right:max(10px,env(safe-area-inset-right))!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    z-index:45!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:auto!important;
    max-height:calc(100dvh - 190px)!important;
    padding:8px!important;
    margin:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:none;
    background:color-mix(in srgb,var(--paper,#fffdf9) 92%,transparent)!important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid color-mix(in srgb,var(--gold,#b88a35) 28%,var(--line,#ded8cc))!important;
    border-radius:999px!important;
    box-shadow:0 14px 34px rgba(45,32,14,.16),0 2px 6px rgba(45,32,14,.06)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html body:not(.admin-page) nav.social-rail::-webkit-scrollbar{display:none}
  html body:not(.admin-page) nav.social-rail .social-rail-link{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;
    padding:0!important;margin:0!important;
    border-radius:50%!important;
    background:var(--paper,#fffdf9)!important;
    border:1px solid color-mix(in srgb,var(--gold,#b88a35) 30%,var(--line,#ded8cc))!important;
    color:var(--brand-primary,var(--gold,#b88a35))!important;
    box-shadow:none!important;
    transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
  }
  html body:not(.admin-page) nav.social-rail .social-rail-link svg{
    display:block!important;
    width:18px!important;height:18px!important;
    max-width:18px!important;max-height:18px!important;
    opacity:1!important;visibility:visible!important;
  }
  html body:not(.admin-page) nav.social-rail .social-rail-link span{display:none!important}
  html body:not(.admin-page) nav.social-rail .social-rail-link:hover,
  html body:not(.admin-page) nav.social-rail .social-rail-link:focus-visible,
  html body:not(.admin-page) nav.social-rail .social-rail-link:active{
    background:var(--brand-primary,var(--gold,#b88a35))!important;
    border-color:var(--brand-primary,var(--gold,#b88a35))!important;
    color:#fff!important;
    transform:scale(1.06)!important;
  }
  html body.theme-dark:not(.admin-page) nav.social-rail{
    background:rgba(33,31,28,.88)!important;
    border-color:rgba(232,213,168,.28)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.45)!important;
  }
  html body.theme-dark:not(.admin-page) nav.social-rail .social-rail-link{
    background:rgba(23,22,20,.92)!important;
    border-color:rgba(232,213,168,.32)!important;
    color:var(--gold-light,#e8d5a8)!important;
  }
  html body.theme-dark:not(.admin-page) nav.social-rail .social-rail-link:hover,
  html body.theme-dark:not(.admin-page) nav.social-rail .social-rail-link:focus-visible{
    background:var(--brand-primary,var(--gold,#b88a35))!important;
    color:#fff!important;
  }
}