:root {
    --stfm-primary: #1d417b;
    --stfm-secondary: #ef8d2b;
    --vibrant-orange: #ff9900;
    --text-white: #ffffff;
    --text-light-gray: rgba(255,255,255,.8);
    --text-dark: #333333;
    --media-col: 250px; /* fixed left column width */
    --col-gap: 5.75rem; /* gutter between columns */
    --img-radius: 4px; /* smaller radius for editorial feel */
    --caption-color-dark: rgba(255,255,255,.85);
    --caption-color-light: rgba(0,0,0,.68);
    --photo-aspect: 16/9; /* Wider look (try 5/3 or 3/2 if you prefer) */

    --block-bg: var(--text-white); /* default background */
    --block-body: var(--text-dark); /* default text color */
    --muted: rgba(0,0,0,.68); /* default muted text */
    --caption-color: rgba(0,0,0,.68); /* default caption color on light */
    --img-outline: 0 0 0 1px rgba(0,0,0,.06);
    --connector-color: rgba(0,0,0,.12); /* hairline between columns */
    --highlight-percent-color: white; /* default highlight color */
}

/* ---------- Block Sections ---------- */
/* UPDATED: no 100vw / no negative margins; uses a background layer instead */
.Block {
    padding: 3rem 0 2rem 0;
    border-bottom: none;
    position: relative; /* anchor for ::before */
    color: var(--block-body); /* theme-driven text color */
}

    /* Full-bleed background that won’t shift */
    .Block::before {
        content: "";
        position: absolute;
        inset: 0;
        left: 50%;
        width: 100svw;
        transform: translateX(-50%);
        z-index: -1;
        background: var(--block-bg);
    }

@supports (width: 100dvw) {
    .Block::before {
        width: 100dvw;
    }
}

/* Last-resort fallback for very old engines */
@supports not (width: 100dvw) {
    .Block::before {
        width: 100vw;
    }
}




.Block .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}

/* Two-column grid */
.Block-content {
    display: grid;
    grid-template-columns: var(--media-col) 1fr;
    gap: var(--col-gap);
    align-items: start;
    position: relative;
}
    /* subtle vertical connector to bridge columns */
    .Block-content::after {
        content: "";
        position: absolute;
        top: .25rem;
        bottom: .25rem;
        left: calc(var(--media-col) + var(--col-gap)/2 - .5px);
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--connector-color), transparent);
    }

.Block--light {
    --block-bg: var(--text-white);
    --block-body: var(--text-dark);
    --muted: rgba(0,0,0,.68);
    --caption-color: rgba(0,0,0,.68);
    --img-outline: 0 0 0 1px rgba(0,0,0,.06);
    --connector-color: rgba(0,0,0,.12);
    --highlight-percent-color: var(--stfm-primary);
}

.Block--dark {
    --block-bg: linear-gradient(to right, #16335e 0%, var(--stfm-primary) 40%, #2a5a9e 100%);
    --block-body: var(--text-white);
    --muted: rgba(255,255,255,.80);
    --caption-color: rgba(255,255,255,.85);
    --img-outline: 0 0 0 1px rgba(255,255,255,.06);
    --connector-color: rgba(255,255,255,.18);
    --highlight-percent-color: white;
}


.hotel-address {
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.highlight-percent {
    color: var(--highlight-percent-color) !important;
}


/* Alternate layout if needed elsewhere */
.Block-content-alt {
    display: grid;
    grid-template-columns: 1fr var(--media-col);
    gap: var(--col-gap);
    align-items: start;
    position: relative
}

/* ---------- Titles & Text ---------- */
.Block-title {
    font-family: 'Open Sans',sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: var(--vibrant-orange);
    margin-bottom: 1rem;
    letter-spacing: 0;
    line-height: 1
}

@media (min-width:769px) {
    .Block-title {
        white-space: nowrap
    }
}

.Block-text {
    font-size: 1rem;
    line-height: 1.7
}

    .Block-text p {
        margin-bottom: 1.2rem
    }

        .Block-text p:last-child {
            margin-bottom: 0
        }

/* ---------- Magazine Photo Column (consistent size) ---------- */
.PhotoColumn {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.Figure {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.Figure-img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--img-radius);
    display: block;
    backface-visibility: hidden;
    filter: saturate(.98) contrast(1.02);
    box-shadow: var(--img-outline); /* theme-driven subtle outline */
}

.Figure-caption {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--caption-color);
    text-align: center;
}




/* ---------- Hotel-specific ---------- */

.hotel-name {
    font-family: 'Montserrat',sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--block-body); /* auto-adjusts to theme */
    margin-bottom: .5rem;
}


.hotel-address {
    color: var(--text-light-gray);
    margin-bottom: 1.5rem;
    font-size: .95rem
}

.hotel-rate {
    font-weight: 600;
    color: var(--text-white)
}

.rate-note {
    font-size: .9rem;
    color: var(--text-light-gray);
    font-style: italic
}

/* ---------- Lists ---------- */
.transport-list, .attractions-list {
    list-style: none;
    margin: .8rem 0
}

    .transport-list li, .attractions-list li {
        margin-bottom: .6rem;
        padding-left: 1rem;
        position: relative
    }

        .transport-list li:before, .attractions-list li:before {
            content: "•";
            color: var(--vibrant-orange);
            font-weight: bold;
            position: absolute;
            left: 0
        }

/* ---------- Links ---------- */
a {
    color: var(--vibrant-orange);
    text-decoration: none;
    transition: color .3s ease;
    font-weight: 500
}

    a:hover {
        color: #ffbb33;
        text-decoration: underline
    }

.action-links {
    margin-top: 1.2rem
}

    .action-links a {
        margin-right: 2rem;
        font-weight: 500
    }

/* ---------- Responsive ---------- */
@media (max-width:768px) {
    .container {
        padding: 0 1rem
    }

    .page {
        padding: 2rem 0
    }

    .page-title {
        font-size: 2rem
    }

    .Block-content, .Block-content-alt {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

        .Block-content::after {
            display: none
        }
    /* remove vertical connector on mobile */

    .Block-title {
        font-size: 1.4rem;
        margin-bottom: .8rem;
        white-space: normal
    }

    .Block {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem
    }

    .action-links a {
        display: block;
        margin-bottom: .5rem;
        margin-right: 0
    }
}

@media (max-width:480px) {
    .page-title {
        font-size: 1.8rem;
        padding-left: 15px
    }

        .page-title::before {
            width: 4px;
            height: 60%
        }

    .Block-title {
        font-size: 1.2rem
    }

    .Block-text {
        font-size: .95rem
    }
}