/* ==================================================================
   Public-site styles
   ================================================================== */

body.public {
    background: var(--bg);
}

/* Header */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}
.site-brand {
    font-family: var(--brand);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-color, var(--accent));
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1;
}
.site-logo {
    height: 48px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    transition: background 0.2s ease, padding 0.2s ease;
}
html[data-theme="dark"] .site-logo {
    background: rgba(247, 241, 232, 0.92);
    padding: 3px;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .site-logo {
        background: rgba(247, 241, 232, 0.92);
        padding: 3px;
    }
}
.site-brand-text {
    white-space: nowrap;
    text-transform: uppercase;
}
.site-nav {
    display: flex;
    gap: 1.5em;
}
.site-nav a {
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}
.site-nav a:hover { color: var(--accent); }

.site-header-controls {
    display: flex;
    align-items: center;
    gap: 1em;
}
.lang-switch {
    display: flex;
    gap: 0.2em;
    font-size: 0.8rem;
    font-weight: 600;
}
.lang-link {
    padding: 0.25em 0.55em;
    border-radius: var(--radius);
    color: var(--text-soft);
    letter-spacing: 0.05em;
}
.lang-link.active {
    background: var(--accent);
    color: #fff;
}
.lang-link:not(.active):hover {
    color: var(--text);
    background: var(--bg-alt);
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--line);
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover {
    background: var(--bg-alt);
    transform: none;
    box-shadow: none;
}
.theme-toggle .theme-icon-dark  { display: none; }
.theme-toggle .theme-icon-light { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: inline; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; }
    html:not([data-theme="light"]) .theme-toggle .theme-icon-dark  { display: inline; }
}

@media (max-width: 640px) {
    .site-header-inner {
        flex-wrap: wrap;
        gap: 0.5em 0.8em;
        padding: 0.7em 1em;
    }
    .site-logo { height: 36px; max-width: 44px; }
    .site-brand { font-size: 1.2rem; order: 1; }
    .site-header-controls { order: 2; margin-left: auto; gap: 0.6em; }
    .site-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 1.4em;
        padding-top: 0.55em;
        border-top: 1px solid var(--line);
    }
}

.site-main { min-height: calc(100vh - 200px); }

.site-footer {
    background: #16130f;
    color: #f2ece1;
    padding: 3em 1.5em 1.5em;
    margin-top: 4em;
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2em;
}
.footer-col h4 {
    color: var(--gold);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8em;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col li {
    margin-bottom: 0.5em;
    font-size: 0.92rem;
    color: rgba(242,236,225,0.75);
}
.footer-col a {
    color: rgba(242,236,225,0.75);
}
.footer-col a:hover { color: var(--gold); }
.footer-name {
    font-family: var(--brand);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3em;
    text-transform: uppercase;
}
.footer-tagline {
    color: rgba(242,236,225,0.6);
    font-size: 0.92rem;
    max-width: 22em;
    margin: 0;
}
.site-footer-bottom {
    max-width: 1200px;
    margin: 2.5em auto 0;
    padding-top: 1.5em;
    border-top: 1px solid rgba(242,236,225,0.12);
    font-size: 0.85rem;
    color: rgba(242,236,225,0.5);
    text-align: center;
}
@media (max-width: 760px) {
    .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5em; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
    .site-footer-inner { grid-template-columns: 1fr; }
}

/* Section */
.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3em 1.5em;
}
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5em;
    gap: 1em;
    flex-wrap: wrap;
}
.link-more { font-weight: 500; }

/* Hero */
.hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    max-height: 720px;
    overflow: hidden;
    background: var(--text);
}
.hero-photo, .hero-photo picture, .hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 25% 65%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 55%, transparent 100%),
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--bg);
    padding: 2em 1.5em 4em;
}
.hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}
.hero-overlay h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    margin-bottom: 0.3em;
    max-width: 16em;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.9),
        0 2px 8px rgba(0,0,0,0.8),
        0 4px 32px rgba(0,0,0,0.6);
}
.hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    margin-bottom: 1.6em;
    max-width: 34em;
    opacity: 1;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.95),
        0 2px 10px rgba(0,0,0,0.7);
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
}
.btn-outline-hero {
    border: 1.5px solid var(--gold);
    background: rgba(0,0,0,0.15);
    color: #fff;
    padding: 0.85em 2em;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}
