/* Zalando Outlet Case Study - Layout v4 (Figma: updated / desktop 1920px) */
:root{--zo-black:#000;--zo-white:#fff;--zo-ink:#1e1e21;--zo-grey:#d9d9d9;--zo-orange:#ff4c00;--zo-pad:clamp(20px,3.34vw,64px);--zo-gap:clamp(24px,2.5vw,48px)}
html{background:#fff;scroll-behavior:smooth}
body{max-width:1920px!important;margin:0 auto;background:#fff;color:var(--zo-black);font-family:"Satoshi",sans-serif;overflow-x:hidden}
.zo-wrap{padding-inline:max(var(--pad),calc((100vw - 1280px) / 2 + var(--pad)))}
.zo-sec{padding-top:0}
img{display:block;max-width:100%}
a{color:var(--zo-black)}
a:hover{color:var(--zo-orange)}

/* ── Typo ── */
.zo-h1{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(48px,7vw,82px);line-height:1;letter-spacing:-.02em;color:var(--zo-black)}
.zo-lead{font-family:"Satoshi",sans-serif;font-weight:300;font-size:34px;line-height:1.15;letter-spacing:-.01em;color:var(--zo-black)}
.zo-body{font-family:"Satoshi",sans-serif;font-weight:300;font-size:22px;line-height:1.6;color:var(--zo-black);text-wrap:pretty}
.zo-h2{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:34px;line-height:1.2;letter-spacing:-.02em;color:var(--zo-black)}
.zo-h3{font-family:"Satoshi",sans-serif;font-weight:300;font-size:24px;line-height:1.2;color:var(--zo-black)}
.zo-key{font-family:"Satoshi",sans-serif;font-weight:300;font-size:18px;line-height:1.2;color:var(--zo-black)}
.zo-val{font-family:"Satoshi",sans-serif;font-weight:300;font-size:18px;line-height:1.2;color:var(--zo-black);text-align:right}

/* ── Hero ── */
.zo-hero{position:relative;overflow:hidden;aspect-ratio:1920/1036;padding-top:0}
.zo-hero img{width:100%;height:100%;object-fit:cover;object-position:top}
.zo-noise{position:absolute;inset:0;opacity:.2;background:url(../zalando-outlet/img/noise.webp) top left/220px 220px repeat;pointer-events:none}

/* ── Intro ── */
.zo-intro{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:48px;align-items:end;padding-block:clamp(40px,5vw,96px) clamp(48px,6.25vw,120px)}
.zo-intro-copy{display:flex;flex-direction:column;gap:24px;max-width:935px}
.zo-title-block{display:flex;flex-direction:column;gap:14px}
.zo-table{display:flex;flex-direction:column;align-self:end;width:100%}
.zo-tr{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--zo-black)}
.zo-tr:last-child{border-bottom:0}
.zo-tr:has(.zo-pills){align-items:flex-start}

/* ── Pills ── */
.zo-pills{display:flex;flex-wrap:wrap;gap:12px}
.zo-pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;min-height:47px;border-radius:24px;background:var(--zo-ink);color:#f5f3ef;font-family:"Satoshi",sans-serif;font-weight:400;font-size:20px;line-height:1;white-space:nowrap;transition:background .2s,color .2s}
.zo-pill.is-black{background:var(--zo-black);color:#fff}
.zo-pill:hover{background:#fff;color:var(--zo-black);box-shadow:inset 0 0 0 1px var(--zo-black)}

/* ── Media grids ── */
.zo-media{display:grid;gap:var(--zo-gap)}
.zo-row{display:grid;gap:clamp(20px,1.8vw,34px);align-items:stretch}
.zo-row>*{min-width:0}
.zo-row img,.zo-figure img{width:100%;height:100%;object-fit:cover}
.zo-figure{overflow:hidden;background:#f5f5f5}
.zo-stack{display:grid;grid-template-rows:1fr 1fr;gap:clamp(18px,1.6vw,31px);min-height:0}
.zo-stack>*{overflow:hidden;min-height:0}
.zo-panel{background:var(--zo-grey);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(24px,3vw,56px)}
.zo-panel:has(.zo-phones){padding:clamp(24px,4vw,64px)}
.zo-panel img{width:auto;height:100%;max-width:100%;object-fit:contain}

/* Phone mockups */
.zo-phones{display:flex;gap:clamp(10px,1.2vw,24px);align-items:center;justify-content:center;width:100%;height:100%}
.zo-phone{position:relative;height:96%;width:auto;aspect-ratio:1268/2600;flex:0 0 auto;filter:drop-shadow(0 18px 44px rgba(0,0,0,.22))}
.zo-phone .zo-phone-screen{position:absolute;top:2%;left:4.4%;right:4.4%;bottom:2%;overflow:hidden;border-radius:7.5%/3.6%;background:#0a0a0a}
.zo-phone .zo-phone-screen img{width:100%;height:100%;object-fit:cover;border-radius:0}
.zo-phone .zo-phone-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}
.zo-phone.is-first{transform:translateY(-4%)}
.zo-phone.is-second{transform:translateY(6%)}

/* ── Tablet Mail Mockup (Original-Animation als Embed) ── */
.zo-tablet-embed{position:relative;width:100%;max-height:calc(100svh - 140px);aspect-ratio:1500/1020;overflow:hidden;background:var(--zo-grey);display:flex;align-items:center;justify-content:center}
.zo-tablet-embed>div{margin:0 auto;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.zo-tablet-embed>div>*:last-child{display:none!important}
.zo-tablet-embed svg{box-shadow:none!important}
.zo-tablet-embed [data-om-caption],.zo-tablet-embed [data-om-unknown-cues]{display:none!important}

/* ── Details ── */
.zo-details{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,2.15fr);gap:clamp(28px,3.34vw,64px);padding-block:clamp(48px,3.34vw,64px);align-items:start}
.zo-rule-v{background:var(--zo-black);align-self:stretch}
.zo-rule-h{height:1px;background:var(--zo-black);width:100%}
.zo-detail-left{display:flex;flex-direction:column;gap:clamp(28px,2.5vw,40px)}
.zo-detail-head{display:flex;align-items:center;gap:32px;justify-content:space-between}
.zo-detail-head svg{width:clamp(36px,3.2vw,61px);height:auto;flex-shrink:0}
.zo-group{display:flex;flex-direction:column;gap:24px}
.zo-detail-right{display:flex;flex-direction:column;gap:clamp(32px,3.34vw,64px)}
.zo-block{display:flex;flex-direction:column;gap:16px;max-width:100ch}

/* ── Sections spacing ── */
.zo-gallery{padding-block:clamp(40px,3.34vw,64px)}
.zo-outro{position:relative;aspect-ratio:1920/1080;background:#ffaa96;overflow:hidden}
.zo-outro img{width:100%;height:100%;object-fit:cover}

/* ── Responsive ── */
@media (max-width:1100px){
  .zo-intro{grid-template-columns:1fr;gap:40px;align-items:start}
  .zo-table{align-self:start}
  .zo-row{grid-template-columns:1fr!important;aspect-ratio:auto!important}
  .zo-row>.zo-figure,.zo-row>.zo-panel{aspect-ratio:4/3}
  .zo-stack{grid-template-rows:auto auto}
  .zo-stack>*{aspect-ratio:4/3}
  .zo-row>.zo-panel:has(.zo-phones){aspect-ratio:3/2;padding:clamp(20px,4vw,40px)}
  .zo-phone{height:86%;width:auto}
  .zo-phone.is-first{transform:translateY(-2%)}
  .zo-phone.is-second{transform:translateY(3%)}
}
@media (max-width:860px){
  .zo-details{grid-template-columns:1fr;gap:32px}
  .zo-rule-v{height:1px;width:100%}
}
@media (max-width:680px){
  :root{--zo-pad:20px}
  .zo-h1{font-size:48px}
  .zo-lead{font-size:26px}
  .zo-body{font-size:20px}
  .zo-h2{font-size:28px}
  .zo-key,.zo-val{font-size:16px}
  .zo-pill{font-size:16px}
  .zo-tr{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}
  .zo-val{text-align:right}
  .zo-hero{aspect-ratio:4/3}
  .zo-hero img{object-position:30% top}
  .zo-outro{aspect-ratio:1/1}
  .zo-detail-head svg{width:32px}
  .zo-panel{padding:20px}
}