/* =====================================================================
 *  mkmv — rámečky fotek se přizpůsobí poměru stran nahrané fotky
 *  (žádné ořezávání). Výjimky: hero carousel na homepage a dekorativní
 *  poloprůhledné pozadí v hlavičce stránky Služby — ty zůstávají „cover".
 * ===================================================================== */

/* Kontejnery: zrušit pevnou výšku i vynucený poměr stran → výšku určí fotka. */
.chapter-media { height: auto; }
.case .media { height: auto; }
.port-card .media { height: auto; }

/* Fotky týmu — zachovávají poměr stran nahrané fotky (žádné ořezávání),
   stejně jako ostatní fotky na webu. Výšku určuje fotka. */
.member .member-photo { height: auto; }
.member .member-photo img { height: auto; object-fit: contain; }
.audpanel .aud-media { aspect-ratio: auto; }
.case-hero .hero-img { aspect-ratio: auto; }
.bio-photo { aspect-ratio: auto; }

/* Obrázky: přirozená výška (ne 100 % ořezaná), plná šířka rámečku. */
.media img,
.audpanel .aud-media img,
.case-hero .hero-img img,
.bio-photo img {
	height: auto;
	object-fit: contain;
}

/* Malý náhled u „další z týmu" — pevná šířka, výška podle fotky. */
.more-card img { height: auto; }

/* Na mobilu neroztahovat malé fotky přes celou šířku zbytečně velké. */
@media (max-width: 640px) {
	.more-card img { width: 96px; }
}

/* =====================================================================
 *  Loga klientů (běžící pás) — monochromaticky a jemně upozaděná.
 *  Průhlednost (.client opacity:.46, hover .9) dědí i logo; grayscale
 *  odbarví; hover jemně zvýrazní. Rámeček se přizpůsobí poměru loga.
 * ===================================================================== */
.client .client-logo {
	height: 40px;
	width: auto;
	max-width: 180px;
	display: block;
	filter: grayscale(1);
	/* výška určuje poměr — nikdy neořezávat */
	object-fit: contain;
}
.client:hover .client-logo { filter: grayscale(1); }

@media (max-width: 620px) {
	.client .client-logo { height: 32px; max-width: 140px; }
}

/* =====================================================================
 *  Taby „Pro koho" — podtržení jen pod textem (ne pod oddělovačem ·).
 * ===================================================================== */
.audtab::after { display: none; }
.audtab .audtab-txt { position: relative; display: inline-block; }
.audtab .audtab-txt::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
	background: var(--ink); transform: scaleX(0); transform-origin: left;
	transition: transform .28s var(--ease);
}
.audtab.active .audtab-txt::after { transform: scaleX(1); }

/* =====================================================================
 *  Reveal animace bez bliknutí — prvky jsou skryté už před vykreslením
 *  (jen když běží JS). Po odkrytí je zviditelní třída .is-revealed.
 * ===================================================================== */
