/*
    room category cards — plugin styles
    extracted from cards.html prototype
*/

*, *::before, *::after {
    box-sizing: border-box;
}

.card {
    padding: 24px;
    background-color: #FFE550;
}

.card__inner {
    display: flex;
    flex-direction: column;
}

.card__header {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 32px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Topol Bold", sans-serif;
}

/*
    hero carousel + progress bars
  */

.card__hero-carousel {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
}

@media (min-width: 768px) {
    .card__hero-carousel {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.card__hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/*
   carousel slides
*/

.card__hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: block;
    pointer-events: none;
}

.card__hero-slide.is-active {
    opacity: 1;
}

/* <picture> wrapper as a carousel slide */
picture.card__hero-slide {
    object-fit: fill;
}

picture.card__hero-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* carousel navigation arrows */

.card__hero-nav {
    position: absolute;
    bottom: 0.75rem;
    z-index: 5;
    width: 2rem;
    height: 2rem;
    background-size: cover;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: none;
    border-radius: 50%;
}

.card__hero-carousel:hover .card__hero-nav,
.card__hero-carousel:focus-within .card__hero-nav {
    display: block;
}

.card__hero-nav--prev {
    left: 0.75rem;
    background-image: url('/typo3conf/ext/stayery_styles/Resources/Public/styles/Theme/images/mouse-over-nav_left.svg');
}

.card__hero-nav--next {
    right: 0.75rem;
    background-image: url('/typo3conf/ext/stayery_styles/Resources/Public/styles/Theme/images/mouse-over-nav_right.svg');
}

/* carousel play/pause toggle. uses the same black-circle svg style as the nav arrows. */

.card__hero-toggle {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 2rem;
    height: 2rem;
    background-size: cover;
    background-color: transparent;
    background-position: center;
    border: none;
    cursor: pointer;
    display: none;
    border-radius: 50%;
    padding: 0;
}

.card__hero-carousel:hover .card__hero-toggle,
.card__hero-carousel:focus-within .card__hero-toggle {
    display: block;
}

.card__hero-toggle.is-paused {
    background-image: url('/typo3conf/ext/stayery_styles/Resources/Public/styles/Theme/images/mouse-over-nav_play.svg');
}

.card__hero-toggle.is-playing {
    background-image: url('/typo3conf/ext/stayery_styles/Resources/Public/styles/Theme/images/mouse-over-nav_pause.svg');
}

/* focus styles — shared by all carousel buttons. removes the default browser outline on click; restores a
   visible ring for keyboard focus only (matches stayerylocations).
*/

.card__hero-nav:focus,
.card__hero-toggle:focus {
    outline: none;
}

.card__hero-nav:focus-visible,
.card__hero-toggle:focus-visible {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

.card__hero-toggle svg {
    display: none;
}

/*
   carousel dots / progress bars
*/

.card__hero-dots {
    width: 100%;
    text-align: center;
    list-style: none;
    bottom: 0.375rem;
    position: absolute;
    display: flex;
    padding: 0 0.75rem;
    margin: 0;
    gap: 4px;
}

.card__hero-dots li {
    width: 100%;
    margin: 0;
}

.card__hero-dots button {
    position: relative;
    width: 100%;
    height: 2px;
    border: 0;
    background-color: rgba(255, 255, 255, 0.35);
    font-size: 0;
    cursor: pointer;
    display: block;
}

.card__hero-dots button:focus {
    outline: none;
}

.card__hero-dots button::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 0%;
    height: 100%;
}

.card__hero-dots li.is-active button::after {
    background-color: #fff;
    width: 100%;
}

.card__hero-carousel.is-playing .card__hero-dots li.is-active button::after {
    animation: progress 3s linear forwards;
}

@keyframes progress {
    from { width: 0%; }
    to   { width: 100%; }
}

/*
    card body + layout
*/

.card__body {
    font-family: 'Neue Haas Grotesk Display Pro', serif;
    display: flex;
    flex-direction: column;
}

.card-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .card-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .card {
        display: flex;
        flex-direction: column;
        min-height: 700px;
        min-width: 0;
    }

    .card__inner {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .card__hero-carousel {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        aspect-ratio: auto;
        flex: 0 0 220px;
    }

    .card__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* flex chain pins the footer to the bottom of equal-height cards —
       no bottom margin needed, it would lift the button off the shared baseline. */
    .card__footer {
        margin-bottom: 0;
    }
}

/* card description */

.card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 24px;
    margin-bottom: 24px;
    font-family: 'Neue Haas Grotesk Display Pro', serif;
    line-height: 1.5;
    min-height: 3rem;
}

.card__description p {
    margin: 0;
}

/* card amenities */

.card__amenities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
    flex: 1 1 auto;
    align-content: start;
}

.card__amenities-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card__amenities-item img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.card__amenities-item span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    word-break: break-word;
}

.card__amenities--icons-only .card__amenities-item span {
    display: none;
}

/* card footer + button */