.btn-outline-hero:hover {
    background: var(--gold);
    color: #1a1410;
    transform: translateY(-2px);
}
.section-head-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-sub {
    color: var(--text-soft);
    font-size: 1.1rem;
    margin-top: -0.3em;
    max-width: 36em;
}

/* Services carousel (home) — horizontally scrollable slides built from the live
   list of services. Each slide previews a service and links to its full section. */
.services-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.carousel-track {
    display: flex;
    gap: 1.3em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.4em 0.2em 1em;
    flex: 1;
    /* hide scrollbar but keep scrollability */
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.service-slide {
    scroll-snap-align: start;
    flex: 0 0 clamp(230px, 80%, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.8em 1.5em;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--gold);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.service-slide:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.service-slide-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.8em;
    background: var(--bg-alt);
    flex: 0 0 auto;
}
.service-slide-avatar img, .service-slide-avatar picture {
    width: 100%; height: 100%; object-fit: cover;
}
.service-slide h3 { margin-bottom: 0.4em; color: var(--text); }
.service-slide-text {
    color: var(--text-soft);
    font-size: 0.95rem;
    margin: 0 0 0.9em;
    line-height: 1.6;
}
.service-slide-more {
    margin-top: auto;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.92rem;
}

.carousel-arrow {
    flex: 0 0 auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carousel-arrow:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
/* On touch screens the arrows are redundant (swipe), so hide them. */
@media (max-width: 640px) {
    .carousel-arrow { display: none; }
}

/* Testimonials */
.testimonials-section {
    background: var(--bg-alt);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
}
.testimonial {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.8em;
    margin: 0;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.testimonial-stars {
    color: var(--gold);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.6em;
}
.testimonial blockquote {
    margin: 0 0 1em;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text);
    font-style: italic;
    flex: 1;
}
.testimonial figcaption strong {
    display: block;
    color: var(--text);
}
.testimonial figcaption span {
    color: var(--text-soft);
    font-size: 0.88rem;
}

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.8em;
}
.card {
    color: inherit;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(31,27,22,0.14);
}
.card-photo {
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
}
.card-photo picture, .card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 3rem; color: var(--text-soft);
}
.card-feat {
    position: absolute;
    top: 0.8em; right: 0.8em;
    background: var(--gold);
    color: var(--bg);
    padding: 0.2em 0.5em;
    border-radius: 999px;
    font-size: 0.85rem;
}
.card-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.4rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    pointer-events: none;
}
.card-body { padding: 1em 1.2em 1.3em; }
.card-meta { font-size: 0.8rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3em; }
.card-title { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.4em; }
.card-loc { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 0.5em; }
.card-price { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
.card-price small { font-weight: 400; color: var(--text-soft); font-size: 0.8em; margin-left: 0.2em; }

/* About */
.about p {
    font-size: 1.1rem;
    color: var(--text-soft);
}

/* Property detail */
.property-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em 1.5em 4em;
}
.property-header { margin-bottom: 2em; }
.link-back {
    display: inline-block;
    margin-bottom: 1em;
    font-size: 0.95rem;
    color: var(--text-soft);
}
.property-subhead { color: var(--text-soft); margin-top: 0.4em; }

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4em;
    margin-bottom: 2.5em;
}
.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}
.gallery-item-main {
    grid-column: span 4;
    aspect-ratio: 16 / 9;
}
.gallery-item picture, .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.03); }

/* Property listing gallery: big lead image + a one-row carousel of the rest
   (so a long photo set doesn't push the contact/details far down). Both keep
   the .gallery class so the lightbox spans every picture. Arrows + scroll in
   app.js. */
