/* ============================================
   SPOLUBIDLO WORK — sub-brand stylesheet
   Extends the main brand tokens (style.css must be
   loaded first) with a cooler, more corporate palette:
   more gray, accent orange used only as a highlight,
   never as a background or gradient.
   ============================================ */

:root{
  --work-bg: #F6F6F7;
  --work-surface: #FFFFFF;
  --work-ink: #17171C;
  --work-gray-1: #4B4B52;
  --work-gray-2: #86868C;
  --work-gray-3: #B9B9BE;
  --work-border: rgba(23,23,28,0.10);
  --work-border-soft: rgba(23,23,28,0.06);
  --work-panel: #EFEFF1;
  --work-shadow-sm: 0 2px 10px rgba(23,23,28,0.05);
  --work-shadow-md: 0 10px 28px rgba(23,23,28,0.08);
  --work-shadow-lg: 0 24px 56px rgba(23,23,28,0.12);
}

.work-page{background:var(--work-bg); color:var(--work-ink);}

/* ---- shared section rhythm ---- */
.work-section{padding:100px 5vw; position:relative; overflow:hidden;}
.work-section-inner{max-width:1180px; margin:0 auto; position:relative; z-index:1;}
.work-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
  letter-spacing:0.03em; color:var(--work-gray-1);
  text-transform:uppercase;
  margin-bottom:18px;
}
.work-eyebrow-dot{width:6px; height:6px; border-radius:50%; background:var(--orange);}
.work-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  letter-spacing:-0.02em; line-height:1.12;
  color:var(--work-ink); margin-bottom:16px; max-width:640px;
}
.work-lede{
  font-size:1.05rem; color:var(--work-gray-1); line-height:1.65; max-width:560px;
}
.work-section-head{margin-bottom:52px; position:relative;}

/* ---- nav (reuses main .nav but tuned) ---- */
.work-page .nav.scrolled{background:rgba(246,246,247,0.86);}
.work-badge-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:500;
  color:var(--work-gray-1); background:var(--work-panel);
  border:1px solid var(--work-border); border-radius:100px;
  padding:6px 12px;
}
.work-nav-logo-img{height:32px !important;}
.footer-logo .work-nav-logo-img{height:38px !important;}

/* ============================================
   HERO
   ============================================ */
.work-hero{
  padding:150px 5vw 90px;
  position:relative; overflow:hidden;
}
.work-hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px;
  align-items:center;
  position:relative; z-index:1;
}
.work-hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
  color:var(--work-gray-1); background:var(--work-surface);
  border:1px solid var(--work-border); border-radius:100px;
  padding:7px 14px 7px 10px; margin-bottom:26px;
}
.work-hero-eyebrow .work-eyebrow-dot{background:var(--orange);}
.work-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);
  letter-spacing:-0.025em; line-height:1.06;
  color:var(--work-ink); margin-bottom:22px;
}
.work-hero-sub{
  font-size:1.12rem; color:var(--work-gray-1); line-height:1.6;
  max-width:480px; margin-bottom:34px;
}
.work-hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

.btn-work-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--work-ink); color:var(--white);
  font-weight:600; font-size:0.95rem;
  padding:14px 26px; border-radius:12px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn-work-primary:hover{background:#000; transform:translateY(-2px);}
.btn-work-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--work-surface); color:var(--work-ink);
  border:1px solid var(--work-border);
  font-weight:600; font-size:0.95rem;
  padding:14px 26px; border-radius:12px;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.btn-work-secondary:hover{border-color:var(--work-ink); transform:translateY(-2px);}

