/* editor.css — in-page section & placeholder editor for portfolio subpages */

/* role label spacing under names */
.sp__stats--names .sp__stat__val{margin-bottom:6px;}

/* ===== Accent-line caption with enumeration ===== */
.sp__capmin{position:absolute;left:clamp(18px,2.5vw,32px);bottom:clamp(16px,2.4vw,30px);z-index:4;display:none;align-items:center;gap:10px;max-width:74%;}
.ph-filled .sp__capmin,body.phedit .sp__capmin{display:flex;}
.sp__capmin__num{font-family:var(--fd),sans-serif;font-size:11px;font-weight:700;letter-spacing:0.08em;color:#0a0d12;flex-shrink:0;font-variant-numeric:tabular-nums;}
.ph-filled .sp__capmin__num{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,0.7);}
.sp__capmin__line{width:22px;height:1.5px;background:#0a0d12;flex-shrink:0;}
.ph-filled .sp__capmin__line{background:#fff;}
.sp__capmin__txt{font-family:var(--fd),sans-serif;font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:#0a0d12;line-height:1.3;}
.ph-filled .sp__capmin__txt{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,0.7);}
.sp__capmin:has(.sp__capmin__txt:empty) .sp__capmin__line{display:none;}
body.phedit .sp__capmin__txt{min-width:46px;min-height:1em;}
.sp__capsw{display:none;gap:5px;margin-left:9px;align-items:center;}
body.phedit .sp__capmin .sp__capsw{display:inline-flex;}
.sp__capsw__b{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(128,128,128,0.55);cursor:pointer;padding:0;flex-shrink:0;}
.sp__capsw__b:hover{transform:scale(1.18);}
/* gallery-tile enumeration */
.sp__matnum{position:absolute;top:8px;left:9px;z-index:4;font-family:var(--fd),sans-serif;font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--accent);font-variant-numeric:tabular-nums;}
.ph-filled .sp__matnum{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.7);}

/* ===== Placeholder shapes ===== */
.sp__ph--sq.phshape-sq,.sp__ph--wide.phshape-sq{aspect-ratio:1/1!important;}
.sp__ph--sq.phshape-wide,.sp__ph--wide.phshape-wide{aspect-ratio:16/9!important;}
.sp__ph--sq.phshape-portrait,.sp__ph--wide.phshape-portrait{aspect-ratio:3/4!important;}
.sp__cin__moment:has(.phshape-sq),.sp__cin__moment:has(.phshape-portrait),.sp__cin__moment:has(.phshape-wide){min-height:auto!important;height:auto!important;padding:clamp(40px,6vh,90px) clamp(40px,6vw,96px)!important;}
.sp__cin__moment:has(.phshape-sq) .sp__ph--wide,.sp__cin__moment:has(.phshape-portrait) .sp__ph--wide{flex:none;height:auto;max-width:560px;margin:0 auto;width:100%;}
.sp__cin__moment:has(.phshape-wide) .sp__ph--wide{flex:none;height:auto;}

/* media can be zoomed; frame clips overflow */
.ph-dropzone{overflow:hidden;}
.ph-img{transform-origin:center center;}
/* filled placeholders: no plain fill behind the image — transparent PNGs reveal whatever sits behind the frame */
.ph-dropzone.ph-filled,.ph-dropzone.ph-has-media{background:transparent!important;}

