@charset "UTF-8";
/*
 * Estrel Tower — Category Nav (estrel_category_nav)
 * Shared tab navigation: initial inline state + sticky on-scroll state.
 *
 * Container-queries (cqi) so the bar scales nicely inside any layout column.
 * Mobile (< 768px) collapses to a horizontally scrollable tab strip.
 */

.estrel-cat-nav {
    /* Figma Tabs (208:400): 730×72, gap between tabs ~140px */
    --cat-nav-gap: clamp(48px, 7.3cqi, 140px);
    --cat-nav-icon-size: clamp(36px, 3.5cqi, 60px);
    --cat-nav-label-size: clamp(15px, 1.3cqi, 22px);
    --cat-nav-color-inactive: rgba(20, 23, 45, 0.55);
    --cat-nav-color-active: var(--text-primary, #14172D);
    --cat-nav-bg: var(--zimmer-bg, #FFFAF6);
    --cat-nav-border: rgba(20, 23, 45, 0.08);

    display: block;
    container-type: inline-size;
    font-family: var(--font-soehne, system-ui, sans-serif);
}

/* ============================
   INITIAL STATE
   Figma overview: 78px above tabs, 98px below → ~88px even padding
   ============================ */

.estrel-cat-nav__initial {
    padding: clamp(36px, 4.6cqi, 88px) 1rem clamp(46px, 5.4cqi, 98px);
    background: var(--cat-nav-bg);
}

.estrel-cat-nav__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--cat-nav-gap);
    flex-wrap: wrap;
}

.estrel-cat-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.estrel-cat-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;       /* Figma: 14px between icon and label */
    color: var(--cat-nav-color-inactive);
    text-decoration: none;
    transition: color 0.18s ease;
}

.estrel-cat-nav__link:hover,
.estrel-cat-nav__link:focus-visible,
.estrel-cat-nav__item.is-active .estrel-cat-nav__link {
    color: var(--cat-nav-color-active);
}

