/* Master vzhledu: S jógou vlídně. Stavebnice: ../outputs/design-system/STAVEBNICE-s-jogou-vlidne.md */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root { --color-paper:#FBF5EF; --color-surface:#F3E8DD; --color-ink:#3B3430; --color-muted:#665D57; --color-brand:#8D4333; --color-brand-dark:#6E3126; --color-line:#DCCBC0; --color-white:#FFFDFC; --font-heading:'Libre Baskerville',Georgia,serif; --font-body:'Source Sans 3',Arial,sans-serif; --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --content:1120px; --reading:680px; --radius-button:999px; --radius-card:12px; --shadow-card:0 8px 28px rgba(59,52,48,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--color-paper); color:var(--color-ink); font:400 18px/1.6 var(--font-body); }
h1,h2,h3 { margin:0; color:var(--color-ink); font-family:var(--font-heading); font-weight:400; line-height:1.18; }
h1 { font-size:clamp(38px,5.3vw,68px); } h2 { font-size:clamp(30px,3.8vw,46px); } h3 { font-size:24px; } p { margin:0 0 var(--space-3); } a { color:inherit; }
.container { width:min(calc(100% - 40px),var(--content)); margin-inline:auto; }
.skip-link { position:absolute; z-index:5; left:-9999px; padding:12px 16px; background:var(--color-brand); color:var(--color-white); }
.skip-link:focus { left:16px; top:16px; }
.eyebrow { margin:0 0 var(--space-3); color:var(--color-brand); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:12px 23px; border:1px solid var(--color-brand); border-radius:var(--radius-button); background:var(--color-brand); color:var(--color-white); font:700 16px var(--font-body); text-decoration:none; transition:background .2s,border-color .2s; }
.button:hover,.button:focus-visible { background:var(--color-brand-dark); border-color:var(--color-brand-dark); }.button--small { min-height:44px; padding:9px 18px; }.button--light { border-color:var(--color-white); background:var(--color-white); color:var(--color-brand-dark); }.button--light:hover,.button--light:focus-visible { background:var(--color-surface); border-color:var(--color-surface); }
.site-header { position:sticky; z-index:2; top:0; border-bottom:1px solid var(--color-line); background:rgba(251,245,239,.96); backdrop-filter:blur(8px); }.site-header__inner { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:var(--space-4); }.brand { font-family:var(--font-heading); font-size:20px; text-decoration:none; white-space:nowrap; }.site-header nav { display:flex; gap:24px; }.site-header nav a { color:var(--color-muted); font-size:16px; text-decoration:none; }.site-header nav a:hover,.site-header nav a:focus-visible { color:var(--color-brand); text-decoration:underline; text-underline-offset:5px; }
.hero__image { position:relative; width:100%; height:min(64svh,620px); margin:0; overflow:hidden; background:var(--color-surface); }.hero__image>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.hero__copy { position:absolute; top:50%; right:max(var(--space-5),calc((100vw - var(--content))/2)); width:min(calc(100% - 48px),500px); padding:var(--space-5); border-left:8px solid var(--color-brand); background:var(--color-paper); box-shadow:var(--shadow-card); transform:translateY(-50%); }.hero__lead { max-width:24ch; margin-block:var(--space-3); font-family:var(--font-heading); font-size:clamp(22px,2.4vw,32px); line-height:1.35; }.hero__facts { margin:var(--space-4) 0 0; color:var(--color-muted); font-size:16px; font-weight:600; }
.benefits { padding-block:var(--space-7); background:var(--color-surface); }.benefits__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-5); }.card { padding:var(--space-4); border:1px solid var(--color-line); border-radius:var(--radius-card); background:var(--color-white); box-shadow:var(--shadow-card); }.card p { margin:var(--space-2) 0 0; }
.story,.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); gap:var(--space-6); align-items:center; padding-block:var(--space-8); }.story__photo { margin:0; overflow:hidden; border-radius:var(--radius-card); background:var(--color-surface); box-shadow:var(--shadow-card); }.story__photo img { display:block; width:100%; height:auto; }.story__copy { max-width:450px; }.story__motto { margin-block:var(--space-4); padding-left:var(--space-3); border-left:4px solid var(--color-brand); color:var(--color-brand-dark); font-family:var(--font-heading); font-size:24px; line-height:1.4; }
.lessons { padding-block:var(--space-8); background:var(--color-surface); }.lessons__inner { display:grid; grid-template-columns:1fr minmax(240px,.7fr); gap:var(--space-6); align-items:center; }.photo-frame { margin:0; overflow:hidden; border-radius:var(--radius-card); background:var(--color-surface); box-shadow:var(--shadow-card); }.photo-frame img { display:block; width:100%; height:auto; }.reference { padding-block:var(--space-8); }.reference blockquote { max-width:var(--reading); margin:0; }.reference blockquote p { margin:var(--space-4) 0 0; color:var(--color-muted); }.closing { padding-block:var(--space-7); background:var(--color-brand); color:var(--color-white); }.closing h2 { color:var(--color-white); }.closing .eyebrow { color:var(--color-surface); }.site-footer { padding-block:var(--space-4); background:var(--color-ink); color:var(--color-paper); font-size:15px; }.site-footer .container { display:flex; justify-content:space-between; gap:var(--space-3); }.site-footer a { text-underline-offset:4px; }
@media (max-width:720px) { body { font-size:17px; }.container { width:min(calc(100% - 32px),var(--content)); }.site-header__inner { min-height:68px; }.site-header nav { display:none; }.site-header .button { margin-left:auto; }.hero__image { display:flex; flex-direction:column; height:auto; overflow:visible; }.hero__image>img { order:2; height:auto; }.hero__copy { position:static; order:1; width:auto; padding:var(--space-4); box-shadow:none; transform:none; }.benefits,.lessons,.reference { padding-block:var(--space-7); }.benefits__grid,.story,.about,.lessons__inner { grid-template-columns:1fr; gap:var(--space-4); }.story,.about { padding-block:var(--space-7); }.story__photo { order:2; }.story__copy { max-width:none; }.about .photo-frame { width:min(100%,360px); }.site-footer .container { flex-direction:column; } }
.lesson-hero { padding-block:var(--space-7); background:var(--color-surface); }.lesson-hero__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-6); align-items:center; }.lesson-hero__lead { max-width:31ch; margin-block:var(--space-4); font-family:var(--font-heading); font-size:clamp(22px,2.5vw,31px); line-height:1.4; }.lesson-hero__photo { width:100%; max-width:390px; justify-self:end; margin:0; aspect-ratio:2 / 3; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-card); }.lesson-hero__photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.lesson-section { padding-block:var(--space-8); }.lesson-section--surface { background:var(--color-surface); }.lesson-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-5); }.lesson-card { display:flex; flex-direction:column; align-items:flex-start; padding:var(--space-5); border:1px solid var(--color-line); border-radius:var(--radius-card); background:var(--color-white); box-shadow:var(--shadow-card); }.lesson-card h3 { margin-bottom:var(--space-3); }.lesson-card__meta { display:flex; gap:var(--space-3); margin-bottom:var(--space-4); color:var(--color-brand); font-size:15px; font-weight:700; }.lesson-card__price,.individual__price { margin-top:auto; color:var(--color-brand-dark); font-weight:700; }.lesson-card__place { color:var(--color-muted); }.lesson-card .button { margin-top:var(--space-3); }.button--outline { background:transparent; color:var(--color-brand); }.button--outline:hover,.button--outline:focus-visible { color:var(--color-white); }.schedule-list { width:100%; margin:0 0 var(--space-4); padding-left:20px; color:var(--color-muted); }.schedule-list li+li { margin-top:var(--space-1); }.individual { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.52fr); gap:var(--space-6); align-items:center; }.individual__photo { width:min(100%,320px); justify-self:end; margin:0; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-card); }.individual__photo img { display:block; width:100%; height:auto; }.button-row { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }.text-link { color:var(--color-brand-dark); font-weight:700; text-underline-offset:4px; }.booking { padding-block:var(--space-8); background:var(--color-brand); color:var(--color-white); }.booking h2 { color:var(--color-white); }.booking .eyebrow { color:var(--color-surface); }.booking__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:var(--space-6); align-items:start; }.booking__options { display:grid; gap:var(--space-3); }.booking-option { display:grid; gap:var(--space-1); padding:var(--space-4); border:1px solid rgba(255,253,252,.55); border-radius:var(--radius-card); color:var(--color-white); text-decoration:none; }.booking-option:hover,.booking-option:focus-visible { background:rgba(255,253,252,.12); }.booking-option span { color:var(--color-surface); }.practical { padding-block:var(--space-8); }.practical__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-5); }.practical__grid strong { font-family:var(--font-heading); font-weight:400; }.practical__grid a { color:var(--color-brand-dark); text-underline-offset:4px; }
@media (max-width:720px) { .lesson-hero,.lesson-section,.booking,.practical { padding-block:var(--space-7); }.lesson-hero__inner,.lesson-grid,.individual,.booking__inner,.practical__grid { grid-template-columns:1fr; gap:var(--space-4); }.lesson-hero__photo,.individual__photo { justify-self:start; max-width:300px; }.lesson-card { padding:var(--space-4); } }
.menu-toggle { display:none; border:1px solid var(--color-brand); border-radius:var(--radius-button); background:transparent; color:var(--color-brand-dark); font:700 16px var(--font-body); min-height:44px; padding:9px 16px; }
.menu-reservation { display:none; }
@media (max-width:720px) { .site-header .button { display:none; }.site-header__inner { position:relative; }.menu-toggle { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }.site-header nav { position:absolute; top:calc(100% + 1px); right:0; left:0; display:grid; gap:0; padding:8px 16px 16px; border-bottom:1px solid var(--color-line); background:var(--color-paper); box-shadow:var(--shadow-card); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s,transform .2s; }.site-header nav.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }.site-header nav a { display:flex; min-height:48px; align-items:center; border-bottom:1px solid var(--color-line); color:var(--color-ink); font-size:18px; }.site-header nav a:last-child { border-bottom:0; }.site-header nav .menu-reservation { display:flex; margin-top:8px; justify-content:center; border:1px solid var(--color-brand); border-radius:var(--radius-button); background:var(--color-brand); color:var(--color-white); font-weight:700; text-decoration:none; } }
.site-header nav a { position:relative; padding-block:7px; }.site-header nav a::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--color-brand); content:""; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current="page"] { color:var(--color-brand-dark); text-decoration:none; }.site-header nav a:hover::after,.site-header nav a:focus-visible::after,.site-header nav a[aria-current="page"]::after { transform:scaleX(1); }
@media (max-width:720px) { .site-header nav a { padding-block:0; }.site-header nav a::after { display:none; } }