/* ===== Edit toggle + banner ===== */
.phedit-toggle{position:fixed;right:18px;bottom:18px;z-index:9600;display:flex;align-items:center;gap:9px;font-family:var(--fd),sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;background:#0f1115;color:#fff;border:none;border-radius:30px;padding:12px 18px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.25);transition:background .2s,transform .2s;}
.phedit-toggle:hover{transform:translateY(-2px);}
body.phedit .phedit-toggle{background:var(--accent,#1d3fd6);}
.phedit-toggle__dot{width:8px;height:8px;border-radius:50%;background:#777;}
body.phedit .phedit-toggle__dot{background:#fff;}

.phedit-banner{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:9000;display:none;align-items:center;gap:9px;background:rgba(15,17,21,0.94);color:#fff;font-family:var(--fd),sans-serif;font-size:11.5px;letter-spacing:0.03em;padding:8px 12px;border-radius:30px;box-shadow:0 4px 16px rgba(0,0,0,0.22);max-width:94vw;flex-wrap:wrap;justify-content:center;}
body.phedit .phedit-banner{display:flex;}
.phb-msg{font-weight:600;letter-spacing:0.06em;}
.phb-btn{background:rgba(255,255,255,0.13);border:0;color:#fff;border-radius:20px;padding:6px 12px;font:inherit;cursor:pointer;white-space:nowrap;}
.phb-btn:hover{background:var(--accent,#1d3fd6);}
.phb-align{display:inline-flex;gap:4px;}
.phb-align .phb-btn{padding:6px 11px;font-size:13px;}
.phb-align .phb-btn.is-active{background:var(--accent,#1d3fd6);}
.phb-reset{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.25);}

/* ===== Split layout: image side / text-only / stretch ===== */
@media(min-width:761px){
  .sp__cin__split{grid-template-columns:var(--eo-txt,1.15fr) var(--eo-img,0.85fr);}
  .sp__cin__split.eo-img-right{grid-template-columns:var(--eo-txt,1.15fr) var(--eo-img,0.85fr)!important;}
  .sp__cin__split.eo-img-left{grid-template-columns:var(--eo-img,0.85fr) var(--eo-txt,1.15fr)!important;}
  .sp__cin__split.eo-no-img{grid-template-columns:1fr!important;}
}
.sp__cin__split.eo-img-right > .sp__cin__txt{order:1!important;}
.sp__cin__split.eo-img-right > .sp__ph--sq,.sp__cin__split.eo-img-right > .sp__ph--wide{order:2!important;}
.sp__cin__split.eo-img-left > .sp__cin__txt{order:2!important;}
.sp__cin__split.eo-img-left > .sp__ph--sq,.sp__cin__split.eo-img-left > .sp__ph--wide{order:1!important;}
.sp__cin__split.eo-no-img > .sp__ph--sq,.sp__cin__split.eo-no-img > .sp__ph--wide{display:none!important;}
@media(max-width:760px){
  .sp__cin__split.eo-img-left,.sp__cin__split.eo-img-right{grid-template-columns:1fr!important;}
  .sp__cin__split.eo-img-left > .sp__cin__txt,.sp__cin__split.eo-img-right > .sp__cin__txt,
  .sp__cin__split.eo-img-left > .sp__ph--sq,.sp__cin__split.eo-img-left > .sp__ph--wide,
  .sp__cin__split.eo-img-right > .sp__ph--sq,.sp__cin__split.eo-img-right > .sp__ph--wide{order:0!important;}
}

/* ===== Section layout bar (top-right) ===== */
.sec-layout-bar{position:absolute;top:10px;right:10px;z-index:8;display:none;gap:4px;align-items:center;background:rgba(15,17,21,0.82);border-radius:6px;padding:4px;}
body.phedit .sp__sec:has(.sp__cin__split .sp__cin__txt) > .sec-layout-bar{display:flex;}
.sec-layout-btn{width:30px;height:28px;border:0;border-radius:4px;cursor:pointer;background:transparent;color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;}
.sec-layout-btn:hover{background:rgba(255,255,255,0.16);}
.sec-layout-btn.is-active{background:var(--accent,#1d3fd6);}
.sec-layout-sep{width:1px;align-self:stretch;background:rgba(255,255,255,0.28);margin:4px 3px;}

/* ===== Text-box stretch handle (drag the text/image boundary) ===== */
.sec-stretch{position:absolute;top:0;bottom:0;width:22px;transform:translateX(-50%);z-index:7;display:none;cursor:ew-resize;align-items:center;justify-content:center;touch-action:none;}
body.phedit .sec-stretch{display:flex;}
.sec-stretch::before{content:'';width:6px;height:52px;border-radius:4px;background:rgba(29,63,214,0.35);transition:background .2s,height .2s,width .2s;}
.sec-stretch::after{content:'\u21D4';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(-36px);font-size:11px;color:var(--accent,#1d3fd6);opacity:0.7;pointer-events:none;}
.sec-stretch:hover::before,.sec-stretch.dragging::before{background:var(--accent,#1d3fd6);height:80px;width:6px;}
.sec-stretch:hover::after,.sec-stretch.dragging::after{opacity:1;}
@media(max-width:760px){.sec-stretch{display:none!important;}}

/* ===== Text-box vertical drag handle ===== */
.txt-vdrag{position:absolute;left:-32px;top:50%;transform:translateY(-50%);z-index:8;display:none;width:24px;height:46px;border-radius:5px;cursor:ns-resize;background:rgba(15,17,21,0.78);color:#fff;align-items:center;justify-content:center;touch-action:none;}
body.phedit .sp__cin__txt > .txt-vdrag{display:flex;}
.txt-vdrag:hover,.txt-vdrag.dragging{background:var(--accent,#1d3fd6);}
@media(max-width:760px){.txt-vdrag{display:none!important;}}

/* ===== Placeholder shape + zoom toolbar ===== */
.ph-edit-bar{position:absolute;bottom:8px;right:8px;z-index:7;display:none;gap:5px;align-items:center;}
body.phedit .ph-dropzone .ph-edit-bar{display:flex;}
.ph-edit-btn{width:28px;height:28px;border:0;border-radius:4px;cursor:pointer;background:rgba(15,17,21,0.82);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;}
.ph-edit-btn:hover,.ph-edit-btn.is-active{background:var(--accent,#1d3fd6);}
.ph-edit-sep{width:1px;align-self:stretch;background:rgba(255,255,255,0.35);margin:3px 1px;}
body.phedit .ph-dropzone{outline:1px dashed rgba(29,63,214,0.40);outline-offset:-2px;}
body.phedit .ph-dropzone.ph-filled{cursor:move;}

/* ===== Video trim ===== */
.ph-trim{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:7;width:min(74%,340px);background:rgba(15,17,21,0.85);border-radius:7px;padding:9px 12px 7px;display:none;}
body.phedit .ph-dropzone .ph-trim{display:block;}
.ph-trim__track{position:relative;height:6px;background:rgba(255,255,255,0.25);border-radius:3px;}
.ph-trim__range{position:absolute;top:0;bottom:0;background:var(--accent,#1d3fd6);border-radius:3px;}
.ph-trim__h{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--accent,#1d3fd6);transform:translate(-50%,-50%);cursor:ew-resize;box-shadow:0 1px 4px rgba(0,0,0,0.45);touch-action:none;}
.ph-trim__lbl{margin-top:7px;font-family:var(--fd),sans-serif;font-size:9.5px;letter-spacing:0.06em;color:#fff;text-align:center;}

/* ===== Section reorder ===== */
.sec-handle{position:absolute;top:10px;left:10px;z-index:8;display:none;align-items:center;gap:6px;cursor:grab;background:rgba(15,17,21,0.82);color:#fff;border-radius:5px;padding:6px 11px;font-family:var(--fd),sans-serif;font-size:11px;font-weight:600;letter-spacing:0.05em;user-select:none;}
.sec-handle:active{cursor:grabbing;}
body.phedit .sec-handle{display:flex;}
body.phedit .sp__sec{outline:1px dashed rgba(29,63,214,0.22);outline-offset:-4px;}
.sp__sec.drag-ghost{opacity:0.35;}

/* ===== Editable text ===== */
body.phedit [data-editable]{outline:1px dashed rgba(29,63,214,0.4);outline-offset:3px;border-radius:2px;}
body.phedit [data-editable]:focus{outline:2px solid var(--accent,#1d3fd6);background:rgba(29,63,214,0.05);}
.add-text-btn{display:none;margin-top:18px;font-family:var(--fd),sans-serif;font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent);background:none;border:1px dashed var(--accent);border-radius:5px;padding:8px 14px;cursor:pointer;}
body.phedit .add-text-btn{display:inline-block;}

/* ===== Three-column split (image · text · image) ===== */
.sp__cin__split--tri{grid-template-columns:0.65fr 1.2fr 0.65fr;align-items:center;}
.sp__cin__split--tri>.sp__cin__txt{order:0!important;}
.sp__cin__split--tri>.sp__ph--sq{order:0!important;}
@media(max-width:760px){.sp__cin__split--tri{grid-template-columns:1fr;}}

/* ===== Programme logo slots ===== */
.sp__sec--logo{padding-top:clamp(44px,6vh,80px)!important;padding-bottom:clamp(44px,6vh,80px)!important;}
.sp__logos{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px;}
.sp__ph--logo{width:clamp(220px,32vw,360px);aspect-ratio:5/2;background:#fff;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.sp__ph--logo::before{content:attr(data-label);font-family:var(--fd),sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mut);text-align:center;padding:18px;}
.sp__ph--logo .ph-img{object-fit:contain!important;padding:22px;background:transparent;}

/* hero logo — no box; logo is the focus, transparent slot */
.sp__hero__titlerow{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,4vw,56px);margin-bottom:22px;z-index:auto!important;}
.sp__hero__titlerow .sp__ti{margin-bottom:0;}
.sp__ph--logo--hero{width:clamp(150px,20vw,260px);aspect-ratio:5/2;flex-shrink:0;background:transparent;border:none;overflow:visible!important;}
.sp__ph--logo--hero::before{color:rgba(255,255,255,0.38);font-size:9px;}
.sp__ph--logo--hero .ph-img{object-fit:contain!important;padding:0;background:transparent;filter:drop-shadow(0 2px 22px rgba(0,0,0,0.62));}
/* edit mode: show the slot boundary */
body.phedit .sp__ph--logo--hero{border:1px dashed rgba(255,255,255,0.45)!important;background:rgba(255,255,255,0.07)!important;overflow:hidden!important;}
@media(max-width:760px){.sp__hero__titlerow{flex-direction:column;align-items:flex-start;gap:18px;}.sp__ph--logo--hero{width:clamp(140px,44vw,200px);}}

/* accordion panels stay open & editable in edit mode */
body.phedit .acc__panel{max-height:none!important;overflow:visible;}

/* ===== Bird's-eye outline panel ===== */
.ph-outline{position:fixed;top:0;right:0;width:360px;max-width:88vw;height:100vh;height:100dvh;z-index:9500;background:#14161b;color:#fff;box-shadow:-8px 0 30px rgba(0,0,0,0.3);transform:translateX(100%);transition:transform .28s cubic-bezier(0.22,1,0.36,1);display:flex;flex-direction:column;font-family:var(--fd),sans-serif;}
.ph-outline.open{transform:none;}
.ph-outline__hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.1);font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;}
.ph-outline__x{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;}
.ph-outline__list{flex:1;overflow-y:auto;padding:10px;}
.ph-ol-row{display:flex;align-items:center;gap:9px;padding:10px;border-radius:6px;cursor:pointer;border:1px solid transparent;}
.ph-ol-row:hover{background:rgba(255,255,255,0.06);}
.ph-ol-row.drag{opacity:0.4;}
.ph-ol-row.over{border-color:var(--accent,#1d3fd6);}
.ph-ol-grip{cursor:grab;color:rgba(255,255,255,0.5);font-size:14px;}
.ph-ol-type{font-size:9px;letter-spacing:0.07em;text-transform:uppercase;color:#14161b;background:var(--accent,#1d3fd6);padding:3px 7px;border-radius:20px;white-space:nowrap;}
.ph-ol-label{flex:1;font-size:12.5px;color:rgba(255,255,255,0.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph-ol-tools{display:flex;gap:4px;}
.ph-ol-tools button{width:24px;height:24px;border:0;border-radius:4px;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;font-size:12px;line-height:1;}
.ph-ol-tools button:hover{background:var(--accent,#1d3fd6);}
.ph-outline__add{border-top:1px solid rgba(255,255,255,0.1);padding:16px 18px;}
.ph-outline__addlbl{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;}
.ph-outline__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ph-outline__opts button{padding:11px;border:1px dashed rgba(255,255,255,0.3);background:none;color:#fff;border-radius:6px;cursor:pointer;font-size:11.5px;font-family:inherit;}
.ph-outline__opts button:hover{border-color:var(--accent,#1d3fd6);background:rgba(29,63,214,0.16);}

/* ===== Responsive ===== */
@media(max-width:760px){
  .ph-outline{width:100%;max-width:100%;}
  .phedit-banner{top:auto;bottom:72px;font-size:11px;padding:7px 10px;gap:7px;}
  .phedit-toggle{right:14px;bottom:14px;padding:10px 15px;font-size:11px;}
  .ph-edit-bar{bottom:6px;right:6px;gap:4px;}
  .ph-edit-btn{width:30px;height:30px;}
  .ph-trim{width:90%;top:6px;}
  .sec-handle{top:8px;left:8px;}
  .sec-layout-bar{top:8px;right:8px;}
  .sp__ph--logo{width:100%;max-width:340px;}
}
@media(max-width:420px){
  .phedit-banner .phb-msg{display:none;}
}

@media print{.phedit-toggle,.phedit-banner,.sec-handle,.sec-layout-bar,.sec-stretch,.txt-vdrag,.ph-edit-bar,.ph-trim,.add-text-btn,.ph-outline{display:none!important;}}