/* ---- hero signature: reporting panel mockup ---- */
.work-hero-visual{display:flex; flex-direction:column;}
.work-hero-stage{position:relative; min-height:400px;}
.work-hero-photo-card{
  position:absolute; top:0; left:0; z-index:2;
  width:78%; aspect-ratio:4/3.1; border-radius:18px; overflow:hidden;
  transform:rotate(-6deg);
  box-shadow:var(--work-shadow-lg);
  border:6px solid var(--work-surface);
  cursor:pointer;
  transition:transform .45s var(--ease), top .45s var(--ease), left .45s var(--ease),
    box-shadow .3s var(--ease);
}
.work-hero-photo-card:hover{
  transform:rotate(-3deg) scale(1.02);
  box-shadow:var(--work-shadow-lg), 0 30px 70px rgba(19,19,26,0.22);
}
.work-hero-photo-card:focus-visible{outline:2px solid var(--work-ink); outline-offset:3px;}
.work-hero-photo-card img{width:100%; height:100%; object-fit:cover; display:block;}
.work-panel-card{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:20px; box-shadow:var(--work-shadow-lg);
  padding:26px 26px 22px;
  position:absolute; top:20px; left:14%; z-index:1;
  width:72%;
  transform:rotate(2deg);
  transition:transform .45s var(--ease), top .45s var(--ease), left .45s var(--ease);
}