.mkmv-js .reveal,
.mkmv-js .enter {
	opacity: 0;
	transition: opacity .75s cubic-bezier(.2, .6, .2, 1), transform .75s cubic-bezier(.2, .6, .2, 1);
}
.mkmv-js .reveal:not(.markbox),
.mkmv-js .enter:not(.markbox) { transform: translateY(28px); }
.reveal.is-revealed,
.enter.is-revealed { opacity: 1 !important; transform: none !important; }
/* Respektuj systémové vypnutí animací. */
@media (prefers-reduced-motion: reduce) {
	.mkmv-js .reveal, .mkmv-js .enter { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
 *  Tým — varianta se dvěma lidmi (zaplní prostor) + poznámka o freelancerech.
 * ===================================================================== */
.team-duo { display: flex; flex-direction: column; gap: 64px; }
.team-person { align-items: center; grid-template-columns: 460px 1fr; gap: 60px; }
.team-person.flip { grid-template-columns: 1fr 460px; }
.team-person .chapter-media { max-width: 460px; border-radius: 14px; overflow: hidden; }
@media (max-width: 980px) {
	.team-person, .team-person.flip { grid-template-columns: 1fr; }
	.team-person .chapter-media { max-width: 460px; }
}
.team-person .team-person-name {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em;
	line-height: 1.04; color: var(--ink); margin: 0;
}
.team-person .team-person-name a { color: inherit; }
.team-person .team-person-name a:hover { color: var(--signal); }
.team-note {
	margin: 56px auto 0; text-align: center; max-width: 680px;
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.01em;
	line-height: 1.32; color: var(--ink-600);
}

/* =====================================================================
 *  Hero — obsah výš (lepší čitelnost), lišty a šipka s odstupem.
 * ===================================================================== */
.hero-inner { padding-bottom: 96px; }
.hero-nav { display: flex; align-items: center; gap: 14px; }
.hero-arrow { display: none; }   /* šipky nepoužíváme — přepíná se tečkami a automaticky */
@media (max-width: 900px) {
	/* Hero na mobilu ROTUJE (auto + tečky), ale TVRDÝM STŘIHEM bez prolnutí →
	   na iOS Safari nevzniká ghost (dvojitý popisek ani bílá tečka). */
	.hero-scroll { display: none !important; }        /* nepřekrývá tlačítka */
	.hero-slide img { transform: none !important; }    /* žádný Ken Burns */
	.hero-wash { display: none !important; }           /* žádný blend → čistý render */
	.hero-text { will-change: auto; }
	.hero-slide, .hero-text { transition: none !important; }  /* tvrdý střih */
	.hero-slide { will-change: auto; }
	.hero-inner { padding-bottom: 88px; }
}

/* =====================================================================
 *  Hamburger / mobilní menu.
 * ===================================================================== */
.nav-toggle { display: none; }
.nav-cta-mobile { display: none; }

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		margin-left: auto; width: 44px; height: 44px; padding: 10px;
		background: none; border: none; cursor: pointer; color: #fff;
	}
	.nav-toggle span {
		display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
		transition: transform .25s var(--ease), opacity .2s var(--ease);
	}
	.site-header.scrolled .nav-toggle,
	.site-header.onlight .nav-toggle,
	.site-header.nav-open .nav-toggle { color: var(--ink); }
	.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Při otevřeném menu má hlavička plné pozadí + tmavé logo. */
	.site-header.nav-open { background: var(--sand); border-bottom-color: var(--hair); }
	.site-header.nav-open .brand .logo-light { opacity: 0; }
	.site-header.nav-open .brand .logo-dark { opacity: 1; }

	.header-cta { display: none; }

	.nav {
		display: none; position: absolute; top: 82px; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0; margin: 0;
		background: var(--sand); border-bottom: 1px solid var(--hair);
		padding: 8px 22px 20px; box-shadow: 0 22px 40px -26px rgba(28,29,51,.4);
	}
	.site-header.nav-open .nav { display: flex; }
	.nav a { color: var(--ink-700) !important; padding: 15px 2px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--hair); }
	.nav a::after { display: none; }
	.nav a:hover { color: var(--ink) !important; }

	/* CTA v menu = standardní primární tlačítko (ink pozadí, světlý text).
	   Vyšší specificita než „.nav a", aby text nebyl přebit na tmavý. */
	.nav a.nav-cta-mobile {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		margin-top: 16px; padding: 14px 22px; border-bottom: none;
		background: var(--ink); color: var(--sand) !important; border-radius: 999px; font-weight: 600;
	}
	.nav a.nav-cta-mobile:hover { background: var(--ink-800); color: var(--sand) !important; }
	.nav a.nav-cta-mobile .lucide { width: 16px; height: 16px; }
}

/* =====================================================================
 *  Patička na mobilu — sloupce pod sebe, víc vzduchu (na desktopu 3 sloupce).
 * ===================================================================== */
@media (max-width: 760px) {
	.site-footer { padding: 56px 0 32px; }
	.foot-grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
	.foot-grid .f-brand p { max-width: none; margin-top: 18px; }
	.foot-col .eyebrow { margin-bottom: 14px; }
	.foot-col a { margin-bottom: 14px; }
	.foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
	.foot-bottom a { margin-left: 0; margin-right: 22px; }
}