/* Christ's College Hospitality: site styles.
   Loads after the design system (assets/ds/tokens.css and components.css) and only uses its
   tokens. Adds layout for pages the design system has no block for: the property page,
   booking card, room cards, gallery mosaic, dialogs, reviews and forms. */

/* ---------- Fluid element defaults (the design system's element sizes are its 1440px values) ---------- */
:where(p, figcaption, small, td, th, label, blockquote, cite, input, textarea, select, li, pre, dd) { font-size: clamp(1rem, 0.7151rem + 0.5944vw, 1.25rem); }
:where(h1) { font-size: clamp(1.875rem, 1.5189rem + 0.7429vw, 2.1875rem); }
:where(h2) { font-size: clamp(1.5625rem, 1.2064rem + 0.7429vw, 1.875rem); }
:where(h3) { font-size: clamp(1.3125rem, 0.9564rem + 0.7429vw, 1.625rem); }
:where(h4) { font-size: clamp(1.125rem, 0.6976rem + 0.8915vw, 1.5rem); }
:where(h5) { font-size: clamp(1.0625rem, 0.7064rem + 0.7429vw, 1.375rem); }
:where(h6) { font-size: clamp(1rem, 0.7151rem + 0.5944vw, 1.25rem); }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Nothing may make the page scroll sideways on phones (clip, unlike hidden, keeps sticky elements working) */
html { overflow-x: clip; }
body { background: var(--color-bg); overflow-x: hidden; overflow-x: clip; }
/* The design system caps this logo's height; let its width follow so it keeps its shape */
.sectionheader-cta img { width: auto; height: auto; }
/* Carousel arrows sit in the page margin; keep them inside the screen on phones */
@media (max-width: 767px) { .slick-prev { left: -16px; } .slick-next { right: -16px; } }
img { height: auto; }
dialog { color: var(--color-font); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Containers and section options for site blocks ---------- */
.container, .amenities .amenities-inner { position: relative; margin: 0 auto; width: 100%; max-width: var(--container); padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
.container--thin { max-width: var(--container-thin); }
.container--narrow { max-width: 640px; }
section.padding_top { padding-top: var(--space-section); }
section.padding_bottom { padding-bottom: var(--space-section); }
section.bg_grey { background-color: var(--color-bg-grey); }

/* ---------- Page titles: the red title bar ---------- */
.title-bar { position: relative; margin: 0 0 calc(var(--space-30) + var(--title-bar-height)); }
.title-bar::after { content: ""; position: absolute; bottom: calc(-1 * var(--space-30)); left: 0; width: var(--title-bar-width); height: var(--title-bar-height); background-color: var(--color-accent); }

/* ---------- Hero ---------- */
.hero .hero-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero .hero-contentarea p + p { margin-top: 0; }
.hero.hero--compact .hero-inner { padding-bottom: var(--space-25); }
.hero.hero--compact .hero-content { max-width: 960px; }
@media (max-width: 1012px) {
  .hero .hero-image img { aspect-ratio: 2 / 1; }
  .hero.hero--compact .hero-content { padding-top: var(--space-30); }
}

/* ---------- Image ratios ---------- */
.ratio-square { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ratio-post { width: 100%; aspect-ratio: 820 / 500; object-fit: cover; }
.ratio-room { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ratio-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cards .cards-item .cards-image img { width: 100%; }

/* ---------- Buttons ---------- */
ul.buttons { margin-bottom: 0; row-gap: var(--space-15); }
.button { text-align: left; }
.button--block { display: block; width: 100%; text-align: center; padding-left: var(--space-button-right); }
button.button { line-height: 1.5; }
.link-button { background: none; border: 0; padding: 0; color: var(--color-accent); border-bottom: solid 1px var(--color-accent); cursor: pointer; font-family: var(--font-sans); transition: 0.2s all; }
.link-button:hover { color: var(--color-font); border-bottom-color: var(--color-font); }
.contentArea ul.buttons li::before, ul.buttons li::before { display: none; }
.contentArea ul.buttons { padding-left: 0; margin-top: var(--space-25); }

/* ---------- Header: open dropdowns on hover too (the design system toggles .isActive from JS) ---------- */
.header .header-navigation > li:hover > ul { opacity: 1; visibility: visible; top: 50px; }
.header .header-navigation ul.sub-menu { padding-left: var(--space-30); }
.header .header-navigation ul li a { display: inline-block; }
.header .header-logo a img { width: auto; }
@media (max-width: 1012px) { .header nav[aria-label="Main"] { display: none; } }
.mobilenavigation[aria-hidden="true"] { visibility: hidden; }
.mobilenavigation.isActive { visibility: visible; }
.mobilenavigation .mobilenavigation-details p a:not(.button) { color: var(--color-font); }
.mobilenavigation .mobilenavigation-details .button { color: var(--color-white); }
body.nav-open { overflow: hidden; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin-bottom: var(--space-20); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.breadcrumbs li { font-size: inherit; color: var(--color-font); }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--color-icon); }
.breadcrumbs a { color: var(--color-font); border-bottom: solid 1px transparent; }
.breadcrumbs a:hover { border-bottom-color: var(--color-accent); }

/* ---------- Posts: labels, placeholders and filters ---------- */
.posts .posts-item .posts-content p.posts-label { padding: 0 0 var(--space-5); margin: 0; color: var(--color-font); font-weight: 600; }
.posts .posts-item .posts-content p.posts-date { padding-top: var(--space-10); }
.posts-placeholder { aspect-ratio: 820 / 500; background: var(--color-bg-grey); display: flex; align-items: center; justify-content: center; padding: var(--space-20); text-align: center; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.posts-placeholder span { color: var(--color-primary); }
.posts .posts-item .posts-image img { width: 100%; }
.posts-item[hidden] { display: none !important; }
.filters { padding-bottom: var(--space-30); }
.filters .filters-item input[type=text] { border-radius: var(--radius-md); padding-right: 46px; }
.filters-count { margin: var(--space-15) 0 0; }
.filters-empty { padding-top: var(--space-20); }
.posts nav[aria-label="Pagination"] { display: flex; justify-content: center; }

/* ---------- Stars: the design system's stars.webp, cropped for ratings below five ---------- */
.stars { --stars-w: 6.5rem; display: inline-block; width: calc(var(--stars-w) * var(--rating, 5) / 5); overflow: hidden; vertical-align: middle; line-height: 0; flex: none; }
.stars img { width: var(--stars-w); max-width: none; height: auto; display: block; }
.testimonials .testimonials-item blockquote cite .stars { display: block; margin: 15px auto 0; --stars-w: 7.25rem; }
.testimonials .testimonials-item blockquote cite .stars img { padding: 0; width: var(--stars-w); height: auto; margin: 0; }

/* ---------- Home: amenities grid and notes ---------- */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-grid-tight) var(--space-grid); }
.feature-grid li { border-top: solid 1px var(--color-font); padding-top: var(--space-20); }
.feature-grid h3 { margin: 0 0 var(--space-10); }
.feature-grid p { margin: 0; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-grid-tight); margin-top: var(--space-section-header); }
.note { border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-card); }
.note h3 { margin: 0 0 var(--space-10); }
.note p { margin: 0; }
@media (max-width: 1012px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .feature-grid, .notes { grid-template-columns: 1fr; } }

