/* Mumka case study — bespoke layout for the mumka_story block (lib/blocks/mumka.php).
   Palette from Mumka's visual style guide; the arch window echoes the Warsaw shoot. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&display=swap');

.mk{--ch:#264653;--gr:#2A9D8F;--sa:#E9C46A;--sb:#F4A261;--si:#E76F51;--cr:#FBF3E6;
  --mk-display:'Fredoka',var(--font-primary),sans-serif;
  background:var(--cr);color:var(--ch);overflow:hidden;font-family:var(--font-primary),sans-serif}
.mk .mk-c1{--c:var(--ch)}.mk .mk-c2{--c:var(--gr)}.mk .mk-c3{--c:var(--sa)}.mk .mk-c4{--c:var(--sb)}.mk .mk-c5{--c:var(--si)}

/* shared type */
.mk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--si);margin:0 0 16px}
.mk-display{font-family:var(--mk-display);font-weight:600;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.015em;color:var(--ch);margin:0 0 26px}
.mk-h2{font-family:var(--mk-display);font-weight:600;font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-.01em;color:inherit;margin:0 0 18px}
.mk-lead,.mk-text{font-size:17px;line-height:1.7;color:rgba(38,70,83,.82);max-width:620px;margin:0}
.mk-head{margin:0 0 48px}
.mk-head--light .mk-text{color:rgba(251,243,230,.8)}
.mk-head--light .mk-eyebrow{color:var(--sa)}

.mk-stripe{display:flex;height:10px}.mk-stripe i{flex:1}
.mk-stripe i:nth-child(1){background:var(--ch)}.mk-stripe i:nth-child(2){background:var(--gr)}.mk-stripe i:nth-child(3){background:var(--sa)}.mk-stripe i:nth-child(4){background:var(--sb)}.mk-stripe i:nth-child(5){background:var(--si)}

