/* FOX&fellows — HOME + intro splash */

/* ---------- INTRO ----------
   Welcome screen je pevná opona přes celou stránku: nescrolluje se, na scroll
   nebo šipku se zvedne nahoru a odkryje web. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  height: 100vh; height: 100svh;
  background: var(--ink); overflow: hidden;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.intro--lift { transform: translateY(-102%); }
.intro--gone { display: none; }
html.has-intro { overflow: hidden; }
.intro__art { width: 100%; height: 100%; object-fit: cover; object-position: center; }
svg.intro__art { display: block; }
.intro__art--mobile { display: none; }
/* reveal menu: řádek BOUTIQUE vyjede rovně nahoru a ořízne se hranou svého
   pásu (clipPath #fxclip) — žádné blednutí, žádné zmenšování */
.fx-lift { transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.intro.nav-shown .fx-lift { transform: translateY(-160px); }
.intro__nav {
  /* pruh menu sedí přesně na řádku BOUTIQUE: střed řádku = 50svh − 181px·scale,
     kde scale = max(100vw/1194, 100svh/834) (object-fit cover intro SVG);
     56px = půlka výšky pruhu menu */
  position: absolute;
  top: calc(50svh - max(15.16vw, 21.7svh) - 56px);
  left: 0; right: 0; z-index: 2;
  background: var(--ink);
  padding: 42px var(--pad);
  display: flex; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
/* najetím myší nahoru se řada písmen rozpustí a v jejím pruhu se ukáže menu
   (JS přidá .nav-shown, po sjetí myší dolů ji zase odebere) */
.intro.nav-shown .intro__nav { opacity: 1; pointer-events: auto; }
.intro__links { display: flex; align-items: center; gap: 56px; }
.intro__links a {
  font-family: var(--font-x); font-weight: 500; font-size: 16px; color: #f2f2f2;
  padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .8);
  transition: color .2s, border-color .2s;
}
.intro__links a:hover { color: var(--orange); border-color: var(--orange); }
.intro__links .site-nav__media, .intro__links .site-nav__flag { border-bottom: none; padding-bottom: 0; }
.intro__burger { display: none; position: absolute; right: var(--pad); top: 34px; }
.intro__burger span { background: #fff; }
.intro__arrow {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  opacity: .55; padding: 8px; transition: opacity .25s;
  animation: intro-bounce 2.4s ease-in-out infinite;
}
.intro__arrow:hover { opacity: .9; }
@keyframes intro-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- HERO + SLUŽBY ---------- */
.hero-block { display: flex; gap: 50px; }
.hero-block__left { flex: 0 0 570px; }
.hero { min-height: 720px; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; }
.hero__title {
  font-family: var(--font-x); font-weight: 500; font-size: 64px; line-height: 60px;
  color: var(--ink); max-width: 519px; margin-bottom: 18px;
}
.hero__title em { font-style: normal; color: var(--orange); }
.hero__text { max-width: 519px; }
.hero__text + .hero__text { margin-top: 14px; }
.hero-block__right { flex: 1; position: relative; }
/* fotka sedí jen nahoře vedle úvodního textu a normálně odscrolluje pryč
   (klientka: „obrázek jen nahoře u úvodního textu, při scrolování už nejede dolů"). */
.collage-circle--hero {
  position: relative;
  width: 631px; height: 631px; margin-top: 157px; margin-right: -57px; margin-left: auto;
}

/* 2026-08-18 (Jarek: „odstranit ořezávání stránky zprava"): mezi 701 a 1293 px
   se kruh 631 px do pravého sloupce nevešel a i s přesahem -57 px přetékal ven
   z okna. Nepoznalo se to, protože body má overflow-x: clip, takže se to jen
   uřízlo. Tady se levý sloupec smí zúžit, kruh jede podle volného místa.

   2026-08-24 (Kristian: „při zmenšování okna jede hero obrázek přes text"):
   sloupec se sice zúžil, ale nadpis měl napevno max-width 519 px, takže z něj
   vyčuhoval a kruh mu ležel na písmenech. Nadpis teď nikdy nepřeteče svůj
   sloupec a velikost písma jede podle šířky okna. Kruh navíc už nepřesahuje
   do pravého okraje, aby stránka byla symetrická. */
/* 2026-08-24 (Kristian: „když zmenšuješ okno, hero obrázek je strašně malý a
   pak se najednou mega zvětší"): na 700 px měl kruh 783 px (mobilní full bleed),
   na 701 px spadl na 260 px, tedy skok na třetinu. Příčina byla, že hned nad
   mobilem začínalo dvousloupcové rozložení a kruh se musel vejít do úzkého
   pravého sloupce. Nově zůstává obsah na sobě jako na mobilu až do 1000 px a
   kruh se zmenšuje plynule. Dvousloupcové rozložení začíná až tam, kde je pro
   kruh dost místa. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hero-block { flex-direction: column; gap: 24px; }
  .hero-block__left { flex: auto; min-width: 0; }
  .hero-block__right { order: -1; flex: auto; min-width: 0; }
  .hero { min-height: 0; padding-top: 24px; }
  .hero__title { font-size: clamp(48px, 5.4vw, 64px); line-height: 1.02; max-width: 100%; }
  .hero__text { max-width: 640px; }
  .collage-circle--hero {
    width: min(492px, 66vw);
    height: auto; aspect-ratio: 1 / 1;
    margin: 0 0 0 auto;
  }
}

@media (min-width: 1001px) and (max-width: 1440px) {
  .hero-block { gap: clamp(24px, 3vw, 50px); }
  .hero-block__left { flex: 1 1 52%; min-width: 0; }
  .hero-block__right { flex: 1 1 48%; min-width: 0; }
  .hero { min-height: 0; padding-top: clamp(20px, 3vw, 40px); }
  .hero__title { font-size: clamp(48px, 5.4vw, 64px); line-height: 1.02; max-width: 100%; }
  .hero__text { max-width: 100%; }
  .collage-circle--hero {
    width: min(631px, 100%);
    height: auto; aspect-ratio: 1 / 1;
    margin-top: clamp(40px, 8vw, 157px);
    margin-right: 0;
  }
}


/* 2026-08-24 (Kristian: „stránka je moc malá, dej ji na maximální 1920"):
   nad 1440 px roste hero se šířkou pruhu, aby na velkém monitoru nezůstal
   malý blok uprostřed. Poměr sloupců je z Figmy (570 ku 631 z 1194). */
@media (min-width: 1441px) {
  .hero-block { gap: clamp(50px, 4vw, 72px); }
  .hero-block__left { flex: 0 0 47%; min-width: 0; }
  .hero-block__right { flex: 1 1 53%; min-width: 0; }
  .hero { min-height: 760px; }
  .hero__title { font-size: clamp(64px, 4.4vw, 76px); line-height: 1.02; max-width: 100%; }
  .hero__text { max-width: 620px; }
  .collage-circle--hero {
    width: min(100%, 820px);
    height: auto; aspect-ratio: 1 / 1;
    margin-top: clamp(120px, 9vw, 170px);
    margin-right: 0;
  }
}

.services { padding: 40px 0 90px; }
.services__title {
  font-family: var(--font-x); font-weight: 500; font-size: 60px; line-height: 60px;
  color: var(--orange); margin-bottom: 40px;
}
/* rozestupy drží krok s podslužbami (14 px), jen o kousek volnější */
.services__list { display: flex; flex-direction: column; gap: 32px; }
.services__list > li > a {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  color: #000; transition: color .2s;
}
.services__list > li > a:hover { color: var(--orange); }
/* rozbalení podslužeb na hover: krátká prodleva proti cukání při přejetí
   myší + měkčí, delší průběh */
.services__sub {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .6s cubic-bezier(.22, .61, .36, 1), opacity .45s ease, margin .45s ease;
  margin-top: 0;
}
.services__list > li:hover .services__sub,
.services__list > li:focus-within .services__sub {
  max-height: 300px; opacity: 1; margin-top: 14px;
  transition-delay: .15s;
}
.services__sub li { padding: 0; }
.services__sub li + li { margin-top: 14px; }
.services__sub a {
  font-family: var(--font-sx); font-weight: 400; font-size: 17px; line-height: 25px;
  color: var(--ink); transition: color .2s;
}
.services__sub a:hover { color: var(--orange); }
@media (hover: none) {
  .services__sub { display: none; }
}

/* ---------- SPECIALIZACE ---------- */
.spec { padding-top: 60px; padding-bottom: 80px; }
.spec__title {
  font-family: var(--font-x); font-weight: 500; font-size: 64px; line-height: 60px;
  color: var(--orange); margin-bottom: 50px;
}
.spec__sub {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  color: var(--orange); margin: 56px 0 48px;
}
.spec-row { position: relative; }
.spec-scroll {
  display: flex; gap: 64px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 10px;
}
.spec-scroll::-webkit-scrollbar { display: none; }
.spec-card { flex: 0 0 280px; }
.spec-card .collage-circle { width: 264px; height: 264px; margin-bottom: 44px; }
.spec-card h4 {
  font-family: var(--font-x); font-weight: 800; font-size: 21px; line-height: 25px;
  color: var(--ink); margin-bottom: 18px; min-height: 50px;
}
.spec-card p { font-size: 18px; line-height: 27px; }
.spec-row .row-arrows { top: 132px; transform: translateY(-50%); }

/* Mezery mezi sekcemi na homepage.

   Kristian 27. 8.: „mezera mezi Specializace a Produkty – nastavit na výšku
   nejvyššího textu v Specializace + 40 px", a totéž mezi Produkty a Týmem.

   Karty v karuselu jsou vysoké jako ta s nejdelším textem (flexové stretch),
   takže pod krátkými popisky už vzduch je a mění se podle toho, na které
   kartě člověk stojí. K dalšímu nadpisu proto stačí přesně 40 px. Dřív jich
   tam bylo 150 (10 px karusel + 80 px dole + 60 px nahoře) a sekce se od sebe
   odtrhly natolik, že mezi nimi byla půlka obrazovky prázdná. */
#sluzby-carousel { padding-bottom: 30px; }          /* 30 + 10 px zespoda karuselu = 40 */
#specializace { padding-top: 0; padding-bottom: 30px; }
.team-section { padding-top: 0; }

/* ---------- TÝM ---------- */
.team-row { position: relative; }
.row-arrows--team { top: 305px; }

/* ---------- KONTAKT ----------
   2026-08-24 (Kristian: „ten Václavák s kanclem posuň, ať je na stejné úrovni
   jako všechny ostatní obrázky, náš tým, managing partners, naše produkty"):
   sekce dřív nebyla v pruhu, jela přes celou šířku okna a fotka Prahy začínala
   u hrany monitoru, tedy o kus vlevo od všech ostatních sekcí. Teď drží stejný
   pruh i stejný boční okraj jako .wrap, takže levý okraj fotky sedí přesně na
   levý okraj kruhů a týmových karet. */
.contact {
  max-width: var(--band);
  margin-left: auto; margin-right: auto;
  padding: 60px var(--pad) 0;
}
.contact__in { display: flex; gap: clamp(32px, 4vw, 64px); align-items: center; }
/* poměr z Figmy: fotka 430 z pruhu 1094, tedy 39 %; roste tedy spolu s pruhem */
.contact__mapwrap { position: relative; flex: 0 0 39%; max-width: 560px; line-height: 0; }
.contact__map {
  width: 100%; height: clamp(480px, 36vw, 640px); object-fit: cover;
  filter: grayscale(1);
}
/* Tečka na domě FOX&fellows, Václavské náměstí 776/10.

   Kristian 27. 8.: „správné umístění tečky na fotce na VN10."
   Měl pravdu. Tečka byla umístěná v procentech RÁMU (43,6 % / 38,7 %), jenže
   fotku v rámu ořezává object-fit: cover. Při každé jiné šířce okna se výřez
   posunul, tečka ne, a sjela o dům vedle. Ve Figmě (Screen KONTAKT, rám mapy
   312×439, Ellipse 2) sedí na 47,6 % šířky a 41,6 % výšky fotky.

   Nově je tečka nakreslená přímo v SVG, které má stejný viewBox jako fotka
   (860×1121), a leží přes fotku se stejným `cover`. Drží se tak domu na každé
   šířce okna. Zvětšuje se spolu s výřezem, takže vyjde 22 px na desktopu
   a 12 px na mobilu, přesně jako dřív. */
.contact__pin {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 1121'%3E%3Ccircle cx='409.4' cy='466' r='22' fill='%23e96738'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.contact__text { padding: 40px 0; flex: 1 1 auto; min-width: 0; }
.contact__text { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.contact__title {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  color: var(--ink);
}
.contact__row { display: flex; gap: 10px; align-items: flex-start; }
.contact__icon { flex: 0 0 50px; display: flex; justify-content: center; padding-top: 2px; }
.contact__row p { font-size: 14px; line-height: 21px; }
.contact__row a:hover { color: var(--orange); }

/* ---------- MOBIL ---------- */
@media (max-width: 700px) {
  .intro__art--desktop { display: none; }
  .intro__art--mobile { display: block; }
  .intro__nav { background: none; padding: 0; position: static; animation: none; opacity: 1; transform: none; }
  .intro__links { display: none; }
  .intro__burger { display: flex; }

  .hero-block { flex-direction: column; gap: 20px; }
  .hero-block__left { flex: auto; }
  .hero { padding-top: 20px; min-height: 0; }
  /* Figma Mobile 6: 48 px na plátně 440, pod ním úměrně šířce okna */
  .hero__title { font-size: clamp(38px, 10.9vw, 48px); line-height: 1; overflow-wrap: break-word; }
  /* 2026-08-30 (Kristian: „v anglické verzi na mobilu se communications
     rozsadí na dva řádky"): anglické „communications" je o čtvrtinu delší než
     české „komunikační" a při stejné velikosti se na displej nevešlo, takže ho
     overflow-wrap zlomil uprostřed. Anglický nadpis je proto o kousek menší.
     Ověřeno v Safari i v Chromu na 320, 360, 375, 390, 414, 430 a 440 px:
     slovo drží na jednom řádku všude. */
  html[lang="en"] .hero__title { font-size: clamp(28px, 9.6vw, 44px); }
  .hero-block__right { order: -1; }
  /* dle Figmy: kruh 492/440 (111,8vw), symetricky přetéká přes oba kraje.
     2026-08-24: na širokém okně (600 až 700 px) by 111,8vw dělalo kruh přes
     780 px, což je daleko za návrhem. Proto strop na figmových 492 px. */
  .collage-circle--hero {
    position: relative; top: 0;
    width: min(111.8vw, 492px); height: auto; aspect-ratio: 1 / 1;
    /* půlka skutečné šířky kruhu doleva od středu: na telefonu přetéká přes
       oba kraje jako ve Figmě, na širším okně je po zastropování vycentrovaný */
    margin: 0 0 0 calc(50% - min(55.9vw, 246px));
  }
  /* rytmus sekcí 1:1 dle Figmy Mobile 6 */
  .services { padding-top: 50px; padding-bottom: 50px; }
  .services__title { font-size: clamp(40px, 10.9vw, 48px); line-height: 1; margin-bottom: 40px; }
  .services__list { gap: 36px; }
  .services__list a { font-size: clamp(28px, 7.73vw, 34px); line-height: 1.09; }

  /* 2026-08-24 (Kristian: „na mobilu je Protože je to vždy osobní a Naše
     specializace strašně blízko u sebe, musí tam být trošku místečko"):
     sekce měla nahoře nulu, takže nadpis lepil na poslední řádek úvodu. */
  .spec { padding-top: 36px; padding-bottom: 50px; }
  .spec__title { font-size: clamp(40px, 10.9vw, 48px); line-height: 1; margin-bottom: 40px; }
  .spec__sub { font-size: clamp(28px, 7.73vw, 34px); line-height: 1.09; margin: 0 0 40px; }
  .spec-row + .spec__sub { margin-top: 48px; }
  /* dle Figmy: kruh 280/440 = 63,6vw, vedle kouká další karta */
  .spec-card { flex-basis: 63.6vw; }
  .spec-card .collage-circle { width: 63.6vw; height: 63.6vw; max-width: 280px; max-height: 280px; margin-bottom: 30px; }
  .spec-card h4 { font-size: clamp(18px, 4.77vw, 21px); line-height: 1.19; min-height: 0; margin-bottom: 14px; }
  .spec-card p { font-size: clamp(15px, 4.09vw, 18px); line-height: 1.5; }
  .spec-scroll { gap: 9vw; }
  .spec-row .row-arrows { top: 31.8vw; }

  /* Tým: mobilní pravidla jsou sdílená v base.css (HOME + O NÁS). */

  /* dle Figmy: úzká fotka Prahy vlevo u kraje, sahá dolů až k oranžovému
     tickeru ve footeru (žádná bílá mezera). Sloupce stejně vysoké (stretch),
     fotka vyplní celou výšku bloku. */
  /* mobil zůstává podle Figmy: fotka Prahy sedí u samého levého kraje displeje,
     boční okraj z desktopu se proto ruší */
  .contact { padding: 24px 0 0; }
  .contact__in { flex-direction: row; align-items: stretch; gap: 16px; }
  .contact__mapwrap { flex: 0 0 34%; align-self: stretch; display: block; }
  .contact__map { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
  /* tečka se řídí výřezem fotky, na mobilu tedy nic přenastavovat netřeba */
  .contact__text { flex: 1; padding: 8px var(--pad) 32px 0; gap: 14px; }
  .contact__title { font-size: 24px; line-height: 28px; }
  .contact__icon { flex: 0 0 34px; }
  .contact__icon svg { width: 22px; height: 22px; }
  .contact__row p { font-size: 12.5px; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__nav { animation: none; opacity: 1; transform: none; }
}

/* intro: logo se odhalí spolu s navbarem (po najetí myší nahoru) */
.intro__logo {
  margin-right: 56px; line-height: 0;
  opacity: 0; clip-path: inset(0 100% 0 0);
  transition: opacity .8s ease .12s, clip-path .8s cubic-bezier(.22, .61, .36, 1) .12s;
}
.intro.nav-shown .intro__logo { opacity: 1; clip-path: inset(0 0 0 0); }
.intro__logo img { height: 28px; width: auto; }
@media (max-width: 700px) {
  .intro__logo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__logo { opacity: 1; clip-path: none; }
}

/* 2026-08-24 (Kristian: „když zmenšíš okno, ať to písmo Naše specializace není
   strašně velké"): nadpisy sekcí skákaly ze 48 px na mobilu rovnou na 64 px a
   na úzkém okně působily obrovsky. Teď na mobil navazují a rostou až tam, kde
   je pro ně místo. Pravidlo je schválně až na konci souboru, aby přebilo pevné
   velikosti výše. */
@media (min-width: 701px) and (max-width: 1440px) {
  .services__title, .spec__title { font-size: clamp(48px, 4.5vw, 64px); line-height: 1.02; }
  .team-title { font-size: clamp(48px, 4.5vw, 64px); line-height: 1.02; }
}
@media (min-width: 1441px) {
  .services__title { font-size: clamp(60px, 4.2vw, 72px); line-height: 1.02; }
  .spec__title, .team-title { font-size: clamp(64px, 4.4vw, 76px); line-height: 1.02; }
}

/* --- Výzva k akci na úvodní stránce (5. 9. 2026) -------------------------
   Tlačítko pod úvodním textem vede na kontakt, kontakt sám nabízí mail a
   telefon. Tvar tlačítka .cta je v base.css. */
.hero__cta { margin-top: 32px; }
.contact__lead { font-size: 15px; line-height: 1.55; max-width: 440px; }
.contact .cta-row { margin-top: 4px; }

@media (max-width: 700px) {
  .hero__cta { margin-top: 24px; }
  .contact__lead { font-size: 13px; max-width: none; }
  .contact .cta-row { gap: 10px; }
}