/* ---------- Feature banner: keep white text readable on bright photos ---------- */
.feature .feature-content { max-width: 760px; }
.feature .feature-content h2, .feature .feature-content p { color: var(--color-white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.feature .feature-content h2 { margin-bottom: var(--space-15); }

/* ---------- Newsletter call to action before the footer ---------- */
.cta.cta--newsletter { padding-top: 0; padding-bottom: var(--space-section); }
.cta .cta-button p { margin: 0; }

/* =====================================================================
   Property page
   ===================================================================== */
.property-top { padding-top: var(--space-hero); }
.property-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-30); }
.property-title h1 { margin-bottom: calc(var(--space-30) + var(--title-bar-height) + var(--space-10)); }
.property-address { margin: 0; }
.property-rating { display: flex; align-items: center; gap: var(--space-10); color: var(--color-font); border-bottom: none; padding-top: var(--space-10); white-space: nowrap; }
.property-rating:hover { color: var(--color-font); }
.property-rating span { border-bottom: solid 1px transparent; }
.property-rating:hover span { border-bottom-color: var(--color-accent); }
.property-facts { list-style: none; margin: var(--space-25) 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.property-facts li { font-size: inherit; padding-right: var(--space-15); margin-right: var(--space-15); border-right: solid 1px var(--color-font); line-height: 1.2; margin-bottom: 6px; }
.property-facts li:last-child { border-right: none; }
@media (max-width: 767px) { .property-heading { flex-direction: column; gap: 0; } }

/* In-page navigation */
.subnav { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-white); border-bottom: solid 1px var(--color-keyline); margin-top: var(--space-30); }
.subnav-inner { margin: 0 auto; max-width: var(--container); padding: 0 var(--space-gutter); display: flex; align-items: center; gap: var(--space-20); }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { flex: none; }
.subnav li a { display: block; padding: 18px 0 16px; margin-right: var(--space-nav); color: var(--color-font); border-bottom: solid 2px transparent; }
.subnav li a:hover, .subnav li a.is-current { border-bottom-color: var(--color-accent); }
.subnav-book { flex: none; padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 767px) { .subnav-book { display: none; } }