.property-gallery-lead { margin-bottom: 0.6em; }
.property-carousel {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 2.5em;
}
.property-carousel .carousel-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 0.6em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.property-carousel .carousel-track::-webkit-scrollbar { display: none; }
.property-carousel .gallery-item,
.property-carousel .gallery-item-main {
    flex: 0 0 clamp(240px, 70%, 380px);
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
}

/* Video tiles are posters (thumbnail + ▶ badge) that open in the lightbox like
   photos; the ▶ uses .card-play (pointer-events:none) so clicks reach the tile. */
.gallery-item-video { cursor: pointer; }

.property-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5em;
}
@media (max-width: 800px) {
    .property-layout { grid-template-columns: 1fr; }
}

.property-body h2 {
    margin-top: 0;
    color: var(--text);
}
.property-description {
    font-size: 1.05rem;
    color: var(--text-soft);
    line-height: 1.7;
}
.property-description p { margin: 0 0 1em; }
.property-description ul, .property-description ol { margin: 0 0 1em; padding-left: 1.4em; }
.property-description li { margin-bottom: 0.3em; }
.property-description h3, .property-description h4 { color: var(--text); margin: 1.2em 0 0.4em; }
.property-description a { color: var(--accent); text-decoration: underline; }
.property-description blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid var(--gold);
    font-style: italic;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin: 1em 0 2em;
}

/* --- Share this listing --- */
.property-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.75em;
    margin: 0 0 2em;
}
.share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted, inherit);
}
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.share-btn {
    font-size: 0.85rem;
    padding: 0.45em 0.8em;
}
.share-toast {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--accent, inherit);
}
.share-toast[hidden] { display: none; }

.property-aside {
    background: var(--card);
    padding: 1.5em;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    align-self: start;
}
/* Leaflet's panes/controls use very high z-indexes (tiles ~400, controls ~1000).
   Pin the map to its own stacking context at z-index 0 so those internals stay
   contained and never paint over the sticky header (z-index 100) or the
   bottom-sticky CTA bar (z-index 50) while scrolling. */
#map {
    position: relative;
    z-index: 0;
}
.property-attrs dt {
    font-size: 0.8rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.8em;
}
.property-attrs dt:first-child { margin-top: 0; }
.property-attrs dd {
    margin: 0.1em 0 0;
    font-size: 1.05rem;
    font-weight: 500;
}
.property-price {
    color: var(--accent) !important;
    font-size: 1.5rem !important;
    font-family: var(--serif);
}
.property-price small {
    font-size: 0.65em;
    font-weight: 400;
    color: var(--text-soft);
    font-family: var(--sans);
}

/* Preview banner */
.preview-banner {
    background: var(--warn);
    color: #fff;
    padding: 0.7em 1em;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2em;
    flex-wrap: wrap;
}
.preview-banner > span { text-transform: uppercase; }
.preview-back {
    background: rgba(0,0,0,0.25);
    color: #fff;
    padding: 0.3em 0.9em;
    border-radius: var(--radius);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    white-space: nowrap;
}
.preview-back:hover { background: rgba(0,0,0,0.4); color: #fff; }

/* Contact page */
.contact-section { max-width: 900px; }
.contact-intro {
    font-size: 1.1rem;
    color: var(--text-soft);
    max-width: 40em;
    margin-bottom: 2em;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1em;
    margin-bottom: 3em;
}
.contact-card {
    background: var(--card);
    padding: 1.4em 1.2em;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    display: block;
}
.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(31,27,22,0.14);
    color: inherit;
}
.contact-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4em;
}
.contact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    margin-bottom: 0.3em;
}
.contact-value {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}
.contact-footer {
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.95rem;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2em;
}
.lightbox.open { display: flex; }
.lightbox-content {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-content picture,
.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* Video plays full-screen at 16:9, capped to the viewport on both axes. Width and
   height are both given explicitly (not via aspect-ratio) so the iframe always has
   a definite box to fill inside the flex lightbox — otherwise it collapses to the
   iframe's tiny intrinsic size. 90vw → 50.625vw height; 90vh → 160vh width. */
.lightbox-video {
    flex: none;                  /* don't let the flex lightbox shrink it */
    width: min(90vw, 160vh);
    height: min(50.625vw, 90vh);
    max-width: 100%;
    aspect-ratio: 16 / 9;
}
.lightbox-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.25); }
.lightbox-close { top: 1em; right: 1em; }
.lightbox-prev  { left: 1em; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1em; top: 50%; transform: translateY(-50%); }
/* Keep the vertical centering on hover — otherwise the global `button:hover`
   transform (translateY(-1px)) overrides translateY(-50%) and the arrows jump. */
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%); }
.lightbox-close:hover { transform: none; }

