/* reviews.css - the curated review carousels in #bewertungen on the St. Gallen and
   Luzern pages. Replaces the Elfsight review wall: the quotes live in the markup, so
   they are in the HTML for crawlers and paint with the page instead of after it.

   One carousel per channel, because a blended rating matches no platform and cannot be
   checked anywhere. 4 cards visible on desktop, sliding a whole page at a time. */

/* No bottom margin: only one panel is ever visible, so the section's own padding sets
   the space underneath. A margin here made the gap change when you switched tabs -
   the second panel is :last-child, the first is not. */
.ec-reviews {
    margin: 0 auto;
    text-align: left;
}

/* ---- channel tabs -------------------------------------------------------------- */

/* One channel at a time: 16 cards stacked is a wall, and a tab also makes clear that
   each rating belongs to one platform rather than being blended. */
.ec-rev-tablist {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e4e7ea;
    margin-bottom: 24px;
}

.ec-rev-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 16px 12px;
    margin-bottom: -1px;
    cursor: pointer;
    color: #6b7480;
    font-family: inherit;
    text-align: left;
}

.ec-rev-tab[aria-selected="true"] {
    border-bottom-color: #4285f4;
    color: #222629;
}

.ec-rev-tab[data-panel="tripadvisor"][aria-selected="true"] {
    border-bottom-color: #00aa6c;
}

.ec-rev-tab:hover {
    color: #222629;
}

.ec-rev-tab:focus-visible {
    outline: 3px solid #4285f4;
    outline-offset: -3px;
}

.ec-rev-tabname {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ec-rev-tabname strong {
    font-size: 1rem;
    font-weight: 700;
}

.ec-rev-tabname span {
    font-size: .82rem;
    color: #6b7480;
}

/* the write-a-review link rides in the tab row, one per channel, shown with its panel */
.ec-rev-write[hidden] {
    display: none;
}

.ec-reviews[hidden] {
    display: none;
}

.ec-rev-logo {
    display: block;
    flex: 0 0 auto;
}

/* Pushes the write-a-review link to the far end of the tab row.

   It carries `btn btn-secondary` in the markup, so it IS the same component as the Follow button
   in the Instagram strip directly above — not a lookalike. The two sections both end their header
   row with one outbound action, and building them from the same button means they cannot drift
   apart later. Everything visual therefore comes from Material Kit; only placement lives here.

   It used to be bare blue underlined text, which is the browser default and looked unstyled next
   to two tabs carrying real chrome. The old per-platform colouring (Google blue / TripAdvisor
   green) is gone with it — the Follow button is neutral, and matching it is the whole point. */
.ec-rev-write {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
}

/* ---- the track ----------------------------------------------------------------- */

.ec-rev-wrap {
    position: relative;
}

.ec-rev-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* the arrows and dots do the work; the bar itself is noise */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ec-rev-track::-webkit-scrollbar {
    display: none;
}

.ec-rev-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    background: #f4f6f7;
    border-radius: 6px;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ec-rev-stars {
    display: flex;
    gap: 2px;
}

.ec-rev-stars svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: #fbbc05;
}

.ec-rev-text {
    margin: 0;
    font-size: .93rem;
    line-height: 1.62;
    color: #2c3238;
    /* every quote is picked to fit whole - nothing is clipped, so there is no
       "read more" and no ellipsis pretending to be a link */
}

.ec-rev-by {
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: .82rem;
    color: #6b7480;
}

.ec-rev-by b {
    color: #222629;
    font-weight: 500;
    font-size: .88rem;
}

/* ---- arrows + dots ------------------------------------------------------------- */

/* Deliberately quiet: a hairline border and barely any shadow, matching the Instagram strip
   above and the booking lab's date nav. A heavy floating button drew more attention than the
   quotes it was there to page through. */
.ec-rev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d5d9de;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    color: #222629;
    cursor: pointer;
    padding: 0;
}