/* Gallery mosaic (gallery photos stay square-cornered) */
.mosaic-section { padding-top: var(--space-30); }
.mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-10); aspect-ratio: 2.4 / 1; }
.mosaic-tile { position: relative; display: block; padding: 0; border: 0; background: var(--color-bg-grey); overflow: hidden; cursor: zoom-in; min-height: 0; }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s all ease-in-out; }
.mosaic-tile:hover img { transform: scale(1.05); }
.mosaic-tile--main { grid-row: 1 / span 2; }
.mosaic-all { position: absolute; right: var(--space-20); bottom: var(--space-20); z-index: 2; }
@media (max-width: 767px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
  .mosaic-tile--main { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .mosaic-tile:not(.mosaic-tile--main) { aspect-ratio: 1 / 1; }
  .mosaic-tile:nth-child(n+4) { display: none; }
}

/* Two columns with a sticky booking card (5fr / 2fr, as the design system's sidebars) */
.property-layout { display: grid; grid-template-columns: 5fr 2fr; gap: var(--space-grid-wide); padding-top: var(--space-section-header); padding-bottom: var(--space-section); align-items: start; }
.property-main { min-width: 0; }
.property-section { padding-bottom: var(--space-35); margin-bottom: var(--space-35); border-bottom: solid 1px var(--color-font); }
.property-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.property-section > h2 { margin-bottom: var(--space-20); }
.property-aside { position: sticky; top: 84px; }
@media (max-width: 1012px) {
  .property-layout { grid-template-columns: 1fr; }
  .property-aside { display: none; }
}

.checklist { padding-left: 17px; }
.readmore { margin-top: var(--space-text); }
.readmore[hidden] { display: none; }

/* Booking card */
.booking-card { border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-card); background: var(--color-white); }
.booking-card h2 { margin-bottom: var(--space-5); }
.booking-card > p { margin-bottom: var(--space-20); }
.booking-form { display: grid; gap: var(--space-15); }
.booking-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.booking-field label { display: block; font-weight: 600; margin-bottom: var(--space-5); color: var(--color-font); }
.booking-field input, .booking-field select { width: 100%; min-height: 46px; padding: 8px 10px; border: solid 1px var(--color-keyline); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-font); font-family: var(--font-sans); }
.booking-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23bcbcbc' d='M0.5 0.5L7.59615 8.30764C7.64795 8.36836 7.71051 8.41676 7.77997 8.44985C7.84943 8.48293 7.92431 8.5 8 8.5C8.07569 8.5 8.15057 8.48293 8.22003 8.44985C8.28949 8.41676 8.35205 8.36836 8.40385 8.30764L15.5 0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 10px; background-position: calc(100% - 12px) 50%; padding-right: 30px; }
.booking-form .button { width: 100%; text-align: center; padding-left: var(--space-button-right); }
.booking-error { color: var(--color-error); margin: 0; }
.booking-promo { margin: var(--space-15) 0 0; text-align: center; }
.booking-contact { margin-top: var(--space-20); padding-top: var(--space-15); border-top: solid 1px var(--color-grey); }
.booking-contact p { margin: 0 0 var(--space-5); text-align: center; font-size: inherit; }

/* Mobile booking bar (the card is hidden below 1012px) */
.booking-bar { display: none; }
@media (max-width: 1012px) {
  .booking-bar { display: flex; position: fixed; z-index: var(--z-header); left: 0; right: 0; bottom: 0; background: var(--color-white); border-top: solid 1px var(--color-keyline); padding: 10px var(--space-gutter); align-items: center; justify-content: space-between; gap: var(--space-15); transform: translateY(110%); visibility: hidden; transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s; }
  .booking-bar.is-visible { transform: translateY(0); visibility: visible; transition: transform 0.3s ease-in-out, visibility 0s; }
  .booking-bar p { margin: 0; line-height: 1.3; }
  .page-property .footer { padding-bottom: 70px; }
}