/* Mobile */
@media (max-width: 640px) {
    .site-nav a { font-size: 0.9rem; }
    .section { padding: 2em 1em; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery-item-main { grid-column: span 2; aspect-ratio: 4 / 3; }
    .hero { height: 60vh; min-height: 360px; }
}

/* ==================================================================
   Navigation: dropdowns + hamburger (added with the menu redesign)
   ================================================================== */
.site-nav { gap: 1.2em; align-items: center; }
.nav-toggle { display: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item .nav-top { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.nav-item .nav-top:hover { color: var(--accent); }
.has-dropdown > .nav-top::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 0.3em;
    color: var(--text-soft);
}
.nav-caret { display: none; }   /* desktop opens on hover; caret button is mobile-only */

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 0.4em 0;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 200;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
    display: block;
    padding: 0.5em 1.1em;
    color: var(--text);
    font-size: 0.92rem;
    white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--bg-alt); color: var(--accent); }

/* ==================================================================
   Call-to-action bar
   ================================================================== */
.cta-bar { background: var(--accent); }
.cta-bar--top { border-top: 1px solid rgba(0, 0, 0, 0.08); }
/* Footer-variant CTA floats at the bottom of the viewport while scrolling, then
   docks into its natural spot just above the footer at the end of the page. Works
   because it's a direct <body> child whose containing block spans the whole
   document, giving bottom-sticky room to lift the bar into view. */
.cta-bar--footer {
    margin-top: 2em;
    position: sticky;
    bottom: 0;
    z-index: 50;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.14);
}
/* Footer-variant CTA sits flush on top of the footer (no gap between them). */
.cta-bar--footer + .site-footer { margin-top: 0; }
.cta-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 1.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    justify-content: center;
    align-items: center;
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.5em 1.1em;
    border-radius: var(--radius);
    /* Solid dark button on the gold bar — readable in both light and dark themes
       (the bar is always gold, so these colours are intentionally fixed). */
    background: #2a2018;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}
.cta-btn:hover { background: #fff; color: #2a2018; transform: translateY(-1px); }
.cta-ic { font-size: 1.05em; }

/* ==================================================================
   Listings category filter
   ================================================================== */
.listings-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0 0 1.6em;
}
.filter-chip {
    padding: 0.4em 0.95em;
    border: 1px solid var(--line);
    border-radius: 2em;
    font-size: 0.9rem;
    color: var(--text-soft);
    background: var(--card);
}
.filter-chip:hover { color: var(--accent); border-color: var(--accent); }
.filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ==================================================================
   Content sections: Služby / Projekty / O nás / Referencie
   ================================================================== */
/* Rendered rich text (admin-authored HTML: headings, lists, links, emphasis). */
.rt-content { line-height: 1.7; }
.rt-content > :first-child { margin-top: 0; }
.rt-content > :last-child { margin-bottom: 0; }
.rt-content p { margin: 0 0 0.9em; }
.rt-content h3, .rt-content h4 { margin: 1.1em 0 0.4em; line-height: 1.25; color: var(--text); }
.rt-content ul, .rt-content ol { margin: 0 0 0.9em; padding-left: 1.3em; }
.rt-content li { margin: 0.2em 0; }
.rt-content a { color: var(--accent); text-decoration: underline; }
.rt-content blockquote {
    margin: 0.9em 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--gold);
    color: var(--text-soft);
}

.page-intro { color: var(--text-soft); margin: 0 0 2em; line-height: 1.7; }