/* Hover the photo (or click, for touch/keyboard) to bring the panel forward instead */
.work-hero-stage:hover .work-hero-photo-card,
.work-hero-stage.is-swapped .work-hero-photo-card{
  z-index:1; top:20px; left:20%; transform:rotate(2deg);
}
.work-hero-stage:hover .work-panel-card,
.work-hero-stage.is-swapped .work-panel-card{
  z-index:2; top:0; left:0; transform:rotate(-4deg);
}
.work-panel-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.work-panel-title{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--work-ink);}
.work-panel-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.75rem; font-weight:600; color:#1C8A5A;
  background:rgba(28,138,90,0.1); padding:5px 10px; border-radius:100px;
}
.work-panel-status::before{content:''; width:6px; height:6px; border-radius:50%; background:#1C8A5A;}
.work-panel-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid var(--work-border-soft);
}
.work-panel-row:last-child{border-bottom:none;}
.work-panel-row-label{display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--work-ink);}
.work-panel-icon{
  width:32px; height:32px; border-radius:9px; background:var(--work-panel);
  display:flex; align-items:center; justify-content:center; color:var(--work-gray-1); flex-shrink:0;
}
.work-panel-row-value{font-family:var(--font-mono); font-size:0.85rem; color:#1C8A5A; font-weight:500;}
.work-panel-floating{
  align-self:center;
  margin-top:36px; position:relative; z-index:1;
  background:var(--work-ink); color:var(--white);
  border-radius:16px; padding:16px 20px; box-shadow:var(--work-shadow-md);
  display:flex; align-items:center; gap:12px;
  animation:work-float-badge 4s ease-in-out infinite;
}
@keyframes work-float-badge{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.work-panel-floating-num{font-family:var(--font-display); font-weight:700; font-size:1.4rem;}
.work-panel-floating-label{font-size:0.72rem; color:rgba(255,255,255,0.7); max-width:100px; line-height:1.3;}
.work-hero-bg-grid{
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:
    linear-gradient(var(--work-border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--work-border-soft) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 60% 50% at 60% 30%, black, transparent);
}

/* ---- decorative 3D shape assets (used sparingly across sections) ---- */
.work-bg-shape{
  position:absolute; z-index:0; pointer-events:none;
  will-change:transform;
}
.work-bg-shape img{width:100%; height:100%; display:block;}

.work-bg-shape-hero-1{
  width:150px; height:150px; top:20px; left:1%; transform:rotate(-18deg);
  display:none;
}
@media (min-width:1500px){
  .work-bg-shape-hero-1{display:block;}
}
.work-bg-shape-story{
  position:static; width:200px; height:200px; margin:28px 0 0; transform:rotate(8deg);
}
.work-bg-shape-pro-koho{
  width:190px; height:190px; top:10px; right:60px; transform:rotate(-10deg);
  display:none;
}
@media (min-width:1240px){
  .work-bg-shape-pro-koho{display:block;}
}
.work-bg-shape-career{
  width:230px; height:230px; top:-50px; right:-40px; transform:rotate(14deg);
}

/* ============================================
   PRO KOHO
   ============================================ */
.work-audience-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.work-audience-card{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:18px; padding:30px 26px; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.work-audience-card:hover{box-shadow:var(--work-shadow-md); transform:translateY(-4px);}
.work-audience-icon{
  width:46px; height:46px; border-radius:12px; background:var(--work-panel);
  display:flex; align-items:center; justify-content:center; color:var(--work-ink);
  margin-bottom:18px;
}
.work-audience-card h3{font-family:var(--font-display); font-size:1.12rem; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em;}
.work-audience-card p{color:var(--work-gray-1); font-size:0.92rem; line-height:1.5;}

/* ============================================
   CO ZA VÁS VYŘEŠÍME
   ============================================ */
.work-vyresime-head-row{
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  margin-bottom:52px;
}
.work-vyresime-smiley{
  flex-shrink:0; width:190px; height:190px;
  animation:work-float-smiley 5s ease-in-out infinite;
}
.work-vyresime-smiley img{width:100%; height:100%; object-fit:contain; display:block;}
.work-vyresime-smiley-vyhody{
  animation-duration:6s; animation-delay:0.4s;
}
@keyframes work-float-smiley{
  0%,100%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(-14px) rotate(2deg);}
}
.work-solve-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.work-solve-item{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:14px; padding:20px 18px;
  display:flex; align-items:flex-start; gap:12px;
}
.work-solve-icon{
  width:34px; height:34px; border-radius:9px; background:var(--work-panel);
  display:flex; align-items:center; justify-content:center; color:var(--work-gray-1); flex-shrink:0;
}
.work-solve-item span:last-child{font-size:0.9rem; font-weight:500; color:var(--work-ink); line-height:1.4;}

/* ============================================
   JAK SPOLUPRÁCE FUNGUJE
   ============================================ */
.work-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative; padding-top:6px;
}
.work-steps::before{
  content:'';
  position:absolute; top:23px; left:12.5%; right:12.5%;
  height:1px; background:var(--work-border); z-index:0;
}
.work-step{position:relative; text-align:center; padding:0 14px;}
.work-step-num{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%;
  background:var(--work-surface); border:1px solid var(--work-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.82rem;
  color:var(--work-ink);
  margin:0 auto 16px;
}
.work-step h3{font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em;}
.work-step p{color:var(--work-gray-1); font-size:0.88rem; line-height:1.5;}

/* ============================================
   VÝHODY
   ============================================ */
.work-benefits-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.work-benefit{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:16px; padding:24px 20px;
}
.work-benefit-icon{
  width:40px; height:40px; border-radius:11px; background:var(--work-panel);
  display:flex; align-items:center; justify-content:center; color:var(--orange);
  margin-bottom:16px;
}
.work-benefit h3{font-family:var(--font-display); font-size:1rem; font-weight:600; margin-bottom:6px; letter-spacing:-0.01em;}
.work-benefit p{color:var(--work-gray-1); font-size:0.86rem; line-height:1.48;}

/* ============================================
   NEMOVITOSTI VE SPRÁVĚ (gallery)
   ============================================ */
.work-gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.work-gallery-tile{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:3/3.6;
  box-shadow:var(--work-shadow-sm);
}
.work-gallery-tile-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.work-gallery-tile-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px 16px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.work-gallery-tile-label span{color:var(--white); font-size:0.78rem; font-weight:600;}
.work-gallery-tile-label span:first-child{font-family:var(--font-display);}
.work-gallery-tile-status{
  font-family:var(--font-mono); font-weight:500; font-size:0.68rem;
  color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.16);
  padding:4px 9px; border-radius:100px; white-space:nowrap;
}

/* ============================================
   NABÍZÍME STUDENTŮM
   ============================================ */
.work-students-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.work-students-visual{
  position:relative; display:flex; flex-direction:column; align-items:center;
}
.work-students-phones{
  width:78%;
  /* the artwork's two phones aren't symmetric within their canvas — the
     visual "weight" sits ~5% right of the canvas center. Shift the canvas
     left by that amount (as a % of the parent, since margin percentages
     are always relative to the containing block) so the phones themselves
     land on the true center; the badges below then line up for free via
     plain align-items:center at every breakpoint. */
  margin-left:-4.06%;
  animation:work-float-phones 6s ease-in-out infinite;
}
.work-students-phones img{width:100%; height:auto; display:block;}
@keyframes work-float-phones{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(1deg);}
}
.work-students-stores{
  display:flex; gap:10px; margin-top:24px;
}
.work-students-stores .store-badge-img{height:40px; display:block;}
.work-students-stores .store-badge-img-link{transition:transform .25s var(--ease);}
.work-students-stores .store-badge-img-link:hover{transform:translateY(-3px);}
.work-students-badge{
  margin-top:26px;
  background:var(--work-surface); border:1px solid var(--work-border); border-radius:16px; padding:18px 20px;
  display:flex; align-items:flex-start; gap:14px;
  color:var(--work-ink); box-shadow:var(--work-shadow-sm);
  max-width:440px;
}
.work-students-badge svg{color:var(--orange); flex-shrink:0; margin-top:1px;}
.work-students-badge span{font-size:0.92rem; font-weight:600; line-height:1.4;}