/* Rooms */
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-grid-tight); margin-top: var(--space-25); }
.room-card { border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.room-card-image { position: relative; display: block; border: 0; padding: 0; background: var(--color-bg-grey); cursor: zoom-in; overflow: hidden; }
.room-card-image img { transition: 0.3s all ease-in-out; }
.room-card:hover .room-card-image img { transform: scale(1.05); }
.photo-count { position: absolute; right: 12px; bottom: 12px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); padding: 2px 10px; }
.room-card-content { padding: var(--space-20) var(--space-card) var(--space-card); flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.room-card-content h3 { margin: 0 0 var(--space-5); }
.room-card-content p { margin: 0 0 var(--space-15); }
.room-card-content .link-button { margin-top: auto; }
@media (max-width: 767px) { .room-grid { grid-template-columns: 1fr; } }

/* Amenities */
.amenity-list { list-style: none; margin: 0 0 var(--space-30); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20) var(--space-grid); }
.amenity-list li { position: relative; padding-left: 17px; }
.amenity-list li::before { content: ""; position: absolute; left: 0; top: 0.7rem; width: var(--bullet); height: var(--bullet); border-radius: var(--radius-full); background: var(--color-accent); }
.amenity-list h3 { margin: 0; }
.amenity-list p { margin: 0; }
.amenity-groups { columns: 2; column-gap: var(--space-grid); }
.amenity-groups > div { break-inside: avoid; margin-bottom: var(--space-25); }
.amenity-groups h3 { margin-bottom: var(--space-10); }
@media (max-width: 767px) { .amenity-list { grid-template-columns: 1fr; } .amenity-groups { columns: 1; } }

/* Availability panel */
.availability-panel { background: var(--color-bg-grey); border-radius: var(--radius-lg); padding: var(--space-panel); display: flex; align-items: center; justify-content: space-between; gap: var(--space-30); }
.availability-panel h2 { margin-bottom: var(--space-10); }
.availability-panel p { margin: 0; }
.availability-panel > p { flex: none; }
@media (max-width: 767px) { .availability-panel { flex-direction: column; align-items: flex-start; } }

/* Offers list */
.offer-list { list-style: none; margin: 0 0 var(--space-20); padding: 0; }
.offer-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-25); padding: var(--space-20) 0; border-top: solid 1px var(--color-grey); }
.offer-row:first-child { border-top: none; padding-top: 0; }
.offer-row-image { display: block; border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.offer-row-image img { transition: 0.3s all ease-in-out; }
.offer-row:hover .offer-row-image img { transform: scale(1.05); }
.offer-row h3 { margin: 0 0 var(--space-5); }
.offer-row h3 a { color: var(--color-font); border-bottom: solid 1px transparent; }
.offer-row h3 a:hover { border-bottom-color: var(--color-font); }
.offer-row p { margin: 0 0 var(--space-5); }
@media (max-width: 767px) { .offer-row { grid-template-columns: 90px 1fr; gap: var(--space-15); } }

/* Reviews */
.reviews-overview { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-grid); align-items: start; margin-bottom: var(--space-30); }
.rating-summary p { margin: 0 0 var(--space-10); }
.rating-score { display: flex; align-items: baseline; gap: var(--space-10); }
.rating-score .fontSectionTitle { line-height: 1; }
.rating-summary .stars { --stars-w: 8rem; margin-bottom: var(--space-10); }
.rating-bars { list-style: none; margin: var(--space-15) 0 0; padding: 0; }
.rating-bars li { display: grid; grid-template-columns: 54px 1fr 32px; align-items: center; gap: var(--space-10); margin-bottom: var(--space-5); }
.rating-bars li span:last-child { text-align: right; }
.rating-bar { display: block; height: 6px; background: var(--color-grey); border-radius: var(--radius-md); overflow: hidden; }
.rating-bar span { display: block; height: 100%; background: var(--color-primary); }
.review-list { display: grid; gap: var(--space-20); }
.review-card { border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-card); background: var(--color-white); }
.review-card h3 { margin: 0 0 var(--space-5); }
.review-meta { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-15); }
.review-meta .stars { --stars-w: 5.5rem; }
.review-body p { font-size: clamp(0.9375rem, 0.7238rem + 0.4458vw, 1.125rem); margin-bottom: var(--space-10); }
.review-body--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-author { margin: var(--space-10) 0 0; font-weight: 600; }
@media (max-width: 767px) { .reviews-overview { grid-template-columns: 1fr; } }

/* Location */
.location-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-grid); align-items: stretch; }
.location-map { display: flex; }
.location-map .map { flex: 1; background-color: var(--color-white); justify-content: center; }
.location-map .map.embeddedcontent--enabled { background: none; }
.location-map .map iframe { height: 100%; min-height: 420px; aspect-ratio: auto; }
.location-grid .contentArea h3 { margin-top: var(--space-25); }
@media (max-width: 1012px) { .location-grid { grid-template-columns: 1fr; } }