.service-block {
    padding: 2.2em 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 150px;   /* clear the sticky header + CTA bar on #anchor jumps */
}
.service-block:last-child { border-bottom: none; }
.service-block h2 { margin-bottom: 0.4em; }
.service-block .rt-content { color: var(--text-soft); line-height: 1.7; }

/* Služby as separate "pages": sidebar of services + a single visible panel.
   The two-column grid + single-panel view only apply once JS adds .js-tabs;
   without JS the panels render as the full stacked list (graceful fallback). */
.services-layout { margin-top: 1.6em; }
.services-layout.js-tabs {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 2.4em;
    align-items: start;
}
.services-nav { display: none; }
.services-layout.js-tabs .services-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    position: sticky;
    top: 90px;
}
.services-nav-link {
    display: block;
    padding: 0.6em 0.9em;
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    color: var(--text-soft);
    font-weight: 500;
    line-height: 1.35;
}
.services-nav-link:hover { color: var(--accent); background: var(--card); }
.services-nav-link.active {
    color: var(--accent);
    background: var(--card);
    border-left-color: var(--accent);
    font-weight: 600;
}
/* In tab mode the panels share one slot: the active one is shown, no dividers. */
.services-layout.js-tabs .service-block { display: none; padding-top: 0; border-bottom: none; }
.services-layout.js-tabs .service-block.active { display: block; }

@media (max-width: 760px) {
    .services-layout.js-tabs { grid-template-columns: 1fr; gap: 1.2em; }
    .services-layout.js-tabs .services-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5em;
    }
    .services-nav-link {
        border-left: none;
        border: 1px solid var(--line);
        border-radius: 2em;
        padding: 0.4em 0.95em;
        font-size: 0.9rem;
    }
    .services-nav-link.active { border-color: var(--accent); }
}

.project-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 1.8em;
}
.project-card .project-body { padding: 1.4em 1.6em; }
.project-card h2 { margin-bottom: 0.4em; }
.project-card .rt-content { color: var(--text-soft); line-height: 1.7; }

/* Team: one member per row. Odd members put the photo on the left with the text
   wrapping around it; even members mirror to the right. A thin rule separates each
   person for readability. */
.team-zigzag { margin: 2.5em 0; }
.team-member {
    padding: 1.8em 0;
    border-bottom: 1px solid var(--line);
}
.team-member:first-child { padding-top: 0; }
.team-member:last-child { border-bottom: none; padding-bottom: 0; }
.team-member::after { content: ""; display: block; clear: both; }   /* contain the float */

.team-photo {
    width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-alt);
}
.team-photo-empty { box-shadow: inset 0 0 0 1px var(--line); }
.team-photo img, .team-photo picture { width: 100%; height: 100%; object-fit: cover; }

/* Odd: photo floats left, text wraps to its right. */
.team-member:nth-child(odd)  .team-photo { float: left;  margin: 0 1.6em 0.6em 0; }
.team-member:nth-child(odd)  .team-info  { text-align: left; }
/* Even: photo floats right, text wraps to its left. */
.team-member:nth-child(even) .team-photo { float: right; margin: 0 0 0.6em 1.6em; }
.team-member:nth-child(even) .team-info  { text-align: right; }

.team-info h3 { margin: 0 0 0.15em; }
.team-role { color: var(--accent); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.6em; }
.team-bio { color: var(--text-soft); font-size: 0.97rem; line-height: 1.65; }
.team-contact {
    margin-top: 0.7em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
}
.team-member:nth-child(even) .team-contact { justify-content: flex-end; }
.team-contact-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
}
.team-contact-link:hover { color: var(--accent); }
@media (max-width: 560px) {
    .team-member:nth-child(even) .team-contact { justify-content: flex-start; }
}

/* Narrow screens: always photo-left, text left-aligned, smaller photo. */
@media (max-width: 560px) {
    .team-member:nth-child(even) .team-photo { float: left; margin: 0 1.3em 0.6em 0; }
    .team-member:nth-child(even) .team-info  { text-align: left; }
    .team-photo { width: 120px; }
}

