/* Bynzo v3.7 — service hero media + portfolio gallery */

/* Public service hero: uploaded artwork wins; fallback copy is shown only when no usable image exists. */
.service-visual{isolation:isolate}
.service-visual .service-visual-fallback{position:relative;z-index:2;display:flex;min-height:292px;flex-direction:column;justify-content:flex-end}
.service-visual .service-visual-fallback>span{font-size:10px;letter-spacing:.16em;color:var(--accent)}
.service-visual .service-visual-fallback>b{font-size:27px;margin-top:8px}
.service-visual .service-visual-fallback>small{max-width:300px;color:#9db0b5;line-height:1.6;margin-top:12px}
.service-visual.has-photo{padding:0;background:#071318;min-height:410px}
.service-visual.has-photo:before{display:block!important;content:"";position:absolute;inset:-9%;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background-image:linear-gradient(rgba(7,19,24,.24),rgba(7,19,24,.42)),var(--service-hero-image);background-position:center;background-size:cover;filter:blur(22px);opacity:0;transform:scale(1.08);z-index:0;transition:opacity .2s ease}
.service-visual.has-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,19,24,.03),rgba(7,19,24,.16));z-index:1;pointer-events:none;opacity:0;transition:opacity .2s ease}
.service-visual.has-photo.media-loaded:before{opacity:.62}
.service-visual.has-photo.media-loaded:after{opacity:1}
.service-visual.has-photo .service-visual-photo{position:absolute;inset:0;width:100%;height:100%;padding:10px;object-fit:contain;object-position:center;z-index:3;border-radius:30px;opacity:0;visibility:hidden;transition:opacity .18s ease}
.service-visual.has-photo.media-loaded .service-visual-photo{opacity:1;visibility:visible}
.service-visual.has-photo .service-visual-fallback{display:flex;opacity:1;visibility:visible;transition:opacity .16s ease}
.service-visual.has-photo:not(.media-loaded) .service-visual-fallback{min-height:410px;padding:34px}
.service-visual.has-photo.media-loaded .service-visual-fallback{opacity:0;visibility:hidden;pointer-events:none}
.service-visual-icon{overflow:hidden}
.service-visual-icon .service-visual-icon-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:19px}
.service-visual-icon .service-visual-icon-fallback svg{width:100%;height:100%}
.service-visual-icon [data-public-media-icon]{position:absolute;inset:0;width:100%;height:100%;padding:16px;object-fit:contain;opacity:0;visibility:hidden;background:inherit}
.service-visual-icon [data-public-media-icon].is-media-ready{opacity:1;visibility:visible}