/* Map and video: load only when asked (the design system's blocked-embed panel) */
.map { border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; align-items: center; }
.map .embeddedcontent-message { padding: var(--space-panel); }
.map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }
.map.embeddedcontent--enabled { padding: 0; border: none; background: none; display: block; min-height: 0; }
.embed .map iframe { aspect-ratio: 21 / 9; }
@media (max-width: 767px) { .embed .map iframe { aspect-ratio: 4 / 3; } }
.video { margin: 0; }
.video-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--color-primary); cursor: pointer; border-radius: var(--radius-lg); overflow: hidden; }
.video-play img { opacity: 0.92; transition: 0.3s all ease-in-out; }
.video-play[hidden] { display: none; }
.video-play:hover img { transform: scale(1.03); opacity: 1; }
.video-badge { position: absolute; left: 0; bottom: 0; width: 64px; height: 64px; background-color: var(--color-primary); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath fill='%23ffffff' d='M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 28px; }
.video-note { margin: var(--space-10) 0 0; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: var(--radius-lg); }

/* Host */
.host-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-grid); align-items: center; }
.host-image img { border-radius: var(--radius-lg); }
.host-label { margin-bottom: var(--space-10) !important; }
.contentArea ul.host-facts { list-style: none; padding: 0; margin: 0 0 var(--space-25); display: flex; flex-wrap: wrap; }
.contentArea ul.host-facts li { padding-right: var(--space-15); margin-right: var(--space-15); border-right: solid 1px var(--color-font); line-height: 1.2; font-size: inherit; margin-bottom: 6px; }
.contentArea ul.host-facts li:last-child { border-right: none; }
.contentArea ul.host-facts li::before { display: none; }
@media (max-width: 767px) { .host-grid { grid-template-columns: 1fr; } }

/* Reserve (embedded booking engine) */
.reserve-head { max-width: 900px; margin-bottom: var(--space-section-header); }
.reserve-head h2 { margin-bottom: var(--space-15); }
.ibe-wrap { background: var(--color-white); border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-15); min-height: 240px; }
.ibe-wrap iframe { display: block; width: 100% !important; max-width: none !important; border: 0; }
.ibe-loading { padding: var(--space-20); }
.ibe-loading p { margin: 0 0 var(--space-5); }
.ibe-wrap.is-loaded .ibe-loading { display: none; }
.reserve-mobile { display: none; }
.reserve-mobile .booking-form { background: var(--color-white); border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-card); }
.no-js .reserve-mobile, .reserve.is-compact .reserve-mobile { display: block; }
.no-js .reserve-embed, .reserve.is-compact .reserve-embed { display: none; }
.booking-page .ibe-wrap { min-height: 480px; }
.booking-fallback { margin-top: var(--space-20); }

/* Guest information cards */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-grid-tight); }
.info-card { border: solid 1px var(--color-keyline); border-radius: var(--radius-lg); padding: var(--space-card); display: flex; flex-direction: column; align-items: flex-start; }
.info-card h3 { margin-bottom: var(--space-10); }
.info-card > p { margin-bottom: var(--space-15); }
.info-card .contentArea { margin: 0 0 var(--space-20); }
.info-card .contentArea ul { margin: 0; }
.info-card .link-button { margin-top: auto; }
@media (max-width: 1012px) { .info-cards { grid-template-columns: 1fr; } }

/* ---------- Dialogs ---------- */
dialog.modal, dialog.lightbox { padding: 0; border: 0; max-width: none; max-height: none; background: transparent; }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog.modal { width: min(720px, calc(100vw - 2 * var(--space-gutter))); margin: auto; }
dialog.modal.modal--wide { width: min(980px, calc(100vw - 2 * var(--space-gutter))); }
.modal-panel { background: var(--color-white); border-radius: var(--radius-lg); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-20) var(--space-card); border-bottom: solid 1px var(--color-grey); }
.modal-header h2 { margin: 0; }
.modal-body { padding: var(--space-card); overflow-y: auto; }
.modal-close { flex: none; width: 42px; height: 42px; border-radius: var(--radius-full); border: 0; background-color: var(--color-bg-grey); cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M31 1L1 31' stroke='%23133673' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 1L31 31' stroke='%23133673' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 14px; background-repeat: no-repeat; background-position: center; transition: 0.2s all; }
.modal-close:hover { background-color: var(--color-grey); }
.modal-close--inverse { background-color: var(--color-primary); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M31 1L1 31' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 1L31 31' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.modal-close--inverse:hover { background-color: var(--color-primary-hover); }
.modal-body .contentArea h3 { margin-top: var(--space-20); }
.modal-body h3.fontHeader5 { margin-bottom: var(--space-10); }
.modal-body .contentArea ul { margin-bottom: var(--space-20); }
.modal-carousel { margin-bottom: var(--space-25); }
.modal-carousel figure, .modal-body > figure { margin: 0; }
.modal-carousel img { border-radius: var(--radius-lg); }
.modal-carousel .slick-arrow.slick-prev { left: 10px; }
.modal-carousel .slick-arrow.slick-next { right: 10px; }
.room-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-15); margin: 0 0 var(--space-25); padding: 0 0 var(--space-20); border-bottom: solid 1px var(--color-grey); }
.room-facts dt { font-weight: 600; color: var(--color-font); }
.room-facts dd { margin: 0; color: var(--color-font); }
@media (max-width: 767px) { .room-facts { grid-template-columns: 1fr 1fr; } }
.mini-highlights { margin-top: var(--space-25); }
.mini-highlights ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-15); }
.mini-highlights li { text-align: center; }
.mini-highlights img { width: 72px; height: 72px; border-radius: var(--radius-full); margin: 0 auto var(--space-5); }
.mini-highlights span { display: block; color: var(--color-primary); font-weight: 600; line-height: 1.3; }
.room-video { margin-top: var(--space-25); }
.modal-actions { margin-top: var(--space-30); }