/* ============================================
   PROČ VZNIKLO
   ============================================ */
.work-story{
  background:var(--work-ink); border-radius:28px;
  padding:64px 6vw; color:var(--white);
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center;
  position:relative; overflow:hidden;
}
.work-story > div{position:relative; z-index:1;}
.work-story-label{
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500; letter-spacing:0.03em;
  color:rgba(255,255,255,0.55); text-transform:uppercase; margin-bottom:16px; display:block;
}
.work-story h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,2.6vw,2.2rem);
  letter-spacing:-0.02em; line-height:1.14; color:var(--white);
}
.work-story-text p{color:rgba(255,255,255,0.78); font-size:1rem; line-height:1.7; margin-bottom:14px;}
.work-story-text p:last-child{margin-bottom:0;}

/* ============================================
   DŮVĚRYHODNOST
   ============================================ */
.work-trust-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px;
}
.work-trust-stat{
  text-align:center; background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:16px; padding:32px 20px;
}
.work-trust-num{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.4vw,2.6rem);
  color:var(--work-ink); letter-spacing:-0.02em; display:block;
}
.work-trust-label{color:var(--work-gray-1); font-size:0.88rem; margin-top:6px; display:block;}
.work-badges-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.work-cred-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:500; color:var(--work-ink);
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:100px; padding:9px 16px;
}
.work-cred-badge svg{color:var(--work-gray-2);}

/* ============================================
   REFERENCE
   ============================================ */
.work-testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.work-testimonial-card{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:18px; padding:26px 24px;
}
.work-testimonial-quote{color:var(--work-ink); font-size:0.95rem; line-height:1.6; margin-bottom:20px;}
.work-testimonial-author{display:flex; align-items:center; gap:12px;}
.work-testimonial-author img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.work-testimonial-author strong{display:block; font-size:0.9rem; color:var(--work-ink);}
.work-testimonial-author span{display:block; font-size:0.8rem; color:var(--work-gray-2);}

/* ============================================
   FORMULÁŘ
   ============================================ */