.story-card {
    background: var(--card);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4em 1.6em;
    margin-bottom: 1.4em;
    display: flex;
    gap: 1.4em;
    align-items: flex-start;
}
.story-photo { flex: 0 0 120px; border-radius: var(--radius); overflow: hidden; }
.story-photo img, .story-photo picture { width: 100%; height: 100%; object-fit: cover; }
.story-body h3 { margin-bottom: 0.3em; }
.story-body p { color: var(--text-soft); line-height: 1.7; margin: 0; }

.subsection-head { margin: 2.5em 0 1.2em; scroll-margin-top: 150px; }
.subsection-head h2 { font-size: 1.4rem; }

/* Public photo gallery (reuses the .gallery lightbox in app.js) */
.content-gallery {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    margin-top: 1.2em;
}
.content-gallery .gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
}
.content-gallery .gallery-item img,
.content-gallery .gallery-item picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Single image: full text-width banner at the bottom, uncropped */
.content-gallery-single {
    display: block;
    grid-template-columns: none;
}
.content-gallery-single .gallery-item {
    aspect-ratio: auto;
    width: 100%;
}
.content-gallery-single .gallery-item img,
.content-gallery-single .gallery-item picture { height: auto; object-fit: contain; }

/* ==================================================================
   Collapse the nav into a hamburger once the full menu no longer fits
   ================================================================== */
@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 2.6em;
        height: 2.4em;
        padding: 0 0.55em;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        cursor: pointer;
        order: 2;
        margin-left: auto;
    }
    .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; }
    .nav-toggle:hover { background: var(--bg-alt); box-shadow: none; transform: none; }

    .site-header-inner { flex-wrap: wrap; }
    .site-brand { order: 1; }
    .site-header-controls { order: 3; }

    .site-nav {
        order: 4;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 0.6em;
        padding-top: 0.4em;
        border-top: 1px solid var(--line);
    }
    .site-nav.open { display: flex; }
    .site-nav > a,
    .nav-item .nav-top { padding: 0.75em 0.2em; width: 100%; }
    .nav-item { flex-wrap: wrap; justify-content: space-between; }
    .nav-item .nav-top { width: auto; flex: 1; }
    .has-dropdown > .nav-top::after { display: none; }
    .nav-caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2em;
        height: 2.2em;
        background: transparent;
        border: none;
        color: var(--text-soft);
        font-size: 1rem;
        cursor: pointer;
    }
    .nav-item.open .nav-caret { color: var(--accent); transform: rotate(180deg); }
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        width: 100%;
        min-width: 0;
        padding: 0 0 0.4em 1em;
        border: none;
        box-shadow: none;
        background: transparent;
    }
    .nav-item.open > .nav-dropdown { display: block; }
    .nav-dropdown a { padding: 0.5em 0.4em; }

    .cta-btn { font-size: 0.82rem; padding: 0.45em 0.7em; flex: 1 1 auto; justify-content: center; }
    .story-card { flex-direction: column; }
    .story-photo { flex-basis: auto; width: 100%; max-width: 220px; }
}

/* --- YouTube Shorts feed --- */
/* Built on the same primitives as listing galleries so the feed feels native:
   .carousel-arrow + .carousel-track for the row (driven by the shared
   data-gallery-carousel handler in app.js), .gallery-item / .gallery-item-video
   + .card-play for the tiles, and .lightbox chrome for playback. Only the 9:16
   framing, the rail/grid toggle and the player's info panel are new here. */
.shorts-block { margin-top: 0.5em; }

.shorts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    margin-bottom: 0.9em;
}
.shorts-count { font-size: 0.85rem; color: var(--text-soft); }