.card__footer {
    margin-top: 24px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.card__footer-button {
    display: flex;
    flex-direction: row;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    outline: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.8;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
}

.card__footer-button .btn {
    background-color: #FFE550;
    border-color: #000000;
    color: #000000;
}

.card__footer-button .btn:hover {
    border-color: black;
}

.btn-uppercase {
    text-transform: uppercase;
}

.btn-fullwidth {
    width: 100%;
}

.btn .icon {
    float: right;
    width: 1.5em;
    height: 1.5em;
    margin-top: 0.1em;
    margin-left: 0;
    fill: currentColor;
}


/* ==================================================================
   slick carousel overrides
   applied only when `.card__hero-slides` has been initialized by slick
   (we add the `.is-slick` marker in js). this keeps the original static
   single-image layout unchanged on cards with fewer than 2 slides.
   visual style mirrors the "coming soon" inner slider in city.html.
   ================================================================== */

.card__hero-carousel--slick {
    --card-arrow-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='%23000'/%3E%3Cpath d='M32.5 47c0-5.86-5.53-10.5-12.5-10.5v-1h.004c6.97 0 12.496-4.64 12.496-10.5h1c0 4.81-3.29 8.74-7.94 10.5H52v1H25.56c4.65 1.76 7.94 5.69 7.94 10.5z' fill='%23fff'/%3E%3C/svg%3E");
    --card-arrow-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='%23000'/%3E%3Cpath d='M39.5 25c0 5.86 5.53 10.5 12.5 10.5v1h-.004c-6.97 0-12.496 4.64-12.496 10.5h-1c0-4.81 3.29-8.74 7.94-10.5H20v-1h26.44c-4.65-1.76-7.94-5.69-7.94-10.5z' fill='%23fff'/%3E%3C/svg%3E");
}

/* pin the slides root to the carousel box so the slick tree inherits a
   concrete height from the parent (which uses aspect-ratio on mobile
   and fixed 220px on desktop). without this absolute pinning the
   percentage heights on the slick list/track/slides can loop against
   the aspect-ratio and explode the width to millions of pixels. */
.card__hero-carousel--slick .card__hero-slides.is-slick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card__hero-carousel--slick .slick-slider {
    margin-bottom: 0;
}
.card__hero-carousel--slick .slick-list,
.card__hero-carousel--slick .slick-track,
.card__hero-carousel--slick .slick-slide,
.card__hero-carousel--slick .slick-slide > div {
    height: 100%;
}
.card__hero-carousel--slick .slick-list {
    background: none;
    overflow: hidden;
}
.card__hero-carousel--slick .slick-slide {
    float: left;
}
.card__hero-carousel--slick .slick-slide > div {
    display: block;
}

/* neutralise the pre-existing custom-carousel fade positioning.
   this must be scoped to slick-initialized slides only so a single
   static slide still works when slick is not active. */
.card__hero-carousel--slick .slick-slide .card__hero-slide,
.card__hero-carousel--slick .slick-slide > div > .card__hero-slide {
    position: static;
    top: auto;
    left: auto;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    display: block;
    transition: none;
}
.card__hero-carousel--slick .slick-slide img.card__hero-slide,
.card__hero-carousel--slick .slick-slide picture.card__hero-slide,
.card__hero-carousel--slick .slick-slide picture.card__hero-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* hide the template's pre-rendered custom controls once slick has
   generated its own arrows/dots. single-image cards keep them hidden
   by the existing :hover-only css already on the original classes. */
.card__hero-carousel--slick .card__hero-nav,
.card__hero-carousel--slick .card__hero-dots,
.card__hero-carousel--slick .card__hero-toggle {
    display: none !important;
}

/* arrows — hidden by default, shown on hover/focus/touch-visible */
.card__hero-carousel--slick .slick-prev,
.card__hero-carousel--slick .slick-next {
    display: none !important;
    position: absolute;
    z-index: 4;
    top: auto;
    bottom: 1rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transform: none;
}
.card__hero-carousel--slick .slick-prev::before,
.card__hero-carousel--slick .slick-next::before {
    content: none;
}
.card__hero-carousel--slick .slick-prev:focus-visible,
.card__hero-carousel--slick .slick-next:focus-visible {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
    border-radius: 100%;
}
.card__hero-carousel--slick .slick-prev {
    left: 0.75rem;
    background-image: var(--card-arrow-prev);
}
.card__hero-carousel--slick .slick-next {
    right: 0.75rem;
    background-image: var(--card-arrow-next);
}
.card__hero-carousel--slick:hover .slick-prev,
.card__hero-carousel--slick:hover .slick-next,
.card__hero-carousel--slick:focus-within .slick-prev,
.card__hero-carousel--slick:focus-within .slick-next,
.card__hero-carousel--slick .card__hero-slides.touch-controls-visible .slick-prev,
.card__hero-carousel--slick .card__hero-slides.touch-controls-visible .slick-next {
    display: block !important;
}
.card__hero-carousel--slick .slick-prev.slick-disabled,
.card__hero-carousel--slick .slick-next.slick-disabled {
    opacity: 0.4;
    cursor: default;
}

/* progress-bar dots (white bars, animation only while autoplay) */
.card__hero-carousel--slick .slider-dots {
    position: absolute;
    bottom: 0.375rem;
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0 0.75rem;
    gap: 4px;
    list-style: none;
    text-align: center;
    z-index: 3;
}
.card__hero-carousel--slick .slider-dots li {
    width: 100%;
    margin: 0;
}
.card__hero-carousel--slick .slider-dots li button {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    padding: 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0.35);
    color: transparent;
    font-size: 0;
    cursor: pointer;
}
.card__hero-carousel--slick .slider-dots li button:focus {
    outline: none;
}
.card__hero-carousel--slick .slider-dots li button::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    content: "";
}
.card__hero-carousel--slick .slider-dots .slick-active button::after {
    width: 100%;
    background-color: #fff;
}
.card__hero-carousel--slick .card__hero-slides.is-slick.slick-initialized .slider-dots .slick-active button::after {
    animation: card-hero-slider-progress 3.5s linear forwards;
}
.card__hero-carousel--slick .slider-dots.no-animation .slick-active button::after {
    animation: none;
}