/* Lightbox */
dialog.lightbox { width: 100vw; height: 100vh; height: 100dvh; margin: 0; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 70px 80px; }
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox-figure img { max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; }
.lightbox-figure figcaption { color: var(--color-white); text-align: center; padding-top: var(--space-15); max-width: 760px; }
.lightbox-count { position: absolute; top: 24px; left: 30px; margin: 0; color: var(--color-white); }
.lightbox .modal-close { position: absolute; top: 16px; right: 20px; }
.lightbox .slick-arrow { position: absolute; top: 50%; }
.lightbox .slick-arrow.slick-prev { left: 20px; }
.lightbox .slick-arrow.slick-next { right: 20px; }
@media (max-width: 767px) { .lightbox-inner { padding: 70px 10px 90px; } .lightbox .slick-arrow { top: auto; bottom: 24px; margin: 0; } .lightbox .slick-arrow.slick-prev { left: calc(50% - 52px); } .lightbox .slick-arrow.slick-next { right: calc(50% - 52px); } }

/* ---------- Carousels (slick markup, driven by site.js) ---------- */
.cch-carousel .slick-track { will-change: transform; }
.cch-carousel .slick-slide > img, .cch-carousel .slick-slide figure img { width: 100%; }
.textimage .textimage-carousel { margin: 0 21px; }
@media (max-width: 767px) { .textimage .textimage-carousel { margin: 0; } }
.testimonials .testimonials-carousel { margin: 0 21px; }
@media (max-width: 767px) { .testimonials .testimonials-carousel { margin: 0; } .testimonials .testimonials-carousel .slick-arrow { top: auto; bottom: -60px; } .testimonials .testimonials-carousel { margin-bottom: 60px; } .testimonials .testimonials-carousel .slick-prev { left: calc(50% - 52px); } .testimonials .testimonials-carousel .slick-next { right: calc(50% - 52px); } }

