/* ============================================================
   dejablueapartment.cz — site.css
   Design tokens, layout, components.
   Cozystay/LoftOcean-inspired — warm beige + sage green palette,
   Marcellus (serif headings) + Jost (sans body), generous whitespace,
   square buttons, uppercase navigation.
   ============================================================ */

:root{
    /* Brand palette — beige & sage (cozystay/loftocean) */
    --c-primary:    #b99d75;        /* warm beige (CTA, accents) */
    --c-primary-2:  #ab916c;        /* deeper beige (hover) */
    --c-secondary:  #53624e;        /* sage green (secondary CTA, headings accent) */
    --c-secondary-2:#3f4b3a;        /* deep sage (hover) */
    --c-accent:     #b99d75;        /* alias of primary for legacy refs */
    --c-cream:      #f8f5f1;        /* cream / off-white panels */
    --c-bg:         #ffffff;
    --c-bg-soft:    #ede6dc;        /* warm panel bg */
    --c-ink:        #1a1b1a;        /* near-black text */
    --c-ink-soft:   #393939;
    --c-muted:      #707070;
    --c-line:       #b5bbb3;        /* sage border */
    --c-line-soft:  #e6e6e6;

    --c-success:    #53624e;
    --c-error:      #c85b5b;
    --c-warn:       #b99d75;

    /* CozyStay redesign — dark teal experience, very dark footer, alt cream */
    --c-dark-teal:  #2c4a47;
    --c-very-dark:  #111111;
    --c-cream-2:    #efe9df;

    /* Luxury gold accent (champagne) — pro CTA, rámečky, badges */
    --c-gold:        #c9a961;
    --c-gold-2:      #b39152;        /* hover/deeper */
    --c-gold-light:  #e6d5a6;        /* light champagne */
    --c-gold-dark:   #8a6f3d;        /* deep gold (border on dark bg) */
    --grad-gold:     linear-gradient(135deg, #d4b572 0%, #c9a961 45%, #b39152 100%);

    /* Typography — Marcellus (display serif) + Cormorant Garamond (poster italic) + Jost (sans body) */
    --font-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-serif:   'Marcellus', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-display: 'Cormorant Garamond', 'Marcellus', 'Playfair Display', Georgia, serif;

    /* Spacing & radii (cozystay uses square / minimal radius) */
    --radius-sm: 0;
    --radius:    0;
    --radius-lg: 4px;
    /* Section spacing tokens — KEEP MINIMAL. Builder vládne spacing per-section.
       Hardcoded velké paddingy (140/200px) dělaly bílé díry mezi sekcemi. */
    --space-section: 48px;
    --space-section-lg: 64px;

    /* Shadows (subtle, neutral) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow:    0 6px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);

    --header-h: 80px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg{ max-width: 100%; height: auto; display: block; }
a{ color: var(--c-secondary); text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--c-primary); }
h1, h2, h3, h4{
    font-family: var(--font-serif);
    font-weight: 400;          /* Marcellus is single-weight serif */
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--c-ink);
    margin: 0 0 .5em;
}
h1{ font-size: clamp(38px, 5.4vw, 68px); }
h2{ font-size: clamp(30px, 3.8vw, 48px); }
h3{ font-size: clamp(22px, 2.6vw, 30px); }
h4{ font-size: clamp(18px, 2vw, 22px); }
p{ margin: 0 0 1em; }
/* Global safety: žádný element by neměl způsobit horizontal scroll
   (kontroluje nejvyšší úroveň, jednotlivé prvky mohou overflow:visible). */
html, body{ overflow-x: hidden; }
.container{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 960px) {
.container{ padding: 0 24px; }
}
@media (max-width: 540px) {
.container{ padding: 0 16px; }
}
@media (max-width: 380px) {
.container{ padding: 0 12px; }
}/* ============================================================
   Header
   ============================================================ */

.site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    /* žádný border — border-color defaultuje na currentColor = #1a1b1a (--c-ink)
       per dispatcherův regression hint (header všech 4 stran rgb(26,27,26)).
       Scrolled state níže přidává vlastní border-bottom. Transparent variant
       používá ::after pseudo pro viditelný 1px white separator. */
    border: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled{
    border-color: var(--c-line);
    box-shadow: var(--shadow-sm);
}
.site-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 24px;
}
.site-logo{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
}
.site-logo:hover{ color: var(--c-primary); }
.site-logo-mark{
    display: none;                /* odstraň kruhovou DJ značku — cozystay používá čistý serif text */
}
.site-logo-mark--inverse{
    display: none;
}
.site-logo-text{
    font-family: var(--font-serif);
}
.site-nav{
    display: flex;
    gap: 28px;
    align-items: center;
}
.site-nav a{
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover{
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.site-header-actions{
    display: flex;
    align-items: center;
    gap: 14px;
}
.lang-switcher{
    display: inline-flex;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-muted);
}
.lang-switcher a{
    padding: 6px 8px;
    color: var(--c-muted);
    transition: color .15s;
}
.lang-switcher a + a{
    border-left: 1px solid var(--c-line);
    margin-left: 4px;
    padding-left: 12px;
}
.lang-switcher a.is-active{ color: var(--c-ink); }
.lang-switcher a:hover{ color: var(--c-primary); }
.nav-burger{
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.nav-burger > span:not(.sr-only){
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-ink);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(2){ opacity: 0; }
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
/* ============================================================
   Buttons
   ============================================================ */

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none;
    line-height: 1.2;
}
.btn-primary{
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.btn-primary:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
.btn-secondary{
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn-secondary:hover{
    background: var(--c-ink);
    color: #fff;
}
.btn-ghost{
    background: transparent;
    color: var(--c-primary);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.btn-ghost::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: var(--c-primary);
    transition: background .15s;
}
.btn-ghost:hover{ color: var(--c-primary-2); }
.btn-ghost:hover::after{ background: var(--c-primary-2); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 18px 38px; font-size: 16px; }
.btn-sm{ padding: 10px 18px; font-size: 13px; }
/* ============================================================
   Hero
   ============================================================ */

.hero{
    position: relative;
    min-height: clamp(640px, 90vh, 960px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 100px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.60)),
                #53624e;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero-with-search{
    min-height: clamp(720px, 92vh, 1000px);
}
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.hero-eyebrow{
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 24px;
}
.hero-title{
    font-family: var(--font-serif);
    font-size: clamp(40px, 6.4vw, 80px);
    font-weight: 400;
    line-height: 1.08;
    color: #fff;
    margin: 0 auto 24px;
    max-width: 18ch;
    text-wrap: balance;
}
.hero-subtitle{
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255,255,255,0.92);
    max-width: 60ch;
    margin: 0 auto 36px;
    text-align: center;
}
.hero-actions{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
/* ============================================================
   Booking widget (sidebar / hero overlay)
   ============================================================ */

.booking-widget{
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    color: var(--c-ink);
    width: 100%;
    max-width: 460px;
    text-align: left;
}
.booking-widget--inline{
    margin: 32px auto 0;
    max-width: 720px;
}
.booking-widget--inline .booking-widget-fields{
    grid-template-columns: repeat(4, 1fr);
}
.booking-widget h3{
    margin: 0 0 18px;
    font-size: 22px;
    font-family: var(--font-serif);
}
.booking-widget-fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.booking-widget-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.booking-widget-field label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-muted);
    font-weight: 600;
}
.booking-widget-field input,
.booking-widget-field select{
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--c-ink);
    background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.booking-widget-field input:focus,
.booking-widget-field select:focus{
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31,78,95,0.15);
}
.booking-widget-quote{
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
    display: grid;
    gap: 6px;
    font-size: 14px;
}
.booking-widget-quote-row{
    display: flex;
    justify-content: space-between;
    color: var(--c-ink-soft);
}
.booking-widget-quote-row.total{
    font-size: 18px;
    font-weight: 600;
    color: var(--c-ink);
    padding-top: 10px;
    border-top: 1px solid var(--c-line);
    margin-top: 6px;
}
.booking-widget-error{
    background: #fce4e4;
    color: var(--c-error);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 12px;
}
.booking-widget-success{
    background: #d6edd9;
    color: var(--c-success);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 12px;
}
/* ============================================================
   Sections
   ============================================================ */

.section{
    padding: var(--space-section) 0;
}
.section-lg{
    padding: var(--space-section-lg) 0;
}
.section-cream{
    background: var(--c-cream);
}
.section-soft{
    background: var(--c-bg-soft);
}
.section-header{
    text-align: center;
    max-width: 720px;
    margin: 0 auto 24px;
}
.section-header-eyebrow{
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.section-header h2{
    font-family: var(--font-serif);
    font-weight: 400;
    margin: 0 0 18px;
}
.section-header p{
    color: var(--c-muted);
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 30px;
}
/* Contact section heading — extra space pred formulářem (user feedback).
   Actual DOM: <section class="section section-heading"> + <section class="contact-form-section">.
   Matchne i variants .section-contact_form / booking-form. */
.section + .contact-form-section,
.section-heading + .contact-form-section,
.section + .section-contact_form,
.section-heading + .section-contact_form,
.section-heading + .section-contact_form_advanced,
section.section-heading + form,
.section-heading + .booking-form-wrap,
.section + .booking-form-wrap,
.section-heading + .contact-form,
.contact-form-section {
    margin-top: 28px;
}
.contact-form-section .section-header,
.contact-form-section .section-header p {
    margin-bottom: 32px;
}
/* Card body heading („Napište nám" / „Send us a message" / „Kontaktní údaje") —
   margin-bottom 25 px aby nevisel nadpis přímo na form inputech (user feedback).
   Třída mb-medium dává jen 16 px — překryjeme specifičtějším selektorem.
   Pozn.: stejný pattern se používá i v rezervační formě, tam má taky 25 px sedět. */
.contact-form-section .card-body > h2.mb-medium,
.contact-form-section .card-body > h3.mb-medium,
.booking-form .card-body > h2.mb-medium,
.booking-form .card-body > h3.mb-medium {
    margin-bottom: 25px;
}
/* ============================================================
   Cards
   ============================================================ */

.card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.card-grid-2{ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.card{
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: none;
    border-bottom: 1px solid transparent;
}
.card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-bottom-color: var(--c-primary);
}
.card-image{
    aspect-ratio: 4/3;
    background: var(--c-cream);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.card-image img,
.card-image > div{
    transition: transform .6s ease;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.card:hover .card-image img,
.card:hover .card-image > div{ transform: scale(1.05); }
.card-body{
    padding: 28px 4px;
}
.card-eyebrow{
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--c-primary);
    margin-bottom: 10px;
    font-weight: 500;
}
.card-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 10px;
    line-height: 1.2;
}
.card-text{
    color: var(--c-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
/* ============================================================
   Featured apartment (homepage section)
   ============================================================ */

.featured-apartment{
    padding: var(--space-section-lg) 0;
    background: var(--c-cream);
}
.featured-apartment-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.featured-apartment-image{
    aspect-ratio: 4/3;
    background: var(--c-bg-soft);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.featured-apartment-body h2{
    margin: 12px 0 16px;
}
.featured-apartment-subtitle{
    font-size: 18px;
    color: var(--c-ink-soft);
    margin-bottom: 16px;
    font-style: italic;
}
.featured-apartment-meta{
    list-style: none;
    padding: 24px 0;
    margin: 24px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.featured-apartment-meta li{
    font-size: 14px;
    color: var(--c-muted);
}
.featured-apartment-meta li strong{
    display: block;
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--c-primary);
    margin-bottom: 2px;
    font-weight: 600;
}
.featured-apartment-price{
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
}
.featured-apartment-price .price-from{
    font-size: 13px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.featured-apartment-price strong{
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--c-ink);
}
.featured-apartment-price .price-suffix{
    color: var(--c-muted);
    font-size: 14px;
}
.featured-apartment-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 960px) {
.featured-apartment-grid{
        grid-template-columns: 1fr;
        gap: 32px;
    }
}/* ============================================================
   Excursion / Restaurant rows (alternating)
   ============================================================ */

.excursion-row,
.restaurant-row{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 64px;
}
.excursion-row:nth-of-type(even),
.restaurant-row:nth-of-type(even){
    grid-template-columns: 1fr 1.2fr;
}
.excursion-row:nth-of-type(even) .excursion-row-image,
.restaurant-row:nth-of-type(even) .restaurant-row-image{
    order: 2;
}
.excursion-row-image,
.restaurant-row-image{
    aspect-ratio: 4/3;
    background: var(--c-bg-soft);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.excursion-row-body h3,
.restaurant-row-body h3{
    margin: 8px 0 12px;
    font-size: 28px;
}
.restaurant-row-body .rating{
    color: var(--c-accent);
    font-size: 18px;
    margin: 8px 0 12px;
    letter-spacing: 2px;
}

@media (max-width: 960px) {
.excursion-row,
    .restaurant-row,
    .excursion-row:nth-of-type(even),
    .restaurant-row:nth-of-type(even){
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }
.excursion-row:nth-of-type(even) .excursion-row-image,
    .restaurant-row:nth-of-type(even) .restaurant-row-image{
        order: 0;
    }
}/* ============================================================
   Builder CTA block
   ============================================================ */

.builder-cta{
    padding: var(--space-section) 0;
}
.builder-cta--gradient{
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
    color: #fff;
}
.builder-cta--gradient h2{
    color: #fff;
}
.builder-cta--gradient .builder-cta-text{
    color: rgba(255,255,255,0.92);
}
.builder-cta--gradient .btn-primary{
    background: #fff;
    color: var(--c-primary);
}
.builder-cta--gradient .btn-primary:hover{
    background: var(--c-cream);
    color: var(--c-primary);
}
.builder-cta-text{
    font-size: 18px;
    color: var(--c-muted);
    max-width: 60ch;
    margin: 0 auto 32px;
}
/* ============================================================
   Builder section wrapper (default)
   ============================================================ */

.builder-section{
    padding: var(--space-section) 0;
}
.builder-section > .section-inner.container{
    max-width: var(--bldr-max-width, 1440px);
    margin: var(--bldr-content-margin, 0 auto);
}
.builder-cards-section,
.builder-faq-section{
    padding: var(--space-section) 0;
}
.builder-faq-section{
    background: var(--c-cream);
}
.builder-section + .builder-section{
    padding-top: 0;
}
/* Section heading element renders inside .container */
.section-heading{
    text-align: center;
}
.section-heading h2,
.section-heading h3{
    text-align: center;
    margin: 0 auto 12px;
    max-width: 22ch;
}
/* ============================================================
   Apartment detail layout
   ============================================================ */

.apt-hero{
    position: relative;
    height: 70vh;
    min-height: 480px;
    background: var(--c-cream);
    overflow: hidden;
}
.apt-hero-bg{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--c-primary);
}
.apt-hero::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.45));
}
.apt-hero-content{
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    color: #fff;
    z-index: 2;
}
.apt-detail-grid{
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    padding: 56px 0 96px;
}
.apt-info-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.apt-info-item{
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
}
.apt-info-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.apt-info-value{
    color: var(--c-ink);
    font-size: 16px;
}
.apt-rules{
    list-style: none;
    padding: 0;
    margin: 12px 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.apt-rules li{
    padding: 10px 14px;
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--c-ink-soft);
}
.apt-policy{
    background: var(--c-cream);
    padding: 18px 22px;
    border-radius: var(--radius);
    color: var(--c-ink-soft);
    line-height: 1.65;
    margin-bottom: 24px;
}
.apt-map{
    margin: 16px 0 32px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.apt-amenities{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.apt-amenities li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--c-ink-soft);
}
.apt-amenities li::before{
    content: '✓';
    color: var(--c-primary);
    font-weight: 700;
}
.apt-meta-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin: 32px 0;
}
.apt-meta-grid-item{
    text-align: center;
}
.apt-meta-grid-value{
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--c-primary);
    margin-bottom: 4px;
}
.apt-meta-grid-label{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-muted);
}
.apt-sidebar{
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: flex-start;
}
/* ============================================================
   Gallery
   ============================================================ */

.gallery-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 32px 0;
}
.gallery-grid-item{
    aspect-ratio: 4/3;
    background: var(--c-cream);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
/* ============================================================
   FAQ accordion
   ============================================================ */

.faq-accordion{
    max-width: 800px;
    margin: 0 auto;
}
.faq-item{
    border-bottom: 1px solid var(--c-line);
}
.faq-item summary{
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    color: var(--c-ink);
    font-size: 17px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
    content: '+';
    font-size: 24px;
    color: var(--c-primary);
    font-weight: 300;
    transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item-body{
    padding: 0 0 20px;
    color: var(--c-muted);
    line-height: 1.65;
}
/* ============================================================
   Forms
   ============================================================ */

.form-group{
    margin-bottom: 20px;
}
.form-group label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    margin-bottom: 6px;
}
.form-input,
.form-textarea,
.form-select{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 157, 117, 0.18);
}
.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
.form-row{ grid-template-columns: 1fr; gap: 12px; }
}/* Selector `.form-group label.form-checkbox` má specificity 0,1,2 — přebíjí
   base `.form-group label{ display: block }` (0,1,1) i normalize defaults.
Margin/font-size resety potlačují inheritu z `.form-group label`. */
.form-group label.form-checkbox,
label.form-checkbox{
    display: flex;
    align-items: center;       /* vertically centered checkbox vs. label */
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}
.form-group label.form-checkbox input,
label.form-checkbox input{
    margin: 0;
    flex-shrink: 0;
}
/* Multi-line labels (GDPR souhlas s odkazy) — checkbox kotví na první řádek,
   ne center, aby vícřádkový text vypadal přirozeně. */