.work-form-wrap{
  background:var(--work-surface); border:1px solid var(--work-border);
  border-radius:24px; padding:44px 5vw; max-width:760px; margin:0 auto;
  box-shadow:var(--work-shadow-md);
}
.work-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.work-form-field{display:flex; flex-direction:column; gap:7px;}
.work-form-field.full{grid-column:1 / -1;}
.work-form-field label{font-size:0.85rem; font-weight:600; color:var(--work-ink);}
.work-form-field label .req{color:var(--orange);}
.work-form-field input, .work-form-field select, .work-form-field textarea{
  font-family:var(--font-body); font-size:0.95rem; color:var(--work-ink);
  background:var(--work-bg); border:1px solid var(--work-border);
  border-radius:10px; padding:12px 14px;
  transition:border-color .2s var(--ease);
}
.work-form-field input:focus, .work-form-field select:focus, .work-form-field textarea:focus{
  outline:none; border-color:var(--work-ink);
}
.work-form-field textarea{resize:vertical; min-height:100px; font-family:var(--font-body);}
.work-form-checkbox{
  display:flex; align-items:flex-start; gap:10px; grid-column:1 / -1;
  font-size:0.85rem; color:var(--work-gray-1); line-height:1.5;
}
.work-form-checkbox input{margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--work-ink);}
.work-form-checkbox a{color:var(--work-ink); text-decoration:underline;}
.work-form-submit{grid-column:1 / -1; margin-top:6px;}
.work-form-note{
  grid-column:1 / -1; font-size:0.8rem; color:var(--work-gray-2); margin-top:-4px;
}
.work-form-success{
  display:none; text-align:center; padding:20px 0;
}
.work-form-success.is-visible{display:block;}
.work-form-success-icon{
  width:52px; height:52px; border-radius:50%; background:rgba(28,138,90,0.1);
  color:#1C8A5A; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.work-form-success h3{font-family:var(--font-display); font-size:1.2rem; margin-bottom:8px;}
.work-form-success p{color:var(--work-gray-1); font-size:0.95rem;}

/* ============================================
   FAQ (reuse main .faq-item look, tuned colors)
   ============================================ */
.work-faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px; margin:0 auto;}
.work-faq-item{
  background:var(--work-surface); border:1px solid var(--work-border); border-radius:14px;
  overflow:hidden;
}
.work-faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; font-family:var(--font-display); font-weight:600; font-size:0.98rem;
  color:var(--work-ink); text-align:left; cursor:pointer; background:none; border:none;
}
.work-faq-question svg{flex-shrink:0; transition:transform .3s var(--ease); color:var(--work-gray-2);}
.work-faq-item.open .work-faq-question svg{transform:rotate(45deg);}
.work-faq-answer{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.work-faq-answer p{padding:0 22px 20px; color:var(--work-gray-1); font-size:0.92rem; line-height:1.55;}

/* ============================================
   KARIÉRA
   ============================================ */
.work-career-card{
  background:var(--work-ink); border-radius:28px; padding:56px 6vw;
  position:relative; overflow:hidden;
}
.work-career-text{max-width:560px; position:relative; z-index:1;}
.work-career-text .work-eyebrow{color:rgba(255,255,255,0.65);}
.work-career-text .work-eyebrow-dot{background:var(--orange);}
.work-career-text .btn-work-light{margin-top:10px;}

/* ============================================
   FOOTER CTA
   ============================================ */
.work-footer-cta{
  background:var(--work-ink); border-radius:28px; padding:64px 6vw;
  text-align:center; color:var(--white);
  position:relative; overflow:hidden;
}
.work-footer-cta > *{position:relative; z-index:1;}
.work-footer-cta h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3vw,2.4rem);
  letter-spacing:-0.02em; margin-bottom:14px;
}
.work-footer-cta p{color:rgba(255,255,255,0.72); font-size:1.02rem; max-width:480px; margin:0 auto 30px;}
.btn-work-light{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); color:var(--work-ink);
  font-weight:600; font-size:0.95rem; padding:14px 28px; border-radius:12px;
  transition:transform .25s var(--ease);
}
.btn-work-light:hover{transform:translateY(-2px);}

/* ============================================
   RESPONSIVE — REBUILT MOBILE EXPERIENCE
   Breakpoints: 1080px (tablet), 900px (small tablet),
   600px (phone), 420px (small phone)
   ============================================ */