/* ---------- Content (Markdown) ---------- */
.contentArea h2 { margin-top: var(--space-35); }
.contentArea h3 { margin-top: var(--space-25); }
.contentArea > :first-child { margin-top: 0; }
.contentArea img { border-radius: var(--radius-lg); }
.md-figure { margin: var(--space-10) 0 var(--space-text); }
.md-figure img { width: 100%; }
.md-figure figcaption { padding-top: var(--space-10); color: var(--color-font); }
.md-figure--portrait { float: right; width: 40%; max-width: 360px; margin: var(--space-5) 0 var(--space-20) var(--space-30); }
@media (max-width: 767px) { .md-figure--portrait { float: none; width: 100%; max-width: none; margin-left: 0; } }
.contentArea::after { content: ""; display: table; clear: both; }
.table-wrap { overflow-x: auto; margin-bottom: 24px; }
.table-wrap table { border-collapse: collapse; width: 100%; }
.table-wrap th, .table-wrap td { border: solid 1px var(--color-keyline); padding: 8px 12px; text-align: left; vertical-align: top; }
.contentArea ul ul { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* ---------- Single pages (posts, places, offers, legal) ---------- */
.singlepage header .post-meta { margin: 0 0 var(--space-10); }
.singlepage .singlepage-wrapper.singlepage-wrapper--single { grid-template-columns: 1fr; }
.singlepage .singlepage-hero img { width: 100%; }
.singlepage aside .singlepage-item h3 { margin-bottom: var(--space-10); }
.singlepage aside .singlepage-item p { margin-bottom: var(--space-10); }
.singlepage aside .booking-form { margin-top: var(--space-15); }
.singlepage aside ul.buttons { margin: var(--space-15) 0; }
.lead { margin-bottom: var(--space-text); }
.promo-code { display: inline-block; padding: 6px 16px; border: dashed 2px var(--color-accent); border-radius: var(--radius-md); color: var(--color-font); letter-spacing: 0; }
.contact-list { list-style: none; margin: 0 0 var(--space-15); padding: 0; }
.contact-list li { margin-bottom: var(--space-10); font-size: inherit; display: flex; flex-direction: column; }
.contact-list li span.fontBodySmaller { font-weight: 600; }
.contentArea ul.contact-list { padding-left: 0; }
.contentArea ul.contact-list li::before { display: none; }
.quicklinks { list-style: none; margin: 0; padding: 0; }
.quicklinks li { margin-bottom: var(--space-10); }
.quicklinks a { color: var(--color-font); border-bottom: solid 1px transparent; }
.quicklinks a:hover { border-bottom-color: var(--color-accent); }
.points .point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-grid); }
.points .point { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-panel); }
.points .point h2 { margin-bottom: var(--space-10); }
.points .point p { margin: 0; }
@media (max-width: 1012px) { .points .point-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews page ---------- */
.review-feed { list-style: none; margin: var(--space-25) 0 0; padding: 0; display: grid; gap: var(--space-20); }
.review-feed > li::before { display: none; }
.review-more { margin-top: var(--space-30); text-align: center; }
.reviews-aside .rating-summary { padding: var(--space-card); background: var(--color-bg-grey); border-radius: var(--radius-lg); }
.article .article-item { border-bottom-color: var(--color-grey); }
.article .article-item h3 { margin-bottom: var(--space-10); }
.article .article-item p { margin-bottom: var(--space-10); }
.article .article-column > h2 { margin-bottom: 0; }

/* ---------- Guide Book quick links ---------- */
.quicknav { border-top: solid 1px var(--color-keyline); border-bottom: solid 1px var(--color-keyline); background: var(--color-white); position: sticky; top: 0; z-index: var(--z-header); }
.quicknav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.quicknav ul::-webkit-scrollbar { display: none; }
.quicknav li { flex: none; }
.quicknav a { display: block; padding: 16px 0 14px; margin-right: var(--space-nav); color: var(--color-font); border-bottom: solid 2px transparent; }
.quicknav a:hover { border-bottom-color: var(--color-accent); }
.page-guide .accordion .sectionheader { margin-bottom: var(--space-20); }
.page-guide .accordion.padding_top + .accordion { padding-top: 0; }

/* ---------- Forms ---------- */
.form-section .nf-form-cont { margin-bottom: 0; }
.nf-form-cont .nf-form-content { display: flex; flex-wrap: wrap; column-gap: var(--space-20); }
.nf-form-cont .nf-field-container { width: 100%; }
.nf-form-cont .nf-field-container--half { width: calc(50% - var(--space-20) / 2); }
@media (max-width: 767px) { .nf-form-cont .nf-field-container--half { width: 100%; } }
.nf-form-cont .nf-form-content input[type=date], .nf-form-cont .nf-form-content select { padding: 10px 18px; border: solid 1px var(--color-keyline); color: var(--color-font); width: 100%; background-color: var(--color-white); margin: 0; font-family: var(--font-sans); min-height: 48px; }
.nf-form-cont .nf-form-content select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23bcbcbc' d='M0.5 0.5L7.59615 8.30764C7.64795 8.36836 7.71051 8.41676 7.77997 8.44985C7.84943 8.48293 7.92431 8.5 8 8.5C8.07569 8.5 8.15057 8.48293 8.22003 8.44985C8.28949 8.41676 8.35205 8.36836 8.40385 8.30764L15.5 0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 10px; background-position: calc(100% - 15px) 50%; padding-right: 40px; }
.nf-form-cont .nf-form-content textarea { height: 140px !important; font-family: var(--font-sans); }
.nf-form-cont .nf-field-description p { margin: var(--space-5) 0 0; }
.nf-form-cont .nf-form-content input[type=checkbox], .nf-form-cont .nf-form-content input[type=radio] { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.nf-form-cont .nf-form-content ul li label p { margin: 0; }
.nf-form-cont .form-intro { margin-bottom: var(--space-15); }
.nf-form-cont .nf-error input, .nf-form-cont .nf-error select, .nf-form-cont .nf-error textarea { border-color: var(--color-error) !important; }
.nf-form-cont .nf-error-msg { margin-top: var(--space-5); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { width: 100%; margin-top: var(--space-15); }
.form-status.is-error { color: var(--color-error); }
.nf-form-cont .submit-container .button[disabled] { opacity: var(--opacity-disabled); cursor: progress; }
.form-success { padding: var(--space-20) 0 0; }
.form-success:focus { outline: none; }
.form-success p { margin-bottom: var(--space-15); }
.form-success::before { content: ""; display: block; width: var(--title-bar-width); height: var(--title-bar-height); background: var(--color-accent); margin-bottom: var(--space-20); }

/* ---------- Link tree ---------- */
.linktree-head { text-align: center; margin-bottom: var(--space-30); }
.linktree-photo { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius-full); margin: 0 auto var(--space-20); }
.linktree-list { list-style: none; margin: 0 0 var(--space-30); padding: 0; display: grid; gap: var(--space-15); }
.linktree-social { justify-content: center; }
.linktree-social li a svg { height: var(--social-icon); }

/* ---------- Footer additions ---------- */
.footer .footer-content .footer-heading { color: var(--color-yellow); margin: 0 0 var(--space-12); font-size: clamp(0.875rem, 0.7325rem + 0.2972vw, 1rem); }
.footer .footer-content ul.footer-navigation > li > a { pointer-events: none; }
.footer .footer-legal p.footer-credit { margin-top: var(--space-10); }
.footer .footer-content p { margin-bottom: var(--space-10); }
@media (max-width: 1012px) {
  .footer .footer-content { flex-direction: column; }
  .footer .footer-content .footer-contact { margin-bottom: var(--space-30); }
  .footer .footer-content ul.footer-navigation { flex-wrap: wrap; row-gap: var(--space-30); }
  .footer .footer-content ul.footer-navigation > li { flex: 0 0 50%; }
}

/* ---------- Scroll reveal (once, at 95% of the viewport) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(30px); transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(10px); transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .js .reveal-photo { opacity: 0; transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }
  .js .reveal-photo.is-visible { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .header-burger, .mobilenavigation, .subnav, .booking-bar, .cta--newsletter, .footer, .quicknav { display: none !important; }
  .js .reveal, .js .reveal-stagger > *, .js .reveal-photo { opacity: 1 !important; transform: none !important; }
  .accordion .accordion-content { display: block !important; }
}

/* Fact lists on phones: dots instead of rules so wrapped lines read cleanly */
@media (max-width: 767px) {
  .property-facts li, .contentArea ul.host-facts li { border-right: none; padding-right: 0; margin-right: 10px; }
  .property-facts li:not(:last-child)::after, .contentArea ul.host-facts li:not(:last-child)::after { content: "·"; margin-left: 10px; }
}

/* Headings that are links stay navy and take the red underline used by navigation */
.contentArea :is(h2, h3, h4, h5, h6) a { color: var(--color-font); border-bottom: solid 1px var(--color-accent); }
.contentArea :is(h2, h3, h4, h5, h6) a:hover { color: var(--color-font); border-bottom-color: var(--color-font); }
.contact-list li { align-items: flex-start; }

.ibe-offsite { padding: var(--space-20); }
.ibe-offsite p { margin-bottom: var(--space-15); }
.ibe-wrap.is-offsite { min-height: 0; }

/* Accessibility-driven markup: sidebars are divs (not nested landmarks), radio groups use fieldsets */
.cta h2 { margin-bottom: var(--space-15); }
.singlepage .singlepage-aside .singlepage-item { padding-bottom: var(--space-25); margin-bottom: var(--space-25); border-bottom: solid 1px var(--color-grey); }
.singlepage .singlepage-aside .singlepage-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.singlepage .singlepage-aside img { border-radius: var(--radius-md); }
.singlepage .singlepage-aside ul.social li { margin: 0 10px 0 0; }
.singlepage .singlepage-aside ul.social li a svg { height: var(--social-icon); fill: var(--color-primary); }
@media (max-width: 1012px) {
  .singlepage .singlepage-aside { padding-top: 30px; }
  .singlepage .singlepage-aside .singlepage-item.singlepage-item--featuredimage { display: none; }
}
.nf-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.nf-fieldset legend { padding: 0; margin-bottom: 5px; color: var(--color-font); }
/* Newsletter panel after a grey band: keep white space between the two greys */
.bg_grey + .cta--newsletter, .feature + .cta--newsletter { padding-top: var(--space-section); }

/* Small award badge beside a call-to-action's heading */
.cta--badge .cta-wrapper { align-items: center; }
.cta-badge { flex: 0 0 auto; margin-right: var(--space-30); }
.cta-badge img { display: block; width: 68px; height: auto; }
@media (max-width: 1012px) { .cta--badge .cta-wrapper { align-items: flex-start; } .cta-badge { margin: 0 0 var(--space-20); } .cta-badge img { width: 60px; } }