.estrel-cat-nav__icon {
    width: var(--cat-nav-icon-size);
    height: var(--cat-nav-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.estrel-cat-nav__icon .estrel-icon,
.estrel-cat-nav__icon svg {
    width: 100%;
    height: 100%;
}

.estrel-cat-nav__icon svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.estrel-cat-nav__item.is-active .estrel-cat-nav__icon svg {
    stroke-width: 2;
}

.estrel-cat-nav__label {
    font-size: var(--cat-nav-label-size);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.estrel-cat-nav__item.is-active .estrel-cat-nav__label {
    font-weight: 600;
}

/* ============================
   SENTINEL (IntersectionObserver target)
   ============================ */

.estrel-cat-nav__sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

/* Overview + eventtyp-detail pages hide the inline state (zimmer-hero.css:302)
   and rely on the hero's own sentinel (estrel_room_hero.html.twig:70) — the
   JS picks the LAST sentinel in document order (category-nav.js:40-47).
   Pull the module's redundant sentinel out of layout flow so the wrapper
   collapses to 0 and the hero sits flush at top:0. */
.estrel-page.is-overview .estrel-cat-nav,
.estrel-page.is-eventtyp-detail .estrel-cat-nav {
    position: relative;
}
.estrel-page.is-overview .estrel-cat-nav__sentinel,
.estrel-page.is-eventtyp-detail .estrel-cat-nav__sentinel {
    position: absolute;
    top: 0;
    left: 0;
}

/* ============================
   STICKY STATE
   Hidden by default; positioned-fixed when body has .has-sticky-cat-nav
   ============================ */

.estrel-cat-nav__sticky {
    display: none;
}

/* Sticky-Bar auf Detail-Pages UND Overview-Pages.
   Auf Overview zeigt das Hero die 4-Icon-Nav inline; die Sticky-Variante
   erscheint dann erst beim Scrollen unter dem Navbar (gleicher Pattern). */
body.has-sticky-cat-nav .estrel-page.is-detail .estrel-cat-nav__sticky,
body.has-sticky-cat-nav .estrel-page.is-overview .estrel-cat-nav__sticky {
    display: block;
    position: fixed;
    top: var(--header-height, 80px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--cat-nav-bg);
    border-top: 1px solid var(--cat-nav-border);
    border-bottom: 1px solid var(--cat-nav-border);
    box-shadow: 0 4px 20px rgba(20, 23, 45, 0.04);
    animation: estrel-cat-nav-slide-in 0.22s ease both;
}

/* Overview-Pages: der inline-Nav kommt aus dem Hero (Figma 208:400), aber
   die Sticky-Variante bleibt aktiv — deshalb nur der Initial-Block hidden
   (siehe zimmer-hero.css), Sentinel + Sticky rendern weiter. */

@keyframes estrel-cat-nav-slide-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.estrel-cat-nav__sticky-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 1.5rem;
    max-width: var(--container-max, 1920px);
    margin: 0 auto;
}

.estrel-cat-nav__breadcrumb {
    font-size: 1rem;
    color: var(--cat-nav-color-active);
    line-height: 1.3;
    min-height: 1.3em; /* avoid layout shift on overview pages */
}

.estrel-cat-nav__breadcrumb-main {
    font-family: var(--font-alpina, Georgia, serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.05em;
}

.estrel-cat-nav__breadcrumb-accent {
    font-family: var(--font-soehne, system-ui, sans-serif);
    font-weight: 400;
    margin-left: 0.35em;
    font-style: normal;
}

.estrel-cat-nav__sticky-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(1.5rem, 3cqi, 3rem);
    justify-self: center;
}

.estrel-cat-nav__sticky-link {
    color: var(--cat-nav-color-inactive);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 0.18s ease;
}

.estrel-cat-nav__sticky-link:hover,
.estrel-cat-nav__sticky-link:focus-visible {
    color: var(--cat-nav-color-active);
}

.estrel-cat-nav__sticky-item.is-active .estrel-cat-nav__sticky-link {
    color: var(--cat-nav-color-active);
    font-weight: 600;
}

.estrel-cat-nav__sticky-right {
    /* Reserved for future CTA (e.g. "Zimmer anfragen") */
    min-width: 1px;
}

/* ============================
   MOBILE — horizontal scroll tabs
   ============================ */

@media (max-width: 767px) {
    .estrel-cat-nav__initial {
        padding: 1.25rem 0;
    }

    .estrel-cat-nav__list {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0 1rem;
        gap: 1.75rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .estrel-cat-nav__list::-webkit-scrollbar { display: none; }

    .estrel-cat-nav__item {
        flex: 0 0 auto;
        min-height: var(--touch-target-min);
        align-items: center;
    }

    .estrel-cat-nav__icon {
        width: 28px;
        height: 28px;
    }

    .estrel-cat-nav__label {
        font-size: 13px;
        white-space: nowrap;
    }

    body.has-sticky-cat-nav .estrel-cat-nav__sticky-inner {
        grid-template-columns: 1fr;
        padding: 0.5rem 0;
        gap: 0.5rem;
    }

    .estrel-cat-nav__breadcrumb {
        font-size: 0.85rem;
        text-align: center;
        padding: 0 1rem;
    }

    /* Wrap the scroll-list in a fade-edge mask so users see there's more content.
       The list itself stays scrollable; mask is purely cosmetic. */
    .estrel-cat-nav__sticky-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-self: stretch;
        padding: 0 1rem;
        gap: 1.25rem;
        scroll-padding-inline: 1rem;
        /* Fade out edges so partial tabs hint at scrollability */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
    }
    .estrel-cat-nav__sticky-list::-webkit-scrollbar { display: none; }

    .estrel-cat-nav__sticky-item {
        flex: 0 0 auto;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }

    .estrel-cat-nav__sticky-link {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .estrel-cat-nav__sticky-right {
        display: none;
    }
}