/* ---------- TABLET (≤1080px) ---------- */
@media (max-width:1080px){
  .work-hero-inner{grid-template-columns:1fr; text-align:center; gap:44px;}
  .work-hero-sub{margin-left:auto; margin-right:auto;}
  .work-hero-ctas{justify-content:center;}
  .work-hero-visual{max-width:460px; margin:0 auto;}

  .work-story{grid-template-columns:1fr; gap:32px; text-align:center;}
  .work-story > div:first-child{display:flex; flex-direction:column; align-items:center;}
  .work-story-text{text-align:center;}
  .work-bg-shape-story{margin:20px auto 0;}

  .work-students-inner{grid-template-columns:1fr; gap:36px; text-align:center;}
  .work-students-visual{order:-1; max-width:400px; margin:0 auto;}
  .work-students-text{text-align:center;}
  .work-students-badge{margin-left:auto; margin-right:auto; text-align:left;}

  .work-section-head{text-align:center; margin-left:auto; margin-right:auto;}
  .work-h2, .work-lede{margin-left:auto; margin-right:auto;}
  .work-vyresime-head-row{flex-direction:column-reverse; text-align:center; gap:24px;}
  .work-vyresime-smiley{width:150px; height:150px;}
}

/* ---------- SMALL TABLET / LARGE PHONE (≤900px) ---------- */
@media (max-width:900px){
  /* Section rhythm tightens */
  .work-section{padding:72px 5vw;}
  .work-hero{padding:132px 5vw 64px;}
  .work-section-head{margin-bottom:36px;}

  /* Pro koho: 3 cards -> 2-up grid, no dead space */
  .work-audience-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .work-audience-card{padding:22px 18px;}
  .work-audience-icon{width:38px; height:38px; margin-bottom:14px;}
  .work-audience-card h3{font-size:1rem;}
  .work-audience-card p{font-size:0.86rem;}

  /* Gallery: horizontal scroll instead of cramped 2-col grid */
  .work-gallery-grid{
    display:flex; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
    margin:0 -5vw; padding-left:5vw; padding-right:5vw;
    scrollbar-width:none;
  }
  .work-gallery-grid::-webkit-scrollbar{display:none;}
  .work-gallery-tile{flex:0 0 62%; scroll-snap-align:start;}

  /* Co vyřešíme: 4-col -> 2-col, keep icons readable */
  .work-solve-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .work-solve-item{padding:16px 14px;}

  /* Steps: 4-across -> 2x2, drop the connector line */
  .work-steps{grid-template-columns:1fr 1fr; gap:28px 16px;}
  .work-steps::before{display:none;}
  .work-step{padding:0;}

  /* Výhody: 4-col -> 2-col */
  .work-benefits-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .work-benefit{padding:20px 16px;}

  /* Trust stats stay side-by-side, just shrink instead of stacking */
  .work-trust-stats{gap:10px;}
  .work-trust-stat{padding:22px 12px;}
  .work-trust-num{font-size:clamp(1.5rem,5vw,2rem);}
  .work-trust-label{font-size:0.78rem;}

  /* Testimonials: 3-col -> 2-col (3rd wraps to its own centered row) */
  .work-testimonial-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .work-testimonial-card{padding:20px 18px;}
  .work-testimonial-quote{font-size:0.88rem;}

  .work-form-grid{grid-template-columns:1fr;}
  .work-form-field.full{grid-column:1;}
}