/* Mirrors .property-carousel: arrows sit outside a snapping track. */
.shorts-carousel {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.shorts-carousel .carousel-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 0.6em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shorts-carousel .carousel-track::-webkit-scrollbar { display: none; }
.shorts-strip[data-view="rail"] .shorts-item {
    flex: 0 0 clamp(150px, 42%, 190px);
    scroll-snap-align: start;
}

/* "Show all" unwraps the same track into a grid; the arrows become meaningless. */
.shorts-strip[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.2em 0.8em;
    overflow: visible;
}
.shorts-block[data-view="grid"] .carousel-arrow { display: none; }

.shorts-item { min-width: 0; }

/* A .gallery-item in a 9:16 frame. It is a <button> for keyboard access, so the
   global button chrome (padding/border/background/hover lift) is zeroed out. */
.shorts-tile {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    background: var(--bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.shorts-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.shorts-tile:hover img { transform: scale(1.04); }
/* Cancel the global `button:hover` lift + shadow — in a dense grid of tiles it
   reads as jitter rather than affordance (the poster zoom is the hover cue). */
.shorts-tile:hover { transform: none; box-shadow: none; }
.shorts-tile .card-play { font-size: 2rem; }

.shorts-duration {
    position: absolute;
    right: 0.5em; bottom: 0.5em;
    padding: 0.1em 0.45em;
    font-size: 0.75rem;
    color: #fff;
    background: rgba(0,0,0,0.72);
    border-radius: 4px;
    pointer-events: none;
}

.shorts-item-info { padding: 0.55em 0.1em 0; }
.shorts-item-title {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
    /* Titles vary wildly in length; clamp so grid rows stay even. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shorts-item-meta {
    margin: 0.25em 0 0;
    font-size: 0.78rem;
    color: var(--text-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em 0.6em;
}

/* --- Shorts player --- */
/* Reuses .lightbox (and its close/prev/next buttons) so playback matches the
   listing gallery exactly; these rules only add the portrait stage + details. */
.shorts-viewer .lightbox-content {
    display: flex;
    gap: 1.5em;
    align-items: stretch;
    width: 100%;
    max-width: 1000px;
    max-height: 100%;
}
.shorts-viewer-stage {
    flex: 0 0 auto;
    width: min(46vh, 90vw);
    aspect-ratio: 9 / 16;
    max-height: 100%;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}
.shorts-viewer-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

.shorts-viewer-info {
    flex: 1 1 320px;
    min-width: 0;
    color: #f2ece1;
    text-align: left;
    overflow-y: auto;
    padding-right: 0.4em;
}
.shorts-viewer-info h3 {
    font-family: var(--serif);
    font-size: 1.35rem;
    margin: 0 0 0.5em;
    color: #fff;
}
.shorts-viewer-position { font-size: 0.8rem; color: #b3a994; margin: 0 0 0.6em; }
.shorts-viewer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1em;
    font-size: 0.85rem;
    color: #b3a994;
    margin: 0 0 1em;
}
.shorts-viewer-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0 0 1.2em;
    color: #ded6c8;
}
.shorts-viewer-link {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--accent-soft);
    border-bottom: 1px solid currentColor;
}

/* Filmstrip — jump straight to any clip without leaving the player. */
.shorts-viewer-picker {
    display: flex;
    gap: 0.5em;
    overflow-x: auto;
    padding: 0.9em 0 0.2em;
    margin-top: 1.2em;
    border-top: 1px solid rgba(255,255,255,0.15);
    scrollbar-width: thin;
}
.shorts-viewer-picker button {
    flex: 0 0 44px;
    width: 44px;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    opacity: 0.55;
}
.shorts-viewer-picker button img {
    /* .lightbox-content img forces width/height:auto + object-fit:contain with
       !important (so a photo scales to fit); the filmstrip needs the opposite,
       so it has to override at the same weight. */
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: cover !important;
    display: block;
}
.shorts-viewer-picker button:hover { opacity: 0.85; transform: none; box-shadow: none; }
.shorts-viewer-picker button[aria-current="true"] { opacity: 1; border-color: var(--accent); }

@media (max-width: 860px) {
    /* ---- Mobile: full-screen Reels/TikTok-style player ----
       The desktop layout (video beside a details column) does not survive a
       portrait phone: a 9:16 stage sized off the viewport height is taller than
       the screen once padding and the details column are added, so the video got
       cut off. On mobile the player instead takes the whole viewport, the video
       fills it, and the details collapse into a tappable overlay. */
    .shorts-viewer { padding: 0; background: #000; }

    /* dvh excludes the mobile browser's collapsing toolbars; vh is the fallback. */
    .shorts-viewer .lightbox-content {
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        position: relative;
        overflow: hidden;
    }

    /* Let YouTube letterbox inside a full-bleed stage — on a 9:16 phone that is
       an almost exact fill, and it can never overflow the viewport. */
    .shorts-viewer-stage {
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 0;
        align-self: stretch;
    }

    /* Details become an overlay pinned to the bottom, above a scrim so text
       stays readable over bright video. */
    .shorts-viewer-info {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 1;
        flex: none;
        padding: 3.5em 4.6rem 1.1em 1.1em;   /* right pad clears the action rail */
        max-height: 45%;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .shorts-viewer-info h3 { font-size: 1.05rem; margin-bottom: 0.35em; }
    .shorts-viewer-position { margin-bottom: 0.35em; }
    .shorts-viewer-meta { margin-bottom: 0.5em; font-size: 0.8rem; }
    /* Collapsed by default: a couple of lines, like Instagram's caption. */
    .shorts-viewer-desc {
        margin-bottom: 0.6em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .shorts-viewer.captions-expanded .shorts-viewer-desc {
        display: block;
        overflow: visible;
    }
    /* Tapped away: the whole panel slides out, leaving just the ⌃ pill. */
    .shorts-viewer.captions-hidden .shorts-viewer-info {
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
    }

    /* The filmstrip is a desktop nicety; on a phone it competes with the video. */
    .shorts-viewer-picker { display: none; }

    /* Action rail — the familiar right-edge column from Reels/TikTok. Needed
       because a cross-origin YouTube iframe consumes touch events, so a swipe
       that starts over the video cannot reach us; these always work.
       They must sit above the caption scrim, which spans the full width and
       would otherwise swallow the taps (it is later in the DOM). */
    .shorts-viewer .lightbox-prev,
    .shorts-viewer .lightbox-next,
    .shorts-viewer .lightbox-close,
    .shorts-caption-toggle {
        /* rem, not em: the buttons inherit different font sizes, and em would
           make the three controls visibly different sizes. ~46px ≥ the 44px
           minimum touch target. */
        width: 2.9rem;
        height: 2.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 1.35rem;
        line-height: 1;
        color: #fff;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(2px);
        border: 0;
        border-radius: 50%;
        z-index: 3;
    }
    /* The shared glyphs are ‹ ›, but this feed moves vertically. Rotating the
       (circular, so visually unchanged) buttons turns them into up/down chevrons. */
    .shorts-viewer .lightbox-prev { left: auto; right: 0.6em; top: auto; bottom: 8.6rem; transform: rotate(90deg); }
    .shorts-viewer .lightbox-next { left: auto; right: 0.6em; top: auto; bottom: 5.2rem; transform: rotate(90deg); }
    .shorts-viewer .lightbox-prev:hover { transform: rotate(90deg); }
    .shorts-viewer .lightbox-next:hover { transform: rotate(90deg); }
    .shorts-viewer .lightbox-close { top: 0.6em; right: 0.6em; transform: none; }
    .shorts-viewer .lightbox-close:hover { transform: none; }

    /* Caption show/hide pill, bottom-right under the action rail. Deliberately
       NOT a chevron: next to the navigation arrows a third chevron reads as
       "another way to move between clips". The lines glyph says "text". */
    .shorts-caption-toggle {
        position: absolute;
        right: 0.6em;
        bottom: 1.8rem;
        cursor: pointer;
        transform: none;
    }
    .shorts-caption-toggle:hover { transform: none; box-shadow: none; }
    /* Dim it while the caption is hidden, so the panel's state is readable
       from the control itself. */
    .shorts-viewer.captions-hidden .shorts-caption-toggle { opacity: 0.55; }
}

/* The caption toggle only makes sense in the mobile overlay layout. */
@media (min-width: 861px) {
    .shorts-caption-toggle { display: none; }
}