/* Public + authenticated portfolio presentation. */
.service-portfolio-section{padding-bottom:40px}
.service-portfolio-section .portfolio-intro{max-width:650px;margin:10px 0 0;color:var(--muted,#667579);font-size:14px;line-height:1.65}
.service-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:16px;margin-top:30px;align-items:stretch}
.service-portfolio-grid .portfolio-media{position:relative;overflow:hidden;margin:0;border:1px solid rgba(7,19,24,.1);border-radius:24px;background:#071318;aspect-ratio:16/10;min-width:0;box-shadow:0 16px 34px rgba(7,19,24,.08)}
/* Pending portfolio items must stay in layout so browsers actually fetch image sources.
   display:none + loading=lazy creates a deadlock: the image never loads, therefore JS never
   gets a load event to reveal it. Keep the box non-interactive/invisible until media is ready. */
.marketing-page .service-portfolio-grid .portfolio-media.media-pending,.marketing-page .service-portfolio-grid .portfolio-media:not(.is-media-ready){display:block;visibility:hidden;opacity:0;pointer-events:none}
.marketing-page .service-portfolio-grid .portfolio-media.is-media-ready{display:block;visibility:visible;opacity:1;pointer-events:auto;transition:opacity .18s ease}
.service-portfolio-grid[data-media-count="1"]{grid-template-columns:minmax(0,1fr);max-width:1040px}
.service-portfolio-grid[data-media-count="1"] .portfolio-media{aspect-ratio:16/9;min-height:380px}
.service-portfolio-grid[data-media-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-portfolio-grid[data-media-count="2"] .portfolio-media{aspect-ratio:4/3}
.service-portfolio-grid[data-media-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-portfolio-grid[data-media-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-portfolio-grid[data-media-count="5"],.service-portfolio-grid[data-media-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-portfolio-grid[data-media-layout="gallery"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-portfolio-grid[data-media-layout="gallery"] .portfolio-media{aspect-ratio:4/3}
.service-portfolio-grid img,.service-portfolio-grid video{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:none;object-fit:contain;object-position:center;background:#071318}
.service-portfolio-grid video{object-fit:contain}
.service-portfolio-grid figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(7,19,24,.78);backdrop-filter:blur(12px);color:#fff;pointer-events:none}
.service-portfolio-grid figcaption strong{font-size:13px}
.service-portfolio-grid figcaption span{font-size:11px;line-height:1.5;color:#c9d4d7}

/* Logged-in Service hero: preserve the whole uploaded image without ugly stretching/cropping. */
.service-hero-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#0a252e,#071318)}
.service-hero-visual.has-service-photo{min-height:360px;padding:12px}
.service-hero-visual.has-service-photo>img{position:relative;z-index:2;width:100%;height:100%;min-height:330px;max-height:520px;object-fit:contain;object-position:center;border-radius:20px;background:#071318}
.service-hero-visual .service-hero-fallback{display:grid;place-items:center;position:absolute;inset:0;z-index:1}
.service-hero-visual.has-service-photo .service-hero-fallback{display:none}
.service-hero-visual:not(.has-service-photo) .service-hero-fallback{display:grid}

/* Admin media manager. */
.service-media-manager{display:grid;gap:22px}
.service-media-upload-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:18px;align-items:center;padding:18px;border:1px solid var(--line,#dfe5e5);border-radius:20px;background:rgba(255,255,255,.55)}
.service-media-upload-panel strong{font-size:16px}
.service-media-upload-panel p{margin:7px 0 0;color:var(--muted,#667579);font-size:12px;line-height:1.6}
.service-media-drop{position:relative;display:grid;place-items:center;gap:4px;min-height:104px;padding:16px;text-align:center;border:1px dashed #98a6aa;border-radius:16px;background:#fff;cursor:pointer}
.service-media-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.service-media-drop span{font-weight:800;font-size:13px}
.service-media-drop small{font-size:10px;color:var(--muted,#667579)}
.service-media-manager-head h3{margin:8px 0 0;font-size:20px}
.service-media-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.service-media-admin-card{overflow:hidden;border:1px solid var(--line,#dfe5e5);border-radius:20px;background:#fff}
.service-media-admin-preview{position:relative;aspect-ratio:16/10;background:#071318;overflow:hidden}
.service-media-admin-preview img,.service-media-admin-preview video{display:block;width:100%;height:100%;object-fit:contain;background:#071318}
.service-media-type{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:999px;background:rgba(7,19,24,.8);color:#fff;font-size:9px;font-weight:850;letter-spacing:.12em}
.service-media-admin-fields{display:grid;gap:10px;padding:14px}
.service-media-admin-fields label{display:grid;gap:6px;font-size:10px;font-weight:800;color:#5d6d71}
.service-media-admin-fields input,.service-media-admin-fields textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--line,#dfe5e5);border-radius:11px;background:#fff;color:inherit;font:inherit;font-size:12px}
.service-media-admin-fields textarea{min-height:72px;resize:vertical}
.service-media-admin-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.service-media-admin-actions .danger{color:#a22c2c;border-color:rgba(162,44,44,.28)}

/* Growth Stack: every floating card stays inside the graphic at every supported width. */
.orbit-stage{contain:layout paint}
.orbit-stage .float-card{min-width:0;width:clamp(128px,31%,158px);max-width:34%;padding:12px 13px}
.orbit-stage .float-card strong{font-size:clamp(10px,1.15vw,12px);line-height:1.25;overflow-wrap:anywhere}
.orbit-stage .fc-one{top:11%;left:6%}
.orbit-stage .fc-two{top:42%;right:5%}
.orbit-stage .fc-three{bottom:8%;left:10%}
.orbit-stage .orbit-core{inset:33%;padding:20px}
.orbit-stage .orbit-core b{font-size:clamp(18px,2.2vw,24px)}

@media(max-width:980px){
  .service-portfolio-grid,.service-portfolio-grid[data-media-count="3"],.service-portfolio-grid[data-media-count="5"],.service-portfolio-grid[data-media-count="6"],.service-portfolio-grid[data-media-layout="gallery"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-portfolio-grid[data-media-count="1"]{grid-template-columns:1fr}
  .service-media-admin-grid{grid-template-columns:1fr}
  .service-media-upload-panel{grid-template-columns:1fr}
}
@media(max-width:680px){
  .service-visual.has-photo{min-height:320px;border-radius:26px}
  .service-visual.has-photo .service-visual-photo{padding:7px;border-radius:23px}
  .service-visual.has-photo:not(.media-loaded) .service-visual-fallback{min-height:320px;padding:26px}
  .service-portfolio-grid,.service-portfolio-grid[data-media-count="2"],.service-portfolio-grid[data-media-count="3"],.service-portfolio-grid[data-media-count="4"],.service-portfolio-grid[data-media-count="5"],.service-portfolio-grid[data-media-count="6"],.service-portfolio-grid[data-media-layout="gallery"]{grid-template-columns:1fr;gap:12px}
  .service-portfolio-grid .portfolio-media,.service-portfolio-grid[data-media-count="1"] .portfolio-media,.service-portfolio-grid[data-media-count="2"] .portfolio-media,.service-portfolio-grid[data-media-layout="gallery"] .portfolio-media{aspect-ratio:16/10;min-height:0}
  .service-portfolio-section .portfolio-intro{font-size:13px}
  .service-media-upload-panel{padding:14px}
  .service-media-admin-actions>*{flex:1 1 auto}
  .orbit-stage .float-card{width:32%;max-width:32%;padding:9px 10px;border-radius:13px}
  .orbit-stage .float-card small{font-size:7px}
  .orbit-stage .float-card strong{font-size:9px}
  .orbit-stage .fc-one{top:8%;left:4%}
  .orbit-stage .fc-two{right:3%;top:43%}
  .orbit-stage .fc-three{left:7%;bottom:5%}
  .orbit-stage .orbit-core{inset:32%;padding:14px;border-radius:24px}
  .orbit-stage .orbit-core span{font-size:7px}
  .orbit-stage .orbit-core b{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.service-portfolio-grid video{scroll-behavior:auto}}


/* v3.7.3 — keep the same portfolio geometry in public and authenticated Service views. */
.app-content .service-portfolio-section{padding-bottom:clamp(22px,4vw,40px)}
.app-content .service-portfolio-grid{width:100%}
/* Signed-in Service pages use the same non-display:none pending strategy as the guest page.
   Keeping authenticated portfolio images in layout is important because a lazy/hidden image may
   never be requested by the browser, leaving Owner/Admin cards permanently absent. */
.app-content .service-portfolio-grid .portfolio-media.media-pending,.app-content .service-portfolio-grid .portfolio-media:not(.is-media-ready){display:block;visibility:hidden;opacity:0;pointer-events:none}
.app-content .service-portfolio-grid .portfolio-media.is-media-ready{display:block;visibility:visible;opacity:1;pointer-events:auto;transition:opacity .18s ease}
.app-content .service-portfolio-grid img,.app-content .service-portfolio-grid video{border-radius:0;box-shadow:none}