/* ---------- PHONE (≤600px) ---------- */
@media (max-width:600px){
  .work-section{padding:56px 5vw;}
  .work-hero{padding:120px 5vw 52px;}

  /* Nav badge pill has no room next to hamburger */
  .work-badge-pill{display:none;}

  /* Hero: on phones the absolute swap-stage becomes unreliable once the
     panel's text wraps to more lines than fits in a fixed-height stage
     (that caused the overlap/garbled layout). Switch to a simple stacked
     layout instead — still tappable, no absolute positioning, no overflow. */
  .work-hero-stage{min-height:0; display:flex; flex-direction:column; align-items:center; gap:22px;}
  .work-hero-photo-card{
    position:static; width:84%; transform:none !important; top:auto; left:auto; z-index:auto;
    cursor:default;
  }
  .work-panel-card{
    position:static; width:100%; max-width:360px; transform:none !important; top:auto; left:auto; z-index:auto;
    padding:22px 20px 18px;
  }
  .work-hero-stage:hover .work-hero-photo-card,
  .work-hero-stage.is-swapped .work-hero-photo-card,
  .work-hero-stage:hover .work-panel-card,
  .work-hero-stage.is-swapped .work-panel-card{
    top:auto; left:auto;
  }
  .work-panel-top{margin-bottom:18px;}
  .work-panel-title{font-size:0.9rem;}
  .work-panel-row{padding:11px 0; gap:8px;}
  .work-panel-row-label{font-size:0.8rem; gap:8px;}
  .work-panel-icon{width:28px; height:28px;}
  .work-panel-row-value{font-size:0.76rem; white-space:nowrap; flex-shrink:0;}
  .work-panel-floating{margin-top:26px; padding:13px 16px;}
  .work-panel-floating-num{font-size:1.2rem;}

  /* Pro koho: back to single column, plenty of width for text now */
  .work-audience-grid{grid-template-columns:1fr; gap:12px;}

  /* Gallery: narrower cards so two peek at the edges */
  .work-gallery-tile{flex:0 0 68%;}

  /* Co vyřešíme graphic + solve grid */
  .work-vyresime-smiley{width:110px; height:110px;}
  .work-solve-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .work-solve-item{padding:14px 12px; gap:10px;}
  .work-solve-icon{width:30px; height:30px;}
  .work-solve-item span:last-child{font-size:0.82rem;}

  /* Steps: single column reads better than a cramped 2x2 at this width */
  .work-steps{grid-template-columns:1fr; gap:20px;}
  .work-step{text-align:left; display:flex; align-items:flex-start; gap:14px;}
  .work-step-num{margin:0; flex-shrink:0;}
  .work-step-body h3{margin-bottom:6px;}

  /* Výhody: single column */
  .work-benefits-grid{grid-template-columns:1fr; gap:10px;}
  .work-benefit{display:flex; align-items:flex-start; gap:14px; text-align:left;}
  .work-benefit-icon{margin-bottom:0; flex-shrink:0;}

  /* Students section */
  .work-students-phones{width:88%; margin-left:-4.58%;}
  .work-students-stores{margin-top:20px;}
  .work-students-badge{max-width:100%; padding:16px 18px;}

  /* Proč vzniklo */
  .work-story{padding:40px 6vw; border-radius:20px;}
  .work-bg-shape-story{width:130px; height:130px;}

  /* Trust stats: still side-by-side but compact */
  .work-trust-stats{grid-template-columns:repeat(3,1fr); gap:6px;}
  .work-trust-stat{padding:16px 8px; border-radius:12px;}
  .work-trust-num{font-size:clamp(1.2rem,6vw,1.6rem);}
  .work-trust-label{font-size:0.68rem; margin-top:3px;}
  .work-badges-row{gap:8px;}
  .work-cred-badge{font-size:0.78rem; padding:7px 12px;}

  /* Testimonials: single column */
  .work-testimonial-grid{grid-template-columns:1fr; gap:12px;}

  /* Form */
  .work-form-wrap{padding:28px 5vw; border-radius:18px;}

  /* Career + footer CTA */
  .work-career-card{padding:40px 6vw; border-radius:20px;}
  .work-bg-shape-career{width:150px; height:150px;}
  .work-footer-cta{padding:44px 6vw; border-radius:20px;}
}

/* ---------- SMALL PHONE (≤420px) ---------- */
@media (max-width:420px){
  .work-hero-ctas{flex-direction:column; width:100%;}
  .work-hero-ctas .btn-work-primary, .work-hero-ctas .btn-work-secondary{width:100%;}

  .work-gallery-tile{flex:0 0 78%;}

  .work-solve-grid{grid-template-columns:1fr;}

  .work-trust-stats{grid-template-columns:1fr; gap:8px;}
  .work-trust-stat{padding:18px 12px;}

  .work-faq-question{padding:16px 18px; font-size:0.92rem;}
  .work-faq-answer p{padding:0 18px 18px;}
}