/* ==========================================================================
   Úvodní stránka — V3 (zdroj: Figma „V3 — typografická studie — Homepage“ na stránce pro kódování)
   Souřadnice a velikosti z návrhu (frame 1440). Nad 1440 px se rozšiřují mezery přes --ex.
   ========================================================================== */
.page-home { --pad: 80px; }
.page-home .frame { padding-inline: 0; }

/* 01 HERO · 800 */
.top--home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }   /* první obraz = jen hero + bridge band; na vyšším okně pohltí zbytek bridge (obsah zůstává nahoře) */
.top--home > .hero { flex: none; }
.top--home > .brand { flex: 1 0 auto; }
.hero { height: 800px; }
.hero__shade { position: absolute; left: 0; right: 0; top: 0; height: 240px; background: linear-gradient(180deg, rgba(12,20,15,.9), rgba(12,20,15,0)); z-index: 1; pointer-events: none; }
.hero .frame { height: 100%; }
.top--home > .sr-clip .sub-rosa { --sr-w: calc(var(--srw) * .9); }  /* o 10 % menší; svislá poloha jako u Martina a Jak (společný default --sr-top: -174px): spad nahoru a doprava, hlavní hmota patří do hero */
.hero__logo { position: absolute; left: 80px; top: 53px; z-index: 3; }
.hero__copy { position: absolute; left: 243px; top: 253px; width: 1100px; z-index: 2; display: flex; flex-direction: column; gap: 50px; }
.hero__lead { width: 820px; }
.hero__btns { display: flex; gap: 16px; align-items: flex-start; }

/* 02 FIRMA JE PROPOJENÝ CELEK · 326 */
/* bridge band pod hero (společný systém .top__bridge) */
.brand { padding: 80px 0 88px; }
.brand .frame { padding-left: 243px; }
.brand__h { width: 1100px; max-width: 100%; font-weight: 600; color: var(--tan); }
.brand__p { width: 900px; max-width: 100%; margin-top: 30px; color: var(--cream); }

/* 03 CO PRÁVĚ ŘEŠÍTE? · 1937 + pás 369 */
.sit { background: var(--green); color: var(--cream); padding-top: 160px; }
.sit::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .5px; background: #1f3929; z-index: 2; }
.sit .frame { padding-inline: 80px; }
.sit__head { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 0; }
.sit__lead { width: 820px; max-width: 100%; }
.sit__list { margin-top: 64px; padding-bottom: 160px; width: 1280px; max-width: 100%; --rule: var(--line-grey); }
.sit-row { padding: 40px 0; }
.sit-row__in { display: grid; grid-template-columns: 470px minmax(0, 1fr); column-gap: 97px; width: 100%; align-items: start; }   /* kolo 6: robustní grid — pravý sloupec je vždy zbytek šířky řádku, nikdy ne víc */
.sit-row__l { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sit-row__d { width: auto; max-width: none; min-width: 0; padding-right: 32px; overflow-wrap: break-word; }   /* bezpečný odstup 32 px před koncem linky; text se zalomí do dalších řádků, nikdy nepřeteče */
.sit-band { background: var(--green-deep); color: var(--cream); height: 369px; }
.sit-band .frame { padding-left: 243px; }
.sit-band__t { position: absolute; top: 80px; left: 243px; width: 700px; }
.sit-band__t .gap { display: block; height: 30px; }
.sit-band__btn { position: absolute; left: 243px; top: 265px; }

/* 04 FOTOGRAFIE „POD RŮŽÍ“ · 800
   Fotografie je ve vrstvě 1441 × 800 přesně jako ve Figmě (1:1), uprostřed rámu; po stranách a nahoře/dole ji dotváří
   tmavý přechod stejné barvy jako záclona (okraje fotografie jsou téměř černé), takže pohyb nikdy neodkryje hranu.
   Protisměrný parallax: fotografie se při scrollu posouvá jedním směrem, nadpis a odstavec opačným (--pp −1…1 řídí main.js;
   0 = sekce uprostřed viditelné plochy pod menu). Rozsah pohybu je dán geometrií snímku: nadpis smí vůči fotografii
   jen v koridoru mezi bradou a růží, odstavec pod růží směrem ke stolu. */
.photo { height: 920px; background: #040404; color: var(--cream);
  --phs: 1; --pox: 830px; --poy: 63px; --phy0: 0px; --phk: 20px; --thy0: -33px; --thk: 3px; --tby0: 34px; --tbk: 3px; --pp: 0; }
.photo__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #17110e 0, #0d0907 336px, #040404 800px, #040404 100%); }   /* fotografie zůstává 800 px vysoká, pod ní pokračuje stejná tmavá plocha (+120 px) */
.photo__bg::before { content: ''; position: absolute; left: 50%; top: 0; width: 1441px; height: 800px; margin-left: -720.5px;
  background: url('../../assets/photos/sub-rosa-pozadi.jpg') center / 100% 100% no-repeat;
  transform-origin: var(--pox) var(--poy); scale: var(--phs);
  translate: 0 calc(var(--phy0) - var(--pp) * var(--phk)); will-change: translate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent), linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent), linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-composite: intersect; }