/* A stroked chevron, drawn as a CSS mask. It replaced the ‹ › characters, which were the reason
   the arrows looked small and sat high in the circle: a typographic glyph takes its size and
   baseline from the font, so it can be neither sized nor centred reliably. A mask is measured by
   its box, and `currentColor` keeps the colour inheritance the text had.

   The viewBox is cropped tight to the chevron (10x18) rather than a square 24x24, so that
   `contain` scales the shape itself up to the full 18px box — inside a square viewBox a chevron
   only occupies the middle quarter and comes out looking undersized all over again.

   One icon covers both directions: prev is the same mask flipped. Duplicated verbatim in
   instagram.css — the two files are independent standalone stylesheets, and a shared class would
   make one silently depend on the other being loaded. */
.ec-rev-arrow::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 1.9L8.1 9L1.9 16.1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 1.9L8.1 9L1.9 16.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-rev-prev::before {
    transform: scaleX(-1);
}

.ec-rev-prev {
    left: -14px;
}

.ec-rev-next {
    right: -14px;
}

.ec-rev-arrow:hover:not(:disabled) {
    background: #f2f4f6;
}

/* At the first/last page. Dimmed, not hidden — matches .bk-navbtn in the booking lab, and a
   control that disappears reads as broken. `disabled` also drops it out of the tab order and
   kills the click, so the dead click at either end is gone too. */
.ec-rev-arrow:disabled {
    opacity: .3;
    box-shadow: none;
    cursor: default;
}

.ec-rev-arrow:focus-visible {
    outline: 3px solid #4285f4;
    outline-offset: 2px;
}

.ec-rev-arrow[hidden] {
    display: none;
}

/* Keep the dots' space when there is only one page, so the gap below a carousel is the
   same whether or not it paginates. `hidden` would otherwise remove the row entirely. */
.ec-rev-dots[hidden] {
    display: flex;
    visibility: hidden;
}

.ec-rev-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 18px;
}

.ec-rev-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccd2d8;
    cursor: pointer;
}

.ec-rev-dot[aria-current="true"] {
    background: #4285f4;
}

.ec-reviews[data-src="tripadvisor"] .ec-rev-dot[aria-current="true"] {
    background: #00aa6c;
}

.ec-rev-dot:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

/* ---- responsive ---------------------------------------------------------------- */

/* Desktop only: the arrows move into their own gutters instead of sitting on the outer cards,
   matching the Instagram strip above. Not outside the container — that is 1140px from a
   1200px viewport, so there are 30px of page margin against an arrow's 44px, and pushing past
   it would give the page a horizontal scrollbar at exactly the breakpoint. Below 992px there
   is no width to spare, so they go back to overlapping the edge. */
@media (min-width: 992px) {
    .ec-rev-wrap {
        padding: 0 44px;
    }

    .ec-rev-prev {
        left: 0;
    }

    .ec-rev-next {
        right: 0;
    }
}

@media (max-width: 991px) {
    .ec-rev-card {
        flex-basis: calc(50% - 10px);
    }

    .ec-rev-prev {
        left: -8px;
    }

    .ec-rev-next {
        right: -8px;
    }
}

@media (max-width: 575px) {
    .ec-rev-card {
        /* The next card showing is what tells people it swipes, and it has to be an obvious
           slice to read that way — the old 26px offset left only 6px visible once the 20px
           track gap was taken out, which looks like a rendering seam rather than a card.
           70px leaves a 50px sliver. */
        flex-basis: calc(100% - 70px);
        padding: 18px 16px 15px;
    }

    /* No arrows on a phone: the sliver above is the affordance, and the thumb is the tool. */
    .ec-rev-arrow {
        display: none;
    }

    /* one card fills the screen here, so the same text is far taller than on desktop */
    .ec-rev-text {
        font-size: .9rem;
        line-height: 1.55;
    }

    /* Centred under the centred section heading — left-aligned tabs below a centred title read
       as a mistake. The grey rule goes with it: once the write button wraps to a second line the
       rule sits under THAT, leaving the selected tab's blue underline floating in mid-air with
       nothing to sit on. The blue underline alone marks the selection perfectly well. */
    .ec-rev-tablist {
        justify-content: center;
        border-bottom: 0;
    }

    .ec-rev-tab {
        padding: 8px 12px 10px;
    }

    /* Own line under the tabs. flex-basis forces the break; max-content shrinks the pill back
       to its label, otherwise it would stretch the full width of the row. */
    .ec-rev-write {
        margin-left: 0;
        flex-basis: 100%;
        max-width: max-content;
        margin-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-rev-track {
        scroll-behavior: auto;
    }
}