/* Sestaveno build.py — needituj, uprav zdroje v statika/css/_*.css */

/* ===== _fonty.css ===== */
/* Raleway — hostuje se lokálně, nikdy z CDN (HANDOFF §5).
   Každý řez potřebuje OBA soubory: latin i latin-ext. Bez latin-ext
   zmizí česká diakritika (ě š č ř ž ů), a to až na produkci. */
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-200-normal.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-ext-200-normal.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-ext-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("../fonts/raleway-latin-ext-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ===== _tokeny.css ===== */
:root{
--color-brand-primary:#646D56;
--color-brand-dark-green:#2F3626;
--color-brand-brown-light:#714C2F;
--color-brand-brown-dark:#5C3C27;
--color-brand-sand:#BEA57D;
--color-text-primary:#393939;
--color-text-muted:#666666;
--color-text-inverse:#FFFFFF;
--color-surface-base:#FFFFFF;
--color-surface-alt:#F9F7FA;
--color-surface-dark:#2F3626;
--color-overlay-dark:rgba(0,0,0,0.4);
--color-link:#666666;
--color-link-hover:#393939;
}
:root{
--font-family-base:"Raleway",sans-serif;
--font-weight-extralight:200;
--font-weight-light:300;
--font-weight-regular:400;
--font-weight-semibold:600;
--font-size-h1:64px;
--font-line-h1:1.05;
--font-size-h2:36px;
--font-line-h2:1.2;
--font-size-h3:22px;
--font-line-h3:1.4;
--font-size-body:17px;
--font-line-body:1.6;
--font-size-small:14px;
--font-line-small:1.5;
--letter-spacing-logo:0.12em;
}
:root{
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:40px;
--space-5:64px;
--space-6:96px;
--radius:5px;
--content-max-width:1200px;
}

/* ===== _design.css ===== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--color-surface-base);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-body);line-height:var(--font-line-body);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:none;transition:color .15s ease}a:hover{color:var(--color-link-hover)}
p{margin:0;text-wrap:pretty}h1,h2,h3,h4{margin:0;text-wrap:balance}img{display:block}
.gp-root{--cw:1200px;--rhythm:96px}
.wrap{max-width:var(--cw);margin:0 auto;padding:0 40px;width:100%}
.gp-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gp-overlay{position:absolute;inset:0}
.gp-h2{font-size:var(--font-size-h2);font-weight:300;line-height:var(--font-line-h2)}
.gp-h3{font-size:var(--font-size-h3);font-weight:300;line-height:var(--font-line-h3)}
.gp-h3.light{color:#fff}
.gp-muted{color:var(--color-text-muted);font-size:16px}
.gp-sec{padding:var(--rhythm) 0}.gp-sec.alt{background:var(--color-surface-alt)}
.gp-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.gp-link{font-size:16px;color:var(--color-text-muted)}.gp-link:hover{color:var(--color-text-primary)}
.gp-note{display:inline-flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.5;color:var(--color-text-muted);border:1px dashed var(--color-brand-sand);border-radius:var(--radius);padding:6px 12px}
.gp-note-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.gp-note.dark{color:#d8dcd2}
/* header */
.gp-header{position:sticky;top:0;z-index:20;background:var(--color-surface-base);border-bottom:1px solid #ECE8E2}
.gp-header-in{height:96px;display:flex;align-items:center;justify-content:space-between;gap:40px;max-width:none;margin:0;padding:0 24px;width:100%}
.gp-logo img{height:64px}
.gp-nav{display:flex;gap:40px;font-size:15px;align-items:center}.gp-nav a{color:var(--color-text-primary)}.gp-nav a:hover{color:var(--color-text-muted)}
.gp-header-right{display:flex;align-items:center;gap:40px}
/* hero */
.gp-hero{position:relative;overflow:hidden;background:var(--color-surface-dark)}
.gp-hero-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:64px;padding-bottom:64px}
.gp-hero-text{color:#fff;display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center}
.gp-hero h1{font-weight:200;line-height:1.05;text-transform:uppercase;letter-spacing:.04em}
.gp-hero-sub{font-size:34px;font-weight:300;line-height:1.3}
.gp-hero-line{font-size:22px;color:#fff;font-weight:300}
.gp-book{background:var(--color-surface-base);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:end}
.gp-book input,.gp-book select{width:100%}
.gp-book input[type="date"],.gp-book input[type="date"]::-webkit-datetime-edit,.gp-book input[type="date"]::-webkit-datetime-edit-fields-wrapper,.gp-book input[type="date"]::-webkit-datetime-edit-text,.gp-book input[type="date"]::-webkit-datetime-edit-month-field,.gp-book input[type="date"]::-webkit-datetime-edit-day-field,.gp-book input[type="date"]::-webkit-datetime-edit-year-field{font-family:Arial,Helvetica,sans-serif;font-weight:600}
.gp-book select{font-family:Arial,Helvetica,sans-serif!important;font-weight:600!important}
/* intro */
.gp-intro{display:grid;grid-template-columns:1fr 480px;gap:96px;align-items:center}
.gp-intro-text{display:flex;flex-direction:column;gap:24px;max-width:560px}
.gp-intro-text .gp-h2{margin-bottom:16px}
.gp-intro-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
/* video */
.gp-video{position:relative;height:640px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-dark)}
.gp-play{position:relative;background:transparent;color:#fff;border:1px solid #fff;border-radius:var(--radius);font:400 16px var(--font-family-base);letter-spacing:.02em;padding:14px 28px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.gp-play:hover{background:#fff;color:var(--color-text-primary)}
/* amenities */
.gp-amen{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:40px}
.gp-amen-item{margin:0}.gp-amen-item:nth-child(-n+2){grid-column:span 3}.gp-amen-item:nth-child(n+3){grid-column:span 2}
.gp-amen-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.gp-amen-item figcaption{display:flex;flex-direction:column;gap:8px;padding-top:16px}
/* rental */
.gp-rent{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.gp-rent-item{margin:0}.gp-rent-item img,.gp-type-panel{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--radius)}
.gp-type-panel{background:var(--color-surface-alt);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:300;line-height:1.2;color:var(--color-text-primary)}
.gp-rent-item figcaption{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px}
.gp-price{font-size:17px}
.gp-rent-note{margin-top:40px;color:var(--color-text-muted)}
/* strip */
.gp-strip{background:var(--color-surface-dark);color:#fff;padding:40px 0}
.gp-strip-in{display:flex;align-items:center;gap:40px}
/* tiles */
.gp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.gp-tile{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;padding:32px}
.gp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gp-tile span{position:relative;font-size:32px;font-weight:300;line-height:1.2}
.gp-tile.photo span{color:#fff}
.gp-tile.type{background:var(--color-surface-alt);color:var(--color-text-primary)}
.gp-tile.type:hover{color:var(--color-text-primary)}
/* availability */
.gp-avail{display:grid;grid-template-columns:1fr 560px;gap:96px;align-items:center}
.gp-avail-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.gp-avail-text p{color:var(--color-text-muted)}
.gp-cal{background:var(--color-surface-base);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px}
.gp-cal-head{display:flex;justify-content:space-between;align-items:baseline;font-size:17px}
.gp-legend{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-text-muted)}
.gp-legend i{display:inline-block;width:16px;height:16px;border-radius:var(--radius);border:1px solid #ECE8E2;background:#fff}
.gp-legend i.busy{background:#ECE8E2;margin-left:8px}
.gp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.gp-cal-dow{font-size:13px;color:var(--color-text-muted);text-align:center;padding:4px 0}
.gp-day{height:56px;display:flex;align-items:center;justify-content:center;border:1px solid #ECE8E2;border-radius:var(--radius);font-size:16px}
.gp-day.busy{background:#ECE8E2;border-color:#ECE8E2;color:var(--color-text-muted)}
.gp-day.past{color:#B5B0A8;border-color:transparent}
.gp-day.sel{background:var(--color-surface-dark);border-color:var(--color-surface-dark);color:#fff}
.gp-legend i.sel{background:var(--color-surface-dark);border-color:var(--color-surface-dark);margin-left:8px}
.gp-btn-link{display:inline-block}
/* rezervace */
.gp-rez{display:grid;grid-template-columns:1fr 560px;gap:96px;align-items:start}
.gp-rez-form{display:flex;flex-direction:column;gap:24px;max-width:480px}
.gp-rez-form .gp-h2{margin-bottom:8px}
.gp-rez-dates{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gp-rez-form input,.gp-rez-form select{width:100%}
.gp-rez-form input[type="date"],.gp-rez-form input[type="date"]::-webkit-datetime-edit,.gp-rez-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,.gp-rez-form input[type="date"]::-webkit-datetime-edit-text,.gp-rez-form input[type="date"]::-webkit-datetime-edit-month-field,.gp-rez-form input[type="date"]::-webkit-datetime-edit-day-field,.gp-rez-form input[type="date"]::-webkit-datetime-edit-year-field{font-family:Arial,Helvetica,sans-serif;font-weight:600}
.gp-rez-form select{font-family:Arial,Helvetica,sans-serif!important;font-weight:600!important}
.gp-rez-sum{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;padding:24px 0;border-top:1px solid #ECE8E2;border-bottom:1px solid #ECE8E2}
.gp-rez-sum dt{color:var(--color-text-muted);font-size:14px;letter-spacing:.06em;text-transform:uppercase}.gp-rez-sum dd{margin:0}
/* facts */
.gp-facts{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.gp-facts li{border-top:1px solid #ECE8E2;padding-top:16px;font-size:16px;line-height:1.5}
/* where */
.gp-where{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.gp-contact{margin:40px 0 0;display:grid;grid-template-columns:auto 1fr;gap:16px 24px;align-items:baseline}
.gp-contact dt{font-size:14px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}.gp-contact dd{margin:0}
.gp-map{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#ECE8E2}.gp-map iframe{width:100%;height:100%;border:0;display:block}
/* okolí */
.gp-hero-in.sub{justify-content:center;padding-bottom:0}
.gp-hero-in.sub .gp-hero-text{flex:none}
.gp-hero.sub h1{color:#fff}
.gp-narrow{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.gp-narrow .gp-h2{margin-bottom:16px}
.gp-eyebrow{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.gp-blocks{display:flex;flex-direction:column;gap:var(--rhythm);margin-top:40px}
.gp-block{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.gp-block.flip .gp-block-img,.gp-block.flip .gp-block-type{order:2}
.gp-block-img,.gp-block-type{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.gp-block-type{background:var(--color-surface-alt);display:flex;align-items:flex-end;padding:40px}
.gp-sec.alt .gp-block-type{background:var(--color-surface-base)}
.gp-block-type span{font-size:40px;font-weight:300;line-height:1.2;color:var(--color-text-primary)}
.gp-block-text{display:flex;flex-direction:column;gap:16px;max-width:520px}
.gp-block-title{font-size:32px;font-weight:300;line-height:1.2;margin-bottom:8px}
.gp-cta{background:var(--color-surface-dark);color:#fff;padding:var(--rhythm) 0}
.gp-cta-in{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.gp-msg{width:100%;max-width:560px;display:flex;flex-direction:column;gap:16px;text-align:left;align-items:flex-start}
.gp-msg label{width:100%}.gp-msg label>span{color:#d8dcd2!important}.gp-msg textarea,.gp-msg input{width:100%}
.gp-cta-sent{color:#d8dcd2}
.gp-sec-intro{padding-top:64px}
/* faq */
.gp-faq{max-width:800px;margin-top:40px;border-top:1px solid #ECE8E2}
.gp-faq.center{margin-left:auto;margin-right:auto}
.gp-faq-item{border-bottom:1px solid #ECE8E2}
.gp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;padding:24px 0;cursor:pointer;text-align:left;font:300 22px/1.4 var(--font-family-base);color:var(--color-text-primary)}
.gp-faq-mark{font-size:28px;font-weight:200;line-height:1;width:24px;text-align:center;flex:none}
.gp-faq-a{padding:0 48px 24px 0;color:var(--color-text-primary)}
.gp-cenik{display:flex;flex-direction:column;gap:32px;max-width:800px;margin:0 auto;align-items:stretch}
.gp-cenik-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gp-cenik-sub{color:var(--color-text-muted);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.gp-price-list{display:flex;flex-direction:column;border-top:1px solid #ECE8E2}
.gp-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:32px;padding:18px 0;border-bottom:1px solid #ECE8E2}
.gp-price-val{font-family:Arial,Helvetica,sans-serif;font-weight:700;white-space:nowrap}
.gp-price-sub{padding:12px 0 16px;border-bottom:1px solid #ECE8E2}
.gp-price-sub.small{color:var(--color-text-muted);font-size:14px;line-height:1.6}
.gp-cenik-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.gp-cenik-h3{font-size:18px;letter-spacing:.02em;margin:0 0 12px}
.gp-cenik-cols p{color:var(--color-text-muted);font-size:15px;margin:0 0 8px}
.gp-cenik-terms{max-width:640px}
/* galerie */
.gp-gal{column-count:3;column-gap:24px}
.gp-gal-item{display:block;width:100%;margin:0 0 24px;padding:0;border:0;background:none;cursor:pointer;break-inside:avoid;border-radius:var(--radius);overflow:hidden;position:relative}
.gp-gal-item img{display:block;width:100%;height:auto;border-radius:var(--radius);transition:filter .2s ease}
.gp-gal-item:hover img{filter:brightness(.82)}
.gp-lb{position:fixed;inset:0;z-index:100;background:var(--color-surface-dark);display:flex;align-items:center;justify-content:center;padding:64px 96px}
.gp-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius);display:block}
.gp-lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:200 64px/1 var(--font-family-base);padding:16px;opacity:.85;transition:opacity .15s ease}
.gp-lb button:hover{opacity:1}
.gp-lb-close{top:16px;right:24px;font-size:48px!important}
.gp-lb-arrow{top:50%;transform:translateY(-50%)}
.gp-lb-arrow.prev{left:16px}.gp-lb-arrow.next{right:16px}
.gp-lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#d8dcd2;font-size:14px;letter-spacing:.06em}
/* footer */
.gp-footer{background:var(--color-surface-dark);color:#fff;padding:64px 0 40px}
.gp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.gp-footer-grid>div{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.gp-footer h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:#d8dcd2}.gp-footer h4.gp-mt{margin-top:24px}
.gp-footer a{color:#fff;font-size:15px}.gp-footer a:hover{color:#d8dcd2}
.gp-footer-logo{height:72px}.gp-footer-tag{color:#d8dcd2;font-size:15px;margin-top:8px}
.gp-footer-legal{display:flex;align-items:center;gap:40px}
.gp-krekrrr{display:flex;align-items:center;gap:8px;font-size:14px;color:#d8dcd2}
.gp-krekrrr a{text-decoration:underline;color:#d8dcd2;font-size:14px}
.gp-krekrrr a:hover{color:#fff}
.gp-krekrrr img{height:22px;width:auto}
.gp-krekrrr:hover{color:#fff}
.gp-footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid #47503B;display:flex;justify-content:space-between;font-size:14px;color:#d8dcd2}
.gp-footer-bottom a{font-size:14px;color:#d8dcd2}.gp-footer-bottom a:hover{color:#fff}

/* ===== _doplnky.css ===== */
/* ==========================================================================
   Doplňky k návrhu
   --------------------------------------------------------------------------
   Soubor _design.css je CSS vytažené z Claude Designu a nesahá se do něj —
   drží schválený vizuál na desktopu 1440. Tady je jen to, co v návrhu není:

     1) mobil a tablet (návrh se kreslil jen na 1440, HANDOFF §4)
     2) stavy interaktivních prvků (kalendář, formulář, akordeon, lightbox)
     3) drobnosti pro přístupnost (focus, prefers-reduced-motion)

   Pravidla značky platí i tady: žádné stíny, žádné gradienty, žádné ikony,
   radius vždy 5 px, sytá barva jen na tlačítku Rezervovat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Základ, co v exportu chybí
   -------------------------------------------------------------------------- */

/* V návrhu je výška hera inline stylem z panelu návrhového nástroje.
   Tady je z toho token, aby šla měnit na jednom místě. */
.gp-root { --hero-h: 720px; --hero-h-sub: 460px; }
.gp-hero { height: var(--hero-h); }
.gp-hero.sub { height: var(--hero-h-sub); }
.gp-hero h1 { font-size: var(--font-size-h1); }

/* Přetmavení fotky pod světlým textem — v návrhu inline, tady třídou. */
.gp-overlay { background: var(--color-overlay-dark); }

/* Čitelnost textu na fotce v heru (Petr 14. 9. 2026). Značka zakazuje stíny
   i přechody, takže text vystoupí jen tmavším přetmavením (40 → 55 %)
   a o stupeň silnějším řezem — tenká Raleway 200/300 na světlých místech
   fotky splývala. Všechny řezy (300, 400) se hostují, nic se nedopočítává. */
.gp-hero .gp-overlay { background: rgba(0, 0, 0, .55); }
.gp-hero h1 { font-weight: 300; }
.gp-hero-sub, .gp-hero-line { font-weight: 400; }

/* Formulářové prvky z design systému (Input, Select, Textarea byly inline
   styly v Reactu). Tvary a barvy jsou opsané 1:1. */
.gp-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-family-base); }
.gp-field > span { font-size: 14px; color: var(--color-text-muted); font-weight: 400; }
.gp-field input,
.gp-field select,
.gp-field textarea {
  font-family: var(--font-family-base); font-size: 16px; font-weight: 400;
  color: var(--color-text-primary); padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid #d8d5d0;
  outline: none; background: #fff; width: 100%;
}
.gp-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.gp-field input:focus,
.gp-field select:focus,
.gp-field textarea:focus { border-color: var(--color-text-primary); }
.gp-field input[type="date"] { font-family: Arial, Helvetica, sans-serif; font-weight: 600; }
.gp-field select { font-family: Arial, Helvetica, sans-serif; font-weight: 600; }

.gp-btn {
  font-family: var(--font-family-base); font-weight: 400; font-size: 16px;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  padding: 14px 28px; letter-spacing: .02em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gp-btn.sm { padding: 10px 20px; font-size: 14px; }
.gp-btn.primary { background: var(--color-brand-primary); color: #fff; }
.gp-btn.primary:hover { background: #565e49; }
.gp-btn.secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-text-primary); }
.gp-btn.secondary:hover { background: var(--color-surface-alt); }
.gp-btn[disabled] { opacity: .5; cursor: default; }
.gp-btn[disabled]:hover { background: var(--color-brand-primary); }
.gp-btn.secondary[disabled]:hover { background: transparent; }
a.gp-btn-link:hover { color: inherit; }

/* Atribut `hidden` musí přebít autorské display. Bez tohohle řádku zůstane
   skrytý blok s `display:flex` (třeba .gp-rez-form) vidět — prohlížeč dává
   [hidden] jen `display:none` s nejnižší specificitou. */
[hidden] { display: none !important; }

/* Návrh dává logu jen výšku. Bez `width:auto` si obrázek nechá šířku
   z HTML atributu a hlavička na mobilu přeteče ven z okna. */
.gp-logo img, .gp-footer-logo { width: auto; max-width: 100%; }

/* SectionHeading z design systému byl v Reactu inline styl. */
.gp-sec-heading { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-family-base); }
.gp-sec-heading .gp-h2 { font-size: var(--font-size-h2); font-weight: 300; color: var(--color-text-primary); }
.gp-type-panel span { display: block; padding: 24px; text-align: center; }

/* Typografický panel v mřížce „Co k pobytu patří“. Karta je tam užší a vysoká
   4:3, ne 2:1 jako u půjčovny — bez přepisu by řádek s panelem vyskočil. */
.gp-amen-panel { aspect-ratio: 4/3; font-size: 24px; }
/* Sekce „Co k pobytu patří“ stojí na alt podkladu, panel má stejnou barvu
   a beze změny by zmizel. Návrh to samé řeší u bloků (.gp-sec.alt .gp-block-type). */
.gp-sec.alt .gp-type-panel { background: var(--color-surface-base); }

/* Odkaz uvnitř textového sloupce. Sám o sobě má stejnou barvu jako text
   kolem, takže se pozná jen podle podtržení (WCAG 1.4.1 — barva nesmí být
   jediné rozlišení). Jinde na webu stojí gp-link vedle nadpisu, kde je vidět. */
.gp-cenik-cols .gp-link { text-decoration: underline; text-underline-offset: 3px; }

/* Odkaz v tmavém CTA pruhu. Bez tohohle by zdědil zelenou barvu odkazu
   a na tmavě zeleném podkladu by zmizel — patička to řeší stejně. */
.gp-cta a { color: #fff; }
.gp-cta a:hover { color: #d8dcd2; }

/* Seznam v textovém sloupci (práva v zásadách ochrany údajů). Odrážka je
   typografie, ne ikona — pravidlo z HANDOFF §7 tím zůstává v platnosti. */
.gp-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.gp-list li { line-height: var(--font-line-body); }

/* Z Raleway se hostuje 200/300/400/600. Výchozí bold (700) by si prohlížeč
   musel dopočítat sám a v textu by to bylo poznat. */
strong { font-weight: 600; }

/* Kotva (#cenik, #dotazy) skončí pod sticky hlavičkou, když se na ni skočí.
   Odsazení je o kus vyšší než hlavička, ať nadpis nesedí na hraně. */
:target { scroll-margin-top: 120px; }

/* Dvě pole vedle sebe — jméno a příjmení, e-mail a telefon. Na mobilu
   se řádek rozpadá pod sebe (viz oddíl 8). */
.gp-form-radek { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }

/* Podtržení odkazů v menu a v patičce. Kreslí se currentColor, takže funguje
   i na tmavém. Odkazy, které už podtržené jsou (ceník, krekrrr), se sem
   schválně nedávají — byly by dvě čáry pod sebou. Vyjetí zleva přidává
   _pohyb.css; bez něj se čára jen objeví, což je pro stav v pořádku. */
:is(.gp-nav a, .gp-footer-grid a, .gp-footer-legal > a) { position: relative; }
:is(.gp-nav a, .gp-footer-grid a, .gp-footer-legal > a)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
}
:is(.gp-nav a, .gp-footer-grid a, .gp-footer-legal > a):hover::after,
.gp-nav a.aktivni::after { transform: scaleX(1); }

/* Stránka, na které host právě stojí. Vypadá stejně jako odkaz pod myší —
   ztlumená barva a podtržení. Značí se i `aria-current="page"`, aby to
   věděl odečítač; barva sama by na to nestačila (WCAG 1.4.1). */
.gp-nav a.aktivni { color: var(--color-text-muted); }

/* Viditelný focus — návrh ho neřeší, ale bez něj se web neovládá klávesnicí. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}
.gp-hero :where(a, button):focus-visible,
.gp-footer :where(a, button):focus-visible,
.gp-lb :where(button):focus-visible { outline-color: #fff; }

/* Přeskočit na obsah — jen pro klávesnici a odečítače. */
.gp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--color-text-primary);
  padding: 12px 20px; border-radius: var(--radius);
}
.gp-skip:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------------------
   2 · Akordeon častých dotazů
   Návrh počítá s tím, že otevřená je vždy jedna odpověď. Skládá se přes
   [hidden], ne přes display v CSS — jinak by autorské display:flex vyhrálo.
   -------------------------------------------------------------------------- */
.gp-faq-q { font-family: var(--font-family-base); }
.gp-faq-item.open .gp-faq-q { color: var(--color-text-primary); }
.gp-faq-a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   3 · Kalendář dostupnosti
   V návrhu je statická kresba jednoho měsíce. Tady přibývá přepínání měsíců,
   výběr rozsahu a stav načítání.
   -------------------------------------------------------------------------- */
.gp-cal-nav { display: flex; align-items: center; gap: 8px; }
.gp-cal-nav button {
  background: none; border: 1px solid #ECE8E2; border-radius: var(--radius);
  width: 32px; height: 32px; cursor: pointer; color: var(--color-text-primary);
  font: 300 20px/1 var(--font-family-base);
  transition: border-color .15s ease;
}
.gp-cal-nav button:hover { border-color: var(--color-text-primary); }
.gp-cal-nav button[disabled] { opacity: .35; cursor: default; }
.gp-cal-nav button[disabled]:hover { border-color: #ECE8E2; }

.gp-cal-months { display: flex; flex-direction: column; gap: 24px; }
.gp-cal-month-name { font-size: 17px; }

/* Dny se dají klikat, jakmile je kalendář napojený na výběr termínu. */
.gp-day { background: #fff; font-family: var(--font-family-base); }
button.gp-day { cursor: pointer; transition: border-color .15s ease; }
button.gp-day:hover:not([disabled]) { border-color: var(--color-text-primary); }
button.gp-day[disabled] { cursor: default; }
.gp-day.busy, .gp-day.past { cursor: default; }

/* Obsazený den má přeškrtnuté číslo. Podklad #ECE8E2 a světle zelený podklad
   vybraného rozsahu (#E3E6DE) jsou si na pohled hodně blízké a barva navíc
   nesmí být jediné rozlišení (WCAG 1.4.1) — přeškrtnutí je typografie,
   ne ikona, takže se drží pravidel značky z HANDOFF §7. */
.gp-day.busy { text-decoration: line-through; }
.gp-day.busy.sel { text-decoration: none; }

/* Mezilehlé dny vybraného rozsahu — světlejší než krajní. */
.gp-day.inrange { background: #E3E6DE; border-color: #E3E6DE; color: var(--color-text-primary); }

.gp-cal.loading { opacity: .5; }
.gp-cal-stav { font-size: 14px; color: var(--color-text-muted); }
.gp-legend i.inrange { background: #E3E6DE; border-color: #E3E6DE; margin-left: 8px; }

/* --------------------------------------------------------------------------
   4 · Rezervační formulář — stavy
   -------------------------------------------------------------------------- */
.gp-rez-hlaska {
  border: 1px dashed var(--color-brand-sand); border-radius: var(--radius);
  padding: 12px 16px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted);
}
.gp-rez-hlaska.chyba { border-style: solid; border-color: #B4553E; color: #8E4231; }
.gp-rez-hlaska strong { color: var(--color-text-primary); font-weight: 400; }
.gp-rez-hlaska button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-text-primary); text-decoration: underline;
}
.gp-rez-sum dd.total { font-size: 22px; font-weight: 300; }
.gp-rez-doplnky { display: flex; flex-direction: column; gap: 12px; }
.gp-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; cursor: pointer; }
.gp-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-brand-primary); flex: none; }
.gp-check span { flex: 1; }
.gp-check .gp-price { color: var(--color-text-muted); white-space: nowrap; }
.gp-souhlas { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.gp-souhlas a { text-decoration: underline; }

/* Rezervace přes widget REZEO (od 14. 9. 2026). Výšku rámu posílá widget
   sám a nastavuje ji site.js; 900 px je jen výchozí, než první zpráva dorazí —
   aby se patička nenalepila pod hlavičku a pak neposkočila o celou obrazovku. */
.gp-rez-rezeo { display: flex; flex-direction: column; gap: 24px; }
.gp-rez-hlava .gp-h2 { margin-bottom: 8px; }
.gp-rezeo { display: block; width: 100%; height: 900px; border: 0; }

/* Hláška, než se widget vykreslí. Leží přes horní část rámu, takže se po
   zmizení nic neposune. Kolečko je tvar, ne ikona (HANDOFF §7); při
   prefers-reduced-motion se netočí (viz oddíl přístupnosti). */
.gp-rezeo-obal { position: relative; }
.gp-rezeo-nacitani {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; min-height: 320px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 32px; background: var(--color-surface-base);
  border: 1px solid #ECE8E2; border-radius: var(--radius);
}
.gp-rezeo-nacitani p { margin: 0; }
.gp-rezeo-nacitani p + p { margin-top: 4px; }
.gp-rezeo-kolecko {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #ECE8E2; border-top-color: var(--color-brand-primary);
  animation: gp-toceni .9s linear infinite;
}
@keyframes gp-toceni { to { transform: rotate(360deg); } }
.gp-rezeo-pomalu { display: none; max-width: 420px; }
.gp-rezeo-nacitani.pomalu .gp-rezeo-pomalu { display: block; }
.gp-rezeo-pomalu a { text-decoration: underline; }

/* Špendlík s „G“ a štítek „Glamping Pytlík“ na mapě. Mapy.com v rámu název
   bodu nevypíšou a do bodu dají číslo, takže mapa je bez jejich bodu a
   špendlík kreslí web. Mapa je vycentrovaná na glamp — hrot špendlíku je
   přesně ve středu rámu. Aby nemohl ujet, rám nereaguje na myš a celá mapa
   je odkaz do plných Mapy.com (tam je bod pojmenovaný i s adresou).
   Barva špendlíku je tmavá z textu, ne sytá zelená — ta patří tlačítku
   Rezervovat. */
.gp-map { position: relative; }
.gp-map iframe { pointer-events: none; }
.gp-map-stit { position: absolute; inset: 0; z-index: 1; }
.gp-map-pin {
  position: absolute; left: calc(50% - 17px); top: calc(50% - 41px);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-text-primary); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.gp-map-pin span {
  transform: rotate(45deg);
  font-family: var(--font-family-base); font-size: 16px; font-weight: 600; line-height: 1; color: #fff;
}
.gp-map-nazev {
  position: absolute; left: calc(50% + 24px); top: calc(50% - 38px);
  padding: 4px 10px; white-space: nowrap;
  font-family: var(--font-family-base); font-size: 15px; font-weight: 600;
  color: var(--color-text-primary); background: #fff;
  border: 1px solid #d8d5d0; border-radius: var(--radius);
}
.gp-map-stit:hover .gp-map-nazev { text-decoration: underline; }
.gp-rez-pata { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.gp-rez-pata a:not(.gp-link) { text-decoration: underline; }

/* Past na roboty v kontaktním formuláři. Schovaná mimo obrazovku, ne přes
   display:none — část robotů pole s display:none schválně vynechává. */
.gp-past { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   4b · Kontaktní formulář v CTA pruhu
   Stojí na tmavě zeleném podkladu, takže všechno, co má výchozí barvu textu
   (souhlas, hláška), by tam zmizelo. Návrh počítal jen s e-mailem a zprávou;
   od 9. 9. sbírá formulář jméno, příjmení, telefon a souhlas se zpracováním
   údajů, jinak se na dotaz nedá odpovědět a nemá to oporu v GDPR.
   -------------------------------------------------------------------------- */
.gp-msg .gp-form-radek { gap: 16px; }
.gp-msg .gp-souhlas { color: #d8dcd2; }
.gp-msg .gp-check input { accent-color: #fff; }
.gp-msg button { align-self: flex-start; }

.gp-msg-hlaska {
  width: 100%; margin: 0;
  border: 1px dashed var(--color-brand-sand); border-radius: var(--radius);
  padding: 12px 16px; font-size: 15px; line-height: 1.6; color: #d8dcd2;
}
.gp-msg-hlaska.chyba { border-style: solid; border-color: #E0A08F; color: #F2CFC4; }
.gp-msg-hlaska strong { color: #fff; font-weight: 400; }

/* --------------------------------------------------------------------------
   4c · Tlačítko v heru
   Návrh měl v heru rezervační lištu s poli na termín a hosty. Od 14. 9. 2026
   je tam jen tlačítko „Zjistit dostupnost“ na stránku Rezervace, kde se
   termín vybírá rovnou v kalendáři REZEO. Vlastní kalendář v liště znamenal,
   že host vybíral termín dvakrát — widget REZEO ho zvenku převzít neumí.
   -------------------------------------------------------------------------- */
.gp-hero-akce { margin-top: 8px; }

/* --------------------------------------------------------------------------
   5 · Video
   Návrh má pás 640 px přes celou šířku, video je ale 16:9 (1920×1080) —
   v pásu 3:1 se ořezalo o víc než polovinu výšky. Proto rámeček přesně 16:9.
   Aby nebyl vyšší než obrazovka (1920 px šířky = 1080 px výšky), na širokých
   monitorech se zúží a po stranách je bílé pozadí stránky (tmavé z návrhu
   tam působilo jako zelený pruh — Petr, 15. 9.).
   Fotka před spuštěním je ve stejném rámečku, takže se výměnou nic neposune.
   -------------------------------------------------------------------------- */
.gp-video { height: auto; display: block; background: var(--color-surface-base); }
.gp-video-ramec {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: calc((100svh - 80px) * 16 / 9);
  margin: 0 auto;
}
.gp-video video.gp-cover { z-index: 0; object-fit: contain; background: #000; }
.gp-video .gp-overlay { z-index: 1; }
.gp-video .gp-play { z-index: 2; }

/* Vlastní ovládání videa (site.js → video()). Ozubené kolo → Kvalita jako
   na YouTube. Ikony jsou výjimka z HANDOFF §7 (Petr, 15. 9. 2026). Místo
   přechodu pod lištou plná poloprůhledná lišta — přechody návrh nemá.
   Sytá barva patří jen Rezervovat, proto ovládání bílé. */
.gp-video-ramec.gp-p { overflow: hidden; background: #000; }
.gp-video-ramec.gp-p:focus { outline: none; }
.gp-p video.gp-cover { cursor: pointer; }
.gp-p-lista {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 12px 4px; background: rgba(0, 0, 0, .5); color: #fff;
  font: 400 14px var(--font-family-base); transition: opacity .2s ease;
}
.gp-p-skryte { cursor: none; }
.gp-p-skryte .gp-p-lista { opacity: 0; pointer-events: none; }
.gp-p-radek { display: flex; align-items: center; gap: 4px; }
.gp-p-mezera { flex: 1; }
.gp-p-tl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: var(--radius); color: #fff; cursor: pointer;
}
.gp-p-tl svg { width: 24px; height: 24px; fill: currentColor; }
.gp-p-tl:hover { background: rgba(255, 255, 255, .14); }
.gp-p-tl[aria-expanded="true"] svg { transform: rotate(30deg); }
.gp-p-tl svg { transition: transform .2s ease; }
.gp-p-tl:focus-visible, .gp-p-polozka:focus-visible, .gp-p-osa input:focus-visible + .gp-p-stopa {
  outline: 2px solid #fff; outline-offset: -2px;
}
.gp-p-cas { margin-left: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-p-osa { position: relative; height: 16px; display: flex; align-items: center; }
.gp-p-stopa {
  position: absolute; left: 0; right: 0; height: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .3); border-radius: 2px; transition: height .15s ease;
}
.gp-p-osa:hover .gp-p-stopa { height: 5px; }
.gp-p-nacteno, .gp-p-prehrano { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.gp-p-nacteno { background: rgba(255, 255, 255, .45); }
.gp-p-prehrano { background: #fff; }
.gp-p-osa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gp-p-hlasitost { width: 72px; accent-color: #fff; cursor: pointer; }
.gp-p-menu {
  position: absolute; right: 12px; bottom: 68px; z-index: 4;
  min-width: 220px; padding: 8px 0;
  /* Na malém rámečku (telefon: 16:9 z 390 px = 219 px) se pět položek nad
     lištu nevejde — menu se omezí na dostupnou výšku a zbytek jde posunout. */
  max-height: calc(100% - 76px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(28, 28, 28, .92); color: #fff; border-radius: var(--radius);
  font: 400 14px var(--font-family-base);
}
.gp-p-polozka {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 16px; background: none; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.gp-p-polozka:hover { background: rgba(255, 255, 255, .1); }
.gp-p-hodnota { margin-left: auto; padding-left: 24px; color: rgba(255, 255, 255, .7); }
.gp-p-hlavicka { margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.gp-p-fajfka { width: 16px; text-align: center; }
.gp-video-ramec.gp-p:fullscreen { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 760px), (hover: none) { .gp-p-hlasitost { display: none; } }
@media (max-width: 760px) {
  .gp-p-lista { padding: 2px 6px 2px; }
  .gp-p-menu { right: 8px; bottom: 60px; min-width: 170px; padding: 4px 0; max-height: calc(100% - 64px); }
  .gp-p-polozka { padding: 6px 12px; }
  .gp-p-hlavicka { position: sticky; top: -4px; background: rgba(28, 28, 28, .98); }
}

/* --------------------------------------------------------------------------
   6 · Hlavička na mobilu
   Tlačítko Rezervovat zůstává vidět vždycky (rozhodnutí z drátěnky),
   schovává se jen navigace. Hamburger je kreslený proužky, ne ikonou.
   -------------------------------------------------------------------------- */
.gp-burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; position: relative;
}
.gp-burger span, .gp-burger::before, .gp-burger::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 1px;
  background: var(--color-text-primary); transition: transform .2s ease, opacity .2s ease;
}
.gp-burger::before { top: 15px; }
.gp-burger span { top: 21px; }
.gp-burger::after { top: 27px; }
.gp-burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.gp-burger[aria-expanded="true"] span { opacity: 0; }
.gp-burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7 · Tablet — do 1100 px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .gp-root { --rhythm: 64px; }
  .wrap { padding: 0 32px; }
  .gp-intro, .gp-avail, .gp-rez, .gp-where, .gp-block { grid-template-columns: 1fr; gap: 40px; }
  .gp-intro-img { max-width: 480px; }
  .gp-block.flip .gp-block-img, .gp-block.flip .gp-block-type { order: 0; }
  .gp-amen { grid-template-columns: repeat(4, 1fr); }
  .gp-amen-item:nth-child(-n+2) { grid-column: span 2; }
  .gp-amen-item:nth-child(n+3) { grid-column: span 2; }
  /* Poslední kartu roztáhnout jen tehdy, když by zůstala v řádku sama —
     tedy při lichém počtu položek. Při sudém by jinak vznikla díra. */
  .gp-amen-item:last-child:nth-child(odd) { grid-column: span 4; }
  .gp-nav { gap: 24px; }
  .gp-facts { grid-template-columns: repeat(3, 1fr); }
  .gp-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .gp-gal { column-count: 2; }
  .gp-cenik-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   8 · Mobil — do 760 px
   Rozvržení je jednosloupcové. Sticky hlavička, rezervační lišta a mřížka
   galerie mají vlastní řešení, jak předpokládá HANDOFF §4.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .gp-root { --rhythm: 48px; --hero-h: 560px; --hero-h-sub: 340px; }
  .wrap { padding: 0 20px; }

  /* hlavička */
  .gp-header-in { height: 64px; padding: 0 16px; gap: 12px; }
  .gp-logo img { height: 40px; }
  .gp-header-right { gap: 8px; }
  .gp-burger { display: block; }
  .gp-nav {
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--color-surface-base); border-bottom: 1px solid #ECE8E2;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
  }
  .gp-nav[hidden] { display: none; }
  .gp-nav a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid #ECE8E2; }
  .gp-nav a:last-child { border-bottom: 0; }
  /* Každá položka už má svou dělící linku — podtržení by s ní splynulo
     v dvojitou čáru. Otevřená stránka se na mobilu pozná ztlumenou barvou. */
  .gp-nav a::after { display: none; }

  /* hero
     Na mobilu se do pevné výšky nemusí vejít nadpis, texty i tlačítko —
     text pak vyleze nahoru pod hlavičku. Výška je proto jen minimum
     a sekce roste podle obsahu. */
  .gp-hero, .gp-hero.sub { height: auto; min-height: var(--hero-h); }
  .gp-hero.sub { min-height: var(--hero-h-sub); }
  .gp-hero-in { height: auto; gap: 32px; padding: 40px 20px 32px; }
  .gp-hero-in.sub { padding-top: 64px; padding-bottom: 64px; }
  .gp-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .gp-hero-sub { font-size: 22px; }
  .gp-hero-line { font-size: 17px; }

  /* sekce */
  .gp-h2, .gp-cenik-head .gp-h2, h2.gp-h2 { font-size: 28px; }
  .gp-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gp-amen, .gp-rent, .gp-tiles { grid-template-columns: 1fr; }
  .gp-amen-item:nth-child(-n+2), .gp-amen-item:nth-child(n+3), .gp-amen-item:last-child:nth-child(odd) { grid-column: span 1; }
  .gp-tile { aspect-ratio: 3/2; padding: 20px; }
  .gp-tile span, .gp-block-type span, .gp-type-panel { font-size: 24px; }
  .gp-block-title { font-size: 24px; }
  .gp-facts { grid-template-columns: 1fr; gap: 0; }
  .gp-facts li { padding: 12px 0; }
  .gp-facts li:last-child { border-bottom: 1px solid #ECE8E2; }
  .gp-intro-img { max-width: none; }

  /* kalendář — dny musí zůstat dost velké na prst */
  .gp-cal { padding: 16px; }
  .gp-cal-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gp-day { height: 44px; font-size: 15px; }
  .gp-cal-grid { gap: 4px; }
  .gp-legend { flex-wrap: wrap; }

  /* rezervace */
  .gp-rez-dates, .gp-form-radek { grid-template-columns: 1fr; }
  .gp-rez-sum { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .gp-rez-sum dt { margin-top: 8px; }
  .gp-rez-sum dt:first-child { margin-top: 0; }

  /* časté dotazy */
  .gp-faq-q { font-size: 18px; padding: 18px 0; gap: 16px; }
  .gp-faq-a { padding-right: 0; }

  /* ceník */
  .gp-price-row { gap: 16px; }

  /* galerie */
  .gp-gal { column-count: 1; }
  .gp-lb { padding: 16px; }
  .gp-lb-close { top: 4px; right: 8px; font-size: 36px !important; }
  .gp-lb-arrow { font-size: 40px; padding: 8px; }
  .gp-lb-arrow.prev { left: 0; }
  .gp-lb-arrow.next { right: 0; }
  .gp-lb-count { bottom: 12px; }

  /* patička */
  .gp-footer { padding: 40px 0 32px; }
  .gp-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .gp-footer-bottom { margin-top: 40px; flex-direction: column; gap: 16px; }
  .gp-footer-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gp-cta-in { gap: 24px; }
}

/* --------------------------------------------------------------------------
   9 · Tisk a omezený pohyb
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .gp-header, .gp-hero, .gp-video, .gp-lb, .gp-cta { display: none; }
  .gp-sec { padding: 16px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; }
}


/* ===== _pohyb.css ===== */
/* ==========================================================================
   Pohyb
   --------------------------------------------------------------------------
   Vrstva navíc nad návrhem. Nic neposouvá, nemění barvy ani rozměry — jen
   dává prvkům náběh, když se objeví, a mikropohyb při najetí myší.

   Návrh je klidný („Zpomalte. Nadechněte se.“), tak je klidný i pohyb:
   krátká dráha (do 24 px), pomalé doběhnutí, žádné odskoky, žádné otáčení.

   Zapíná se třídou `gp-pohyb` na <html>, kterou nasadí site.js. Bez
   JavaScriptu, bez IntersectionObserveru a při `prefers-reduced-motion`
   se třída nenasadí a celý soubor je bez účinku — stránka zůstane přesně
   taková, jak je nakreslená. Proto se tu nesmí nic schovávat mimo
   `.gp-pohyb`: kdyby to selhalo, zůstal by obsah neviditelný.

   Pravidla značky platí i tady: žádné stíny, žádné gradienty, žádné ikony.
   ========================================================================== */

:root {
  --pohyb-doba: .7s;
  /* Odkrývání nadpisů a fotek trvá o kus déle než prolnutí — jinak to
     vypadá, jako by se obraz utrhl od textu. */
  --pohyb-doba-dlouha: .95s;
  /* Rychlý začátek, dlouhé doznění — pohyb dojede, místo aby dorazil. */
  --pohyb-krivka: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1 · Náběh při scrollu
   Prvky si označí site.js atributem data-pohyb, viditelnost hlídá
   IntersectionObserver. Zpoždění přijde inline jako --pohyb-zpozdeni a počítá
   se až ve chvíli náběhu — kaskáda tak sedí na to, co host právě vidí.

   Druhy pohybu jsou tři, ať se neobjevuje všechno stejně:
     (bez druhu)  text a karty — prolne se a dojede zdola
     "nadpis"     vyjede zpod neviditelné linky, jako by se odkrýval
     "foto"       odkryje se odspoda nahoru, rám zůstane na místě
   -------------------------------------------------------------------------- */
.gp-pohyb [data-pohyb] {
  opacity: 0;
  transform: translateY(20px);
}
.gp-pohyb [data-pohyb].je-videt {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pohyb-doba) var(--pohyb-krivka) var(--pohyb-zpozdeni, 0s),
    transform var(--pohyb-doba) var(--pohyb-krivka) var(--pohyb-zpozdeni, 0s),
    clip-path var(--pohyb-doba-dlouha) var(--pohyb-krivka) var(--pohyb-zpozdeni, 0s);
}

/* Nadpis. Záporné odsazení nahoře a dole drží místo pro akcenty a dolní
   dotahy — bez něj by se čárka nad „á“ ořízla dřív než zbytek písmene. */
.gp-pohyb [data-pohyb="nadpis"] {
  transform: translateY(.3em);
  clip-path: inset(-30% 0 100% 0);
}
.gp-pohyb [data-pohyb="nadpis"].je-videt { clip-path: inset(-30% 0 -30% 0); }

/* Fotka. Odkrývá se, neposouvá se a nezvětšuje — rám i ořez zůstávají tam,
   kde je návrh chce, takže se nic kolem nehne. Radius musí být v obou
   stavech stejný, jinak přechod přeskočí. */
.gp-pohyb [data-pohyb="foto"] {
  transform: none;
  clip-path: inset(0 0 100% 0 round var(--radius));
}
.gp-pohyb [data-pohyb="foto"].je-videt { clip-path: inset(0 0 0 0 round var(--radius)); }

/* Plynulé dojetí na kotvy (#cenik, #dotazy) a na potvrzení formuláře. */
.gp-pohyb { scroll-behavior: smooth; }

@keyframes gp-nabeh {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gp-nadpis {
  from { opacity: 0; transform: translateY(.3em); clip-path: inset(-30% 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-30% 0 -30% 0); }
}
@keyframes gp-rozbal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gp-prolnuti {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2 · Hero
   Nabíhá sám hned po načtení, ne přes observer — je nad ohybem a čekat na
   scroll by nemělo na co. Nadpis, podtitul, řádek a tlačítko jdou
   po sobě, ať se stránka otevře postupně a ne najednou. Fotka se přes
   dvacet vteřin nenápadně dojede z 1,06 na 1.
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-hero .gp-cover {
  animation: gp-hero-klid 24s var(--pohyb-krivka) both;
}
@keyframes gp-hero-klid {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.gp-pohyb .gp-hero-text > * { animation: gp-nabeh .8s var(--pohyb-krivka) both; }
.gp-pohyb .gp-hero-text h1 { animation: gp-nadpis 1s var(--pohyb-krivka) .08s both; }
.gp-pohyb .gp-hero-sub     { animation-delay: .26s; }
.gp-pohyb .gp-hero-line    { animation-delay: .38s; }
.gp-pohyb .gp-hero-akce    { animation-delay: .5s; }

/* --------------------------------------------------------------------------
   3 · Hlavička
   Po odrolování se sníží, aby z fotky nebrala tolik místa. Na mobilu má
   hlavička 64 px a zmenšovat se nemá — proto jen od tabletu nahoru.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .gp-pohyb .gp-header-in,
  .gp-pohyb .gp-logo img { transition: height .3s var(--pohyb-krivka); }
  .gp-pohyb .gp-header.gp-zmensena .gp-header-in { height: 72px; }
  .gp-pohyb .gp-header.gp-zmensena .gp-logo img { height: 48px; }
}

/* --------------------------------------------------------------------------
   4 · Odkazy a tlačítka
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-btn {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .2s var(--pohyb-krivka);
}
.gp-pohyb .gp-btn:not([disabled]):hover { transform: translateY(-2px); }
.gp-pohyb .gp-btn:not([disabled]):active { transform: translateY(0); }
.gp-pohyb .gp-play { transition: background-color .15s ease, color .15s ease, transform .2s var(--pohyb-krivka); }
.gp-pohyb .gp-play:hover { transform: translateY(-2px); }

/* Podtržení samotné kreslí _doplnky.css — je to stav, ne pohyb, a musí
   fungovat i bez téhle vrstvy (jinak by označení otevřené stránky zmizelo
   každému, kdo má zapnuté prefers-reduced-motion). Tady jen vyjede zleva
   místo aby naskočilo. */
.gp-pohyb :is(.gp-nav a, .gp-footer-grid a, .gp-footer-legal > a)::after {
  transition: transform .3s var(--pohyb-krivka);
}

/* Odkaz „Otevřít ceník / Zobrazit vše“ stojí na konci řádku — posune se
   po směru čtení místo podtržení. */
.gp-pohyb .gp-link {
  display: inline-block;
  transition: color .15s ease, transform .25s var(--pohyb-krivka);
}
.gp-pohyb .gp-link:hover { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5 · Fotky, na které se dá kliknout
   Přiblížení jen tam, kde je odkaz — statické fotky se nehýbou.
   Ořez drží .gp-tile a .gp-gal-item, obě mají overflow: hidden.
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-tile img,
.gp-pohyb .gp-gal-item img { transition: transform .7s var(--pohyb-krivka), filter .3s ease; }
.gp-pohyb a.gp-tile:hover img { transform: scale(1.05); }
.gp-pohyb .gp-gal-item:hover img { transform: scale(1.03); }

.gp-pohyb .gp-tile span { transition: transform .4s var(--pohyb-krivka); }
.gp-pohyb a.gp-tile:hover span { transform: translateY(-4px); }
.gp-pohyb .gp-tile .gp-overlay { transition: background-color .3s ease; }
.gp-pohyb a.gp-tile.photo:hover .gp-overlay { background: rgba(0, 0, 0, .55); }

/* --------------------------------------------------------------------------
   6 · Akordeon častých dotazů
   Odpověď se skládá přes [hidden], tedy display: none. Prohlížeč pustí
   animaci znovu pokaždé, když se prvek vrátí do rozvržení — proto tu
   nepotřebujeme žádné přepínání tříd z JS.
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-faq-a { animation: gp-rozbal .45s var(--pohyb-krivka) both; }
.gp-pohyb .gp-faq-mark { display: inline-block; transition: transform .3s var(--pohyb-krivka); }
.gp-pohyb .gp-faq-q:hover .gp-faq-mark { transform: scale(1.25); }
.gp-pohyb .gp-faq-q { transition: color .2s ease; }

/* --------------------------------------------------------------------------
   7 · Lightbox
   Třídu `je-videt` nasazuje site.js až druhý snímek po vložení do stránky,
   jinak by prohlížeč přechod přeskočil. `gp-anim` se přehazuje při každé
   výměně fotky — ta se z rozvržení nemizí, takže sama od sebe nenaběhne.
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-lb { opacity: 0; transition: opacity .25s ease; }
.gp-pohyb .gp-lb.je-videt { opacity: 1; }
.gp-pohyb .gp-lb img.gp-anim { animation: gp-lb-nabeh .35s var(--pohyb-krivka) both; }
@keyframes gp-lb-nabeh {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8 · Kalendář
   Prolnutí jen při přepnutí měsíce. Klik na den kalendář taky překresluje
   a blikat po každém výběru termínu by bylo na obtíž.
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-cal-months.gp-anim { animation: gp-prolnuti .35s var(--pohyb-krivka) both; }
.gp-pohyb .gp-day { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.gp-pohyb .gp-cal { transition: opacity .3s ease; }

/* --------------------------------------------------------------------------
   9 · Formuláře
   -------------------------------------------------------------------------- */
.gp-pohyb .gp-field input,
.gp-pohyb .gp-field select,
.gp-pohyb .gp-field textarea { transition: border-color .2s ease; }
.gp-pohyb .gp-check input { transition: transform .15s var(--pohyb-krivka); }
.gp-pohyb .gp-check:hover input { transform: scale(1.12); }

/* Hlášky se objevují přes [hidden], takže náběh spustí sám prohlížeč. */
.gp-pohyb .gp-rez-hlaska,
.gp-pohyb .gp-msg-hlaska { animation: gp-rozbal .35s var(--pohyb-krivka) both; }
/* Souhrn ceny se přepisuje celý, animuje se jen výsledná částka. */
.gp-pohyb .gp-rez-sum dd.total { animation: gp-prolnuti .35s ease both; }