/* Steysky – bundle.css. Staví na tokens.css (--ground, --ink, --space-*, --font-*). Prefix sk-, bez JavaScriptu. */

.sk-page { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
/* Plynule rolovani na kotvy. Musi byt na korenu -- na <body> ho prohlizec pro
   rolovani stranky necte, takze drive nefungovalo vubec. scroll-padding drzi
   cil pod prilepenou hlavickou. */
:root:has(.sk-page) { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { :root:has(.sk-page) { scroll-behavior: auto; } }
.sk-page img { max-width: 100%; }
.sk-page :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.sk-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.sk-section { padding: var(--space-24) 0 0; }
.sk-section__title { margin: 0 0 var(--space-12); font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: 0.01em; }
.sk-prose { max-width: var(--measure); }

/* Odkazy v textu: podtržení line, po najetí ink */
.sk-link { color: var(--link); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sk-link:hover { text-decoration-color: var(--ink); }

/* Header */
.sk-header { position: sticky; top: 0; z-index: 10; background: var(--ground); }
.sk-header__row { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); }
.sk-header__logo { display: inline-block; line-height: 0; }
.sk-header__logo img { height: var(--logo-h); width: auto; display: block; }
.sk-header__contact { justify-self: end; display: flex; gap: var(--space-6); font-size: 16px; line-height: 22px; font-weight: 500; }
.sk-header__contact a { color: var(--ink); text-decoration: none; }
.sk-header__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .sk-header__row { height: auto; grid-template-columns: 1fr; justify-items: center; gap: var(--space-2); padding: var(--space-3) 0; }
  /* justify-items: center dava polozkam sirku podle obsahu, takze flex-wrap
     v navigaci nemel o co se oprit a menu pretekalo z obrazovky. */
  .sk-header__row > nav { max-width: 100%; }
  .sk-header__contact { display: none; }
}

/* NavLink */
.sk-nav { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.sk-nav li[hidden] { display: none; }
.sk-nav a { display: inline-block; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.sk-nav a:hover, .sk-nav a[aria-current="true"], .sk-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
@media (max-width: 900px) { .sk-nav { gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .sk-nav a { font-size: 16px; } }

/* Hero */
.sk-hero { position: relative; min-height: var(--hero-min-h); display: grid; place-items: center; overflow: hidden; background: var(--ground-raised); }
.sk-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.sk-hero__title { position: relative; z-index: 1; margin: 0; width: min(60vw, var(--hero-logo-w)); }
.sk-hero__logo { width: 100%; height: auto; }

/* Intro */
.sk-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.sk-intro__photo { width: 100%; height: auto; display: block; background: var(--ground-raised); }
.sk-intro__title { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: 0.01em; }
.sk-intro__text { margin: 0; max-width: var(--measure); font-size: 20px; line-height: 30px; }
@media (max-width: 800px) { .sk-intro { grid-template-columns: 1fr; gap: var(--space-8); } }

/* MemberCard */
.sk-members { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.sk-member__photo { width: 100%; height: auto; aspect-ratio: var(--portrait-ratio); object-fit: cover; display: block; background: var(--ground-raised); }
.sk-member__name { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 600; }
.sk-member__role { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 500; }
@media (max-width: 900px) { .sk-members { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sk-members { grid-template-columns: repeat(2, 1fr); } }

/* GalleryStrip */
.sk-gallery { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.sk-gallery::-webkit-scrollbar { display: none; }
.sk-gallery li { flex: none; scroll-snap-align: start; }
.sk-gallery img { height: var(--gallery-h); width: auto; display: block; background: var(--ground-raised); pointer-events: none; user-select: none; }

/* SocialLink */
.sk-social { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4); border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 16px; line-height: 22px; font-weight: 500; }
.sk-social:hover { background: var(--ink); color: var(--on-ink); }
.sk-social__mark { width: 20px; height: 20px; display: block; }

/* ContactFooter */
.sk-footer { margin-top: var(--space-24); background: var(--ground-raised); padding: var(--space-16) 0; }
.sk-footer__row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: start; }
.sk-footer__logo { height: var(--footer-logo-h); width: auto; display: block; }
.sk-footer__list { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; }
.sk-footer__list > div { min-width: 180px; }
.sk-footer__list dt { color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 500; }
.sk-footer__list dd { margin: var(--space-1) 0 0; font-size: 16px; line-height: 22px; font-weight: 500; }
.sk-footer__list dd a { color: var(--ink); text-decoration: none; }
.sk-footer__list dd a:not(.sk-social):hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-footer__list dd .sk-social { margin-top: var(--space-1); }
@media (max-width: 700px) { .sk-footer__row { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---- Stránka (mimo design systém): reset, skip link, plné šířky ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); }
body { min-height: 100vh; }
main { display: block; }
.sk-skip { position: absolute; left: var(--space-6); top: -100px; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--on-ink); z-index: 20; text-decoration: none; }
.sk-skip:focus { top: var(--space-2); }
.sk-section { padding-top: var(--space-24); }
.sk-gallery { padding: 0 var(--space-6); }
.sk-hero__logo { display: block; }
.sk-hero__photo { display: block; }

/* Telefon a e-mail v hlavičce: v gridu 1fr auto 1fr na ně zbývá málo místa a
   číslo se lámalo na dva řádky. */
.sk-header__contact a { white-space: nowrap; }

/* Telefon a e-mail v hlavičce oddělené svislou linkou. `line` je podle design
   systému určená právě pro dekorativní oddělovače. */
.sk-header__contact { align-items: center; }
.sk-header__contact a + a { padding-left: var(--space-6); border-left: 1px solid var(--line); }

/* Koláž jako nekonečná smyčka (js/site.js). Přichytávání fotek by se
   s plynulým posunem pruhu přetahovalo, takže se ve smyčce vypíná. */
.sk-gallery.is-looping { scroll-snap-type: none; }

/* ---- Menu na mobilu pod hamburgerem ----
 *
 * Mimo design systém: ten pod 900 px skládá navigaci pod logo a ikony kromě
 * značek sociálních sítí nemá. Zapíná se jen s JavaScriptem (třída `js` na
 * <html> z inline skriptu v hlavičce) -- bez něj zůstane navigace rozložená
 * pod logem jako dřív, takže se k ní člověk dostane vždycky.
 *
 * Otevírá se bez animace: jediný pohyb, který design systém připouští, je
 * rolování na kotvy.
 */
.sk-menu-toggle { display: none; }

@media (max-width: 900px) {
    .js .sk-header__row {
        grid-template-columns: 1fr auto;
        justify-items: stretch;
        height: var(--header-h);
        padding: 0;
    }

    .js .sk-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        width: 44px;
        height: 44px;
        margin-right: calc(-1 * var(--space-2));
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
    }

    /* Panel leží přes obsah (hlavička je sticky, tedy jeho kontejner), takže
       zavření menu po kliknutí na odkaz nic neposune a kotva sedí. */
    .js .sk-header__row > nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-width: none;
        background: var(--ground);
        border-top: 1px solid var(--line);
    }

    .js .sk-header.is-open .sk-header__row > nav { display: block; }

    .js .sk-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--space-2) var(--space-6) var(--space-6);
    }

    .js .sk-nav a { padding: var(--space-3) 0; font-size: 18px; }
}

.sk-menu-toggle__bars,
.sk-menu-toggle__bars::before,
.sk-menu-toggle__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
}

.sk-menu-toggle__bars { position: relative; }

.sk-menu-toggle__bars::before,
.sk-menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.sk-menu-toggle__bars::before { top: -7px; }
.sk-menu-toggle__bars::after { top: 7px; }

/* Otevřené menu: pruhy se složí do křížku. */
.sk-header.is-open .sk-menu-toggle__bars { background: transparent; }
.sk-header.is-open .sk-menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.sk-header.is-open .sk-menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Patička: sítě bez popisku nad sebou. Pilulky nesou značku i název, takže
   popisek „Facebook" nad pilulkou „Facebook" byl navíc. Stojí vedle dvojic
   telefon/e-mail a dole zarovnané na jejich hodnoty. */
.sk-footer__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
}

.sk-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}