/* =============================================================
   LodgeStoryGrid
   custom_code/LodgeStoryGrid/style.css
   Loaded dynamically via scripts.js / resourceLoader
   ============================================================= */

/* ---- Design tokens ----------------------------------------- */
.LodgeStoryGridWrapper {
    --lsg-desktop-cols:  5;
    --lsg-desktop-gap:   15px;
    --lsg-cols:          var(--lsg-desktop-cols);
    --lsg-gap:           var(--lsg-desktop-gap);
    --lsg-edge-pad:      clamp(18px, 3vw, 42px);
    --lsg-radius:        8px;
    --lsg-aspect:        9 / 16;
    --lsg-pad:           16px;

    --lsg-font-title:    var(--title-font, "Oswald", sans-serif);
    --lsg-font-body:     var(--body-font, "Lato", sans-serif);

    --lsg-name-size:     clamp(1rem, 1.45vw, 1.35rem);
    --lsg-tag-size:      clamp(0.72rem, 0.82vw, 0.86rem);
    --lsg-cta-size:      0.66rem;
    --lsg-badge-size:    0.62rem;

    --lsg-ring:          rgba(255, 255, 255, 0.42);
    --lsg-ring-hover:    rgba(223, 188, 122, 0.9);
    --lsg-focus:         #005699;
    --lsg-bg:            #15202a;

    --lsg-overlay-rest:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.38) 45%,
            rgba(0, 0, 0, 0.08) 78%,
            rgba(0, 0, 0, 0.2) 100%);
    --lsg-overlay-hover:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.84) 0%,
            rgba(0, 0, 0, 0.48) 48%,
            rgba(0, 0, 0, 0.14) 78%,
            rgba(0, 0, 0, 0.24) 100%);

    --lsg-transition-img:     0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --lsg-transition-fast:    0.24s ease;
    --lsg-transition-med:     0.38s ease;
    --lsg-cycle-speed:        1800ms;

    box-sizing: border-box;
    justify-content: center;
    padding-right: var(--lsg-edge-pad);
    padding-left: var(--lsg-edge-pad);
}


/* ---- Link reset -------------------------------------------- */
.LodgeStoryGridWrapper a.lsg,
.LodgeStoryGridWrapper a.lsg:visited,
.LodgeStoryGridWrapper a.lsg:hover,
.LodgeStoryGridWrapper a.lsg:active {
    color: inherit;
    text-decoration: none;
    border: none;
}


/* ---- Grid -------------------------------------------------- */
.LodgeStoryGrid {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--lsg-cols), minmax(0, 1fr));
    gap: var(--lsg-gap);
}


/* ---- Story card -------------------------------------------- */
.lsg {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--lsg-aspect);
    border-radius: var(--lsg-radius);
    background: var(--lsg-bg);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
    isolation: isolate;
    cursor: pointer;
}

.lsg:focus-visible {
    outline: 2px solid var(--lsg-focus);
    outline-offset: 4px;
}


/* ---- Media ------------------------------------------------- */
.lsg__media,
.lsg__overlay,
.lsg__ring {
    position: absolute;
    inset: 0;
}

.lsg__media {
    overflow: hidden;
}

#content .lsg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transition:
        opacity 0.45s ease,
        transform var(--lsg-transition-img);
}

#content .lsg__img.is-active {
    opacity: 1;
}

.lsg:hover .lsg__img.is-active,
.lsg:focus-visible .lsg__img.is-active {
    transform: scale(1.07);
}

.lsg__overlay {
    z-index: 1;
    background: var(--lsg-overlay-rest);
    transition: background var(--lsg-transition-med);
    pointer-events: none;
}

.lsg:hover .lsg__overlay,
.lsg:focus-visible .lsg__overlay {
    background: var(--lsg-overlay-hover);
}

.lsg__ring {
    z-index: 3;
    border: 1px solid var(--lsg-ring);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition:
        border-color var(--lsg-transition-fast),
        box-shadow var(--lsg-transition-fast);
    pointer-events: none;
}

.lsg:hover .lsg__ring,
.lsg:focus-visible .lsg__ring {
    border-color: var(--lsg-ring-hover);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0 0 3px rgba(223, 188, 122, 0.18);
}


/* ---- Story bars -------------------------------------------- */
.lsg__story-bars {
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    z-index: 4;
    display: flex;
    gap: 5px;
    pointer-events: none;
}

.lsg__story-bars span {
    position: relative;
    display: block;
    flex: 1 1 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: background var(--lsg-transition-fast);
}

.lsg__story-bars span::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.96);
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
}

.lsg__story-bars span.is-complete::before {
    transform: scaleX(1);
}

.lsg__story-bars span.is-active::before {
    transform: scaleX(0);
}

.lsg__story-bars span.is-active.is-progressing::before {
    transform: scaleX(1);
    transition: transform var(--lsg-cycle-speed) linear;
}

.lsg__story-bars span.is-complete {
    background: rgba(255, 255, 255, 0.62);
}

.lsg:hover .lsg__story-bars span,
.lsg:focus-visible .lsg__story-bars span {
    background: rgba(255, 255, 255, 0.62);
}

.lsg:hover .lsg__story-bars span.is-complete,
.lsg:focus-visible .lsg__story-bars span.is-complete {
    background: rgba(255, 255, 255, 0.96);
}


/* ---- Region badge ------------------------------------------ */
.lsg__region {
    position: absolute;
    top: 24px;
    left: 14px;
    right: 14px;
    z-index: 4;
    width: max-content;
    max-width: calc(100% - 28px);
    font-family: var(--lsg-font-body);
    font-size: var(--lsg-badge-size);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.34);
    padding: 5px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ---- Content ----------------------------------------------- */
.lsg__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: calc(var(--lsg-pad) + 18px) var(--lsg-pad) var(--lsg-pad);
    pointer-events: none;
}

.lsg__name {
    font-family: var(--lsg-font-title);
    font-size: var(--lsg-name-size);
    font-weight: 400;
    line-height: 1.08;
    color: #fff;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}

.lsg__tagline {
    margin-top: 8px;
    font-family: var(--lsg-font-body);
    font-size: var(--lsg-tag-size);
    font-weight: 300;
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.lsg__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-family: var(--lsg-font-body);
    font-size: var(--lsg-cta-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.82;
    transform: translateY(4px);
    transition:
        opacity var(--lsg-transition-fast),
        transform var(--lsg-transition-fast);
}

.lsg__cta-arrow {
    display: inline-block;
    transition: transform var(--lsg-transition-fast);
}

.lsg:hover .lsg__cta,
.lsg:focus-visible .lsg__cta {
    opacity: 1;
    transform: translateY(0);
}

.lsg:hover .lsg__cta-arrow,
.lsg:focus-visible .lsg__cta-arrow {
    transform: translateX(4px);
}


/* ---- Responsive -------------------------------------------- */
@media (max-width: 1180px) {
    .LodgeStoryGridWrapper {
        --lsg-cols: 3;
    }
}

@media (max-width: 900px) {
    .LodgeStoryGridWrapper {
        --lsg-cols: 3;
        --lsg-gap: 12px;
        --lsg-edge-pad: 20px;
    }
}

@media (max-width: 640px) {
    .LodgeStoryGridWrapper {
        --lsg-gap: 12px;
		--lsg-cols: 3;
        --lsg-edge-pad: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .LodgeStoryGrid {
        width: max-content;
        max-width: none;
        display: flex;
        padding: 0 18px 8px;
    }

    .lsg {
        flex: 0 0 min(74vw, 260px);
    }
}