/* 1. intro */
.mk-intro{padding:clamp(80px,10vw,140px) 0 clamp(70px,8vw,110px)}
.mk-intro__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:center}
.mk-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:30px 0 0}
.mk-chips li{font-size:13px;font-weight:600;padding:9px 16px;border-radius:99px;background:#fff;color:var(--ch);box-shadow:inset 0 0 0 1.5px rgba(38,70,83,.14)}
.mk-chips li:nth-child(5n+1){background:var(--gr);color:#fff;box-shadow:none}
.mk-chips li:nth-child(5n+3){background:var(--sa);box-shadow:none}
.mk-intro__arches{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:4%;align-items:end;aspect-ratio:1/1.02}
.mk-arch{position:relative;margin:0;border-radius:999px 999px 0 0;overflow:visible;height:78%}
.mk-arch--2{height:100%}
.mk-arch img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;display:block}
.mk-arch::before{content:"";position:absolute;inset:-14px -14px 0 14px;border:4px solid var(--gr);border-bottom:0;border-radius:999px 999px 0 0;z-index:0}
.mk-arch--2::before{border-color:var(--si)}.mk-arch--3::before{border-color:var(--sb)}
.mk-sun{position:absolute;border-radius:50%;z-index:2}
.mk-sun--a{width:17%;aspect-ratio:1;background:var(--sa);right:-2%;top:2%}
.mk-sun--b{width:9%;aspect-ratio:1;background:var(--si);left:2%;top:14%}

/* 2. stats */
.mk-stats{background:var(--si);padding:clamp(56px,7vw,90px) 0}
.mk-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mk-stat{position:relative;overflow:hidden;background:var(--cr);border-radius:26px;padding:30px 28px 34px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.mk-stat::after{content:"";position:absolute;right:-38px;bottom:-38px;width:110px;height:110px;border-radius:50%;background:var(--c)}
.mk-stat.mk-c5{--c:var(--ch)}
.mk-stat__num{font-family:var(--mk-display);font-weight:600;font-size:clamp(44px,4.6vw,66px);line-height:1;color:var(--ch)}
.mk-stat__label{position:relative;z-index:1;font-size:15px;line-height:1.5;color:rgba(38,70,83,.85);max-width:88%}

/* 3. timeline */
.mk-timeline{padding:clamp(80px,10vw,130px) 0}
.mk-timeline__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.mk-timeline__list::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,rgba(38,70,83,.25) 0 8px,transparent 8px 16px)}
.mk-step{position:relative;padding-top:0}
.mk-step__year{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 24px;border-radius:99px;background:var(--c);color:#fff;font-family:var(--mk-display);font-weight:600;font-size:24px;margin-bottom:24px}
.mk-step.mk-c3 .mk-step__year{color:var(--ch)}
.mk-step__title{font-family:var(--mk-display);font-weight:600;font-size:24px;line-height:1.15;color:var(--ch);margin:0 0 10px}
.mk-step__text{font-size:15px;line-height:1.65;color:rgba(38,70,83,.78);margin:0}

/* 4. story wall */
.mk-wall{background:var(--gr);color:#fff;padding:clamp(80px,10vw,120px) 0 clamp(70px,8vw,100px)}
.mk-wall .mk-head{display:inline-block;max-width:760px;margin-bottom:26px}
.mk-wall .container{position:relative}
.mk-markets{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 50px}
.mk-markets li{font-family:var(--mk-display);font-weight:600;font-size:16px;padding:8px 20px;border-radius:99px;background:var(--cr);color:var(--ch)}
.mk-wall__row{overflow:hidden;padding:18px 0}
.mk-wall__track{display:flex;gap:26px;width:max-content;animation:mkMarquee 60s linear infinite}
.mk-wall__row--rev .mk-wall__track{animation-direction:reverse;animation-duration:70s}
.mk-wall__row:hover .mk-wall__track{animation-play-state:paused}
.mk-phone{flex:0 0 auto;width:clamp(150px,15vw,220px);aspect-ratio:9/16;border-radius:28px;background:#14232b;padding:7px;box-shadow:0 22px 40px rgba(20,35,43,.28);transform:rotate(-2.5deg);transition:transform .35s ease}
.mk-phone:nth-child(even){transform:rotate(2.5deg) translateY(14px)}
.mk-phone:hover{transform:rotate(0) translateY(-8px) scale(1.04)}
.mk-phone img{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
@keyframes mkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mk-wall__track{animation:none}.mk-wall__row{overflow-x:auto}}

/* 5. Warsaw editorial */
.mk-warsaw{background:var(--ch);color:var(--cr);padding:clamp(80px,10vw,130px) 0}
.mk-warsaw .mk-h2{color:var(--cr)}
.mk-warsaw__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(70px,7.2vw,104px);gap:18px}
.mk-shot{position:relative;margin:0;overflow:hidden;border-radius:22px;background:#1d3843}
.mk-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.mk-shot:hover img{transform:scale(1.04)}
.mk-shot figcaption{position:absolute;left:12px;right:12px;bottom:12px;font-size:12px;line-height:1.4;padding:8px 12px;border-radius:12px;background:rgba(20,35,43,.72);color:var(--cr);opacity:0;transform:translateY(6px);transition:.3s}
.mk-shot:hover figcaption{opacity:1;transform:none}
.mk-shot--1{grid-column:1/6;grid-row:1/8;border-radius:999px 999px 22px 22px;outline:4px solid var(--sa);outline-offset:10px}
.mk-shot--2{grid-column:6/10;grid-row:1/5}
.mk-shot--3{grid-column:10/13;grid-row:1/4;border-radius:50%;aspect-ratio:1;align-self:start;outline:4px solid var(--si);outline-offset:8px}
.mk-shot--4{grid-column:10/13;grid-row:4/8}
.mk-shot--5{grid-column:6/10;grid-row:5/8}
.mk-shot--6{grid-column:1/7;grid-row:8/12}
.mk-shot--7{grid-column:7/13;grid-row:8/12}

/* 6. toolkit */
.mk-kit{padding:clamp(80px,10vw,130px) 0}
.mk-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}
.mk-swatch{aspect-ratio:1/1.9;border-radius:999px 999px 22px 22px;background:var(--sw);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.mk-swatch:nth-child(3){color:var(--ch)}
.mk-swatch b{font-family:var(--mk-display);font-weight:600;font-size:clamp(15px,1.6vw,22px)}
.mk-swatch span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:4px}
.mk-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk-post{margin:0;aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 18px 36px rgba(38,70,83,.14)}
.mk-post img{width:100%;height:100%;object-fit:cover;display:block}

/* 7. services */
.mk-works{background:#fff;padding:clamp(70px,9vw,110px) 0}
.mk-works__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mk-work{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 22px 24px;border-radius:24px;background:var(--cr);color:var(--ch);text-decoration:none;border-top:8px solid var(--c);transition:transform .3s ease,box-shadow .3s ease}
.mk-work:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(38,70,83,.14)}
.mk-work__ico{font-size:22px;color:var(--c)}
.mk-work.mk-c3 .mk-work__ico{color:#c9a13c}
.mk-work__title{font-family:var(--mk-display);font-weight:600;font-size:21px;margin:0;color:var(--ch)}
.mk-work__text{font-size:14px;line-height:1.6;margin:0;color:rgba(38,70,83,.78);flex:1}
.mk-work__more{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gr)}

/* 8. CTA */
.mk-cta{background:linear-gradient(120deg,var(--sb),var(--si));color:#fff;text-align:center;padding:clamp(80px,9vw,120px) 0}
.mk-cta__title{font-family:var(--mk-display);font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1;color:#fff;margin:0 0 16px}
.mk-cta__text{font-size:17px;line-height:1.6;max-width:560px;margin:0 auto 34px;color:rgba(255,255,255,.9)}
.mk-cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.mk-cta .mil-btn{background:var(--cr);color:var(--ch)}
.mk-cta .mil-btn-border{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}

/* responsive */
@media(max-width:1199px){
  .mk-works__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:991px){
  .mk-intro__grid{grid-template-columns:1fr}
  .mk-intro__arches{max-width:620px;width:100%;margin:0 auto}
  .mk-stats__grid{grid-template-columns:repeat(2,1fr)}
  .mk-timeline__list{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .mk-timeline__list::before{display:none}
  .mk-warsaw__grid{grid-auto-rows:clamp(54px,9vw,90px)}
}
@media(max-width:767px){
  .mk-warsaw__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px}
  .mk-shot{grid-column:auto!important;grid-row:auto!important;aspect-ratio:3/4}
  .mk-shot--1{grid-column:1/3!important;aspect-ratio:4/5;outline-offset:6px}
  .mk-shot--3{aspect-ratio:1}
  .mk-shot--6,.mk-shot--7{grid-column:1/3!important;aspect-ratio:3/2}
  .mk-swatches{grid-template-columns:repeat(5,1fr);gap:8px}
  .mk-swatch{padding:12px 6px;border-radius:999px 999px 14px 14px;text-align:center}
  .mk-swatch b{font-size:11px}.mk-swatch span{display:none}
  .mk-posts{grid-template-columns:repeat(3,1fr);gap:8px}
  .mk-works__grid{grid-template-columns:1fr 1fr}
  .mk-stat{min-height:160px;padding:22px 20px}
}
@media(max-width:480px){
  .mk-stats__grid,.mk-timeline__list,.mk-works__grid{grid-template-columns:1fr}
}

/* override the theme's uppercase headings + icon positioning inside the Mumka block */
.mk h2,.mk h3,.mk .mk-display,.mk .mk-h2{text-transform:none}
.mk .mk-work__ico{position:static;display:inline-block;align-self:flex-start;margin:0 0 4px;width:auto;height:auto;line-height:1;transform:none;translate:none;font-size:22px}
.mk .mk-wall__row{padding:34px 0 30px}