.photo .frame { height: 100%; }
.photo__h { position: absolute; left: 242px; top: 272px; width: 1180px; color: #fff; translate: 0 calc(var(--thy0) + var(--pp) * var(--thk)); will-change: translate; }
.photo__p { position: absolute; left: 243px; top: 515px; width: 820px; translate: 0 calc(var(--tby0) + var(--pp) * var(--tbk)); will-change: translate; }
.photo__p p + p { margin-top: 33px; }

/* 05 NEJDŘÍV POROZUMÍME FIRMĚ · 1506 */
.diag { background: var(--green); color: var(--cream); padding: 160px 0 160px; }
.diag .frame { padding-left: 243px; }
.diag__head { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; }
.diag__lead { width: 820px; max-width: 100%; }
.diag__list { margin-top: 56px; width: 956px; max-width: 100%; --rule: #cfcfcf; }
.diag-row { padding: 28px 0; }
.diag-row__in { display: flex; gap: calc(97px + var(--ex) * .4); }
.diag-row__t { flex: none; width: 389px; }
.diag-row__d { flex: none; width: 469px; }
.diag__close { margin-top: 32px; padding-top: 8px; width: 876px; max-width: 100%; }
.diag__link { margin-top: 56px; }

/* 06 JAK PROBÍHÁ SPOLUPRÁCE · 1423 */
.flow { background: var(--tan); color: var(--green); padding: 160px 0 160px; }
.flow .frame { padding-left: 243px; }
.flow__h { width: 1000px; max-width: 100%; }
.flow__list { margin-top: 72px; width: 956px; max-width: 100%; --rule: var(--green); }
.flow-step { padding: 28px 0; }
.flow-step__in { display: flex; flex-direction: column; gap: 4px; }
.flow-step--n .flow-step__in { width: 537px; max-width: 100%; }
.flow-step--w .flow-step__in { width: 952px; max-width: 100%; }
.flow__close { margin-top: 32px; padding-top: 8px; width: 954px; max-width: 100%; margin-left: -1px; }

/* 07 VYBRANÉ SPOLUPRÁCE · 1330 */
.refs { background: var(--ink); color: var(--cream); padding: 160px 0 160px; }
.refs .frame { padding-inline: 80px; }
.refs__grid { margin-top: 88px; display: grid; grid-template-columns: 600px 600px; column-gap: calc(80px + var(--ex) * .5); row-gap: 64px; justify-content: start; }
.ref { display: flex; flex-direction: column; position: relative; }
.ref__ph { display: flex; gap: 16px; }
.ref__ph span { width: 96px; height: 96px; display: grid; place-items: center; background: var(--placeholder); color: #8a8a8a; font-weight: 500; font-size: 16px; line-height: 22px; text-align: center; }
.ref__ph span + span { background: #333; }
.ref__q { margin-top: 32px; color: #bdb6a8; }
.ref__q p + p { margin-top: 33px; }
.ref__n { margin-top: 15px; font-weight: 700; font-size: 22px; line-height: 33px; color: var(--cream); }
.ref__flag { position: absolute; left: 224px; top: 0; max-width: 340px; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--tan); font-style: italic; }
.refs__more { margin-top: 104px; }
.refs__more .arrow-circle svg { transform: rotate(90deg); }

/* 08 NÁŠ TÝM · 3720 */
.team { background: var(--cream); color: var(--green); padding-top: 160px; }
.team__head { margin-left: 243px; width: 1000px; display: flex; flex-direction: column; gap: 23px; }
.team__people { position: relative; height: 2745px; }
.person { position: absolute; display: flex; flex-direction: column; }
.person__name { font-weight: 500; font-size: 34px; line-height: 42px; text-transform: uppercase; }
.person__role { font-weight: 300; font-size: 22px; line-height: 33px; }
.person__role.up { text-transform: uppercase; }
.person__bio { font-weight: 300; font-size: 22px; line-height: 33px; margin-top: 33px; }
.person__txt { width: 400px; }
.person__contact { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.person__row { display: flex; align-items: center; gap: 8px; height: 33px; }
.person__row dt { font-weight: 500; font-size: 20px; line-height: 30px; width: 92px; flex: none; margin: 0; }
.person__row dd { margin: 0; font-weight: 700; font-size: 22px; line-height: 33px; white-space: nowrap; }
.person__li { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; line-height: 33px; width: max-content; }
.person__li svg { width: 20px; height: 20px; }
.person__profile { margin-top: 32px; }
.person__photo { position: absolute; overflow: hidden; background: #333; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo--link { display: block; }
.person__photo--link img { transition: filter var(--hover-time) var(--ease-out); }
.person__photo--link:hover img, .person__photo--link:focus-visible img { filter: brightness(.82); }
.team__line { position: absolute; width: 1px; background: var(--green); transform-origin: top; scale: 1 var(--p, 1); }
.team__strip { position: relative; background: var(--beige); color: var(--green); height: 642px; }
.team__strip .frame { padding-left: 243px; }
.strip__t { position: absolute; top: 354px; left: 243px; }
.strip__t .gap { display: block; height: 30px; }
.strip__btn { position: absolute; left: 243px; top: 530px; }
.strip__h { position: absolute; left: 243px; top: 70px; width: 955px; font-family: var(--font-serif); font-weight: 300; font-size: 60px; line-height: 70px; letter-spacing: .336px; color: var(--green); }
.strip__h b { font-weight: 700; }
.strip__h .sb { font-weight: 600; }
.team__bg-rosa { z-index: 0; }

/* Adaptace na úzký displej (základní, bez samostatného designu) */
@media (max-width: 899px) {
  .page-home { --pad: 24px; }
  .hero { height: auto; min-height: 640px; padding-bottom: 56px; }
  .hero__logo { position: relative; left: auto; top: auto; display: block; padding: 64px var(--pad) 0; }
  .hero__logo img { width: 160px; height: auto; }
  .hero__copy { position: relative; left: auto; top: auto; width: auto; padding: 56px var(--pad) 0; gap: 28px; }
  .hero__lead { width: auto; }
  .hero__btns { flex-wrap: wrap; }
  .brand, .sit, .diag, .flow, .refs, .team { padding-top: 72px; padding-bottom: 72px; }
  .brand .frame, .diag .frame, .flow .frame, .sit .frame, .refs .frame { padding-inline: var(--pad); }
  .sit__list, .diag__list, .flow__list { width: auto; margin-top: 40px; }
  .sit__list { padding-bottom: 72px; }
  .sit-row__in { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .sit-row__d { padding-right: 0; }
  .diag-row__in { flex-direction: column; gap: 16px; }
  .sit-row__l, .sit-row__d, .diag-row__t, .diag-row__d { width: auto; max-width: none; }
  .sit-band { height: auto; padding: 56px 0; }
  .sit-band .frame { padding: 0 var(--pad); }
  .sit-band__t, .sit-band__btn { position: relative; left: auto; top: auto; width: auto; }
  .sit-band__btn { display: inline-flex; margin-top: 28px; }
  .photo { height: auto; min-height: 560px; }
  .photo__bg::before { translate: none; scale: none; left: auto; right: -260px; margin-left: 0; }
  .photo .frame { padding: 72px var(--pad); height: auto; }
  .photo__h, .photo__p { position: relative; left: auto; top: auto; width: auto; translate: none; }
  .photo__p { margin-top: 32px; }
  .diag__close, .flow__close { width: auto; margin-left: 0; }
  .refs__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .team__head { margin-left: 0; width: auto; padding-inline: var(--pad); }
  .team__people { height: auto; margin-top: 48px; padding-inline: var(--pad); display: flex; flex-direction: column; gap: 56px; }
  .person, .person__photo { position: relative !important; left: auto !important; top: auto !important; width: auto !important; }
  .person__photo { height: 420px !important; }
  .person__txt { width: auto; }
  .person__row { flex-wrap: wrap; height: auto; }
  .person__row dd { white-space: normal; overflow-wrap: anywhere; }
  .team__line { display: none; }
  .team__strip { height: auto; padding: 56px 0; }
  .team__strip .frame { padding-inline: var(--pad); }
  .strip__t, .strip__btn, .strip__h { position: relative; left: auto; top: auto; width: auto; }
  .strip__h { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.2; margin-bottom: 32px; }
  .strip__btn { display: inline-flex; margin-top: 28px; }
}