/* play / pause overlay */
.card__hero-carousel--slick .play-button-wrapper {
    display: none;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}
.card__hero-carousel--slick:hover .play-button-wrapper,
.card__hero-carousel--slick:focus-within .play-button-wrapper,
.card__hero-carousel--slick .card__hero-slides.touch-controls-visible .play-button-wrapper {
    display: flex;
}
.card__hero-carousel--slick .play-lottie-btn,
.card__hero-carousel--slick .pause-lottie-btn {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #000;
    border-radius: 100%;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease-in;
    transform: translateY(-50%);
}
.card__hero-carousel--slick .play-lottie-btn.show,
.card__hero-carousel--slick .pause-lottie-btn.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.card__hero-carousel--slick .play-lottie-btn .icon-stayery-play-icon {
    margin-left: 3px;
}
.card__hero-carousel--slick .play-lottie-btn:focus-visible,
.card__hero-carousel--slick .pause-lottie-btn:focus-visible {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

@keyframes card-hero-slider-progress {
    from { width: 0; }
    to   { width: 100%; }
}

/* ================================================================
   outer group carousel (slick)

   active on tablet+ when a group has >= 4 cards (see
   initGroupCarousels() in room-category-cards.js). slick owns the
   layout once initialized, so the flexbox/gap rules above are
   neutralized via the --carousel modifier classes.
   ================================================================ */

.card-group-wrapper {
    position: relative;
}

.card-group.card-group--carousel {
    display: block;
    gap: 0;
}

.card-group.card-group--carousel > .slick-list > .slick-track {
    display: flex;
    align-items: stretch;
}

/* the slide IS the .card — slick.css's `.slick-initialized .slick-slide`
   (display: block) would otherwise win over `.card { display: flex }`
   and collapse the internal chain (inner -> body -> amenities grow ->
   footer pinned to the bottom). same fix as the ibe slider in
   location-city-new.css. */
.card-group.card-group--carousel > .slick-list > .slick-track > .slick-slide {
    display: flex !important;
    flex-direction: column;
    height: auto;
    flex-shrink: 0;
    margin-right: 16px;
}

/* no trailing gap on the last slide — a trailing margin would add
   phantom scrollable overflow and keep the next arrow enabled even
   when every card already fits in view. */
.card-group.card-group--carousel > .slick-list > .slick-track > .slick-slide:last-child {
    margin-right: 0;
}

/* arrow container — absolute top-right, same geometry as the
   coming soon section in location-city-new.css
   (.stayery-location-map-arrows-desktop). hidden until the
   carousel is active. */

.card-group-arrows {
    display: none;
    position: absolute;
    z-index: 2;
    top: -56px;
    right: 0;
    gap: 0.5rem;
}

.card-group-wrapper--carousel-active .card-group-arrows {
    display: flex;
}

.card-group-arrows :is(.slick-prev, .slick-next) {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transform: none;
    transition: opacity 0.2s;
}

.card-group-arrows :is(.slick-prev, .slick-next)::before {
    opacity: 0;
}

.card-group-arrows :is(.slick-prev, .slick-next):hover {
    opacity: 0.8;
}

.card-group-arrows :is(.slick-prev, .slick-next).slick-disabled {
    cursor: default;
    opacity: 0.5;
}

.card-group-arrows .slick-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='%23000'/%3E%3Cpath d='M32.5 47c0-5.86-5.53-10.5-12.5-10.5v-1h.004c6.97 0 12.496-4.64 12.496-10.5h1c0 4.81-3.29 8.74-7.94 10.5H52v1H25.56c4.65 1.76 7.94 5.69 7.94 10.5z' fill='%23fff'/%3E%3C/svg%3E");
}

.card-group-arrows .slick-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='%23000'/%3E%3Cpath d='M39.5 25c0 5.86 5.53 10.5 12.5 10.5v1h-.004c-6.97 0-12.496 4.64-12.496 10.5h-1c0-4.81 3.29-8.74 7.94-10.5H20v-1h26.44c-4.65-1.76-7.94-5.69-7.94-10.5z' fill='%23fff'/%3E%3C/svg%3E");
}