/* Live preview frame (live-preview.js): the original landing page running inside a browser or phone frame. */
.project-live{padding:clamp(24px,3vw,44px) 0 clamp(60px,8vw,110px)}
.project-live-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-bottom:clamp(18px,2vw,28px)}
.project-live-head p{margin:0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--dt-muted,#a5a5ab)}
.project-live-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.live-toggle{display:inline-flex;padding:4px;border:1px solid var(--dt-line,rgba(244,244,242,.14));border-radius:999px}
.live-toggle button{min-height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--dt-muted,#a5a5ab);font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.live-toggle button[aria-pressed="true"]{background:var(--dt-red,#d32f38);color:#fff}
.live-toggle button:focus-visible{outline:2px solid var(--dt-red,#d32f38);outline-offset:2px}

.live-frame{position:relative;margin:0 auto;border:1px solid rgba(244,244,242,.14);border-radius:14px;background:#141417;box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 140px rgba(211,47,56,.18);overflow:hidden;transition:max-width .7s cubic-bezier(.16,1,.3,1),border-radius .5s ease}
.live-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid rgba(244,244,242,.08);background:#1a1a1e}
.live-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a40}
.live-bar i:first-child{background:#d32f38}
.live-bar b{margin:0 auto;padding:5px 22px;border-radius:7px;background:#232328;color:#a5a5ab;font:500 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.02em}
.live-screen{position:relative;height:calc(100svh - 170px);min-height:520px;overflow:hidden;background:#0d0d10}
.live-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .6s ease}
.live-frame.is-loaded iframe{opacity:1}
.live-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:blur(2px) brightness(.6)}
.live-frame:not(.is-loaded) .live-screen::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid rgba(244,244,242,.2);border-top-color:#d32f38;border-radius:50%;animation:live-spin .9s linear infinite}
@keyframes live-spin{to{transform:rotate(1turn)}}

/* Phone view: narrow frame with rounded corners, no browser chrome. */
.live-frame[data-view="mobile"]{max-width:410px;border-radius:44px;padding:10px;background:#0b0b0d;border-color:rgba(244,244,242,.18)}
.live-frame[data-view="mobile"] .live-bar{display:none}
.live-frame[data-view="mobile"] .live-screen{height:min(80svh,844px);border-radius:34px}
.live-frame[data-view="desktop"]{max-width:100%}
@media(max-width:760px){.live-screen{height:72svh}.project-live-tools{width:100%}.project-live-tools .project-detail-button{flex:1}}
@media(prefers-reduced-motion:reduce){.live-frame{transition:none}.live-screen iframe{transition:none}}

/* Click-to-browse shield: the page keeps scrolling over the frame until the visitor chooses to browse the site. */
.live-shield{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0 0 clamp(20px,3vw,36px);border:0;background:linear-gradient(to top,rgba(9,9,11,.55),transparent 38%);cursor:pointer;transition:opacity .35s ease}
.live-shield span{display:inline-flex;align-items:center;gap:12px;padding:13px 22px;border:1px solid rgba(244,244,242,.2);border-radius:999px;background:rgba(14,14,17,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f4f4f2;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;box-shadow:0 18px 50px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.live-shield i{width:8px;height:8px;border-radius:50%;background:#d32f38;box-shadow:0 0 0 4px rgba(211,47,56,.25);animation:live-pulse 1.8s ease-in-out infinite}
.live-shield:hover span,.live-shield:focus-visible span{transform:translateY(-3px);border-color:#d32f38}
.live-shield:focus-visible{outline:none}
@keyframes live-pulse{50%{box-shadow:0 0 0 8px rgba(211,47,56,0)}}
.live-frame.is-active .live-shield{opacity:0;pointer-events:none}
.live-frame.is-active{box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px rgba(211,47,56,.55),0 0 160px rgba(211,47,56,.25)}

/* Full screen: the frame fills the window and the site renders at real size. */
.live-close{display:none}
.live-frame.is-full{position:fixed;inset:0;z-index:9000;max-width:none;margin:0;border-radius:0;border:0;padding:0}
.live-frame.is-full .live-bar{display:flex}
.live-frame.is-full .live-screen{height:calc(100svh - 42px);min-height:0;border-radius:0}
.live-frame.is-full[data-view="mobile"]{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(9,9,11,.96)}
.live-frame.is-full[data-view="mobile"] .live-bar{display:none}
.live-frame.is-full[data-view="mobile"] .live-screen{width:min(410px,92vw);height:min(86svh,844px);border-radius:34px}
.live-frame.is-full .live-close{position:absolute;z-index:3;top:5px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(244,244,242,.2);border-radius:50%;background:#232328;color:#f4f4f2;font:400 20px/1 Inter,system-ui,sans-serif;cursor:pointer}
.live-frame.is-full[data-view="mobile"] .live-close{top:16px;right:16px;width:44px;height:44px}
.live-close:hover,.live-close:focus-visible{border-color:#d32f38;outline:none}
html.live-full-open,html.live-full-open body{overflow:hidden}
html.live-full-open .whatsapp-float{display:none}
@media(max-width:760px){.live-screen{height:72svh;min-height:0}.project-live-tools .live-full-btn{display:none}}
/* Phones: the view toggle takes the first row, "open site" the second; full screen is not offered (the phone frame already fills the screen). */
@media(max-width:760px){
  .editorial-site .project-live-tools .live-full-btn{display:none!important}
  .project-live-tools{display:grid;grid-template-columns:1fr;gap:10px}
  .live-toggle{display:grid;grid-template-columns:1fr 1fr}
  .editorial-site .project-live-tools .project-detail-button{width:100%;justify-content:center;white-space:nowrap}
}