/* =============================================================
   CASE STUDY SAUNABOX - doplnkove styly

   Nacita je pouze case-study-saunabox.html. Sdileny design
   system v assets/css/style.css zustava beze zmeny, tady jsou
   jen prvky, ktere ostatni stranky nepouzivaji: koláz v heru,
   galerie reklam, anonymizovany graf a blok s doporucenim.

   Vse stoji na stejnych tokenech (--k, --sand, --a, --rad, --ease),
   takze stranka vypada jako prirozena soucast webu.
   ============================================================= */


/* -- Ramecek pro screenshoty ------------------------------- */
/* Screenshot nikdy nelezi na strance "nahodne", vzdy sedi
   v cistem bilem ramu s jemnym stinem.                       */
.shot {
  background: var(--w);
  border: 1px solid var(--k-06);
  border-radius: var(--rad);
  padding: 8px;
  box-shadow: var(--sh);
  overflow: hidden;
}
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--rad) - 6px);
}


/* -- Koláz reklam v heru ----------------------------------- */
.sb-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  min-height: 1px;
}
.sb-hero__item { position: relative; }
.sb-hero__item--back {
  grid-area: 1 / 1 / 2 / 8;
  margin-top: clamp(28px, 5vw, 66px);
  transform: rotate(-2.2deg);
  z-index: 1;
}
.sb-hero__item--side {
  grid-area: 1 / 7 / 2 / 13;
  margin-top: clamp(96px, 15vw, 190px);
  transform: rotate(2.6deg);
  z-index: 1;
}
.sb-hero__item--front {
  grid-area: 1 / 3 / 2 / 11;
  z-index: 2;
}
.sb-hero__item--back .shot,
.sb-hero__item--side .shot { box-shadow: var(--sh-s); }

/* Bezova plocha za kolazi, stejny princip jako u fotografie
   Martina na hlavni strance. Zadne kruhy ani bubliny.        */
.sb-hero::before {
  content: ''; position: absolute; z-index: 0;
  left: 12%; right: 6%; top: 18%; bottom: 8%;
  background: var(--color-secondary-28);
  border: 1px solid var(--sand);
  border-radius: var(--rad);
}

.sb-hero__badge {
  position: absolute; z-index: 3; left: 0; bottom: -14px;
  background: var(--k); color: var(--w);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 15px; border-radius: var(--rad-s);
  box-shadow: var(--sh-s);
}


/* -- Uvodni souhrn vysledku -------------------------------- */
.sb-sum {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}
.sb-sum__i { padding-top: clamp(18px, 2.4vw, 26px); border-top: 3px solid var(--k); }
.sb-sum__i h2 {
  font-size: clamp(1.16rem, 1.8vw, 1.42rem); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.2; margin-bottom: 9px;
}
.sb-sum__i p { font-size: .95rem; line-height: 1.6; color: var(--k-68); }
.sb-sum__note {
  margin-top: clamp(22px, 2.8vw, 32px); padding-left: 15px;
  border-left: 3px solid var(--k-12);
  font-size: .92rem; color: var(--k-50); line-height: 1.6; max-width: 66ch;
}


/* -- Galerie reklam ---------------------------------------- */
/* Desktop: asymetricka mrizka. Mobil: vodorovny slider na
   scroll-snapu, ktery funguje dotykem i bez jedine radky JS.  */
.sb-gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.sb-gal__i { display: flex; flex-direction: column; gap: 13px; }
.sb-gal__i:nth-child(1) { grid-column: span 4; }
.sb-gal__i:nth-child(2) { grid-column: span 4; margin-top: clamp(24px, 4vw, 62px); }
.sb-gal__i:nth-child(3) { grid-column: span 4; }
.sb-gal__i:nth-child(4) { grid-column: 3 / span 5; margin-top: clamp(6px, 1.4vw, 18px); }

.sb-gal__cap { display: flex; gap: 11px; align-items: flex-start; }
.sb-gal__cap b {
  flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  color: var(--k); padding-top: 3px; font-variant-numeric: tabular-nums;
}
.sb-gal__cap span { font-size: .87rem; line-height: 1.5; color: var(--k-68); }


/* -- Casova osa spoluprace ---------------------------------- */
/* Nahradila anonymizovany sloupcovy graf. Ten nemel definovanou
   metriku ani zdrojova data, takze pusobil jako dukaz, aniz by
   cokoli dokazoval. Tohle je popis postupu, ne mereni.        */
.sb-path {
  background: var(--w);
  border: 1px solid var(--k-06);
  border-left: 3px solid var(--sand);
  padding: clamp(22px, 3.2vw, 40px);
}
.sb-path__hd { margin-bottom: clamp(20px, 2.6vw, 30px); }
.sb-path__hd h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--k);
}
.sb-path__hd p { margin-top: 8px; font-size: .86rem; line-height: 1.55; color: var(--k-50); max-width: 62ch; }

.sb-path__list { list-style: none; margin: 0; padding: 0; }
.sb-path__i {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: clamp(12px, 1.8vw, 20px);
  padding: clamp(14px, 1.9vw, 20px) 0;
  border-top: 1px solid var(--k-06);
}
.sb-path__i:first-child { border-top: 0; padding-top: 0; }
.sb-path__i:last-child { padding-bottom: 0; }
.sb-path__n {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  color: var(--a); padding-top: 3px; font-variant-numeric: tabular-nums;
}
.sb-path__i h4 {
  font-size: clamp(.98rem, 1.35vw, 1.1rem); font-weight: 800;
  letter-spacing: -.028em; color: var(--k); margin-bottom: 5px;
}
.sb-path__i p { font-size: .9rem; line-height: 1.6; color: var(--k-68); max-width: 58ch; }


