/* rec-rentals 0.2.1: vacation rentals (root, hubs, rental page, broker block, island link). Builds on rec-core-lite.css (tokens,
   .rec-grid, .rec-listing-card, .rec-photo, .rec-btn, .rec-map, .rec-arrow-link); only the parts that are new live here.
   The area-guide block uses rec-location-guide.css; on location pages this file is loaded only on island pages (0.2.1). */

.rec-str-page { background: var(--rec-sand, #F7F2EA); }
/* Hello Elementor caps .site-main at 500-1140px per breakpoint; this page sets its own container. */
body main.site-main.rec-str-page, body:not([class*=elementor-page-]) main.site-main.rec-str-page { max-width: none; width: 100%; margin: 0; padding: 0; }
.rec.rec-str { max-width: var(--rec-container, 1312px); margin: 0 auto; padding: 32px 64px 96px; color: var(--rec-deep-water, #0B2A33); font-family: var(--rec-font-text, "Manrope", system-ui, sans-serif); box-sizing: border-box; }
.rec-str .rec-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 14px/1.4 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-ink-2, #3B5560); margin-bottom: 20px; }
.rec-str .rec-breadcrumb a { color: var(--rec-lagoon, #0E7C86); }
.rec-str-head { margin-bottom: 28px; }
.rec-str-title { font: 500 48px/1.05 var(--rec-font-display, "Fraunces", Georgia, serif); font-variation-settings: "opsz" 144; margin: 10px 0 12px; color: var(--rec-deep-water, #0B2A33); }
.rec-str-lead, .rec-str-place { font: 500 17px/1.55 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-ink-2, #3B5560); margin: 0; display: flex; align-items: center; gap: 6px; }

/* Archive filters */
.rec-str-filter { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.rec-str-filter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-str-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rec-line, #DCD2C2); background: var(--rec-white, #fff); color: var(--rec-deep-water, #0B2A33); font: 600 14px/1 var(--rec-font-text, "Manrope", sans-serif); text-decoration: none; }
.rec-str-chip:hover { border-color: var(--rec-deep-water, #0B2A33); color: var(--rec-deep-water, #0B2A33); }
.rec-str-chip.is-current { background: var(--rec-lagoon, #0E7C86); border-color: var(--rec-lagoon, #0E7C86); color: #fff; }
.rec-str-chip:focus-visible, .rec-str a:focus-visible, .rec-str-broker a:focus-visible { outline: 2px solid var(--rec-lagoon, #0E7C86); outline-offset: 2px; }
.rec-str-count { font: 600 14px/1 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-ink-2, #3B5560); margin: 0 0 16px; }
.rec-str-pages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; font: 600 15px/1 var(--rec-font-text, "Manrope", sans-serif); }
.rec-str-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--rec-line, #DCD2C2); background: #fff; color: var(--rec-deep-water, #0B2A33); }
.rec-str-pages .page-numbers.current { background: var(--rec-lagoon, #0E7C86); border-color: var(--rec-lagoon, #0E7C86); color: #fff; }
.rec .rec-price__period { font-style: italic; font-weight: 400; }

/* Bridges to the buying side (hub: location page; rental page: hub and location page) */
.rec-str-bridge { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 0; }

/* Rental page: gallery */
.rec-str-gallery { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.rec-str-gallery .rec-photo { position: relative; width: 100%; height: 100%; aspect-ratio: auto; background: var(--rec-dune-2, #E4DCCB); }
.rec-str-gallery .rec-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-str-gallery__item--hero { grid-row: 1 / span 2; }
.rec-str-gallery--n1 { grid-template-columns: 1fr; grid-template-rows: 460px; }
.rec-str-gallery--n1 .rec-str-gallery__item--hero, .rec-str-gallery--n2 .rec-str-gallery__item--hero { grid-row: auto; }
.rec-str-gallery--n2 { grid-template-columns: 2fr 1fr; grid-template-rows: 440px; }
.rec-str-gallery--n3 { grid-template-columns: 2fr 1fr; }
.rec-str-gallery--n4 { grid-template-columns: 2fr 1fr 1fr; }
.rec-str-gallery--n4 .rec-str-gallery__item:last-child { grid-column: 2 / span 2; }
.rec-str-more { margin-bottom: 32px; }
.rec-str-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
.rec-str-more > summary::-webkit-details-marker { display: none; }
.rec-str-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rec-str-more__grid .rec-photo { aspect-ratio: 4 / 3; position: relative; border-radius: 10px; overflow: hidden; background: var(--rec-dune-2, #E4DCCB); }
.rec-str-more__grid .rec-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Rental page: layout, facts, booking box */
.rec-str-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; margin-top: 32px; }
.rec-str-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; margin: 0 0 40px; background: #fff; border: 1px solid var(--rec-line, #DCD2C2); border-radius: 10px; }
.rec-str-facts__item { padding: 16px 20px; border-right: 1px solid var(--rec-dune, #EFE7DA); border-bottom: 1px solid var(--rec-dune, #EFE7DA); }
.rec-str-facts__item dt { margin: 0 0 6px; }
.rec-str-facts__item dd { margin: 0; font: 600 17px/1.3 var(--rec-font-text, "Manrope", sans-serif); }
.rec-str-section { margin: 0 0 40px; }
.rec-str-section .rec-h2 { margin: 0 0 16px; }
.rec-str-intro { font: 600 18px/1.55 var(--rec-font-text, "Manrope", sans-serif); margin: 0 0 16px; }
.rec-str-body { font: 400 17px/1.55 var(--rec-font-text, "Manrope", sans-serif); }
.rec-str-body h2, .rec-str-body h3 { font-family: var(--rec-font-display, "Fraunces", serif); font-weight: 500; margin: 28px 0 10px; }
.rec-str-amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.rec-str-amenities li { display: flex; align-items: center; gap: 8px; font: 500 16px/1.4 var(--rec-font-text, "Manrope", sans-serif); }
.rec-str-amenities svg { color: var(--rec-lagoon, #0E7C86); flex: none; }
.rec-str-aside { position: sticky; top: 24px; }
.rec-str-book { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--rec-line, #DCD2C2); border-radius: 10px; }
.rec-str-book__price { font: 600 28px/1.2 var(--rec-font-display, "Fraunces", serif); }
.rec-str-book__btn { width: 100%; }
.rec-str-book .rec-footnote { margin: 0; font: 500 13px/1.5 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-ink-2, #3B5560); }

/* Broker page block */
.rec.rec-str-broker { margin-top: 56px; }

/* Island page: link to the island's vacation rentals below the key figures (0.2.1) */
.rec.rec-str-hublink { margin: 16px 0 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: #E3F1F1; border: 1px solid var(--rec-sea-tint, #CFE3E3); border-radius: var(--rec-radius-card, 10px); }
.rec .rec-str-hublink__line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rec .rec-str-hublink__count { font: 500 13px/1.4 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-label, #5E727A); }
.rec .rec-str-hublink__note { margin: 0; font: 500 13px/1.5 var(--rec-font-text, "Manrope", sans-serif); color: var(--rec-ink-2, #3B5560); }

@media (max-width: 900px) {
	.rec.rec-str { padding: 20px 20px 56px; }
	.rec-str-title { font-size: 38px; }
	.rec-str-layout { grid-template-columns: 1fr; gap: 32px; }
	.rec-str-aside { position: static; order: -1; }
	.rec-str-gallery, .rec-str-gallery--n1, .rec-str-gallery--n2, .rec-str-gallery--n3, .rec-str-gallery--n4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 12px; grid-template-rows: none; }
	.rec-str-gallery .rec-photo { flex: 0 0 88%; height: 260px; scroll-snap-align: start; }
	.rec-str-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rec-str-amenities { grid-template-columns: 1fr; }
}