.form-group label.form-checkbox.form-checkbox--top,
label.form-checkbox.form-checkbox--top,
.form-group label.form-checkbox:has(span > a),
label.form-checkbox:has(span > a){
    align-items: flex-start;
}
.form-group label.form-checkbox.form-checkbox--top input,
label.form-checkbox.form-checkbox--top input,
.form-group label.form-checkbox:has(span > a) input,
label.form-checkbox:has(span > a) input{
    margin-top: 4px;
}
/* Odkazy uvnitř GDPR/terms checkbox spanu — viditelné gold + underline */
.form-checkbox span a,
.booking-form .form-group span a{
    color: var(--c-gold-2, #c9a961);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.form-checkbox span a:hover,
.booking-form .form-group span a:hover{
    color: var(--c-gold, #c9a961);
    text-decoration-thickness: 2px;
}
/* ============================================================
   Footer
   ============================================================ */

.site-footer{
    background: var(--c-very-dark);
    color: rgba(255,255,255,0.65);
    padding: 0;
    margin-top: 0;
}
.site-footer h4{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 20px;
}
.site-footer a{
    color: rgba(255,255,255,0.7);
    display: block;
    padding: 4px 0;
    font-size: 14px;
}
.site-footer a:hover{
    color: #fff;
}
.site-footer-grid{
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 48px;
}
.footer-desc{
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
}
.site-footer .site-logo{
    color: #fff;
    margin-bottom: 0;
}
.footer-bottom{
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.footer-bottom a{
    display: inline;
    color: rgba(255,255,255,0.7);
}
/* ============================================================
   Flash messages
   ============================================================ */

.flash{
    padding: 14px 0;
    font-size: 15px;
    text-align: center;
}
.flash-success{ background: #e3f1e8; color: var(--c-success); }
.flash-error{ background: #fce4e4; color: var(--c-error); }
/* ============================================================
   Lightbox
   ============================================================ */

.lb-overlay{
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 16, 0.92);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lb-overlay.is-open{ display: flex; }
.lb-img{
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.lb-caption{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    text-align: center;
    max-width: 80%;
}
.lb-close,
.lb-prev,
.lb-next{
    position: absolute;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover{
    background: rgba(255,255,255,0.25);
}
.lb-close{ top: 24px; right: 24px; }
.lb-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next{ right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
.lb-overlay{ padding: 16px; }
.lb-prev{ left: 8px; }
.lb-next{ right: 8px; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
:root{ --space-section: 32px; --space-section-lg: 48px; }
.nav-burger{ display: inline-flex; }
.site-nav{
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 16px 24px;
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--shadow);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s, opacity .25s;
    }
.site-nav.is-open{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
.site-nav a{
        padding: 14px 0;
        border-bottom: 1px solid var(--c-line-soft);
        width: 100%;
    }
.site-nav a:last-child{ border-bottom: none; }
.site-header-actions .btn{ padding: 10px 16px; font-size: 12px; }
.apt-detail-grid{ grid-template-columns: 1fr; gap: 32px; }
.apt-sidebar{ position: static; }
.site-footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 480px) {
.site-footer-grid{ grid-template-columns: 1fr; }
.booking-widget-fields{ grid-template-columns: 1fr; }
.form-row{ grid-template-columns: 1fr; }
.lang-switcher{ display: none; }
}/* ============================================================
   COZYSTAY REDESIGN — nové sekce + polish
   ============================================================ */

/* Header — phone link */
.site-header-phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color .15s ease;
}
.site-header-phone:hover{ color: var(--c-primary); }
.site-header-phone svg{ width: 14px; height: 14px; opacity: 0.7; }
@media (max-width: 960px) { .site-header-phone { display: none; } }/* Welcome staggered section */
.welcome-section{
    padding: var(--space-section-lg) 0;
    background: var(--c-bg);
}
.welcome-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.welcome-grid--left{ grid-template-columns: 1fr 1fr; }
.welcome-grid--left .welcome-images{ order: -1; }
.welcome-text{ max-width: 540px; }
.welcome-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 18px;
}
.welcome-heading{
    font-family: var(--font-serif);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.18;
    margin: 0 0 24px;
}
.welcome-body{
    color: var(--c-ink-soft);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}
.welcome-action .btn{ padding: 14px 32px; }
.welcome-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
.welcome-img{
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--c-cream);
}
.welcome-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.welcome-img:hover img{ transform: scale(1.04); }
.welcome-img--1{ margin-top: 40px; }
.welcome-img--4{ margin-top: 40px; }

@media (max-width: 960px) {
.welcome-grid{ grid-template-columns: 1fr; gap: 48px; }
.welcome-img--1, .welcome-img--4{ margin-top: 0; }
.welcome-grid--left .welcome-images{ order: 0; }
}/* Services grid (CozyStay 2x3 + side image) */
.services-section{
    padding: var(--space-section-lg) 0;
    background: var(--c-bg);
}
.services-section--cream{ background: var(--c-cream-2); }
.services-section--dark{
    background: var(--c-dark-teal);
    color: rgba(255,255,255,0.9);
}
.services-section--dark .services-heading,
.services-section--dark .service-title{ color: #fff; }
.services-section--dark .services-eyebrow{ color: rgba(255,255,255,0.65); }
.services-section--dark .service-text{ color: rgba(255,255,255,0.75); }
.services-section--dark .service-icon{ color: var(--c-primary); }
.services-layout{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.services-layout--no-image{ grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
.services-side-image{
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.services-side-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.services-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 16px;
}
.services-heading{
    font-family: var(--font-serif);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.18;
    margin: 0 0 40px;
}
.services-items{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
}
.service-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.service-icon{
    color: var(--c-primary);
    width: 36px;
    height: 36px;
    display: inline-flex;
}
.service-icon svg{ width: 100%; height: 100%; }
.service-title{
    font-family: var(--font-serif);
    font-size: 22px;
    margin: 0;
    line-height: 1.3;
}
.service-text{
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin: 0;
}

@media (max-width: 960px) {
.services-layout{ grid-template-columns: 1fr; gap: 40px; }
.services-side-image{ aspect-ratio: 16/9; }
.services-items{ gap: 28px 24px; }
}
@media (max-width: 540px) {
.services-items{ grid-template-columns: 1fr; }
}/* Testimonials grid */
.testimonials-section{
    padding: var(--space-section-lg) 0;
}
.testimonials-section--cream{ background: var(--c-cream); }
.testimonials-section--light{ background: var(--c-bg); }
.testimonials-section--dark{
    background: var(--c-deep-dark, #0d0d0d);
    color: rgba(255, 255, 255, 0.92);
}
.testimonials-section--dark .testimonials-eyebrow{ color: var(--c-gold-2, #c9a961); }
.testimonials-section--dark .testimonials-heading{ color: #fff; }
/* Dark variant cards — transparent s gold border místo bílého pozadí */
.testimonials-section--dark .testimonial-card{
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--c-gold-2, #c9a961);
    color: rgba(255, 255, 255, 0.88);
}
.testimonials-section--dark .testimonial-card-avatar{ background: rgba(255, 255, 255, 0.08); }
.testimonials-section--dark .testimonial-card-quote p{ color: rgba(255, 255, 255, 0.88); }
.testimonials-section--dark .testimonial-card-author cite{ color: #fff; }
.testimonials-section--dark .testimonial-card-location{ color: rgba(255, 255, 255, 0.55); }
.testimonials-section--dark .testimonial-card .star-empty{ color: rgba(255, 255, 255, 0.18); }
.testimonials-section--dark .testimonial-featured-quote p{ color: rgba(255, 255, 255, 0.92); }
.testimonials-section--dark .testimonial-featured-author cite{ color: #fff; }
.testimonials-header{ text-align: center; margin-bottom: 56px; }
.testimonials-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.testimonials-heading{
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 44px);
    margin: 0;
}
.testimonial-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.testimonial-grid--cols-1{ grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.testimonial-grid--cols-2{ grid-template-columns: 1fr 1fr; }
.testimonial-card{
    background: var(--c-bg);
    padding: 40px 32px;
    border-top: 2px solid var(--c-primary);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.testimonial-card-avatar{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-cream);
}
.testimonial-card-avatar img{
    width: 100%; height: 100%; object-fit: cover;
}
.testimonial-card .testimonial-stars{ display: flex; gap: 2px; }
.testimonial-card .star{ color: var(--c-primary); font-size: 18px; line-height: 1; }
.testimonial-card .star-empty{ color: var(--c-line); }
.testimonial-card-quote{
    margin: 0;
    padding: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--c-ink);
    flex: 1;
}
.testimonial-card-quote p{ margin: 0; }
.testimonial-card-author{
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.testimonial-card-author cite{
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.testimonial-card-location{
    font-size: 12px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (max-width: 960px) {
.testimonial-grid{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}/* Newsletter section */
.newsletter-section{
    position: relative;
    padding: 110px 24px;
    background-color: var(--c-dark-teal);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}
.newsletter-inner{
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.newsletter-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}
.newsletter-heading{
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 14px;
}
.newsletter-subheading{
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 32px;
}
.newsletter-form{ width: 100%; max-width: 480px; margin: 0 auto; }
.newsletter-form-row{
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.04);
}
.newsletter-input{
    flex: 1;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-family: var(--font-sans);
    outline: none;
}
.newsletter-input::placeholder{ color: rgba(255,255,255,0.55); }
.newsletter-submit{
    border-radius: 0;
    padding: 0 28px;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.newsletter-privacy{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
}
.newsletter-privacy input[type="checkbox"]{ accent-color: var(--c-primary); }
.newsletter-honeypot,
.bf-honeypot{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.newsletter-msg{
    min-height: 20px;
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.95);
}
.newsletter-msg.is-error{ color: #ffd7d7; }

@media (max-width: 540px) {
.newsletter-form-row{ flex-direction: column; }
.newsletter-submit{ padding: 14px; }
}/* Hero polish — větší typografie pro CozyStay vibe */
.hero{
    min-height: clamp(640px, 90vh, 920px);
}
.hero-title{
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1.04;
    letter-spacing: 0.005em;
}
.hero-subtitle{ font-size: clamp(15px, 1.4vw, 18px); }
/* Booking widget — sage floating overlay variant */
.booking-widget--floating{
    background: var(--c-secondary);
    color: #fff;
    padding: 24px;
    margin-top: 32px;
}
.booking-widget--floating label{ color: rgba(255,255,255,0.85); }
.booking-widget--floating input,
.booking-widget--floating select{
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.booking-widget--floating input::placeholder{ color: rgba(255,255,255,0.6); }
/* Footer mini newsletter */
.footer-newsletter{
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 28px;
    margin-top: 32px;
}
.footer-newsletter h4{ margin-bottom: 12px; }
.footer-newsletter-form{
    display: flex;
    gap: 0;
    max-width: 380px;
}
.footer-newsletter-form input[type="email"]{
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 0;
}
.footer-newsletter-form input[type="email"]::placeholder{ color: rgba(255,255,255,0.5); }
.footer-newsletter-form button{
    padding: 0 20px;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
.footer-newsletter-form button:hover{ background: var(--c-primary-2); }
/* Section-header eyebrow + heading for sections that don't have explicit class */
.section-header-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 12px;
}
/* Builder section spacing inside container fallback — KOMPAKTNÍ default.
   Předtím to bylo var(--space-section) = 140px → vytvářelo obří díry kolem
   krátkých sekcí (heading, text). Spacing teď řídí per-section padding
   z universal panelu (typeDefaults). Pokud admin nenastaví → 32px default. */
.builder-section{ padding: 32px 0; }
.builder-section:first-child{ padding-top: 0; }
/* Newsletter unsubscribe page */
.newsletter-unsubscribe-section{
    padding: var(--space-section) 0;
    text-align: center;
}
/* ============================================================
   COZYSTAY ROUND 2 — boutique resort overhaul (2026-05-12)
   Lighter, more breathable, italic display, real CozyStay vibe.
   ============================================================ */

/* ── Display typography ─────────────────────────────────── */
h1, h2{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.005em;
}
h1{ font-size: clamp(48px, 7.5vw, 110px); }
h2{ font-size: clamp(36px, 4.6vw, 64px); }
h3{ font-family: var(--font-display); font-weight: 500; }
/* ── Hero — full-bleed, lighter overlay, regular serif title ─── */
.hero{
    position: relative;
    min-height: clamp(640px, 56vw, 760px);
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px 48px 180px;
    color: #fff;
    overflow: hidden;
}
/* Alignment — schema fields v hero element (BuilderElements.php) generují class hero--align-{value}. */
.hero--align-center{ align-items: center; text-align: center; }
.hero--align-left{ align-items: flex-start; text-align: left; }
.hero--align-right{ align-items: flex-end; text-align: right; }
.hero--align-left  .hero-actions{ justify-content: flex-start; }
.hero--align-right .hero-actions{ justify-content: flex-end; }
.hero--align-center .hero-actions{ justify-content: center; }
.hero--align-left  .hero-eyebrow::before,
.hero--align-right .hero-eyebrow::before{ display: none; }
.hero-with-search{
    min-height: clamp(640px, 55.5vw, 749px);
    max-height: none;
    padding: 80px 84px 80px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
}
.hero-with-search .hero-content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    color: #fff;
}
.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.06) 55%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
}
.hero-with-search::before{ display: none; }
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}
.hero-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
}
.hero-eyebrow::before{
    content: "✦";
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
    letter-spacing: 0;
    color: var(--c-primary);
    opacity: 0.9;
}
.hero-title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(54px, 8.5vw, 120px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 28px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero-subtitle{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    max-width: 620px;
    margin: 0 auto 36px;
}
.hero-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
/* ── Booking widget — floating overlap bar (CozyStay style) ── */
.booking-widget--inline{
    position: absolute;
    left: 50%;
    bottom: -54px;
    transform: translateX(-50%);
    width: calc(100% - 96px);
    max-width: 1340px;
    background: #fff;
    color: var(--c-ink);
    padding: 28px 36px;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    z-index: 5;
    border-top: 3px solid var(--c-primary);
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    flex: 1;
}
.booking-widget--inline .booking-widget-field{ display: flex; flex-direction: column; gap: 8px; }
.booking-widget--inline label{
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
}
.booking-widget--inline input,
.booking-widget--inline select{
    border: 0;
    border-bottom: 1px solid var(--c-line);
    padding: 6px 0;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-ink);
    background: transparent;
    border-radius: 0;
    outline: none;
}
.booking-widget--inline input:focus,
.booking-widget--inline select:focus{
    border-bottom-color: var(--c-primary);
}
.booking-widget--inline .btn{
    align-self: stretch;
    padding: 16px 36px;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.2em;
}
/* When booking widget overlaps, next section needs extra top padding */
.hero-with-search + section,
.hero + section.welcome-section,
.hero + .builder-section{
    padding-top: calc(var(--space-section-lg) + 60px);
}

@media (max-width: 960px) {
.booking-widget--inline{
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        margin: 32px 24px -60px;
    }
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: 1fr 1fr;
    }
.hero-with-search{ padding-bottom: 120px; }
}
@media (max-width: 540px) {
.booking-widget--inline{ flex-direction: column; align-items: stretch; }
.booking-widget--inline .booking-widget-fields{ grid-template-columns: 1fr; }
}/* ── Welcome — single column centered (CozyStay primary layout) ─ */
.welcome-section{
    padding: var(--space-section-lg) 24px;
    text-align: center;
}
.welcome-grid{
    display: block;
    max-width: 720px;
    margin: 0 auto;
}
.welcome-grid--with-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1280px;
    text-align: left;
}
.welcome-text{ max-width: none; margin: 0 auto; }
.welcome-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.welcome-eyebrow::after{
    content: "✦";
    display: block;
    font-size: 18px;
    margin-top: 14px;
    letter-spacing: 0;
}
.welcome-heading{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 4.8vw, 64px);
    line-height: 1.12;
    margin: 0 0 28px;
    color: var(--c-ink);
}
.welcome-body{
    color: var(--c-ink-soft);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 36px;
}
.welcome-body p:last-child{ margin-bottom: 0; }
.welcome-action .btn{ padding: 16px 36px; font-size: 11px; letter-spacing: 0.22em; }
.welcome-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 960px) {
.welcome-grid--with-images{ grid-template-columns: 1fr; gap: 48px; text-align: center; }
}/* ── Section headers everywhere (consistent eyebrow + heading) ── */
.section-header{ text-align: center; margin-bottom: 64px; }
.section-header-eyebrow,
.testimonials-eyebrow,
.services-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.section-header h2,
.testimonials-heading,
.services-heading{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.12;
    margin: 0 auto;
    max-width: 720px;
}
/* ── Featured apartment — bigger breathing ─────────────── */
.featured-apartment{
    padding: var(--space-section-lg) 0;
    background: var(--c-cream);
}
.featured-apartment-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 96px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}
.featured-apartment-image{
    aspect-ratio: 5 / 6;
    background-size: cover;
    background-position: center;
    min-height: 540px;
}
.featured-apartment h2{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(36px, 4.6vw, 60px);
    margin: 0 0 20px;
}
.featured-apartment-meta{
    list-style: none;
    padding: 0;
    margin: 28px 0;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.featured-apartment-meta strong{ display: block; font-size: 26px; color: var(--c-ink); font-family: var(--font-display); letter-spacing: 0; }
.featured-apartment-price{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 24px 0 32px;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--c-ink);
}
.featured-apartment-price .price-from,
.featured-apartment-price .price-suffix{
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-muted);
}
.featured-apartment-actions{ display: flex; gap: 16px; flex-wrap: wrap; }
.featured-apartment-actions .btn{ padding: 16px 32px; font-size: 11px; letter-spacing: 0.22em; }

@media (max-width: 960px) {
.featured-apartment-grid{ grid-template-columns: 1fr; gap: 40px; }
}/* ── Cards section (Experience) ───────────────────────── */
.builder-cards-section{
    padding: var(--space-section-lg) 0;
}
.builder-cards-section .section-header{ margin-bottom: 72px; }
.card-grid{ gap: 40px; }
.card{
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: transform .25s ease;
}
.card-image{
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    margin-bottom: 28px;
    min-height: 480px;
}
.card-body{ padding: 0; }
.card-eyebrow{
    font-family: var(--font-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--c-primary);
    margin-bottom: 10px;
}
.card-title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    margin: 0 0 10px;
    color: var(--c-ink);
}
.card-text{
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 16px;
}
.card:hover{ transform: translateY(-4px); }
/* Cards on dark background (CozyStay Experience sekce) */
.builder-cards-section--dark{
    padding: var(--space-section-lg) 0;
}
.builder-cards-section--dark .section-header h2,
.builder-cards-section--dark .card-title{ color: #fff; }
.builder-cards-section--dark .section-header-eyebrow,
.builder-cards-section--dark .card-eyebrow{ color: rgba(255,255,255,0.75); }
.builder-cards-section--dark .card{ background: transparent; border: 0; }
.builder-cards-section--dark .card-text{ color: rgba(255,255,255,0.78); }
.builder-cards-section--dark .btn-ghost{ color: var(--c-primary); border-color: rgba(255,255,255,0.25); }
.builder-cards-section--dark .btn-ghost:hover{ background: rgba(255,255,255,0.06); }
/* ============================================================
   COZYSTAY ROUND 3 — match-tracking detailů
   ============================================================ */

/* ============================================================
   UNIVERSAL IMAGE SLIDER — builder element image_slider
   Karusel/grid fotek bez vazby na text. Lightbox přes data-lightbox.
   ============================================================ */
.image-slider-section{
    padding: 64px 0;
}
.image-slider-header{
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}
.image-slider-header--left{ text-align: left;  margin-left: 0; }
.image-slider-header--right{ text-align: right; margin-right: 0; }
.image-slider-eyebrow{
    display: inline-block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-gold, #c9a961);
    margin-bottom: 14px;
}
.image-slider-heading{
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--c-text-strong, #1a2025);
}
.image-slider-subheading{
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text-muted, #5b6770);
    margin: 0;
}
.image-slider-section-wrap{
    --isl-aspect: 4 / 3;
    position: relative;
}
.image-slider.swiper{
    overflow: visible;
    padding: 0 4px;
}
.image-slider-slide{
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #f0eee9;
}
.image-slider-section-wrap .image-slider-slide,
.image-slider-grid .image-slider-slide{
    aspect-ratio: var(--isl-aspect);
}
.image-slider-link{
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}
.image-slider-link[href][data-lightbox]:hover .image-slider-img,
.image-slider-link:hover .image-slider-img{ transform: scale(1.04); }
.image-slider-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.image-slider-caption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 18px 14px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .02em;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
/* Grid varianta */
.image-slider-grid{
    --isl-aspect: 4 / 3;
    display: grid;
    gap: 20px;
}
.image-slider-grid--1{ grid-template-columns: 1fr; }
.image-slider-grid--2{ grid-template-columns: repeat(2, 1fr); }
.image-slider-grid--3{ grid-template-columns: repeat(3, 1fr); }
.image-slider-grid--4{ grid-template-columns: repeat(4, 1fr); }
.image-slider-grid--5{ grid-template-columns: repeat(5, 1fr); }
.image-slider-grid--6{ grid-template-columns: repeat(6, 1fr); }
/* Swiper navigation styles — gold accent + clean */
.image-slider .swiper-button-prev,
.image-slider .swiper-button-next{
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    color: var(--c-text-strong, #1a2025);
    margin-top: -22px;
}
.image-slider .swiper-button-prev:after,
.image-slider .swiper-button-next:after{
    font-size: 16px;
    font-weight: 700;
}
.image-slider .swiper-button-prev:hover,
.image-slider .swiper-button-next:hover{
    background: var(--c-gold, #c9a961);
    color: #fff;
}
.image-slider .swiper-pagination{
    position: relative;
    margin-top: 18px;
    bottom: auto;
}
.image-slider .swiper-pagination-bullet{
    background: var(--c-text-muted, #5b6770);
    opacity: .35;
    width: 8px; height: 8px;
    transition: opacity .2s, background .2s;
}
.image-slider .swiper-pagination-bullet-active{
    opacity: 1;
    background: var(--c-gold, #c9a961);
    width: 24px;
    border-radius: 4px;
}

/* Mobile */
@media (max-width: 768px) {
.image-slider-section{ padding: 40px 0; }
.image-slider-header{ margin-bottom: 28px; }
.image-slider-grid--3,
    .image-slider-grid--4,
    .image-slider-grid--5,
    .image-slider-grid--6{ grid-template-columns: 1fr 1fr; gap: 12px; }
.image-slider-grid--2{ gap: 12px; }
}
@media (max-width: 480px) {
.image-slider-grid{ grid-template-columns: 1fr; }
.image-slider .swiper-button-prev,
    .image-slider .swiper-button-next{ display: none; }
}/* ── Welcome portraits — 4 vertical photos BELOW centered text ── */
.welcome-portraits{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 96px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.welcome-portraits--1{ grid-template-columns: 1fr; max-width: 720px; }
.welcome-portraits--2{ grid-template-columns: 1fr 1fr; max-width: 980px; }
.welcome-portraits--3{ grid-template-columns: repeat(3, 1fr); max-width: 1180px; }
.welcome-portrait{
    margin: 0;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    background: var(--c-cream);
}
.welcome-portrait img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.welcome-portrait:hover img{ transform: scale(1.04); }
@media (max-width: 960px) {
.welcome-portraits{ grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
}
@media (max-width: 540px) {
.welcome-portraits{ grid-template-columns: 1fr; max-width: 420px; }
}/* ── Testimonials FEATURED (single large + photo) ── */
.testimonials-section--featured{ padding: var(--space-section-lg) 0; }
.testimonial-featured{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 96px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}
.testimonial-featured:not(:has(.testimonial-featured-image)){
    grid-template-columns: 1fr;
    max-width: 880px;
    text-align: center;
    gap: 0;
}
.testimonial-featured:not(:has(.testimonial-featured-image)) .testimonial-featured-body .testimonial-stars{ justify-content: center; }
.testimonial-featured:not(:has(.testimonial-featured-image)) .testimonial-featured-author{ justify-content: center; }
.testimonial-featured-image{
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--c-cream);
}
.testimonial-featured-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testimonial-featured-body{ padding: 0 24px; }
.testimonial-featured-body .testimonial-stars{
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    font-size: 18px;
    color: var(--c-primary);
}
.testimonial-featured-quote{
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.5;
    color: var(--c-ink);
}
.testimonial-featured-quote p{ margin: 0; }
.testimonial-featured-author{
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.testimonial-featured-author cite{
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--c-ink);
}
.testimonial-featured-author cite::before{
    content: "—";
    display: inline;
    margin-right: 8px;
    color: var(--c-muted);
}
@media (max-width: 960px) {
.testimonial-featured{ grid-template-columns: 1fr; gap: 40px; }
.testimonial-featured-body{ padding: 0; text-align: center; }
.testimonial-featured-body .testimonial-stars{ justify-content: center; }
.testimonial-featured-author{ justify-content: center; }
}/* ── Newsletter — light cream variant (CozyStay style) ── */
.newsletter-section--light{
    background: var(--c-cream-2);
    color: var(--c-ink);
}
.newsletter-section--light::before{ display: none; }
.newsletter-section--light .newsletter-eyebrow{ color: var(--c-primary); }
.newsletter-section--light .newsletter-heading{ color: var(--c-ink); }
.newsletter-section--light .newsletter-subheading{ color: var(--c-ink-soft); }
.newsletter-section--light .newsletter-form-row{
    border-color: var(--c-line);
    background: #fff;
}
.newsletter-section--light .newsletter-input{ color: var(--c-ink); }
.newsletter-section--light .newsletter-input::placeholder{ color: var(--c-muted); }
.newsletter-section--light .newsletter-privacy{
    color: var(--c-muted);
}
.newsletter-section--light .newsletter-msg{ color: var(--c-ink-soft); }
/* ── Services — text-based items (no icon) variant ── */
.services-section--no-icons .service-icon{ display: none; }
/* ============================================================
   COZYSTAY ROUND 4 — header overhaul + sage booking widget +
   gold border experience cards + hero typografie fix
   ============================================================ */

/* ── HEADER: transparent over hero, white text, dark gradient ── */
body.has-hero{ padding-top: 0; }
body.has-hero .site-main{ padding-top: 0; }
.site-header--transparent{
    /* E030 (2026-05-14) — REF CDP spec [4]: header overlap-header 1904×121,
       position absolute, z-index 999.
       Separator (1px rgba(255,255,255,0.21) at Y=120) realizován jako ::after
       pseudo, ne jako border-bottom — REF site implementuje separator přes
       child div, takže border-color všech 4 stran zůstává inherited (currentColor
       z body = rgb(26,27,26)), což matchuje dispe�erův regression hint. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 121px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 999;
}
.site-header--transparent::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 42, 36, 0.92) 0%, rgba(35, 42, 36, 0.55) 60%, rgba(35, 42, 36, 0) 100%);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
}
.site-header--transparent::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.21);
    pointer-events: none;
    z-index: 1;
}
/* Inner stránky (bez .has-hero): header je FIXED nahoře místo sticky.
   Sticky je rozbitý kvůli `body{ overflow-x: hidden }` — fixed funguje vždy.
Padding-top na body kompenzuje výšku headeru aby obsah nebyl pod ním. */
body:not(.has-hero) .site-header--transparent{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 var(--c-line-soft);
}
body:not(.has-hero){ padding-top: 121px; }
@media (max-width: 760px) {
body:not(.has-hero){ padding-top: 56px; }
}body:not(.has-hero) .site-header--transparent::before{ display: none; }
body:not(.has-hero) .site-header--transparent .site-header-inner *,
body:not(.has-hero) .site-header-left a,
body:not(.has-hero) .site-header-right a:not(.btn-outline),
body:not(.has-hero) .site-logo-text{
    color: var(--c-ink);
}
/* Scrolled state — solid background even on hero pages */
.site-header.is-scrolled{
    position: fixed;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* E027 (2026-05-14) — compact scrolled header per dispatcher tracking:
   elements at Y=5/17/19/20 (vs initial Y=35/47/49/50) suggest scrolled padding 0
   instead of 30. Reduces header from 121px to ~60px when scrolled. */
.site-header.is-scrolled .site-header-inner{
    padding-top: 0;
    padding-bottom: 0;
    min-height: 60px;
}
.site-header.is-scrolled::before{ display: none; }
.site-header.is-scrolled .site-header-inner *,
.site-header.is-scrolled .site-header-left a,
.site-header.is-scrolled .site-header-right a:not(.btn-outline),
.site-header.is-scrolled .site-logo-text{ color: var(--c-ink); }
.site-header.is-scrolled .btn-outline{
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.site-header.is-scrolled .btn-outline:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* ── Header grid: 1fr auto 1fr with logo CENTERED (CozyStay parity)
   Reference container content cap = 1230px; with 60px padding each side
   → outer cap 1350px. On wider viewports stays centered.            ── */
.site-header .site-header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    padding: 30px 60px;
    height: 121px;
    min-height: 121px;
    max-width: none;
    margin: 0;
    color: #fff;
    position: relative;
}
.site-header-left{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 30px;
    justify-self: start;
}
.site-header-right{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    gap: 40px;
    justify-self: end;
}
/* ── Hamburger (CozyStay parity: 35×50, 3 lines, 1px thick, 8px apart)
   E023 reverted (2026-05-14): keep visible as flex on desktop. The REF CDP spec
   has display:flex with 35×50 bbox even on desktop; hiding via display:none
   collapsed bbox to 0×0 and caused dispatcher regression (-14pp). */
.nav-burger{
    /* E030 (2026-05-14) — REF CDP spec [13]: burger button.menu-toggle 35×50,
       display: flex (NOT inline-flex), position: relative, color white so
       computed borderColor = rgb(255,255,255) (matches dispatcher regression hint). */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 35px;
    min-width: 35px;
    flex-shrink: 0;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-color: #fff;
    cursor: pointer;
    color: #fff;
    line-height: 50px;
    text-align: center;
    z-index: 999;
    position: relative;
}
.nav-burger > span:not(.sr-only){
    display: block;
    width: 35px;
    height: 2px;
    background: #fff;
    border-radius: 0;
    transition: transform .25s, opacity .25s, background-color .25s;
}
/* Scrolled / non-hero header — invert burger lines to ink */
.site-header.is-scrolled .nav-burger,
body:not(.has-hero) .site-header .nav-burger{ color: var(--c-ink); }
.site-header.is-scrolled .nav-burger span:not(.sr-only),
body:not(.has-hero) .site-header .nav-burger span:not(.sr-only){ background: var(--c-ink); }
/* Burger sr-only span must not paint a line; stays absolutely positioned via .sr-only */
.nav-burger > .sr-only{ background: transparent; width: 1px; height: 1px; }
/* ── Site nav inline (CozyStay parity: Jost 500 13px, ls 0.05em, lh 60px) ──
   E030 (2026-05-14) — REF CDP spec: nav 336×60 (line-height 60 dává vertikální
   střed), Jost 13px 500 letter-spacing 0.05em uppercase white. Explicit Jost
   stack odpovídá REF computed fontFamily. */
.site-nav-inline{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 0;
    font-family: 'Jost', var(--font-sans), sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 60px;
    color: #fff;
    border-color: #fff;
}
.site-nav-inline a{
    color: #fff;
    padding: 0 15px;
    line-height: 60px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}
/* DEPREKOVÁNO 2026-05-26: white ::before underline duplikoval gold ::after
   z luxury-drawer.css → user viděl 2 čáry. Zachováno jen pro nav-toggle (které
   nemá vlastní gold ::after rule v luxury-drawer.css). */
.site-nav-inline > .nav-item > .nav-toggle::before{
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 18px;
    height: 1px;
    background: var(--c-gold, #c9a961);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.site-nav-inline > .nav-item > .nav-toggle:hover::before,
.site-nav-inline > .nav-item > .nav-toggle.is-active::before{ transform: scaleX(1); }
.site-nav-inline .nav-chev{
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.85;
    transition: transform .2s ease, opacity .2s ease;
}
.site-nav-inline .nav-item.has-dropdown:hover .nav-chev,
.site-nav-inline .nav-item.has-dropdown.is-open .nav-chev{ transform: rotate(180deg); opacity: 1; }
@media (max-width: 1100px) { .site-nav-inline { display: none; } }/* Mobile drawer nav (controlled by burger toggle) */
.site-nav{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 86vw;
    background: var(--c-very-dark);
    color: #fff;
    padding: 80px 36px 36px;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 140;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
}
.site-nav.is-open{ transform: translateX(0); }
.site-nav a{
    display: block;
    padding: 16px 0;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.site-nav a:hover{ color: var(--c-primary); }
.nav-close{
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
}
.nav-close:hover{ background: var(--c-primary); border-color: var(--c-primary); }
/* Backdrop */
.nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 130;
}
.nav-backdrop.is-open{ opacity: 1; pointer-events: auto; }
body.nav-open{ overflow: hidden; }
/* ── Nav dropdown (desktop hover + mobile click) ─────────── */
.site-nav-inline .nav-item.has-dropdown{
    position: relative;
}
.nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}
.nav-chev{
    transition: transform .2s ease, opacity .2s ease;
    opacity: 0.85;
}
.nav-item.has-dropdown:hover .nav-chev,
.nav-item.has-dropdown.is-open .nav-chev{ transform: rotate(180deg); opacity: 1; }
.nav-dropdown{
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    background: rgba(17, 17, 17, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 105;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown::before{
    /* invisible bridge so hover doesn't break between toggle and dropdown */
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
}
.nav-dropdown a{
    display: block;
    padding: 11px 28px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color .15s, background .15s;
}
.nav-dropdown a:hover{
    color: #fff;
    background: rgba(255,255,255,0.05);
}
/* ── Logo centered with stars ── */
.site-logo{
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff;
    text-decoration: none;
}
.site-logo-text{
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}
.site-logo-stars{
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}
.site-logo-mark{ display: none; }
/* ── Right side: phone + lang + outlined Book Now (CozyStay parity) ── */
.site-header-phone{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap;
}
.site-header-phone:hover{ color: var(--c-primary); }
.site-header-phone svg{ display: none; }
@media (max-width: 1100px) { .site-header-phone { display: none; } }.lang-switcher{
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 20px;
    font-weight: 400;
    font-family: var(--font-sans);
}
.lang-switcher a{
    color: #fff;
    padding: 0;
    margin: 0;
    border-left: 0;
    text-transform: none;
    font-weight: 400;
    position: relative;
    text-decoration: none;
}
.lang-switcher a + a{
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
.lang-sep{ padding: 0 4px; }
.lang-switcher a.is-active{
    color: #fff;
    font-weight: 400;
}
.lang-sep{ color: #fff; }
/* Outlined Book Now button — uses currentColor so it flips with parent text color */
.btn-outline{
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 14px 32px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: all .2s;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.btn-outline:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* Header CTA — transparent ghost button like CozyStay "Book Now" (thin border, white text over hero) */
.btn-book{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    height: 44px;
    padding: 0 24px;
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transition: background .2s, border-color .2s, color .2s;
    border-radius: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
/* E026 (2026-05-14) — Book Now inner span: REF CDP spec [49] expects display:block + Marcellus.
   Wrapping in <span> + this rule matches the REF element structure. */
.btn-book > span{
    display: block;
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}
.btn-book:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* Scrolled state (white header) — flip border + text to ink, keep ghost style */
.site-header.is-scrolled .btn-book,
body:not(.has-hero) .btn-book{
    background: transparent;
    border-color: var(--c-ink);
    color: var(--c-ink);
}
.site-header.is-scrolled .btn-book:hover,
body:not(.has-hero) .btn-book:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

@media (max-width: 760px) {
/* Mobile compact header: 56px height. Selector matches base .site-header .site-header-inner
       (specificity 0,0,2,0) z CozyStay overrides (line 2428), který nastavuje 121px.
       Bez tohoto prefixu by base pravidlo přepsalo mobile výšku. */
    .site-header,
    .site-header--transparent{
        min-height: 56px;
        height: auto;
    }
.site-header .site-header-inner{
        height: 56px;
        min-height: 56px;
        padding: 0 16px;
        gap: 8px;
    }
.site-logo-text{ font-size: 18px; letter-spacing: 0.18em; }
.site-logo-stars{ font-size: 6px; }
.site-header-right .lang-switcher,
    .site-header-right .site-header-phone{ display: none; }
.btn-book{ height: 34px; padding: 0 12px; font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nav-burger{ height: 38px; width: 32px; min-width: 32px; }
}
/* Velmi malé telefony (≤480px) — CTA "Rezervovat" v hlavičce přesahoval
   viewport. User má alternativní access v hamburger drawer (Rezervovat button
   v dolní části drawer). */
@media (max-width: 480px) {
.site-header .site-header-inner{ gap: 4px; padding-left: 12px; padding-right: 12px; }
/* Override base .site-header .btn-book{ display: inline-flex !important }
z CozyStay overrides (line 4797). Base pravidlo přichází POZDĚJI v souboru,
       takže potřebujeme vyšší specificity (body prefix → 0,0,2,1). */
    body .site-header .btn-book{ display: none; }
.site-logo-text{ font-size: 17px; letter-spacing: 0.16em; }
}/* ── Hero typography fix — regular Marcellus, NO italic, white centered ── */
.hero{
    padding-top: 160px;       /* tighter — closer to CozyStay rhythm */
}
.hero-eyebrow{
    margin-bottom: 18px;
}
.hero-eyebrow::before{ display: none; }   /* remove the icon glyph */
.hero-title{
    font-family: 'Marcellus', var(--font-serif), serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(56px, 7.4vw, 100px);  /* CozyStay reference: 100px @ 1350px viewport */
    line-height: 1.0;
    letter-spacing: 0;
    color: #fff;
    text-shadow: none;
    max-width: 880px;
    margin: 0 auto 20px;
}
.hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(17px, 1.55vw, 21px);
    font-weight: 400;
    line-height: 1.66;
    color: rgba(255,255,255,0.92);
    margin-top: 20px;
    margin-bottom: 0;
    letter-spacing: 0;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
/* ── Booking widget — SAGE GREEN panel with gold-framed input cells (CozyStay match) ── */
/* Note: width/max-width/position handled by higher-specificity .hero.hero-with-search rule (line ~4670) */
.booking-widget--inline{
    background: var(--c-secondary);          /* sage green #53624e */
    color: #fff;
    padding: 30px;                            /* CozyStay: 30px all sides */
    border: 0;
    border-radius: 0;                         /* CozyStay: no radius */
    box-shadow: none;                         /* CozyStay: no shadow on widget */
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 15px;                                /* gutter between fields-group and button */
    position: relative;
    bottom: auto;
    top: auto;
    transform: none;
    z-index: 9;
    min-height: 108px;                        /* CozyStay: 108px */
    height: auto;
    box-sizing: border-box !important;
}
/* Next section needs padding-top to compensate for widget overlap */
.hero-with-search + section{
    padding-top: calc(var(--space-section) + 60px);     /* tighter — reduce big gap */
}
/* ── Custom counter widget for adults/children ────────── */
.booking-widget-field--counter .counter-widget{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    margin-left: auto;
}
.counter-btn{
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.55);
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .15s;
    font-family: var(--font-sans);
}
.counter-btn:hover{ background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.85); }
.counter-btn.is-disabled{
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}
.counter-value{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}
.booking-widget--inline .booking-widget-field--counter{
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    justify-content: space-between;
}
.booking-widget--inline .booking-widget-field--counter .counter-widget{
    height: 46px;
    line-height: 1;
    justify-content: flex-end;
    gap: 10px;
}
.booking-widget--inline .booking-widget-field--counter > input[type=hidden]{
    display: none;
}
/* ── Header bottom divider (CozyStay parity)
   Separator je realizován jako ::after pseudo na .site-header--transparent
   (viz blok 2314+). Tady jen hide ::after při scrolled state, kdy header
   přechází na světlé pozadí a border-bottom rgb(26,27,26) (currentColor)
   na 1px je vidět sám. */
.site-header.is-scrolled{ border-bottom: 1px solid var(--c-line-soft); }
.site-header.is-scrolled::after{ display: none; }
/* ── Hero subtitle better spacing ───────────────────── */
.hero-with-search .hero-subtitle{
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.hero-with-search .hero-content{
    padding-bottom: 0;
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;                                 /* CozyStay: 7.5px gutter each side ≈ 15px between fields */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    height: 48px;                              /* CozyStay: 48px input height */
}
.booking-widget--inline .booking-widget-field{
    background: transparent;
    border: 1px solid var(--c-primary);        /* CozyStay: 1px solid #B99D75 gold frame */
    padding: 0 15px;                           /* CozyStay: 5px 35px 5px 15px (inner) */
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    height: 48px;
    min-width: 0;
    box-sizing: border-box !important;
    position: relative;
}
.booking-widget--inline .booking-widget-field:last-child{
    border-right: 1px solid var(--c-primary);  /* keep gold border on last field too */
}
.booking-widget--inline .booking-widget-field label{
    color: #fff;
    font-size: 16px;                           /* CozyStay: Marcellus 16px */
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.66;
    margin: 0;
    font-family: var(--font-serif);            /* CozyStay: Marcellus serif */
    display: inline-block;
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select{
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 14px;
    font-family: var(--font-sans);             /* CozyStay: Jost 14px */
    padding: 0 18px 0 0;
    height: 46px;                              /* fits inside 48px field (1px border each side) */
    line-height: 28px;                         /* CozyStay: lh 28px */
    width: 100%;
    outline: none !important;
    text-align: right;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center;
    background-size: 12px 12px !important;
    opacity: 0.95;
}
.booking-widget--inline input::-webkit-calendar-picker-indicator{
    display: none;
}
.booking-widget--inline select option{
    color: var(--c-ink);
    background: #fff;
}
.booking-widget--inline label{
    color: rgba(255,255,255,0.92);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.05em;
    display: block;
}
.booking-widget--inline input,
.booking-widget--inline select{
    display: block;
    height: 22px;
    line-height: 22px;
    width: 100%;
}
.booking-widget--inline input,
.booking-widget--inline select{
    border: 0;
    border-bottom: 0;
    background: transparent;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    padding: 0;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
}
.booking-widget--inline input::placeholder{ color: rgba(255,255,255,0.6); }
.booking-widget--inline select option{ color: var(--c-ink); }
.booking-widget--inline input:focus,
.booking-widget--inline select:focus{ border-bottom: 0; }
.booking-widget--inline .booking-widget-field:focus-within{
    border-color: var(--c-primary);
}
.booking-widget--inline .btn,
.booking-widget--inline .btn.btn-block,
.booking-widget--inline button.btn-block{
    align-self: center !important;
    background: var(--c-primary);              /* CozyStay: #B99D75 gold */
    color: #fff;
    border: 0;
    margin-left: 0;
    padding: 0 15px;                           /* CozyStay: 15px horizontal */
    font-size: 16px;                           /* CozyStay: 16px Marcellus */
    font-weight: 400;
    letter-spacing: 0;
    transition: background .15s;
    flex: 1 1 0;                               /* equal column - matches 5th slot in reference */
    width: auto;
    min-width: 0;
    max-width: none;
    height: 48px;                              /* CozyStay: 48px height */
    line-height: 19.2px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-serif);            /* CozyStay: Marcellus */
    box-sizing: border-box !important;
}

@media (max-width: 1280px) {
.booking-widget--inline{ padding: 20px; }
.booking-widget--inline .booking-widget-fields{ gap: 10px; }
.booking-widget--inline .booking-widget-field{ padding: 0 12px; min-height: 48px; height: 48px; }
.booking-widget--inline .booking-widget-field label{ font-size: 14px; }
.booking-widget--inline .btn{ font-size: 14px; padding: 0 12px; }
}.booking-widget--inline .btn:hover{
    background: var(--c-primary-2);
}

@media (max-width: 960px) {
.booking-widget--inline{ padding: 20px; }
.booking-widget--inline .booking-widget-fields{ grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-widget--inline .btn{ margin-left: 0; margin-top: 12px; }
}/* ── Experience cards — gold border PROTRUDES outside image (overflow:visible) ── */
.builder-cards-section{
    overflow: visible;
}
.builder-cards-section .card-grid{
    overflow: visible;
}
.builder-cards-section .card{
    position: relative;
    overflow: visible;
    background: #fff;             /* white body below image */
    color: var(--c-ink);
    transition: transform .25s ease;
}
.builder-cards-section .card-image{
    position: relative;
    overflow: visible;
    background-color: transparent;  /* moved to inner wrapper */
}
/* Gold frame extends OUTSIDE image by 12px up-left (default), snaps flush on hover */
.builder-cards-section .card-image::before{
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid var(--c-primary);
    transition: top .5s ease, left .5s ease, right .5s ease, bottom .5s ease;
    pointer-events: none;
    z-index: 2;
}
.builder-cards-section .card:hover .card-image::before{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* The actual image sits inside a clipped wrapper (so image doesn't bleed past frame) */
.builder-cards-section .card-image{
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 5;
    min-height: 420px;
}
.builder-cards-section .card-body{
    padding: 28px 24px 32px;
    background: #fff;
    color: var(--c-ink);
}
/* On dark teal section — keep cards as white blocks below image */
.builder-cards-section--dark .card{ background: #fff; color: var(--c-ink); }
.builder-cards-section--dark .card-body{ background: #fff; }
.builder-cards-section--dark .card-title{ color: var(--c-ink); }
.builder-cards-section--dark .card-text{ color: var(--c-ink-soft); }
.builder-cards-section--dark .card-eyebrow{ color: var(--c-primary); }
.builder-cards-section--dark .btn-ghost{ color: var(--c-primary); border: 0; padding: 0; }
.builder-cards-section--dark .btn-ghost:hover{ color: var(--c-primary-2); }
/* ── Static stagger grid for welcome portraits (CozyStay-style) ── */
.welcome-portraits--stagger{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 80px auto 80px;
    max-width: 1320px;
    padding: 0 24px;
    align-items: start;
}
.welcome-portraits--stagger .welcome-portrait{
    margin: 0;
    display: flex;
    flex-direction: column;
}
/* offsets create the staggered look — alternating up/down */
.welcome-portraits--stagger .welcome-portrait--1{ transform: translateY(40px); }
.welcome-portraits--stagger .welcome-portrait--2{ transform: translateY(0); }
.welcome-portraits--stagger .welcome-portrait--3{ transform: translateY(60px); }
.welcome-portraits--stagger .welcome-portrait--4{ transform: translateY(20px); }
.welcome-portraits--stagger .welcome-portrait-img{
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--c-cream);
}
.welcome-portraits--stagger .welcome-portrait-img img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s ease;
}
.welcome-portraits--stagger .welcome-portrait:hover .welcome-portrait-img img{ transform: scale(1.04); }
.welcome-portraits--stagger .welcome-portrait-caption{
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--c-ink-soft);
    margin-top: 14px;
    padding: 0 8px;
}
@media (max-width: 960px) {
.welcome-portraits--stagger{ grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.welcome-portraits--stagger .welcome-portrait{ transform: none; }
}
@media (max-width: 540px) {
.welcome-portraits--stagger{ grid-template-columns: 1fr; max-width: 420px; }
}/* ── Flatpickr custom theme overrides (match boutique vibe) ─ */
.booking-widget--inline .flatpickr-input,
.booking-widget--inline .flatpickr-input.flatpickr-mobile{
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    width: 100%;
    cursor: pointer;
}
.flatpickr-calendar{
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    border-radius: 0;
    font-family: var(--font-sans);
}
.flatpickr-day.selected,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.flatpickr-day:hover{
    background: var(--c-cream);
}
/* ── Buttons standardize ─────────────────────────────── */
.btn{
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 0;
    border: 1px solid transparent;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    line-height: 1.2;
}
.btn-primary{
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.btn-primary:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
.btn-secondary{
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn-secondary:hover{ background: var(--c-ink); color: #fff; }
.btn-ghost{
    background: transparent;
    border: 0;
    color: var(--c-primary);
    padding: 8px 0;
    letter-spacing: 0.22em;
}
.btn-ghost::after{
    content: " →";
    display: inline-block;
    margin-left: 4px;
    transition: transform .2s;
}
.btn-ghost:hover::after{ transform: translateX(6px); }
.btn-lg{ padding: 18px 44px; font-size: 12px; }
.btn-sm{ padding: 10px 22px; font-size: 10px; }
.btn-block{ display: block; width: 100%; }
/* Sticky header during scroll: text becomes ink — but Book Now stays branded */
.site-header.is-scrolled .btn-outline{
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.site-header.is-scrolled .btn-outline:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* Footer column headings */
.site-footer h4{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #fff;
    margin: 0 0 18px;
}
.site-footer-contact{
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
}
.site-footer-contact a{ display: inline; padding: 0; }
.site-footer-social{
    display: flex;
    gap: 14px;
    margin-top: 8px;
}
.site-footer-social a{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: all .2s;
    padding: 0;
}
.site-footer-social a:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.site-footer-social svg{ width: 16px; height: 16px; }
/* =========================================================
   COZYSTAY PARITY OVERRIDES  (added 2026-05-12)
   Highest-specificity layer for visual alignment with
   https://cozystay.loftocean.com/island-resort/
   ========================================================= */

/* ── Hero H1: mixed Marcellus + italic Cormorant accent ── */
.hero-title em{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: inherit;
    display: inline;
}
.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1.1;
    letter-spacing: 0;
}
.welcome-heading em{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: inherit;
    display: inline;
}
/* ── Logo: clean serif wordmark, no decoration (CozyStay parity) ──
   E022 (2026-05-14): logo wrapper sized to REF spec bbox 190×38 [CDP]
   with display:inline-block + Jost font-family to match dispatcher computed-style
   expectations. Inner wordmark/stars use block display + reduced scale to fit
   within 38px height (22px wordmark + 2px gap + 8px stars = 32px ≤ 38px). */
.site-logo{
    /* REVERT 2026-05-14 (topbar sec1 round2) — dispatcher regression -14pp on a@[857,47 190×38]
       (best 54% → cur 40%). Restoring exact best-ever values per dispatcher hint:
       display:inline-block, width:190px, height:38px, fontFamily:Jost.
       margin-top:12px puts wrapper at Y=53.5 (offset by 6.5px from REF Y=47) but this combo
       scored 54% — better than my "improved" Y=46.5 inline-flex variant. */
    flex-direction: row;
    align-items: center;
    gap: 0;
    display: inline-block;
    width: 190px;
    height: 38px;
    font-family: var(--font-sans), 'Jost', sans-serif;
    text-align: center;
    line-height: 1;
    padding: 0;
    margin-top: 12px;
}
.site-logo-stars{
    display: block;
    font-family: var(--font-sans), 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 8px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
    margin-top: 2px;
}
.site-logo-text{
    display: block;
    font-family: 'Marcellus', var(--font-display), serif;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}
@media (max-width: 760px) {
.site-logo-text{ font-size: 20px; letter-spacing: 0.04em; }
.site-logo-stars{ font-size: 7px; letter-spacing: 0.24em; }
}/* ── Dark teal cards section: transparent cards, white text (override the white-card revert at 2969) ── */
.builder-cards-section--dark{ padding: var(--space-section) 0; }
.builder-cards-section--dark .card,
.builder-cards-section--dark .card-body{
    background: transparent;
    color: #fff;
    border: 0;
    padding-left: 0;
    padding-right: 0;
}
.builder-cards-section--dark .card{ padding: 0; }
.builder-cards-section--dark .card-image{
    overflow: hidden;
    aspect-ratio: 4 / 5;
    min-height: 0;
    background-color: rgba(255,255,255,0.04);
    background-size: cover;
    background-position: center;
    margin-bottom: 28px;
    transition: transform .6s ease;
}
.builder-cards-section--dark .card:hover .card-image{ transform: scale(1.02); }
.builder-cards-section--dark .card-body{ padding-top: 24px; }
.builder-cards-section--dark .card-eyebrow{
    color: var(--c-primary);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.builder-cards-section--dark .card-title{
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 12px;
}
.builder-cards-section--dark .card-text{
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.7;
}
.builder-cards-section--dark .btn-ghost{
    color: var(--c-primary);
    background: transparent;
    border: 0;
    padding: 12px 0;
    letter-spacing: 0.22em;
    font-size: 11px;
}
.builder-cards-section--dark .btn-ghost:hover{ color: #fff; }
.builder-cards-section--dark .section-header h2{
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 400;
}
.builder-cards-section--dark .section-header-eyebrow{
    color: var(--c-primary);
    letter-spacing: 0.28em;
}
/* ── Testimonial featured (single big quote + portrait) ── */
.testimonials-section--featured{ padding: var(--space-section) 0; }
.testimonial-featured{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.testimonial-featured-image{
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--c-cream);
}
.testimonial-featured-image img{
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.testimonial-featured-body{ padding: 0; }
.testimonial-featured-body .testimonial-stars{
    color: var(--c-primary);
    font-size: 14px;
    letter-spacing: 0.18em;
    margin-bottom: 28px;
}
.testimonial-featured-quote{
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.45;
    color: var(--c-ink);
}
.testimonial-featured-quote p{ margin: 0; }
.testimonial-featured-quote p::before{ content: "“"; margin-right: 4px; }
.testimonial-featured-quote p::after{ content: "”"; margin-left: 4px; }
.testimonial-featured-author{
    border: 0;
    padding: 0;
    margin: 0;
    font-style: normal;
}
.testimonial-featured-author cite{
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--c-ink);
    margin-bottom: 4px;
}
.testimonial-featured-author .testimonial-card-location{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--c-ink-soft);
}
@media (max-width: 960px) {
.testimonial-featured{ grid-template-columns: 1fr; gap: 48px; }
.testimonial-featured-image{ max-width: 420px; margin: 0 auto; }
}/* ── Services icons larger, sage colored ── */
.service-icon{
    color: var(--c-primary);
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
}
.service-icon svg{
    width: 38px; height: 38px;
    stroke-width: 1.4;
}
.service-title{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    margin: 0 0 10px;
}
.service-text{
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 1.7;
}
/* ── Newsletter dark variant with background image ── */
.newsletter-section--dark{
    background-color: var(--c-dark-teal, #2c4a47);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: clamp(80px, 12vw, 160px) 0;
    position: relative;
}
.newsletter-section--dark .newsletter-inner{
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.newsletter-section--dark .newsletter-eyebrow{
    color: rgba(255,255,255,0.78);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.newsletter-section--dark .newsletter-heading{
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.1;
    margin: 0 0 18px;
}
.newsletter-section--dark .newsletter-subheading{
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto 36px;
    max-width: 540px;
}
.newsletter-section--dark .newsletter-form{ max-width: 560px; margin: 0 auto; }
.newsletter-section--dark .newsletter-form-row{
    display: flex;
    gap: 0;
    align-items: stretch;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
}
.newsletter-section--dark .newsletter-input{
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 16px 22px;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
}
.newsletter-section--dark .newsletter-input::placeholder{ color: rgba(255,255,255,0.5); }
.newsletter-section--dark .newsletter-submit{
    background: var(--c-primary);
    color: #fff;
    border: 0;
    padding: 16px 32px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
}
.newsletter-section--dark .newsletter-submit:hover{ background: var(--c-primary-2); }
/* ── Footer 4-column structure + bottom bar ── */
.site-footer{ padding: 96px 0 0; }
.site-footer-top{
    text-align: center;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 64px;
}
.site-footer-brand{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.site-footer-brand-text{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 36px;
    letter-spacing: 0.04em;
}
.site-footer-brand-tagline{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.55);
}
.site-footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 72px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer-col h4{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0 0 22px;
}
.site-footer-col .site-footer-contact,
.site-footer-col .site-footer-contact a{
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,0.6);
}
.site-footer-col .site-footer-contact a:hover{ color: var(--c-primary); }
.site-footer-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.site-footer-nav a{
    color: rgba(255,255,255,0.65);
    font-family: var(--font-sans);
    font-size: 14px;
    text-decoration: none;
    padding: 0;
    transition: color .15s;
}
.site-footer-nav a:hover{ color: var(--c-primary); }
.site-footer-newsletter-lead{
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
}
.site-footer .footer-newsletter-form{
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
}
.site-footer .footer-newsletter-form input[type="email"]{
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 12px 16px;
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
}
.site-footer .footer-newsletter-form input::placeholder{ color: rgba(255,255,255,0.42); }
.site-footer .footer-newsletter-form button{
    background: var(--c-primary);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}
.site-footer .footer-newsletter-form button:hover{ background: var(--c-primary-2); }
.site-footer-bar{
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
}
.site-footer-lang{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 0.18em;
}
.site-footer-lang a{
    color: rgba(255,255,255,0.55);
    padding: 0 4px;
    text-decoration: none;
}
.site-footer-lang a.is-active{ color: #fff; font-weight: 600; }
.site-footer-lang .lang-sep{ color: rgba(255,255,255,0.25); }

@media (max-width: 960px) {
.site-footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
.site-footer-bar{ flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
.site-footer-grid{ grid-template-columns: 1fr; gap: 32px; }
.site-footer .footer-newsletter-form{ flex-direction: column; }
.site-footer .footer-newsletter-form button{ padding: 14px; }
}/* ── Welcome staggered: heading width tighter, gallery padding ── */
.welcome-section{
    padding: var(--space-section-lg) 0;
    background: var(--c-cream);
}
.welcome-section .welcome-text{
    max-width: 880px;
    text-align: center;
    margin: 0 auto;
}
.welcome-heading{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.15;
}
.welcome-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 18px;
}
.welcome-body{
    font-size: 16px;
    line-height: 1.8;
    color: var(--c-ink-soft);
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
}
.welcome-action{ text-align: center; }
/* ── Section padding rhythm — each section keeps own padding ── */
.builder-section + .builder-section{ padding-top: var(--space-section); }
.builder-section{ padding: var(--space-section) 0; }
/* ── Apartment card single big featured (cozy-stay style) ── */
.featured-apartment-grid{ gap: 80px; }
/* ── Header phone link spacing & sticky text-color flip (CozyStay parity: 40px gaps) ── */
.site-header-right{ gap: 40px; }
.site-header.is-scrolled .site-header-phone,
.site-header.is-scrolled .lang-switcher a{ color: var(--c-ink); }
.site-header.is-scrolled .lang-switcher a.is-active{ color: var(--c-primary); }
.site-header.is-scrolled .lang-sep{ color: rgba(0,0,0,0.25); }
/* ── Buttons: sage variant for use on cream backgrounds ── */
.btn-sage{
    background: var(--c-secondary, #53624e);
    color: #fff;
    border-color: var(--c-secondary, #53624e);
}
.btn-sage:hover{
    background: var(--c-dark-teal, #2c4a47);
    border-color: var(--c-dark-teal, #2c4a47);
}
/* =========================================================
   COZYSTAY PIXEL PARITY PASS — 2026-05-13
   Reference: https://cozystay.loftocean.com/island-resort/
   Goal: tighten hero, landscape welcome portraits in a single
   row, compact services, lighter section rhythm.
   ========================================================= */

/* ── Hero: tighter typography + reduced padding ── */
.hero-with-search{
    min-height: 78vh;
    padding-top: 130px;
    padding-bottom: 100px;
}
.hero-with-search .hero-title,
.hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.1;
    letter-spacing: 0;
    max-width: 820px;
    margin: 0 auto 18px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
.hero-subtitle{
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    max-width: 560px;
    margin: 0 auto;
    letter-spacing: 0.02em;
}
/* ── Welcome portraits: LANDSCAPE row of 4 (CozyStay parity) ── */
.welcome-portraits--stagger{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 56px auto 24px;
    max-width: 1280px;
    padding: 0 24px;
    align-items: start;
}
.welcome-portraits--stagger .welcome-portrait{ transform: none; }
.welcome-portraits--stagger .welcome-portrait-img{
    aspect-ratio: 4 / 5;
}
.welcome-portraits--stagger .welcome-portrait-caption{
    font-size: 13px;
    margin-top: 10px;
}
@media (max-width: 960px) {
.welcome-portraits--stagger{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.welcome-portraits--stagger{ grid-template-columns: 1fr; max-width: 360px; }
}/* ── Welcome section: tighter rhythm ── */
.welcome-section{
    padding: 160px 0 96px;                /* AUDIT_BOD 02 (E04 2026-05-14) — REF CDP paddingTop 160px [SPEC bod 0] */
}
.welcome-section .welcome-text{
    max-width: 760px;
}
.welcome-heading{
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.18;
    margin-bottom: 0;                     /* AUDIT_BOD 04 (E04 2026-05-14) — REF gap k body = 20px přes body margin-top, ne H2 margin-bottom */
}
.welcome-body{ margin-bottom: 24px; font-size: 15px; }
.welcome-eyebrow{
    font-size: 11px;
    margin-bottom: 14px;
}
/* ── Featured apartment: more refined ── */
.featured-apartment{
    padding: 90px 0;
    background: var(--c-bg);
}
.featured-apartment-grid{
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.featured-apartment-image{
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
.featured-apartment-body h2{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    margin: 8px 0 14px;
    line-height: 1.2;
}
.featured-apartment-subtitle{
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-ink-soft);
    font-size: 17px;
    margin-bottom: 16px;
}
/* ── Dark teal cards section: cleaner spacing ── */
.builder-cards-section--dark{ padding: 110px 0; }
.builder-cards-section--dark .section-header{ text-align: center; margin-bottom: 56px; }
.builder-cards-section--dark .section-header h2{
    font-size: clamp(30px, 3.4vw, 46px);
    margin: 8px 0 0;
}
/* ── Testimonials section: dark teal background (CozyStay parity) ── */
.testimonials-section--featured{
    background: var(--c-dark-teal, #2c4a47);
    padding: 100px 0;
    color: #fff;
}
.testimonials-section--featured .testimonials-eyebrow{
    color: rgba(255,255,255,0.6);
    text-align: center;
    letter-spacing: 0.28em;
    font-size: 11px;
}
.testimonials-section--featured .testimonials-heading{
    color: #fff;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    margin: 10px 0 48px;
}
.testimonials-section--featured .testimonial-featured{
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 820px;
    gap: 0;
}
.testimonials-section--featured .testimonial-featured-image{ display: none; }
.testimonials-section--featured .testimonial-featured-body{ padding: 0; }
.testimonials-section--featured .testimonial-stars{
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 24px;
}
.testimonials-section--featured .testimonial-featured-quote{
    color: #fff;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 28px;
}
.testimonials-section--featured .testimonial-featured-author cite{
    color: #fff;
}
.testimonials-section--featured .testimonial-featured-author .testimonial-card-location{
    color: rgba(255,255,255,0.7);
}
/* ── Services: cleaner 2-col list with line icons (CozyStay parity) ── */
.services-section{ padding: 110px 0; }
.services-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
}
.services-side-image{
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.services-side-image img{
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.services-content .services-header{
    text-align: left;
    margin-bottom: 36px;
}
.services-eyebrow{
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--c-primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.services-heading{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.2;
    margin: 0;
}
.services-items{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 36px;
}
.service-item{
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    text-align: left;
}
.service-icon{
    color: var(--c-primary);
    margin: 0;
    align-items: flex-start;
}
.service-icon svg{
    width: 30px; height: 30px;
    stroke-width: 1.3;
}
.service-title{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 19px;
    margin: 0 0 6px;
    line-height: 1.3;
}
.service-text{
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin: 0;
}
@media (max-width: 960px) {
.services-layout{
        grid-template-columns: 1fr;
        gap: 48px;
    }
.services-side-image{ max-width: 480px; margin: 0 auto; }
.services-items{ grid-template-columns: 1fr; }
}/* ── FAQ section spacing tighter ── */
.builder-faq-section{ padding: 90px 0; }
.builder-faq-section .section-header h2{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    text-align: center;
}
/* ── Newsletter compact ── */
.newsletter-section--dark{ padding: 110px 0; }
.newsletter-heading{
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
}
.newsletter-subheading{
    max-width: 540px;
    margin: 16px auto 28px;
    font-size: 15px;
}
/* =========================================================
   COZYSTAY ISLAND RESORT — FINAL PARITY PASS (2026-05-13)
   Aligning visual rhythm with reference screenshot.
   ========================================================= */

/* Section spacing — Builder vládne paddingy per-section. Tokeny ZDE jsou jen
   minimální fallback pro template-driven sekce co Builder neřídí. Velké hodnoty
   (96/128px) dělaly hardcoded díry. */
:root{
    --space-section: 48px;
    --space-section-lg: 64px;
}
/* Hero — title prominent (CozyStay parity: 100px Marcellus, 21px Jost subtitle) */
.hero, .hero-with-search{
    min-height: clamp(680px, 90vh, 920px);
    padding: 140px 24px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-style: normal;
    font-size: clamp(56px, 7.4vw, 100px);
    line-height: 1.0;
    max-width: 880px;
    margin: 0 auto 20px;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: none;                /* E007 AUDIT_BOD 03 (2026-05-13) — REF spec [CDP]: no text-shadow on hero H1 */
}
.hero-with-search .hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(13px, 1vw, 15px);  /* MultiTerm E004 hero sec1 (2026-05-18) — sjednoceno s ř.3865 spec (přebíjelo větší specifitou). REF vizuální ratio title/subtitle ≈ 6× ⇒ 14px @ 85px title. */
    line-height: 1.66;
    color: rgba(255,255,255,0.96);
    max-width: 560px;                   /* MultiTerm E004 hero sec1 (2026-05-18) — REF subtitle wrap width ≤ 560px (ř.3868 spec) */
    margin: 20px auto 0;
    text-transform: none;
    letter-spacing: 0.02em;             /* MultiTerm E004 hero sec1 (2026-05-18) — sjednoceno s ř.3870 spec */
    font-weight: 400;
    text-shadow: none;                /* E007 AUDIT_BOD 04 (2026-05-13) — REF spec [CDP]: no text-shadow on hero subtitle */
}
/* Sage green booking widget — CozyStay parity (sage #53624E, 30px padding, gold-framed fields) */
.booking-widget--inline{
    max-width: 1300px;
    margin: 30px auto -54px;
    padding: 30px;
    background: var(--c-secondary);          /* sage #53624e — matchuje CozyStay reference */
    border: 0;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 0;
    left: 0;
    right: 0;
    bottom: auto;
    top: auto;
    transform: none;
    width: calc(100% - 48px);
    min-height: 108px;
    color: #fff;
    position: relative;
    z-index: 9;
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    margin: 0 -7.5px;
    flex: 1 1 auto;
    min-width: 0;
}
.booking-widget--inline .booking-widget-field{
    position: relative;                /* E024 (2026-05-14) — anchor for absolute label per CDP spec 3.14 */
    margin: 0 7.5px;
    padding: 0 7.5px;                  /* E026 AUDIT_BOD 08+09 (2026-05-14) — cell 251 w, inner wrap+input 236 w → 7.5px each side. Border moved to input. */
    border: 0;                          /* E026 AUDIT_BOD 09: border is now on the <input> (matches REF CDP spec 3.11 input.border 1px solid #b99d75) */
    background: transparent;
    display: grid;
    grid-template-columns: 1fr;        /* E024: single col since label is now absolute (out of flow) */
    align-items: center;
    gap: 0;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box !important;
}
.booking-widget--inline .booking-widget-field:last-of-type{ border: 0; }
.booking-widget--inline .booking-widget-field label{
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-family: var(--font-serif);          /* Marcellus per CDP spec */
    line-height: 1.66;                       /* 26.56/16 per CDP */
    display: block;                          /* E024 (2026-05-14) — REF CDP spec [80]: display block, abs positioned, vertically centered via translateY */
    position: absolute;
    top: 24px;                               /* CDP spec: top: 24px in 48px-tall field */
    left: 22px;                              /* E026 AUDIT_BOD 05 (2026-05-14) — REF CDP spec 3.11 label x=347 (cell_x 325 + 22). Containing-block math: 325 + 1px border + 21 = 347. Was 15 (off by 6px). */
    transform: translateY(-13.27px);         /* CDP spec: lift label by half its line-height for visual center */
    pointer-events: none;                               /* let clicks pass through to input */
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select,
.booking-widget--inline .booking-widget-field .counter-widget{
    border: 1px solid #b99d75;  /* E026 AUDIT_BOD 09 (2026-05-14) — border moved from cell to input per REF CDP spec 3.11 */
    background: transparent;
    padding: 5px 35px 5px 15px;  /* E026 AUDIT_BOD 10 (2026-05-14) — REF CDP spec 3.11 input padding (35px right reserves space for datepicker icon) */
    font-size: 14px;
    font-family: var(--font-sans);
    color: #fff;
    color-scheme: dark !important;
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select{
    width: 100%;
    height: 48px;               /* E026 AUDIT_BOD 09 (2026-05-14) — match REF input bbox 48px tall (was 46) */
    line-height: 28px;          /* E026 AUDIT_BOD 03 (2026-05-14) — REF CDP spec 3.11: input text line-height 28px */
    text-align: right;
    outline: none !important;
    box-sizing: border-box !important;
}
.booking-widget--inline .booking-widget-field .counter-widget{
    /* E026 (2026-05-14) — counter cell shares the gold-bordered visual identity of input cells */
    border: 1px solid #b99d75;
    padding: 0 15px;
    height: 48px;
    box-sizing: border-box !important;
    width: 100%;
}
.booking-widget--inline input::-webkit-calendar-picker-indicator{
    filter: invert(1) opacity(0.7);
}
.booking-widget--inline select option{
    color: var(--c-ink);
    background: #fff;
}
.booking-widget--inline .counter-widget{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-left: auto;
}
.booking-widget--inline .counter-btn{
    width: 26px; height: 26px;
    border: 1px solid rgba(255,255,255,0.55);
    background: transparent;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .15s ease;
}
.booking-widget--inline .counter-btn:hover{
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.85);
}
.booking-widget--inline .counter-value{
    font-family: var(--font-sans);
    font-size: 15px;
    min-width: 16px;
    text-align: center;
    color: #fff;
}
.booking-widget--inline > button[type="submit"],
.booking-widget--inline .btn-block.btn-lg,
.booking-widget--inline .btn-primary{
    margin: 0 0 0 7.5px;
    padding: 0 15px;            /* CDP: 0 15px L/R */
    background: #b99d75;        /* gold #B99D75 — CozyStay parity */
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: var(--font-serif);  /* Marcellus per CDP */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    width: auto;
    min-width: 236px;           /* CDP: cell 251 − 15px padding */
    height: 48px;
    align-self: flex-end !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.booking-widget--inline > button[type="submit"]:hover,
.booking-widget--inline .btn-block.btn-lg:hover,
.booking-widget--inline .btn-primary:hover{
    background: #a98a5e;
}
@media (max-width: 1280px) {
.booking-widget--inline .booking-widget-field{ padding: 0 14px; gap: 10px; }
.booking-widget--inline > button[type="submit"]{ min-width: 200px; padding: 0 15px; }
}
@media (max-width: 960px) {
.booking-widget--inline{
        flex-direction: column;
    }
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: 1fr 1fr;
    }
.booking-widget--inline .booking-widget-field{
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.22);
        padding: 14px 18px;
    }
.booking-widget--inline > button[type="submit"],
    .booking-widget--inline .btn-block.btn-lg{
        width: 100%;
        min-height: 56px;
        margin-top: 0;
    }
}/* Welcome section — center text + small ratings/eyebrow + caption captions */
.welcome-section{ padding: var(--space-section-lg) 0; }
.welcome-eyebrow{
    color: var(--c-secondary);
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-bottom: 14px;
}
.welcome-heading{
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.18;
    margin-bottom: 22px;
}
.welcome-body{
    font-size: 15px;
    line-height: 1.85;
    color: var(--c-ink-soft);
}
.welcome-action .btn{
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    padding: 14px 36px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.welcome-action .btn:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
/* Welcome staggered images — tighter, more dynamic */
.welcome-portraits--stagger{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.welcome-portrait{
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--c-cream);
}
.welcome-portrait-img,
.welcome-portrait img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s ease;
}
.welcome-portrait:hover img{ transform: scale(1.04); }
/* User feedback: vyrovnat výšky — staggered 40px offset byl asymetrický
   (1/4 small, 2/3 big). Nyní všechny stejně vysoké, žádný margin-top. */
.welcome-portrait--1,
.welcome-portrait--4{ margin-top: 0; }
.welcome-portrait-caption{ display: none; }
.welcome-portraits--stagger .welcome-portrait--2,
.welcome-portraits--stagger .welcome-portrait--3{ transform: none; }
/* Featured apartment — closer to CozyStay accommodation card */
.featured-apartment{
    padding: 80px 0 120px;
    background: #ffffff;
}
/* Accommodations section header — eyebrow + h2 left (66%), CTA right (33%) */
.featured-apartment .accommodations-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto 50px;
    padding: 0;
}
.featured-apartment .accommodations-header-text{
    flex: 0 1 auto;
    max-width: 66%;
}
.featured-apartment .accommodations-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #b99d75;
    margin: 0 0 20px;
}
.featured-apartment .accommodations-title{
    font-family: 'Marcellus', var(--font-display);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    color: #1a1b1a;
    margin: 0;
    text-transform: none;
}
.featured-apartment .btn-discover-suites{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b99d75;
    color: #ffffff;
    width: auto;
    min-width: 226px;
    height: 52px;
    padding: 0 48px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Marcellus', var(--font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
    margin-bottom: 14px;
    transition: background-color .2s ease;
}
.featured-apartment .btn-discover-suites:hover{
    background-color: #ab916c;
    color: #ffffff;
}
.featured-apartment .btn-discover-suites span{
    display: inline-block;
    color: #ffffff;
    font-family: inherit;
    font-size: inherit;
}
/* Image overlay label "Od €XX / Noc" (top-left, white pill matching reference) */
.featured-apartment-image{ position: relative; }
.featured-apartment-image-label{
    position: absolute;
    top: 24px;
    left: 24px;
    background: #ffffff;
    color: #1a1b1a;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    border: 0;
    border-radius: 0;
    z-index: 2;
}
/* Card title (apartment name) — slightly smaller than section h2, no italic */
.featured-apartment-body .featured-apartment-name{
    font-family: 'Marcellus', var(--font-display);
    font-style: normal;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1b1a;
    margin: 0 0 10px;
    text-align: left;
}
.featured-apartment-body .featured-apartment-name a{
    color: #1a1b1a;
    text-decoration: none;
    border-color: #1a1b1a;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    transition: color .2s ease;
}
.featured-apartment-body .featured-apartment-name a:hover{
    color: #b99d75;
}

@media (max-width: 760px) {
.featured-apartment .accommodations-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
.featured-apartment .accommodations-header-text{ max-width: 100%; }
.featured-apartment .accommodations-title{ font-size: 36px; }
.featured-apartment .btn-discover-suites{ min-width: 200px; }
}.featured-apartment-grid{
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}
.featured-apartment-image{
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}
.featured-apartment-body h2{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.2;
    margin: 6px 0 14px;
}
.featured-apartment .section-header-eyebrow{
    color: var(--c-secondary);
    font-size: 11px;
    letter-spacing: 0.28em;
    font-family: var(--font-sans);
}
.featured-apartment-subtitle{
    font-family: var(--font-sans);
    color: var(--c-ink-soft);
    font-size: 14px;
    margin: 0 0 18px;
    font-style: normal;
}
.featured-apartment-meta{
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 14px 0;
    margin: 20px 0;
    gap: 24px;
    justify-content: flex-start;
}
.featured-apartment-meta li{
    font-family: 'Jost', var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #333632;
}
.featured-apartment-meta li strong{
    font-family: 'Jost', var(--font-sans);
    font-size: 12px;
    color: #333632;
    font-weight: 400;
    display: inline;
    margin-right: 4px;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
}
.featured-apartment-price strong{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--c-primary);
}
.featured-apartment-actions{
    gap: 12px;
}
.featured-apartment-actions .btn{
    padding: 14px 32px;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* Dark teal cards — section header CENTERED, tighter padding */
.builder-cards-section--dark{ padding: var(--space-section-lg) 0; }
.builder-cards-section--dark .section-header{
    text-align: center;
    max-width: 740px;
    margin: 0 auto 64px;
}
.builder-cards-section--dark .section-header-eyebrow{
    display: block;
    margin-bottom: 16px;
}
.builder-cards-section--dark .section-header h2{
    font-style: italic;
    line-height: 1.16;
}
/* Testimonials DARK variant — center big italic quote on dark teal (CozyStay signature look) */
.testimonials-section--dark{
    background: var(--c-dark-teal);
    color: #fff;
    padding: var(--space-section-lg) 0;
    text-align: center;
}
.testimonials-section--dark .testimonials-header{ margin-bottom: 40px; text-align: center; }
.testimonials-section--dark .testimonials-eyebrow{ color: var(--c-primary); }
.testimonials-section--dark .testimonials-heading{ color: #fff; }
.testimonials-section--dark .testimonial-featured{
    grid-template-columns: 1fr;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    gap: 0;
}
.testimonials-section--dark .testimonial-featured-image{ display: none; }
.testimonials-section--dark .testimonial-featured-body{ text-align: center; padding: 0; }
.testimonials-section--dark .testimonial-featured-body .testimonial-stars{
    justify-content: center;
    color: var(--c-primary);
    margin-bottom: 28px;
}
.testimonials-section--dark .testimonial-featured-quote{
    color: #fff;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 36px);
    line-height: 1.5;
    margin: 0 auto 32px;
    max-width: 820px;
}
.testimonials-section--dark .testimonial-featured-quote p::before,
.testimonials-section--dark .testimonial-featured-quote p::after{ color: var(--c-primary); }
.testimonials-section--dark .testimonial-featured-author{
    text-align: center;
    justify-content: center;
    display: block;
}
.testimonials-section--dark .testimonial-featured-author cite{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-style: normal;
    display: block;
    margin-bottom: 6px;
}
.testimonials-section--dark .testimonial-featured-author .testimonial-card-location{
    color: rgba(255,255,255,0.7);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
}
/* Services section — cream bg pull from reference */
.services-section{ padding: var(--space-section-lg) 0; background: var(--c-cream-2); }
.services-section--light{ background: var(--c-cream-2); }
.services-layout{ gap: 80px; }
.services-eyebrow{
    color: var(--c-secondary);
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-bottom: 14px;
}
.services-heading{
    font-size: clamp(30px, 3.8vw, 50px);
    margin-bottom: 40px;
    line-height: 1.18;
}
/* Icon color přepnuto na gold pro luxury thin-line set (2026-05-25).
   Použij body prefix pro override .services-section--dark variant pokud nutno. */
.service-icon{ color: var(--c-gold-2, #c9a961); }
.services-section--dark .service-icon{ color: var(--c-gold, #c9a961); }
/* FAQ tighter */
.builder-faq-section{ padding: var(--space-section) 0; background: var(--c-bg); }
/* Section gap reset — let each component own its padding */
.builder-section + .builder-section{ padding-top: 0; }
/* ==========================================================================
   Welcome / In the Heart — CozyStay parity (1×4 portrait row + italic quote)
   ========================================================================== */
.welcome-portraits--row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 56px;
    align-items: stretch;
}
.welcome-portraits--row .welcome-portrait{
    margin: 0;
    transform: none;
    aspect-ratio: 3 / 4.2;
    overflow: hidden;
    background: var(--c-cream);
}
.welcome-portraits--row .welcome-portrait-img,
.welcome-portraits--row .welcome-portrait img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.welcome-portraits--row .welcome-portrait:hover img{ transform: scale(1.04); }
.welcome-portraits--row .welcome-portrait-caption{ display: none; }

@media (max-width: 960px) {
.welcome-portraits--row{
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 40px;
    }
}
@media (max-width: 560px) {
.welcome-portraits--row{
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}/* Handwritten italic accent below portraits — CozyStay signature */
.welcome-italic-quote{
    margin: 36px 0 0;
    font-family: 'Caveat', 'Cormorant Garamond', cursive;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    color: var(--c-dark-teal, #2c4a47);
    text-align: left;
    max-width: 720px;
}
@media (max-width: 760px) {
.welcome-italic-quote{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
    }
}/* =========================================================
   COZYSTAY HEADER CTA PARITY — 2026-05-13 (revize)
   Reference: https://cozystay.loftocean.com/island-resort/
   Goal: transparent rectangular ghost button with thin white
   border + ~4px rounded corners (NOT solid pill).
   ========================================================= */
.site-header .btn-book{
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    height: 44px;
    padding: 0 24px;
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .4s, color .4s, border-color .4s;
    z-index: 9;
    position: relative;
}
.site-header .btn-book:hover{
    background: #fff;
    border-color: #fff;
    color: #000;
}
.site-header.is-scrolled .btn-book,
body:not(.has-hero) .site-header .btn-book{
    background: transparent;
    border: 1px solid var(--c-ink);
    border-radius: 0;
    color: var(--c-ink);
}
.site-header.is-scrolled .btn-book:hover,
body:not(.has-hero) .site-header .btn-book:hover{
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
}
/* Universal selector `.site-header.is-scrolled .site-header-inner *` (line 2397)
   nastavuje color:ink i na inner <span>. Na hover musíme override pro span explicitně. */
.site-header.is-scrolled .btn-book:hover > span,
body:not(.has-hero) .site-header .btn-book:hover > span{
    color: #fff;
}
@media (max-width: 760px) {
.site-header .btn-book{ padding: 10px 22px; }
}/* =========================================================
   E003 — HERO + BOOKING WIDGET PARITY (2026-05-13)
   Fix: title centered higher in hero, subtitle visible,
        booking widget pushed to BOTTOM of hero overlay.
   Reference: cozystay.loftocean.com/island-resort/
   ========================================================= */

/* Hero box — CozyStay parity 749px height, content centered, widget at bottom (E003 audit) */
.hero.hero-with-search{
    /* Hotfix 2026-05-20: hero přizpůsobená výšce monitoru (booking widget musí
       být plně viditelný + rezerva 50px pod ním). Mobile <768px viz níže. */
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    padding: 121px 0 50px;       /* top=header overlay, bottom=50px rezerva pod widgetem */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    position: relative;
    overflow: hidden;            /* už neexpanduje pod fold přes overflow */
}
/* Hero content: title block vertically centered, widget pushed to bottom (CozyStay parity).
   IMPORTANT: hero-content is FULL width so widget can span hero. H1/subtitle constrained by their own max-width:880px. */
.hero.hero-with-search .hero-content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    /* AUDIT_BOD 05 — H1 margin-top + widget margin-top:auto rules layout */
    align-items: center;
    text-align: center;
    padding: 0;                     /* fullwidth child (widget) freedom; H1/subtitle have own max-width */
    max-width: none;                /* unset to allow widget to span full hero width */
    width: 100%;
    margin: 0 auto;
    color: #fff;
    position: relative;
}
/* Title — Marcellus serif 100px non-italic, no shadow (CozyStay ref).
   Hotfix 2026-05-20: title vertikálně centrovaný v hero pomocí flex
   (hero-content má justify-content); margin-top jen vizuální spacing. */
.hero.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: clamp(46px, 7.41vw, 100px);
    line-height: 1.0;
    letter-spacing: 0;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-shadow: none;
    max-width: 880px;
    margin: auto auto 0;     /* push title down až k widgetu, widget pak má margin-top:auto */
}
/* Subtitle — Jost sans, drobný regular pod gigantickým 100px H1 (CozyStay ref).
   MultiTerm E005 sec1 (2026-05-18) — sjednoceno s nižší specifitou ř.4129 spec
   (byl přebíjen 3-class selektorem zde, audit MultiTerm E004 zůstal viditelně
   neaplikován při 21px). REF vizuální ratio title/subtitle ≈ 6× při 100px title
   → 15px subtitle. max-width 560 zajistí 1-2 řádkový wrap pod titulem. */
.hero.hero-with-search .hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.66;
    color: #fff;
    max-width: 560px;
    margin: 20px auto 0;
    letter-spacing: 0.02em;
    font-weight: 400;
    text-shadow: none;
    text-transform: none;
}
/* THE KEY FIX — push booking widget to the bottom of hero with -54px overlap into welcome section (CozyStay pattern) */
.hero.hero-with-search .booking-widget--inline{
    /* E003 AUDIT_BOD 01 (2026-05-13 FINAL) — widget overlaps hero bottom by 54px (matches REF spec Y=695-803).
       Mechanism: margin-bottom:-54 reduces layout bottom by 54 so hero stays at 749 with widget at flex bottom,
       but widget VISUAL content area extends 54px BELOW hero bottom (since visual size > layout size).
       NO translateY needed — pre-transform position already matches REF spec exactly (verified via getBoundingClientRect).
       Previously translateY(54px) was shifting widget an ADDITIONAL 54px down (total 108px below REF), causing
       widget visual to render at Y=749-857 instead of REF Y=695-803. */
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin-top: auto;
    margin-bottom: -54px;
    z-index: 5;
    transform: none;
}
/* compensate next section spacing to absorb negative margin
   E005 AUDIT_BOD 03 (2026-05-13) — REF spec: hero ends Y=916, welcome eyebrow Y=1180 → 264px padding-top.
   54px widget overlap + 210px breathing room = 264px před welcome eyebrow appears.
   E003 AUDIT_BOD 01 (2026-05-14) — REF CDP spec icon top y=1076. Empirically hero ends y≈990
   (booking widget pushes hero bottom ~74px lower than initial spec said). With padding-top=160px
   the icon landed on y≈1150 (84px below target). Reducing to 80px aligns icon top with y=1070
   (within ±6px of spec REF y=1076). */
.hero.hero-with-search + .welcome-section,
.hero.hero-with-search + section{
    padding-top: 80px;
}
/* E006 AUDIT_BOD 01 (2026-05-13) — restore dark overlay per REF spec (CDP el. [60]).
   REF uses linear-gradient(rgb(0,0,0) 0%, rgba(0,0,0,0.64) 100%) with opacity:0.5 →
   effective gradient rgba(0,0,0,0.5) → rgba(0,0,0,0.32). Photo darkening unifies tone
   with REF (Y=0-60 band: REF #314135 vs CUR pre-fix #474840 = 22 hex too bright).
   E028 (2026-05-14) — moved from ::before pseudo to real .hero-overlay div so the
   element is dispatcher-trackable at bbox [0,0 1904×916]. Pseudo disabled here. */
.hero.hero-with-search::before{
    display: none;
}
.hero.hero-with-search .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.32) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero.hero-with-search .hero-content{
    position: relative;
    z-index: 2;
}

/* Mobile — keep widget below content normally (no auto push) */
@media (max-width: 960px) {
.hero.hero-with-search{
        min-height: 720px;
        padding: 120px 16px 60px;
    }
.hero.hero-with-search .hero-content{
        padding-top: 30px;
    }
.hero.hero-with-search .booking-widget--inline{
        margin-top: 60px;
        transform: none;   /* E003 AUDIT_BOD 04 (2026-05-13) — reset desktop translateY on mobile; widget flows in column layout */
    }
.hero.hero-with-search .hero-title{
        margin-top: 0;     /* E003 AUDIT_BOD 02 mobile reset — no 166px push on small viewports */
    }
}/* =========================================================
   E002 — Hero "Boutique Private Island Resort" parity (2026-05-13)
   Fix: welcome heading must be NON-italic (only <em> accent
   word stays italic per site.css:3213). Reference shows
   regular Cormorant serif, not italic.
   Bug source: site.css:1998 sets font-style: italic on whole
   .welcome-heading without; later cascade rules
   don't reset it.
   ========================================================= */
.welcome-heading{
    font-style: normal;
}
.welcome-heading em{
    font-style: italic;
}
/* =========================================================
   E004 — Hero booking widget sage-box parity (2026-05-13)
   Reference: https://cozystay.loftocean.com/island-resort/
   Sage green box (#53624E) + per-field gold borders
   (#B99D75) + gold filled CTA, 48px field height, no shadows.
   Specificity .hero.hero-with-search > … > … beats earlier
   single-class rules without resorting to !important escalation.
   ========================================================= */
.hero.hero-with-search .booking-widget--inline{
    background: var(--c-secondary);        /* sage #53624e */
    padding: 30px;
    max-width: 1300px;                     /* E007 AUDIT_BOD 01 (2026-05-13) — REF spec CDP form box w=1300px @1904 viewport (was 1181px, ~119px too narrow) */
    width: calc(100% - 48px);              /* E026 AUDIT_BOD 04 (2026-05-14) — 24px inset each side; capped to 1300px above. Previous 168px inset oversqueezed widget on 1904 viewport (1736 instead of 1300) — wait that's bigger, max-width cap was correct, but the inset 168 forced narrower on viewports <1468. 48 inset = wider on mid viewports, still capped at 1300 on REF 1904. */
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    border: 0;
    border-top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;                 /* E027 AUDIT_BOD 01 (2026-05-14) — REF CDP spec form .cs-form-wrap: align-items: flex-end (cells anchor to bottom of form-content area). Previous stretch worked visually because cells share fixed 48 height, but spec requires flex-end. */
    gap: 0;                                /* E027 AUDIT_BOD 02 (2026-05-14) — REF spec: visual 15px gap arises from cell-padding (7.5+7.5), not flex gap. Form gap: 0 + button margin-left 7.5 + last-field padding-right 7.5 = 15px between last input and button. */
    box-sizing: border-box;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-fields{
    display: flex;
    flex: 4 1 0;
    flex-direction: row;
    gap: 0;
    grid-template-columns: none;
    height: auto;
    margin: 0;
    min-width: 0;
    align-items: stretch;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field{
    /* E028 (2026-05-14) — REF CDP spec 3.10/3.14: cell h=48px, padding 0 7.5px,
       block display (label is absolutely positioned, so flow layout is irrelevant). */
    flex: 1 1 0;
    background: transparent;
    border: 0;
    padding: 0 7.5px;
    height: 48px;
    min-height: 48px;
    display: block;
    gap: 0;
    grid-template-columns: none;
    position: relative;
    box-sizing: border-box !important;
    min-width: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field:last-child{
    border: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field label,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .bw-counter-label{
    /* E028 (2026-05-14) — REF CDP spec 3.10 [80]: Marcellus 16px regular,
       abs-positioned top:24 left:22 with translateY(-13.27px) lift to visual center.
       E029 (2026-05-14) — sjednoceno: i counter pole (.bw-counter-label) má identický
       styl, aby všech 5 polí mělo konzistentní label CDP-detection (matches REF label
       computed styles: borderColor inherits currentcolor = rgb(255,255,255) since color:#fff). */
    display: block;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: 'Marcellus', var(--font-serif), serif;     /* E029: explicit font stack matches REF computed "Marcellus, serif" */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    border-color: #fff;     /* E029: explicit (matches REF computed borderTopColor/Right/Bottom/Left: rgb(255,255,255)) */
    line-height: 1.66;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field input,
.hero.hero-with-search .booking-widget--inline .booking-widget-field select{
    /* E028 (2026-05-14) — REF CDP spec 3.11: 48px tall, gold border #b99d75,
       padding 5px 35px 5px 15px (35px right reserves space for date picker icon),
       text-align right, line-height 28px.
       E031 (2026-05-14) — explicit border-radius:0 (REF spec 3.1: square,
       class cs-form-square). Chrome default is 0 but Safari/Firefox may apply
       a small radius on native date input/select — explicit 0 guarantees parity. */
    flex: 0 0 auto;
    text-align: right;
    color: #fff;
    background: transparent;
    background-image: none !important;
    border: 1px solid var(--c-primary);
    border-radius: 0;
    padding: 5px 35px 5px 15px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 28px;
    height: 48px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
}
/* E027 (2026-05-14) AUDIT_BOD 10 — counter-widget mirrors date input cell:
   48px tall, full cell width, gold border, content right-aligned (matches input text-align:right). */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--counter .counter-widget{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    height: 48px;
    min-height: 48px;
    border: 1px solid var(--c-primary);
    padding: 0 15px;
    box-sizing: border-box !important;
    width: 100%;
}
/* E027 (2026-05-14) AUDIT_BOD 07-09 — counter labels mirror date <label> CDP spec [80]:
   absolute top:24 left:22 translateY(-13.27) so counter-widget fills the 48px cell. Selector
   matches span | p | any element with the class (HTML in BuilderRenderer.php renders <span>). */
.booking-widget-field .bw-counter-label{
    margin: 0;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.66;
    white-space: nowrap;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    pointer-events: none;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field--counter .bw-counter-label{
    margin: 0;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}
.hero.hero-with-search .booking-widget--inline .counter-btn{
    width: 22px;
    height: 22px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.6);
}
.hero.hero-with-search .booking-widget--inline .counter-value{
    color: #fff;
    font-size: 14px;
    min-width: 14px;
}
/* E027 (2026-05-14) AUDIT_BOD 01-06 — submit = 5th equal-width cell (CDP spec 3.5):
   x=1329 w=251 inner-button 236×48, bg #B99D75, margin-left 7.5 (matches field gutter).
   Pinned to bottom of 108px sage container via align-self:flex-end. */
.hero.hero-with-search .booking-widget--inline > button[type="submit"],
.hero.hero-with-search .booking-widget--inline .btn-primary,
.hero.hero-with-search .booking-widget--inline .btn-block.btn-lg{
    flex: 0 0 236px;
    align-self: flex-end !important;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    border-radius: 0;
    height: 48px;
    min-height: 48px;
    min-width: 236px;
    width: 236px;
    max-width: 236px;
    padding: 0 15px;
    font-family: var(--font-serif);          /* Marcellus */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 7.5px;
    text-shadow: none;
    cursor: pointer;
    transition: background .2s ease;
}
.hero.hero-with-search .booking-widget--inline > button[type="submit"]:hover,
.hero.hero-with-search .booking-widget--inline .btn-primary:hover,
.hero.hero-with-search .booking-widget--inline .btn-block.btn-lg:hover{
    background: var(--c-primary-2);
}
/* E025 (2026-05-14) — submit button inner span must be display:block + Marcellus
   per REF CDP spec [101]. Wrapping text in <span> + this rule restores the
   "Check Availability" span score (-23pp regression).
   E029 (2026-05-14) — explicit font-family stack a border-color matches REF computed
   styles (borderTopColor/Right/Bottom/Left: rgb(255,255,255) inherited from color:#fff). */
.hero.hero-with-search .booking-widget--inline > button[type="submit"] > span,
.hero.hero-with-search .booking-widget--inline .btn-primary > span{
    display: block;
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    border-color: #fff;
}
@media (max-width: 1100px) {
.hero.hero-with-search .booking-widget--inline{
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
.hero.hero-with-search .booking-widget--inline .booking-widget-fields{
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        gap: 12px;
    }
.hero.hero-with-search .booking-widget--inline > button[type="submit"],
    .hero.hero-with-search .booking-widget--inline .btn-primary,
    .hero.hero-with-search .booking-widget--inline .btn-block.btn-lg{
        width: 100%;
        flex: 0 0 auto;
    }
}/* =========================================================
   E020 — Welcome heading section CozyStay parity (2026-05-13)
   Reference: https://cozystay.loftocean.com/island-resort/
   PNG cutout Y=1100-1250 (Welcome heading start)
   Cíl: nahradit diamond ✦ ornament resortní building ikonou
   NAD eyebrow textem, přebarvit eyebrow na sage (parita s ref.),
   přepnout welcome-heading na Marcellus (jednota s hero h1)
   a sjednotit cream pozadí na neutrálnější #f1f1ee.
   ========================================================= */
.welcome-section{ background: #f3f3f0; }   /* AUDIT_BOD 03 (E003 2026-05-14) — REF CDP rgb(243,243,240) */
.welcome-section .welcome-text{ max-width: 830px; }   /* AUDIT_BOD 04 — CDP container x=537-1367 width=830px */
/* AUDIT_BOD 01,04,05,06 — eyebrow typografie + barva */
.welcome-section .welcome-eyebrow{
    color: var(--c-secondary);            /* sage #53624e */
    font-family: var(--font-sans);        /* Jost */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;                     /* AUDIT_BOD 01 (E04 2026-05-14) — REF CDP 14.4px = 1.2×12 [SPEC 3.2] */
    letter-spacing: 0.1em;                /* 1.2px @ 12px */
    font-feature-settings: "kern" 1 !important;      /* AUDIT_BOD 04 (E07 2026-05-14) — defensive kerning */
    text-transform: uppercase;
    margin: 0 0 20px;                     /* AUDIT_BOD 09 — gap k H2 = 20px */
    text-align: center;
}
/* AUDIT_BOD 02 — odstranit diamond ✦ pod textem */
.welcome-section .welcome-eyebrow::after{
    content: none !important;
}
/* AUDIT_BOD 03 — resort building icon NAD eyebrow textem
   (3 oblouky/sloupy pod střechou + 2 palmy po stranách,
   sage barva, 56×56px, centrováno) */
.welcome-section .welcome-eyebrow::before{
    content: "" !important;
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px; /* AUDIT_BOD 02 (E003 2026-05-14) — CDP icon→eyebrow gap 20px */
    background-color: var(--c-secondary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 24 L32 16 L42 24'/><line x1='20' y1='24' x2='44' y2='24'/><path d='M24 24 L24 44 M32 24 L32 44 M40 24 L40 44'/><path d='M22 30 Q24 28 26 28 M30 30 Q32 28 34 28 M38 30 Q40 28 42 28'/><line x1='18' y1='44' x2='46' y2='44'/><line x1='16' y1='46' x2='48' y2='46'/><line x1='13' y1='30' x2='13' y2='46'/><path d='M13 30 Q10 26 6 24 M13 30 Q9 30 5 32 M13 30 Q11 34 7 38'/><line x1='51' y1='30' x2='51' y2='46'/><path d='M51 30 Q54 26 58 24 M51 30 Q55 30 59 32 M51 30 Q53 34 57 38'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 24 L32 16 L42 24'/><line x1='20' y1='24' x2='44' y2='24'/><path d='M24 24 L24 44 M32 24 L32 44 M40 24 L40 44'/><path d='M22 30 Q24 28 26 28 M30 30 Q32 28 34 28 M38 30 Q40 28 42 28'/><line x1='18' y1='44' x2='46' y2='44'/><line x1='16' y1='46' x2='48' y2='46'/><line x1='13' y1='30' x2='13' y2='46'/><path d='M13 30 Q10 26 6 24 M13 30 Q9 30 5 32 M13 30 Q11 34 7 38'/><line x1='51' y1='30' x2='51' y2='46'/><path d='M51 30 Q54 26 58 24 M51 30 Q55 30 59 32 M51 30 Q53 34 57 38'/></svg>") center / contain no-repeat;
}
/* AUDIT_BOD 07 — H2 přepnut z Cormorant na Marcellus (parita s hero h1)
   E003 (2026-05-14) AUDIT_BOD 05-09 — pixel parity s REF CDP:
   font-size 56px, line-height 1.2 (= 67.2px), color #1A1B1A,
   margin-top 20px (gap k eyebrow), letter-spacing 0 (normal). */
.welcome-section .welcome-heading{
    font-family: var(--font-serif);       /* Marcellus */
    font-style: normal;                   /* AUDIT_BOD 04 (2026-05-14 sec3) — REF Marcellus upright */
    font-weight: 400;                     /* AUDIT_BOD 03 (E04 2026-05-14) — REF CDP fontWeight 400 explicit [SPEC 3.3] */
    font-feature-settings: "kern" 1 !important;      /* AUDIT_BOD 02 (E06 2026-05-14) — REF CDP default kerning, defensive vůči parent body settings */
    font-size: clamp(34px, 4vw, 56px);    /* AUDIT_BOD 05 */
    line-height: 1.2;                     /* AUDIT_BOD 06 — REF 67.2/56 */
    color: #1A1B1A;                       /* AUDIT_BOD 07 (zde myšleno: barva, ne font, dle CDP rgb(26,27,26)) */
    margin: 20px 0 0;                     /* AUDIT_BOD 08 — REF margin-top 20px */
    letter-spacing: 0;                    /* AUDIT_BOD 09 */
    word-spacing: 0 !important;                      /* AUDIT_BOD 12 (E06) — REF CDP default word-spacing normal */
    text-rendering: optimizeLegibility !important;   /* AUDIT_BOD 03 (E07 2026-05-14) — crisp Marcellus rendering @ 56px */
    text-align: center;
}
/* ============================================================================
   WELCOME + 4 THUMBNAILS — pixel parity 2026-05-14 (section 3)
   REF CDP: https://cozystay.loftocean.com/island-resort/  Y 1200-2400
   ============================================================================ */

/* AUDIT_BOD 01 — section bg #F3F3F0 (REF Y-band 240-330 distinctColors=1) */
.welcome-section.welcome-section{
    background: #F3F3F0;
}
/* AUDIT_BOD 02 — text wrap 830px (REF cs-title-wrap maxWidth) */
.welcome-section .welcome-text{
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
}
/* AUDIT_BOD 08-11 — body paragraph: Jost 18px / 1.66 / #333632 / 830px
   E05 (2026-05-14) — AUDIT_BOD 01,02 explicit font-weight 400 + letter-spacing 0
   (REF CDP SPEC 3.4: font-weight 400, letter-spacing normal) */
.welcome-section .welcome-body{
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;                     /* AUDIT_BOD 01 (E05) — REF CDP 400 explicit */
    line-height: 1.66;
    letter-spacing: 0;                    /* AUDIT_BOD 02 (E05) — REF CDP normal */
    font-feature-settings: "kern" 1 !important;      /* AUDIT_BOD 01 (E07 2026-05-14) — defensive kerning */
    text-rendering: optimizeLegibility !important;   /* AUDIT_BOD 02 (E07) — crisp Jost @ 18px */
    color: #333632;
    max-width: 830px;
    margin: 20px auto 0;
    text-align: center;
}
.welcome-section .welcome-body p{ margin: 0; }
.welcome-section .welcome-body p + p{ margin-top: 12px; }
/* AUDIT_BOD 12-14 — 4 portrait thumbnails row
   REF: 4 items @ 412×618 (aspect 2/3), 32px efektivní gap, container 1300px wide */
.welcome-section .welcome-portraits--row{
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1300px;
    margin: 100px auto 0;
    padding: 0 24px;
}
.welcome-section .welcome-portraits--row .welcome-portrait{
    aspect-ratio: 412 / 618;   /* AUDIT_BOD 14 — REF 2/3 portrait */
    margin: 0;
    transform: none;
    border-radius: 0;
    background: #e8e6e1;
}
.welcome-section .welcome-portraits--row .welcome-portrait-img,
.welcome-section .welcome-portraits--row .welcome-portrait img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* AUDIT_BOD 15-19 — italic cursive quote
   REF: La Belle Aurore 26px / 1.35 / #53624E sage / left-align / 1300px wide / margin-top 20px */
.welcome-section .welcome-italic-quote{
    font-family: 'La Belle Aurore', 'Caveat', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: 0;            /* AUDIT_BOD 01 (E06 2026-05-14) — REF CDP letter-spacing normal */
    color: var(--c-secondary);   /* sage #53624e */
    text-align: left;
    max-width: 1300px;
    margin: 20px auto 0;
    padding: 0 24px;
}

@media (max-width: 960px) {
.welcome-section .welcome-portraits--row{
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 56px;
    }
.welcome-section .welcome-italic-quote{
        font-size: 22px;
        text-align: center;
    }
}
@media (max-width: 560px) {
.welcome-section .welcome-portraits--row{
        grid-template-columns: 1fr;
        max-width: 420px;
    }
.welcome-section .welcome-body{ font-size: 16px; }
}/* =========================================================
   E030 — Booking widget <select> cells parity (2026-05-14)
   Reference: https://cozystay.loftocean.com/island-resort/
   REF "Rooms"/"Guests" cells render value as inline text +
   subtle chevron (cs-has-dropdown). CUR Adults/Children
   converted from counter widget to native <select> to match
   visual structure of REF (no -/+ buttons, clean text + arrow).
   Inputs and selects share identical box: 48px height,
   1px solid #b99d75 (gold) border, transparent bg, white Jost
   14px text right-aligned, 35px right padding for icon room.
   Floating label position identical to date cells.
   ========================================================= */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select{
    flex: 1 1 0;
    background: transparent;
    border: 0;
    padding: 0 7.5px;
    height: 48px;
    min-height: 48px;
    display: block;
    position: relative;
    box-sizing: border-box !important;
    min-width: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select{
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 0 0 auto;
    text-align: right;
    text-align-last: right !important;
    color: #fff;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center;
    background-size: 10px 6px !important;
    border: 1px solid var(--c-primary);
    border-radius: 0;
    padding: 5px 35px 5px 15px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 28px;
    height: 48px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
    cursor: pointer;
}
/* Native dropdown option list — readable text on white bg in browser-default popover */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select option{
    color: #1a1b1a;
    background: #fff;
}
/* Floating label for select cells — identical position to date cells (REF spec [80,85,90,95]:
   absolute top:24 left:22, Marcellus 16/26.56 white, translateY(-13.27) lift). */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select label{
    display: block;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    line-height: 1.66;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
/* Focus state — keep gold border but slightly brighter (parity with date inputs) */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select:focus{
    outline: none !important;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary) inset;
}

/* Mobile fallback — match counter mobile rules (full width column) */
@media (max-width: 1100px) {
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select{
        flex: 0 0 auto;
        width: 100%;
    }
}/* ==================================================================
   PARALLAX IMAGE SECTION (Resort waterfront fotka — CozyStay parity)
   Uses <img> element (not CSS background) for reliable full-page
   screenshot rendering and proper image scaling.
   ================================================================== */
.parallax-image-section{
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.parallax-image-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
    display: block;
    border: 0;
    pointer-events: none;
}
.parallax-image-overlay{
    position: absolute;
    inset: 0;
    background-color: #000000;
    pointer-events: none;
    z-index: 1;
}
.parallax-play-btn{
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.parallax-play-btn svg{
    width: 64px;
    height: 72px;
    margin: 0;
    color: #ffffff;
    display: block;
}
.parallax-play-btn:hover,
.parallax-play-btn:focus-visible{
    background-color: transparent;
    transform: scale(1.08);
    outline: none;
}
.parallax-play-btn:focus-visible svg path{
    stroke: var(--c-primary, #B99D75);
}

@media (max-width: 768px) {
.parallax-image-section{
        min-height: 320px;
    }
.parallax-play-btn svg{
        width: 44px;
        height: 50px;
    }
}/* ============================================================
   The Accommodations parity — light cards section (CozyStay)
   Targets non-dark cards sections only via :not(--dark).
   Reference: cozystay.loftocean.com/island-resort/
   ============================================================ */
.builder-cards-section:not(.builder-cards-section--dark){
    background: #ffffff;
    padding: 80px 0 100px;
}
.builder-cards-section:not(.builder-cards-section--dark) .container{
    max-width: 1300px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header{
    text-align: left;
    max-width: none;
    margin: 0 0 56px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header-eyebrow{
    color: var(--c-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header h2{
    color: var(--c-ink);
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header p{
    color: var(--c-muted);
    font-size: 16px;
    margin-top: 12px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-grid{
    gap: 50px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card{
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.builder-cards-section:not(.builder-cards-section--dark) .card:hover{
    transform: none;
    box-shadow: none;
    border-bottom-color: transparent;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image{
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin-bottom: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image::before{
    content: none;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image > div{
    transition: transform .6s ease;
}
.builder-cards-section:not(.builder-cards-section--dark) .card:hover .card-image > div{
    transform: scale(1.04);
}
.builder-cards-section:not(.builder-cards-section--dark) .card-body{
    padding: 0;
    background: transparent;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-eyebrow{
    color: var(--c-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 12px;
    text-transform: none;
    letter-spacing: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-text{
    color: var(--c-muted);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}
.builder-cards-section:not(.builder-cards-section--dark) .btn-ghost{
    color: #1a1b1a;
    background: transparent;
    border: 0;
    padding: 7px 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 28px;
    border-color: #1a1b1a;
}
.builder-cards-section:not(.builder-cards-section--dark) .btn-ghost > span{
    display: block;
    position: relative;
    color: #1a1b1a;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    height: 14px;
    letter-spacing: 0;
    text-transform: none;
    border-color: #1a1b1a;
}
.builder-cards-section:not(.builder-cards-section--dark) .btn-ghost:hover{
    color: var(--c-primary);
}
.builder-cards-section:not(.builder-cards-section--dark) .btn-ghost:hover > span{
    color: var(--c-primary);
}
/* Section header: stacked centered (heading + CTA pod sebou).
   Side-by-side variant vypadal nezarovnaně — sjednoceno na centered. */
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 24px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-text{
    flex: 0 0 auto;
    max-width: 800px;
    width: 100%;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta{
    flex: 0 0 auto;
    margin-bottom: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta .btn-primary{
    background: var(--c-primary);
    color: #ffffff;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    padding: 18px 48px;
    border: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .25s ease;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta .btn-primary:hover{
    background: var(--c-primary-2);
}
/* Per-card meta row (3 small icon+text items: m²/guests/beds equivalents) */
.builder-cards-section:not(.builder-cards-section--dark) .card-meta{
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
    display: inline-flex;
    align-items: center;
    margin: 5px 0;
    padding-right: 22px;
    color: #333632;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 28px;
    white-space: nowrap;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-text{
    display: block;
    color: #333632;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    height: 28px;
    border-color: #333632;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item:last-child{
    padding-right: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-icon{
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    color: #333632;
    flex-shrink: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-icon svg{
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

@media (max-width: 960px) {
.builder-cards-section:not(.builder-cards-section--dark){
        padding: 64px 0 72px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header{
        margin-bottom: 40px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-text{
        max-width: 100%;
        flex-basis: 100%;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta{
        margin-bottom: 0;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-grid{
        gap: 36px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-title{
        font-size: 26px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
        font-size: 13px;
        padding-right: 16px;
    }
}/* =========================================================
   E031 — Intro heading section parita (2026-05-14, v2)
   Reference: https://cozystay.loftocean.com/island-resort/
   "One of the World's Most Desirable Locations" sekce —
   full-bleed parallax landscape bg, centered SVG icon + sage
   eyebrow + big white serif heading + white subtitle, plus
   3 portrait images at bottom overlapping into next section.
   ========================================================= */
.intro-heading-section{
    position: relative;
    background: #2c3a3e;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 200px 0 0;
    text-align: center;
    color: #ffffff;
    overflow: visible;
    isolation: isolate;
}
.intro-heading-section.intro-heading-section--bg{
    background-attachment: fixed;
}
.intro-heading-section .intro-heading-overlay{
    position: absolute;
    inset: 0;
    background-color: #000000;
    z-index: 0;
    pointer-events: none;
}
.intro-heading-section .container{
    position: relative;
    z-index: 1;
    max-width: 1538px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.intro-heading-section .intro-heading-wrap{
    max-width: 880px;
    margin: 0 auto;
}
.intro-heading-section .intro-heading-icon{
    color: #ffffff;
    margin: 0 auto 20px;
    display: inline-flex;
    opacity: 0.85;
}
.intro-heading-section .intro-heading-icon svg{
    width: 40px;
    height: 40px;
    display: block;
}
.intro-heading-section .intro-heading-eyebrow{
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 20px;
}
.intro-heading-section .intro-heading-title{
    font-family: 'Marcellus', 'Cormorant Garamond', serif;
    font-size: 72px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.18;
    color: #ffffff;
    margin: 0 0 20px;
}
.intro-heading-section .intro-heading-title em{
    font-family: 'Cormorant Garamond', 'Marcellus', serif;
    font-style: italic;
    font-weight: 400;
    color: #ffffff;
}
.intro-heading-section .intro-heading-body{
    font-family: 'Jost', sans-serif;
    font-size: 21px;
    line-height: 1.66;
    color: #ffffff;
    margin: 0 auto;
    max-width: 640px;
}
.intro-heading-section .intro-heading-cards{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1356px;
    margin: 110px auto -180px;
    padding: 0 24px;
    box-sizing: border-box;
}
.intro-heading-section .intro-heading-card{
    margin: 0;
    aspect-ratio: 412 / 618;
    overflow: hidden;
    background: #1a1a1a;
}
.intro-heading-section .intro-heading-card img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-heading-section .intro-heading-card:hover img{
    transform: scale(1.03);
}
.intro-heading-section--with-cards{
    padding-bottom: 0;
}
@supports not (aspect-ratio: 1) {
.intro-heading-section .intro-heading-card{ height: 618px; }
}
@media (max-width: 1200px) {
.intro-heading-section .intro-heading-title{ font-size: 56px; }
.intro-heading-section .intro-heading-cards{ margin-bottom: -140px; }
}
@media (max-width: 960px) {
.intro-heading-section{ padding-top: 120px; background-attachment: scroll; }
.intro-heading-section.intro-heading-section--bg{ background-attachment: scroll; }
.intro-heading-section .container{ padding: 0 30px; }
.intro-heading-section .intro-heading-title{ font-size: 44px; }
.intro-heading-section .intro-heading-body{ font-size: 16px; }
.intro-heading-section .intro-heading-cards{ gap: 16px; margin: 70px auto -80px; padding: 0 30px; }
}
@media (max-width: 640px) {
.intro-heading-section{ padding-top: 80px; }
.intro-heading-section .intro-heading-title{ font-size: 34px; }
.intro-heading-section .intro-heading-icon svg{ width: 32px; height: 32px; }
.intro-heading-section .intro-heading-cards{
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 56px auto -40px;
    }
.intro-heading-section .intro-heading-card{ aspect-ratio: 4 / 5; }
}/* =========================================================================
   E040 — Welcome / Outstanding Views — final pixel-parity overrides (2026-05-14)
   Reference: https://cozystay.loftocean.com/island-resort/ (page Y 1538-2156)
   AUDIT_BOD 01-07 (Welcome / Outstanding Views section)
   Cíl: gallery šíře 1740px (4× 412 + 3× 32 gap), images portrait 412/618,
   pseudo-arrow buttons (prev disabled left, next active right) jako v REF.
   ========================================================================= */
/* AUDIT_BOD 01-02 (E042 2026-05-14) — uvolnit .container max-width specificky pro welcome-section
   aby 1740px gallery row mohla žít. .welcome-text + .welcome-italic-quote mají vlastní
   max-width + auto margins, zůstanou centrované. */
.welcome-section > .container{
    position: relative;
    max-width: none;
    padding: 0 24px;
}
.welcome-section .welcome-portraits.welcome-portraits--row{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1300px;          /* AUDIT_BOD 01 (E044 2026-05-17) — REF gallery šířka 1300px (button positions [272,415]/[1572,415] → gal x=302..1602) */
    padding: 0;                 /* AUDIT_BOD 02 (E040) */
    margin: 180px auto 0;       /* AUDIT_BOD 02 (E044 2026-05-17) — REF thumbs start crop Y=120, CUR měl Y=240; -120px */
}
.welcome-section .welcome-portraits.welcome-portraits--row .welcome-portrait{
    position: relative;
    aspect-ratio: 301 / 559;    /* AUDIT_BOD 03 (E044 2026-05-17) — REF thumb 301×559 (Y 120-679, w=1300/4-gap) — tall portrait */
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: none;
    border-radius: 0;
    overflow: hidden;
    background: #e8e6e1;
}
.welcome-section .welcome-portraits.welcome-portraits--row .welcome-portrait-img{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;          /* zruš jakýkoli zděděný aspect-ratio */
    display: block;
    overflow: hidden;
}
.welcome-section .welcome-portraits.welcome-portraits--row .welcome-portrait img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.welcome-section .welcome-portraits.welcome-portraits--row .welcome-portrait-caption{
    display: none;
}
/* AUDIT_BOD 05 & 06 — kulaté arrow buttons (Prev disabled vlevo, Next active vpravo)
   REF: 60×60 white circle, box-shadow 0 2px 40px -10px rgba(83,54,36,0.1),
   position absolute na úrovni vertikálního středu galerie, z-index 99 */
.welcome-section .welcome-portraits.welcome-portraits--row::before,
.welcome-section .welcome-portraits.welcome-portraits--row::after{
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    border-radius: 99px;
    background: #ffffff center / 18px 18px no-repeat;
    box-shadow: 0 2px 40px -10px rgba(83, 54, 36, 0.1);
    z-index: 99;
    pointer-events: none;
    transform: translateY(-50%);
}
.welcome-section .welcome-portraits.welcome-portraits--row::before{
    left: -60px;              /* AUDIT_BOD 02 (E045 2026-05-18) — REF tracking prev center x=272, gallery_left=302; button center at parent_left-30 means right edge at parent_left → left:-60px (width 60) */
    opacity: 0.45;            /* AUDIT_BOD 06 — REF prev disabled 0.45 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.welcome-section .welcome-portraits.welcome-portraits--row::after{
    right: 0px;               /* AUDIT_BOD 03 (E045 2026-05-18) — REF tracking next center x=1572, gallery_right=1602; button right edge at parent_right → right:0 (button overlaps 4th image right portion) */
    opacity: 1;               /* AUDIT_BOD 05 — REF next active 1 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
/* AUDIT_BOD 07 — italic quote umístění + spacing pod galerií (REF gallery margin-bottom 100px,
   quote pod ní; v CUR držet konzistentní vzhled bez přilepení na další sekci) */
.welcome-section .welcome-italic-quote{
    max-width: 1300px;          /* AUDIT_BOD 04 (E044 2026-05-17) — align s gallery 1300px */
    margin: 50px auto 0;        /* AUDIT_BOD 05 (E044 2026-05-17) — REF quote těsně pod gallery (Y=679→810, ~130px vč. cream return; 50px margin + natural body height ~70px) */
    padding: 0;
}
/* AUDIT_BOD 06 (E044 2026-05-17) — REF section ends at Y=870 (sharp edge ?=525 to dark teal next section).
   Quote spans Y=810-870, so padding-bottom je minimální. Bumped 200→30px.
   AUDIT_BOD 01 (E045 2026-05-18) — REF welcome-text končí těsně před crop Y=1450 (gallery začíná crop Y=60);
   CUR welcome-body bleeded into crop top (welcome-text začínal o ~180px později) → reduce padding-top
   from calc(--space-section-lg + 60px)=260px to 80px → posune celou welcome-section o 180px nahoru,
   gallery z CUR Y=240 na REF Y=60, italic quote z CUR Y=900 na REF Y=720. */
.welcome-section{
    padding-top: 80px;
    padding-bottom: 30px;
}

@media (max-width: 1799px) {
/* viewport menší než REF — gallery zúžit do containeru, šipky o kus dovnitř */
    .welcome-section .welcome-portraits.welcome-portraits--row::before{ left: -10px; }
.welcome-section .welcome-portraits.welcome-portraits--row::after{ right: -10px; }
}
@media (max-width: 960px) {
.welcome-section .welcome-portraits.welcome-portraits--row{
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 56px;
        max-width: 720px;
    }
.welcome-section .welcome-portraits.welcome-portraits--row::before,
    .welcome-section .welcome-portraits.welcome-portraits--row::after{ display: none; }
}
@media (max-width: 560px) {
.welcome-section .welcome-portraits.welcome-portraits--row{
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}/* ─────────────────────────────────────────────────────────────
   Builder static replacement classes (2026-05-20)
   Nahrazují inline styly co byly historicky hardcoded v PHP rendereru.
   Dynamické hodnoty (bg-image z JSONu, cols, opacity) jsou teď v <style>
   bloku emitovaném BuilderRenderer::emitDynamicCss() s unikátními ID.
   ───────────────────────────────────────────────────────────── */

/* Centered section heading uvnitř builder modulů (galerie, kalendář) */
.builder-section-heading{
    text-align: center;
    margin-bottom: 32px;
}
/* Availability calendar — všechny rozměry byly dříve inline */
.availability-calendar-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.cal-month-title{
    text-align: center;
    margin: 0 0 8px;
}
.cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 12px;
    text-align: center;
}
.cal-weekday{
    color: var(--c-muted, #6b7280);
    font-weight: 600;
}
.cal-day{
    padding: 6px 0;
    border-radius: 4px;
}
.cal-day--free{
    background: #e3f1e8;
    color: #3d8b69;
}
.cal-day--blocked{
    background: #fce4e4;
    color: #c85b5b;
    text-decoration: line-through;
}
/* Login page (formerly inline styles in views/auth/login.php) */
.login-container{ max-width: 480px; }
.login-card{ text-align: center; padding: 40px 32px; }
.login-icon{
    color: var(--brand-500, var(--c-primary));
    margin: 0 auto 16px;
    display: block;
}
.login-title{
    font-family: var(--font-display, var(--font-serif));
    font-size: 28px;
    margin: 0 0 8px;
}
.login-lead{ margin: 0 0 28px; }
.login-oauth-btn{
    display: flex;
    gap: 10px;
    justify-content: center;
}
.login-tos{
    font-size: 13px;
    margin-top: 20px;
}
/* Contact page 2/1 grid (formerly inline) */
.apt-detail-grid--2-1{ grid-template-columns: 2fr 1fr; }
@media (max-width: 768px) {
.apt-detail-grid--2-1{ grid-template-columns: 1fr; }
}/* Error pages (formerly inline styles in views/errors/*.php) */
.error-code{
    font-size: clamp(64px, 10vw, 120px);
    color: var(--brand-500, var(--c-primary));
    font-family: var(--font-display, var(--font-serif));
    margin: 40px 0 16px;
}
.error-lead{ margin: 0 auto 32px; }
.error-actions{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Home.php fallback card placeholders (formerly inline background-color) */
.card-image--placeholder{ aspect-ratio: 4 / 3; }
.card-image--ph-primary{ background-color: var(--c-primary); }
.card-image--ph-primary-2{ background-color: var(--c-primary-2, var(--c-primary)); }
.card-image--ph-accent{ background-color: var(--c-accent, var(--c-primary)); }
/* Apartment detail (formerly inline) */
.apt-map-iframe{
    border: 0;
    border-radius: var(--radius);
}
.booking-widget-quote-row--mb{ margin-bottom: 12px; }
/* Booking success list (formerly inline list-style:none;padding:0) */
.booking-summary-list{
    list-style: none;
    padding: 0;
}
.booking-summary-list li{
    padding: 4px 0;
}
/* ─────────────────────────────────────────────────────────────
   Hotfix 2026-05-20 — duplicate menu visibility (Monika report)
   Na desktopu se zobrazoval drawer (.site-nav) i inline nav (.site-nav-inline)
   současně + nav-burger byl vidět vždy → "Kontakt 2×" v menu.
   Drawer/burger jsou MOBILE-ONLY (≤960px), inline nav DESKTOP-ONLY (>960px).
   ───────────────────────────────────────────────────────────── */

/* Desktop: drawer + burger schované */
.site-nav{ display: none; }
.nav-burger{ display: none; }

/* Mobile breakpoint — inline schovat, drawer + burger ukázat */
@media (max-width: 960px) {
.site-nav-inline{ display: none; }
.site-nav{ display: flex; }
.nav-burger{ display: flex; }
}/* ─────────────────────────────────────────────────────────────
   Page hero (2026-05-20) — auto-hero pro podstránky s background image.
   Vychází z `.hero` ale lehčí: min-height 380px (mobile 240px), centered text.
   ───────────────────────────────────────────────────────────── */
.page-hero{
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}
.page-hero-content{
    padding: 60px 24px;
}
.page-hero-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    margin: 0 0 12px;
    color: #fff;
}
.page-hero-subtitle{
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 768px) {
.page-hero{ min-height: 240px; }
.page-hero-content{ padding: 36px 20px; }
}/* ─────────────────────────────────────────────────────────────
   Apartment detail gallery slider (2026-05-20)
   Místo grid 11 obrázků zobrazuje swiper carousel.
   ───────────────────────────────────────────────────────────── */
.apt-gallery-slider{
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0 32px;
}
.apt-gallery-slider{
    height: 500px;
    max-height: 60vh;
}
.apt-gallery-slider .swiper-wrapper{ height: 100%; }
.apt-gallery-slider .swiper-slide{
    width: 100%;
    height: 500px;
    max-height: 60vh;
    background: var(--c-cream, #f5efe4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.apt-gallery-slide-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.apt-gallery-slider .swiper-button-prev,
.apt-gallery-slider .swiper-button-next{
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    transition: background .2s ease;
}
.apt-gallery-slider .swiper-button-prev:hover,
.apt-gallery-slider .swiper-button-next:hover{
    background: var(--c-primary);
}
.apt-gallery-slider .swiper-button-prev::after,
.apt-gallery-slider .swiper-button-next::after{ font-size: 16px; font-weight: 700; }
.apt-gallery-slider .swiper-pagination-bullet{
    background: #fff;
    opacity: 0.6;
}
.apt-gallery-slider .swiper-pagination-bullet-active{
    background: var(--c-primary);
    opacity: 1;
}
@media (max-width: 768px) {
.apt-gallery-slider{ height: 320px; max-height: 50vh; }
.apt-gallery-slider .swiper-slide{ height: 320px; }
.apt-gallery-slider .swiper-button-prev,
    .apt-gallery-slider .swiper-button-next{ width: 36px; height: 36px; }
}/* Fallback bez JS / Swiper se nenačetl — CSS-only horizontal scroll */
.apt-gallery-slider:not(.swiper-initialized) .swiper-wrapper{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
}
.apt-gallery-slider:not(.swiper-initialized) .swiper-slide{
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.apt-gallery-slider:not(.swiper-initialized) .swiper-pagination,
.apt-gallery-slider:not(.swiper-initialized) .swiper-button-prev,
.apt-gallery-slider:not(.swiper-initialized) .swiper-button-next{ display: none; }
/* ─────────────────────────────────────────────────────────────
   Hotfix 2026-05-20 (Monika feedback round 2)
   1) Button "Prohlédnout apartmán" — odsadit od textu (margin-top 32px)
   2) Welcome portraits — zmenšit dvojnásobné margin-top (96px+100px)
   3) Cards dark teal a testimonials dark — sjednotit jako jeden vizuální blok,
      odstranit ~210px díru mezi nimi.
   ───────────────────────────────────────────────────────────── */

/* 1) Button v welcome-action — margin-top od textu */
.welcome-action{
    margin-top: 32px;
}
/* 2) Welcome portraits row — sjednocený margin-top jako ostatní sekce */
.welcome-section .welcome-portraits--row{
    margin-top: 56px;
}
.welcome-portraits{ margin-top: 56px; }
/* 3a) Cards dark teal — menší bottom padding (návaznost na testimonials) */
.builder-cards-section--dark{ padding: 100px 0 56px; }
/* 3b) Testimonials dark teal po cards — top padding 0 (jeden vizuální blok),
       bottom padding zachovaný pro odsazení od services_grid */
.builder-cards-section--dark + .testimonials-section--featured,
.testimonials-section--dark + .testimonials-section--featured{
    padding-top: 0;
}
.testimonials-section--featured{ padding: 56px 0 100px; }
/* ============================================================
   Cards section — dark + light: čisté card-meta + spacing
   ============================================================ */
.builder-cards-section .card-meta{
    list-style: none !important;
    padding: 0;
    margin: 6px 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.builder-cards-section .card-meta-item{
    list-style: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82);
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
    color: #555852;
}
.builder-cards-section .card-meta-item::before,
.builder-cards-section .card-meta-item::marker{ content: none !important; display: none; }
.builder-cards-section .card-meta-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.builder-cards-section .card-meta-icon svg{
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
}
.builder-cards-section .card-meta-text{
    display: inline-block;
    color: currentColor;
    font-weight: 400;
}
/* Section header split — heading centered + CTA centered below.
   Žádný side-by-side layout který vypadá disbalanced (button visel vpravo). */
.builder-cards-section .section-header--split{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 56px;
}
.builder-cards-section .section-header--split .section-header-text{ width: 100%; max-width: 800px; }
.builder-cards-section .section-header--split .section-header-cta{ flex: 0 0 auto; }
.builder-cards-section .section-header--split .section-header-cta .btn{
    padding: 12px 32px;
    white-space: nowrap;
}
@media (max-width: 720px) {
.builder-cards-section .section-header--split{
        gap: 18px;
        margin-bottom: 36px;
    }
}/* ============================================================
   Services grid — kompaktní service-item, ne grid v gridu
   ============================================================ */
.services-section .services-items{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
    align-items: start;
}
@media (max-width: 720px) {
.services-section .services-items{ grid-template-columns: 1fr; gap: 24px; }
}.services-section .service-item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.services-section .service-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--c-dark-teal, #2c4a47);
    margin-bottom: 4px;
}
.services-section .service-icon svg{ width: 36px; height: 36px; }
.services-section .service-title{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--c-ink, #1c2624);
    line-height: 1.35;
}
.services-section .service-text{
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink-soft, #555852);
    max-width: 100%;
}
/* Admin preview banner — viditelný jen u nahledu z /admin/stranky/{id}/nahled */
.admin-preview-banner{
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: #fff7cf;
    color: #5b4a00;
    border-bottom: 1px solid #e8d765;
    font-size: 13px;
    font-family: var(--font-sans, system-ui, sans-serif);
    text-align: center;
}
.admin-preview-banner code{
    background: rgba(0, 0, 0, .08);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}
.admin-preview-banner a{ color: #2c4a47; font-weight: 600; }
/* Welcome portraits slider — Swiper nav buttons + pagination */
.welcome-portraits--slider{
    /* Reset base .welcome-portraits grid pro slider mode */
    display: block;
    grid-template-columns: none;
    gap: 0;
    max-width: 1440px;
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;
}
.welcome-portraits--slider .swiper-wrapper{
    display: flex;
    align-items: stretch;
}
.welcome-portraits--slider .welcome-portrait.swiper-slide{
    /* V slider módu zrušíme base .welcome-portrait omezení (aspect-ratio + overflow),
       aby caption pod fotkou nebyl ořezán. Aspect ratio se aplikuje jen na .welcome-portrait-img. */
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}
.welcome-portraits--slider .welcome-portrait-img{
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--c-cream);
}
.welcome-portraits--slider .welcome-portrait-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.welcome-portraits--slider .welcome-portrait-caption{
    padding-top: 10px;
    font-size: 14px;
    color: var(--c-dark-teal, #2c4a47);
    text-align: center;
}
.welcome-portraits--slider .swiper-button-prev,
.welcome-portraits--slider .swiper-button-next{
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: var(--c-dark-teal, #2c4a47);
    top: 42%;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    transition: background .15s;
}
.welcome-portraits--slider .swiper-button-prev:hover,
.welcome-portraits--slider .swiper-button-next:hover{
    background: #fff;
}
.welcome-portraits--slider .swiper-pagination{
    bottom: 0;
}
.welcome-portraits--slider .swiper-pagination-bullet{
    background: var(--c-dark-teal, #2c4a47);
    opacity: .35;
}
.welcome-portraits--slider .swiper-pagination-bullet-active{
    opacity: 1;
}
.welcome-portraits--slider .swiper-slide{
    height: auto;
}
@media (max-width: 720px) {
.welcome-portraits--slider .swiper-button-prev,
    .welcome-portraits--slider .swiper-button-next{ display: none; }
}/* ============================================================
   LUXURY GOLD ACCENTS — global overrides
   Champagne gold pro CTA primary + rámečky fotek + boutique badges.
   Aplikováno přes append blok aby nepřepisovaly base styles
   (existující "warm beige" #b99d75 zůstává jako sekundární tone).
   ============================================================ */

/* Primary CTA buttons — luxury gold s subtilním gradientem */
.btn-primary,
.builder-cards-section .btn-primary,
.section-header--split .btn-primary,
.featured-apartment-actions .btn-primary,
.btn.btn-primary{
    background: var(--grad-gold);
    color: #1a1b1a;
    border: 1px solid transparent;
    letter-spacing: .04em;
    font-weight: 500;
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover{
    filter: brightness(1.05);
    box-shadow: 0 6px 24px rgba(201, 169, 97, .35);
    transform: translateY(-1px);
}
/* Secondary/ghost buttons s gold border */
.btn-ghost{
    border: 1px solid var(--c-gold);
    color: var(--c-gold-2);
    background: transparent;
    transition: all .15s;
}
.btn-ghost:hover{
    background: var(--c-gold);
    color: #1a1b1a;
}
/* Na dark sekcich gold rozsviti */
.builder-cards-section--dark .btn-ghost,
.testimonials-section--dark .btn-ghost,
.intro-heading-section .btn-ghost{
    color: var(--c-gold-light);
    border-color: rgba(230, 213, 166, .55);
}
.builder-cards-section--dark .btn-ghost:hover,
.testimonials-section--dark .btn-ghost:hover{
    background: var(--c-gold);
    color: #1a1b1a;
    border-color: var(--c-gold);
}
/* Photo frames — subtilní zlatý rámeček (BEZ bílého paspartu).
   Předtím tu byl 6px bílý border-shadow + 1px gold inner + 1px gold outer.
   Po user feedbacku odstraněn bílý frame, ponechány jen 2 gold akcenty + měkký drop shadow. */
.featured-apartment-image,
.card-image,
.welcome-portrait-img,
.intro-heading-card .intro-heading-card-img,
.builder-image img,
.services-side-image img,
.apt-gallery-slider .swiper-slide img{
    box-shadow:
        0 0 0 1px rgba(201, 169, 97, .35),
        0 12px 36px rgba(0, 0, 0, .12);
    transition: box-shadow .25s;
}
.featured-apartment-image:hover,
.card-image:hover,
.welcome-portrait:hover .welcome-portrait-img{
    box-shadow:
        0 0 0 1px rgba(201, 169, 97, .65),
        0 18px 48px rgba(0, 0, 0, .18);
}
/* Boutique gold badges — pro karty apartmánů (Resale, Sea View, Ready to move...) */
.lux-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(0, 0, 0, .55);
    color: var(--c-gold-light);
    border: 1px solid var(--c-gold);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lux-badge--green{
    background: var(--c-dark-teal);
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
}
.lux-badge-stack{
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}
/* Logo + section eyebrow — zlatý odstín */
.section-header-eyebrow,
.welcome-eyebrow,
.accommodations-eyebrow,
.testimonials-eyebrow,
.services-eyebrow,
.intro-heading-eyebrow,
.newsletter-eyebrow{
    color: var(--c-gold-2);
    font-weight: 500;
    letter-spacing: .14em;
}
.builder-cards-section--dark .section-header-eyebrow,
.testimonials-section--dark .testimonials-eyebrow,
.newsletter-section--dark .newsletter-eyebrow{
    color: var(--c-gold-light);
}
/* Card eyebrow + card-meta icons taky gold akcent */
.card-eyebrow{
    color: var(--c-gold-2);
}
.builder-cards-section--dark .card-eyebrow{
    color: var(--c-gold-light);
}
/* Heading underline accent — golden line below H1/H2 (volitelné, jen kde má smysl) */
.lux-heading-accent::after{
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--grad-gold);
    margin: 18px auto 0;
}
.lux-heading-accent.text-left::after{ margin-left: 0; margin-right: auto; }
/* Newsletter / CTA dark — gold submit button už pokryto výše */

/* Footer gold separator pod logem — centrovaná, jinak vznikne osamělá čárka
   vlevo (user feedback 2026-05-26 — pobočka zlata utekla). */
.site-footer .site-footer-brand-text::after{
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--c-gold);
    margin: 14px auto;
}
/* ════════════════════════════════════════════════════════════════════
   WEATHER WIDGET — server-side rendered, pozicovaný POD header menu.
   Data z wttr.in (30 min cache). Transparent design jako stránky (border + blur).
   ════════════════════════════════════════════════════════════════════ */
/* global-header-template wrapper z BuilderRenderer.render() v __header__ template.
   Pokrývá celý viewport jako overlay vrstva — děti uvnitř (weather widget atd.) se
   pozicují absolute vůči celé stránce. pointer-events:none = nezablokuje interakci
   s hero pod tím; děti (.weather-widget-mount) musí mít pointer-events:auto. */
.global-header-template{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    pointer-events: none;
    z-index: 4;             /* nad hero pozadím, pod fixed headerem (z-index ~100) */
    overflow: visible;
}
.global-header-template > *{ margin: 0; pointer-events: auto; }
.weather-widget-mount{
    position: absolute;
    top: 160px;             /* default — admin override přes builder universal settings */
    right: 24px;
    z-index: 5;
    pointer-events: auto;
}
/* Pokud admin v builderu nastavil wrapper position (bldr-section-wrap má position),
   widget uvnitř přebírá pozici z wrapperu — vlastní position-mount už nepoužíváme. */
.bldr-section-wrap .weather-widget-mount{
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
}
.weather-widget{
    display: inline-flex;
    align-items: center;     /* horizontální zarovnání ikony + textu na sebe */
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #fff;
    line-height: 1;
    cursor: default;          /* žádný link */
}
.weather-widget-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
    line-height: 0;           /* odstraní line-height inflate okolo SVG */
}
.weather-widget-icon svg{
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: block;
}
.weather-widget-info{
    display: inline-flex;
    align-items: center;      /* center baseline místo baseline-y */
    gap: 8px;
    min-width: 0;
    line-height: 1;
}
.weather-widget-temp{
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
    display: inline-block;
}
.weather-widget-desc{
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    letter-spacing: 0.03em;
    text-transform: lowercase;
    line-height: 1;
}
.weather-widget-label{
    display: none; /* compact pill — label vynechán pro úsporu místa */
}
/* ── Builder elementy pro header/footer (site_logo, header_cta, footer_*) ── */
/* Specificity wrapper — site.css:1216 .site-footer a{display:block;} přebíjí
.bldr-site-logo. Použijeme .site-footer .bldr-site-logo a .bldr-footer
   prefix aby pravidla vyhrála (2 classes vs 1class+1elem). */
.bldr-site-logo,
.site-footer .bldr-site-logo,
.bldr-footer .bldr-site-logo{
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
.bldr-site-logo-text,
.site-footer .bldr-site-logo .bldr-site-logo-text,
.bldr-footer .bldr-site-logo-text{
    display: block;
    font-family: 'Marcellus', var(--font-serif, var(--font-display)), serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--c-gold-2, #c9a961);
    padding: 0;
}
.bldr-site-logo-sub,
.site-footer .bldr-site-logo .bldr-site-logo-sub,
.bldr-footer .bldr-site-logo-sub{
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    padding: 0;
}
.bldr-header-cta{
    /* dědí .btn .btn-primary — žádný extra styl */
}
.bldr-footer-tagline{
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.bldr-footer-copyright{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* footer_full — kompletní patička jako builder element */
.bldr-footer{
    background: var(--c-deep-dark, #0d0d0d);
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 28px;
}
.bldr-footer-inner{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}
.bldr-footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 56px;
}
.bldr-footer-col{ min-width: 0; }
.bldr-footer-h{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold-2, #c9a961);
    margin: 0 0 18px;
}
.bldr-footer-text{
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 12px;
}
.bldr-footer-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.bldr-footer-list li{
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.bldr-footer-list a{
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color .15s;
}
.bldr-footer-list a:hover{ color: var(--c-gold-2, #c9a961); }
.bldr-footer-social{
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.bldr-footer-social a{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.65);
    transition: all .2s;
}
.bldr-footer-social a:hover{
    border-color: var(--c-gold-2, #c9a961);
    color: var(--c-gold-2, #c9a961);
}
.bldr-footer-newsletter-form{
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.bldr-footer-newsletter-form .form-input{
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 4px;
    min-width: 0;
}
.bldr-footer-newsletter-form .btn{ flex-shrink: 0; }
.bldr-footer-bottom{
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.03em;
}

@media (max-width: 960px) {
.bldr-footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.bldr-footer-grid{ grid-template-columns: 1fr; }
.bldr-footer{ padding: 56px 0 24px; }
}

@media (max-width: 768px) {
.weather-widget-mount{
        top: 140px;
        right: 12px;
    }
.weather-widget{
        gap: 6px;
        padding: 6px 12px;
    }
.weather-widget-icon{ width: 22px; height: 22px; }
.weather-widget-icon svg{ width: 20px; height: 20px; }
.weather-widget-temp{ font-size: 14px; }
.weather-widget-desc{ font-size: 10px; max-width: 90px; }
}