/* -- Doporuceni klienta ------------------------------------ */
/* Drive dva sloupce: vlevo vypoved, vpravo snimek doporuceni
   z LinkedInu. Pravy sloupec je pryc, vypoved proto dostala
   celou sirku kontejneru a drzi jen citelnou delku radku.
   Zdroj zustava v podpisu pod citaci.                       */
.sb-ref {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 30px); align-items: start;
}
.sb-ref__q { max-width: 86ch; }
.sb-ref__who { max-width: 86ch; }
.sb-ref__q { font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7; color: var(--k-86); }
.sb-ref__q p + p { margin-top: 1em; }
.sb-ref__q a { color: var(--a); text-decoration: underline; text-underline-offset: 3px; }
.sb-ref__who {
  margin-top: clamp(18px, 2.4vw, 26px); padding-top: 15px;
  border-top: 1px solid var(--k-12);
  display: flex; align-items: center; gap: 12px;
}
.sb-ref__who img {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; object-fit: cover; object-position: center;
  border: 2px solid var(--sand); background: var(--w);
}
.sb-ref__who b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
.sb-ref__who span { display: block; font-size: .8rem; color: var(--k-50); line-height: 1.4; }


/* -- Responzivita ------------------------------------------ */
@media (max-width: 1040px) {
  .sb-gal__i:nth-child(4) { grid-column: 5 / span 4; }
}

@media (max-width: 900px) {
  .sb-sum { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sb-ref { grid-template-columns: minmax(0, 1fr); }
  .sb-hero { max-width: 520px; margin-inline: auto; }
  .sb-hero__badge { bottom: -8px; }
}

@media (max-width: 760px) {
  /* Galerie se meni na vodorovny slider ovladatelny dotykem.
     Zadny JavaScript, jen nativni scroll-snap.               */
  .sb-gal {
    display: flex; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scrollbar-width: thin;
  }
  .sb-gal__i {
    flex: 0 0 78vw; max-width: 340px;
    scroll-snap-align: start; margin-top: 0 !important;
  }
  .sb-gal__i:nth-child(n) { grid-column: auto; }

}

@media (max-width: 480px) {
  .sb-hero__item--back { margin-top: 20px; }
  .sb-hero__item--side { margin-top: 74px; }
  .sb-hero::before { left: 8%; right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-hero__item--back, .sb-hero__item--side, .sb-hero__item--front { transform: none; }
}

/* Na uzkem displeji se cislo kroku presouva nad text, jinak by
   na dvousloupcovou mrizku nezbyla sirka.                     */
@media (max-width: 520px) {
  .sb-path { padding-left: clamp(16px, 4.4vw, 22px); padding-right: clamp(16px, 4.4vw, 22px); }
  .sb-path__i { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sb-path__n { padding-top: 0; }
}

/* -- Ctyri pilire "Jedna sluzba. Vice duvodu k rezervaci." ---
   Vlastni komponenta jen pro tuto studii. Globalni .proc, ktery
   tu stal driv, pouziva hlavni stranka, takze se jej to nesmi
   dotknout.

   Zadne karty a zadna cisla: ctyri rovnocenne sloupce, ktere
   deli jen jemna svisla linka. Nad 1100 px stoji v jedne rade,
   mezi 700 a 1099 px ve mrizce 2 x 2, pod 700 px pod sebou.  */
.sb-pillars__hd { margin-bottom: clamp(26px, 3.4vw, 44px); }
.sb-pillars__ttl {
  margin-top: 16px; max-width: none; text-wrap: balance;
}

.sb-pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.sb-pillar {
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 26px);
  border-left: 1px solid var(--k-12);
}
.sb-pillar:first-child { border-left: 0; padding-left: 0; }
.sb-pillar:last-child { padding-right: 0; }

.sb-pillar h3 {
  font-size: clamp(1rem, 1.25vw, 1.14rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.2; color: var(--k);
  text-wrap: balance;
}
.sb-pillar > p {
  margin-top: 9px; font-size: .9rem; line-height: 1.6; color: var(--k-68);
}
.sb-pillar ul {
  list-style: none; margin: clamp(13px, 1.6vw, 18px) 0 0; padding: 0;
  display: grid; gap: 7px;
}
.sb-pillar ul li {
  position: relative; padding-left: 15px;
  font-size: .84rem; line-height: 1.5; color: var(--k-50);
}
.sb-pillar ul li::before {
  content: ''; position: absolute; left: 0; top: .54em;
  width: 5px; height: 5px; background: var(--a); transform: rotate(45deg);
}

@media (max-width: 1099.98px) {
  .sb-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ve mrizce 2 x 2 deli sloupce jen prostredni svisla linka,
     a radky od sebe vodorovna.                               */
  .sb-pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sb-pillar:nth-child(even) { padding-right: 0; }
  .sb-pillar:nth-child(n+3) {
    margin-top: clamp(18px, 2.6vw, 28px);
    padding-top: clamp(18px, 2.6vw, 28px);
    border-top: 1px solid var(--k-12);
  }
}

@media (max-width: 699.98px) {
  .sb-pillars { grid-template-columns: minmax(0, 1fr); }
  .sb-pillar {
    border-left: 0; padding-left: 0; padding-right: 0;
    padding-block: 0;
  }
  .sb-pillar + .sb-pillar {
    margin-top: clamp(20px, 5vw, 26px);
    padding-top: clamp(20px, 5vw, 26px);
    border-top: 1px solid var(--k-12);
  }
  .sb-pillar:nth-child(n+3) { margin-top: clamp(20px, 5vw, 26px); padding-top: clamp(20px, 5vw, 26px); }
}