.scrollable-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.aspect-ratio {
    aspect-ratio: 4 / 3; /* Standard widescreen aspect ratio */
    object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
    width: 100%; /* Ensures the image takes full width of its container */
    display: block; /* Ensures the image is treated as a block element */
    margin: auto; /* Centers the image horizontally */
}

/* Container for vertically centered images */
.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    max-width: 100%;
}

/* Blog post image sizing: make images in posts smaller and responsive */
.post-content img {
    display: block;
    height: auto;
    margin: 1rem auto; /* center images */
    max-width: 100%; /* default for very small screens */
}

/* At small screens and up */
@media (min-width: 576px) {
    .post-content img {
        max-width: 75%;
    }
}

/* At medium screens and up */
@media (min-width: 768px) {
    .post-content img {
        max-width: 50%;
    }
}

/* At large screens and up */
@media (min-width: 992px) {
    .post-content img {
        max-width: 33%;
    }
}

/* At extra large screens and up */
@media (min-width: 1200px) {
    .post-content img {
        max-width: 50%;
    }
}

/* Narrow the content width for blog posts */
.post-content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100ch; /* comfortable line length for readability */
}

/* Optionally allow a bit wider on very large screens */
@media (min-width: 1400px) {
    .post-content {
        max-width: 100ch;
    }
}

/* full-bleed reservation iframe: span full viewport width */
.reservation-iframe-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}
.reservation-iframe-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* breakage starts at width: 767px and works again it at 992px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .reservation-iframe-container {
        width: 767px;
    }
}

.review-card {
    /*border: 1px solid #ddd;*/
    /*border-radius: 24px;*/
    margin: 0;
    margin-bottom: 1rem;
}

.review-card .feature-item h5 {
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    min-height: 4em;
    background-color: var(--primary-dark);
    color: white;
    padding: 2rem;
}

.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    margin-top: 3rem;
}

/* Utility wrapper to center inline content like buttons */
.text-centered {
    text-align: center;
}

/* Email signup section on dark red background: ensure accessible contrast */
.email-signup {
    color: #fff;
}
/* Override green accent in this section to a light accent for readability */
.email-signup span {
    color: #ffe9c4 !important; /* light warm accent against dark red */
}
/* Inputs on dark background */
.email-signup .form-control:focus {
    border-color: #ffe9c4;
    box-shadow: 0 0 0 .2rem rgba(255, 233, 196, .25);
}
/* Button: make sure it contrasts with dark red */
.email-signup .btn-success {
    background-color: #ffd166; /* light warm button */
    border-color: #ffd166;
    color: var(--accent-old-red); /* dark text for contrast */
    font-weight: bold;
}
.email-signup .btn-success:hover,
.email-signup .btn-success:focus {
    background-color: #f4c451;
    border-color: #f4c451;
    color: #5c2a00;
}
/* Mailchimp response messages */
.email-signup #mce-error-response {
    color: #ffb3b3 !important;
}
.email-signup #mce-success-response {
    color: #b8f5c8 !important;
}
/* Email signup heading underline override on dark background */
.email-signup .section-heading h2:after {
    background-color: #ffe9c4;
}
/* Links in email signup on dark background */
.email-signup a {
    color: #ffe9c4;
}
.email-signup a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.feature-item p {
    margin-left: 25px;
    margin-right: 25px;
}