/* Atlantic Surf Point - site-level layout around the prototype sections */
body { background: #fff; margin: 0; }
#brx-content { display: flex; flex-direction: column; align-items: flex-start; background: #fff; }
#brx-header, #brx-footer { display: block; width: 100%; }
/* browsers centre button text; the prototype relies on it (comparison cards) - .asp-question keeps its own left */
button { text-align: center; }

/* current page in the menu (prototype, 6 of 7 pages: Poppins Bold, #1768ac, underlined) */
#brx-header .asp-nav[aria-current="page"], #brx-header .asp-nav[aria-current="page"] > p { font-family: "Poppins:Bold"; color: #1768ac; }

/* 1340 rule: every section's contained content is 1340px wide and centred (the prototype's 64px gutters
   gave 1312); full-bleed backgrounds stay edge to edge because the padding sits inside the section */
#brx-content > .px-\[64px\], #brx-header > .px-\[64px\], #brx-footer > .px-\[64px\] {
	padding-left: max(32px, calc((100% - 1340px) / 2));
	padding-right: max(32px, calc((100% - 1340px) / 2));
}
/* every section spans the viewport; the prototype's fixed 1440px frames become fluid */
#brx-content > * { align-self: stretch; }
#brx-content > .w-\[1440px\], #brx-footer > .w-\[1440px\], #brx-content > * > .w-\[1440px\] { width: 100%; }
/* sections whose gutter sits on an inner full-width row */
#brx-content > :not(.px-\[64px\]) > .px-\[64px\] {
	padding-left: max(32px, calc((100% - 1340px) / 2));
	padding-right: max(32px, calc((100% - 1340px) / 2));
}

/* ---- 1340 allocation: the container's extra 28px goes to media, never to gaps (from 1404px = 1340 + gutters) ---- */
@media (min-width: 1404px) {
	/* 632x616 collages (home Introduction, surf-camp Experience...): 76px = portrait +50 (9.6%, within the 10%
	   framing limit) + overlap -26; 0 dead space right */
	.h-\[616px\].w-\[632px\] { width: 708px; }
	.h-\[616px\].w-\[632px\] > .size-\[520px\] { width: 570px; }
	/* surf-camp / A typical day: 3 equal columns over the full 1340 (416 -> 430.7), gaps stay 24 */
	[data-name="Surf timeline"] > [data-name="Day moment"] { width: calc((100% - 48px) / 3); }
	/* surf-camp / Villa Azure: 4 equal amenity columns over 1340 (284 -> 299), gaps stay 48 */
	[data-name="Villa amenities"] > [data-name="Amenity"] { width: calc((100% - 144px) / 4); }
	/* home / Surf camp preview: the photo absorbs the 28px (650 -> 678, +4%) */
	[data-name="Camp photography"] { width: 678px; }
	/* home / Google Reviews: cards absorb the width, the review copy keeps its 371px measure (same line breaks) */
	[data-name="Review cards"] [data-name="Card content"] { max-width: 371px; }
}

/* article content (WordPress blocks carrying the design classes) */
.asp-article .wp-block-group__inner-container { display: contents; }
.asp-article :where(.is-layout-flow, .is-layout-constrained) > * { margin-block: 0; }
.asp-article .wp-block-image:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignwide):not(.alignfull) { margin: 0; }   /* beats Bricks (0,6,0) margin-block: 1em */
.asp-article .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
.asp-article .wp-block-quote { margin: 0; border: 0; }
/* journal page: the related-card row wraps to as many rows as there are posts */
.asp-journal-grid { row-gap: 48px; }
.asp-journal-grid > * { flex: 0 0 calc((100% - 56px) / 3); }

/* reservation form (Contact Form 7 inside the design's form card) */
.asp-cf7-host .wpcf7, .asp-cf7-host .wpcf7-form { display: contents; }
.asp-cf7-host .hidden-fields-container, .asp-cf7-host .screen-reader-response { display: none; }
.asp-input-shell > .wpcf7-form-control-wrap { display: flex; flex: 1 0 0; min-width: 1px; }
.asp-control.wpcf7-form-control { flex: 1 0 0; width: 100%; min-width: 1px; font-family: "Poppins:Regular"; font-size: 14px; line-height: 1.45; color: #557087; }
.asp-cf7-host .wpcf7-not-valid-tip { font-family: "Poppins:SemiBold"; font-size: 11px; color: #c2185b; position: absolute; left: 16px; bottom: -18px; }
.asp-cf7-host .wpcf7-response-output { width: 100%; margin: 0; font-family: "Poppins:SemiBold"; font-size: 13px; color: #03256c; border-radius: 10px; }
.asp-cf7-host .wpcf7-spinner { display: none; }
.asp-cf7-host .asp-input-shell { overflow: visible; }

/* legal pages (WordPress blocks in the Legal pages template) */
.asp-legal { display: flex; flex-direction: column; gap: 14px; color: #03256c; font-family: "Poppins:Regular"; font-size: 16px; line-height: 1.7; }
.asp-legal h2 { margin-top: 26px; font-family: "Impact:Regular"; font-size: 34px; line-height: 1; text-transform: uppercase; color: #03256c; }
.asp-legal ul { padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.asp-legal a { color: #1768ac; text-decoration: underline; text-underline-offset: 3px; }
.asp-legal p:first-child { font-family: "Poppins:SemiBold"; font-size: 13px; color: #557087; }
.asp-todo { background: #ffe58a; color: #03256c; padding: 0 4px; border-radius: 3px; font-family: "Poppins:Bold"; }

/* Hover lifts, scales and shadows must never be cut: the Figma export clips almost every box (overflow: clip).
   Only boxes that really need it keep clipping: rounded frames (photo corners) and boxes holding a photo crop.
   min-width: 0 keeps the flex shrinking that overflow: clip used to give. */
.overflow-clip:not([class*="rounded-"]):not(:has(> img)):not(:has(> div > img.max-w-none)):not([data-name="Activity gallery"]) { overflow: visible; min-width: 0; }

/* footer Font Awesome icons: centred in their Figma icon box */
.asp-fa { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; }

/* surf-camp / A typical day: smaller step numbers and titles on desktop (client request; tablet/phone sizes in asp-responsive.css) */
@media (min-width: 1101px) {
	[data-name="Day moment"] .text-\[78px\] { font-size: 56px; height: auto; }
	[data-name="Day moment"] .text-\[34px\] { font-size: 26px; }
	[data-name="Surf timeline"] { height: auto; }
}

/* surf-camp / Our rooms: the booking button sits in the card's flow, bottom-right inside its 28px padding, at every width
   (the prototype pins it with absolute coordinates, which the longer "BOOK YOUR EXPERIENCE" label overflows) */
[data-name="Room card"] [data-name="Header actions"] { position: static; align-self: flex-end; margin-top: auto; }
[data-name="Room card"] > [data-name="Header actions"] { margin: 0 28px 28px auto; }
/* cards grow to their content and share the tallest height, so every button lands on the same bottom line */
[data-name="Room cards"] { align-items: stretch; height: auto; }
[data-name="Room card"] { height: auto; min-height: 611px; }
[data-name="Room card"] > [data-name="Room details"] { flex: 1 0 auto; }

/* activities / Sandboarding: the dune photo was 760px tall next to a ~390px copy block; tighten it on desktop */
@media (min-width: 1101px) {
	[data-name="Sandboarding section"] [data-name="Dune editorial"] { height: 560px; }
}

/* blog: calmer type. Card titles, article display title, article headings / pull quote and lead scale down at every width */
[data-name="Related article"] .text-\[42px\] { font-size: clamp(24px, 2.1vw, 30px); line-height: 1; }
[data-name="Article hero"] .text-\[142px\] { font-size: clamp(44px, 6.4vw, 92px); line-height: 0.92; }
.asp-article .text-\[68px\] { font-size: clamp(30px, 3.2vw, 44px); line-height: 1; }
.asp-article .text-\[60px\] { font-size: clamp(40px, 3.4vw, 48px); }
.asp-article .text-\[20px\] { font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; }
.asp-article .text-\[16px\] { font-size: 15px; }
/* READ ARTICLE: Font Awesome arrow, nudges on card hover */
.asp-read-more__icon { transition: transform 0.2s; line-height: 1; }
.asp-card:hover .asp-read-more__icon { transform: translateX(4px); }

/* single article: the breadcrumb, title and byline share the body's 860px reading column, so every line of the article
   starts on the same left edge (the hero photo keeps the full container); at <=1100px the body uses the full container like the header */
@media (min-width: 1101px) {
	[data-name="Article hero"] > [data-name="Article header"] { width: 860px; max-width: 100%; align-self: center; }
}
@media (max-width: 1100px) {
	[data-name="Article body section"] > [data-name="Article body"] { max-width: calc(100% - 2 * var(--rs-gutter)); width: 100%; }
}

/* in-page #links glide to their section (no motion for visitors who ask for less) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* surf-packs FAQ: the chevron button follows the row state - open: cyan, chevron up; closed: white, chevron down
   (the prototype bakes the open look into rows 1-4 only) */
.asp-accordion [data-name="Accordion control"] .rotate-180 { rotate: none; }
.asp-accordion [data-name="Accordion control"] { background-color: #fff; transition: transform 0.24s, background-color 0.18s, border-color 0.18s; }
.asp-accordion[data-open="true"] [data-name="Accordion control"] { background-color: rgb(6, 190, 225); transform: rotate(180deg); }
.asp-accordion[data-open="false"] .asp-question:hover [data-name="Accordion control"] { background-color: #fff; border-color: rgb(6, 190, 225); }

/* contact FAQ: "+" when closed, "-" when open (Font Awesome), no rotation and no filled square behind it */
.asp-question [data-name="plus"] { display: flex; align-items: center; justify-content: center; background: none !important; transform: none !important; color: rgb(23, 104, 172); transition: color 0.18s; }
.asp-question [data-name="plus"] > img { display: none; }
.asp-question [data-name="plus"]::before { content: "\2b"; font-family: "Font Awesome 6 Solid"; font-weight: 900; font-size: 16px; line-height: 1; }
.asp-accordion[data-open="true"] [data-name="plus"]::before { content: "\f068"; }
.asp-question:hover [data-name="plus"] { color: rgb(6, 190, 225); }
/* the prototype highlights the 5th card for good; the highlight now marks the open question(s) */
[data-name="FAQ item"].asp-accordion { background-color: rgb(243, 250, 252); border-color: rgb(201, 226, 234); transition: background-color 0.18s, border-color 0.18s; }
[data-name="FAQ item"].asp-accordion[data-open="true"] { background-color: rgb(230, 247, 251); border-color: rgb(6, 190, 225); }

/* surf-camp "Surf and Yoga" inclusions: two equal columns on tablet and phone */
@media (max-width: 1100px) {
	[data-name="Program checklist"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
	[data-name="Program checklist"] > [data-name="Program inclusion"] { width: auto; min-width: 0; }
}
@media (max-width: 600px) {
	[data-name="Program checklist"] { column-gap: 14px; }
	[data-name="Program checklist"] > [data-name="Program inclusion"] { gap: 10px; }
}

/* contact form: every control fills its whole box (the prototype pads the box, so only a 20px strip was clickable) */
#reservation .asp-input-shell { padding: 0; position: relative; align-items: stretch; }
#reservation .asp-input-shell > .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; display: flex; }
#reservation .asp-input-shell .asp-control { width: 100%; min-height: 52px; padding: 0 16px; box-sizing: border-box; }
#reservation .asp-input-shell textarea.asp-control { padding: 16px; height: 130px; }
#reservation .asp-input-shell select.asp-control { padding-right: 46px; cursor: pointer; }
#reservation .asp-input-shell > [data-name="chevron-down"] { position: absolute; right: 16px; top: 50%; translate: 0 -50%; pointer-events: none; }
/* the option list gets room left/right (Chrome/Edge customizable select; other browsers keep their native list) */
@supports (appearance: base-select) {
	#reservation select.asp-control, #reservation select.asp-control::picker(select) { appearance: base-select; }
	#reservation select.asp-control { display: flex; align-items: center; color: inherit; background: none; border: 0; }
	#reservation select.asp-control::picker-icon { display: none; }
	#reservation select.asp-control::picker(select) { border: 1px solid rgb(201, 226, 234); border-radius: 10px; padding: 6px 0; margin-top: 4px; background: #fff; box-shadow: 0 12px 28px rgba(3, 37, 108, 0.12); }
	#reservation select.asp-control option { padding: 10px 16px; font: inherit; color: rgb(3, 37, 108); }
	#reservation select.asp-control option::checkmark { display: none; }
	#reservation select.asp-control option:hover, #reservation select.asp-control option:focus-visible { background: rgb(230, 247, 251); outline: none; }
	#reservation select.asp-control option:checked { font-weight: 600; background: rgb(243, 250, 252); }
}

/* ---- Header language switcher [asp_lang_switcher] ---- */
.asp-lang { position: relative; display: inline-flex; font-family: "Poppins:Regular", sans-serif; }
.asp-lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border: 1.5px solid #d7e6f5; border-radius: 999px; background: #fff; color: #03256c; font: 13px/1 "Poppins:SemiBold", sans-serif; letter-spacing: .08em; cursor: pointer; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.asp-lang__btn:hover, .asp-lang.is-open .asp-lang__btn { border-color: #06bee1; box-shadow: 0 6px 18px rgba(6, 190, 225, .18); }
.asp-lang__btn:focus-visible { outline: 2px solid #06bee1; outline-offset: 2px; }
.asp-lang__flag { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(3, 37, 108, .12); }
.asp-lang__chev { width: 12px; height: 12px; color: #06bee1; transition: transform .22s; }
.asp-lang.is-open .asp-lang__chev { transform: rotate(180deg); }
.asp-lang__menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1000; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid #e3eef7; border-radius: 18px; box-shadow: 0 22px 48px rgba(3, 37, 108, .18); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s, transform .22s, visibility 0s .22s; }
.asp-lang__menu::before { content: ""; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #e3eef7; border-top: 1px solid #e3eef7; transform: rotate(45deg); }
.asp-lang.is-open .asp-lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .22s; }
.asp-lang__menu li { margin: 0; padding: 0; }
.asp-lang__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #03256c; text-decoration: none; font: 14px/1.2 "Poppins:Medium", sans-serif; transition: background-color .15s, color .15s; }
.asp-lang__item .asp-lang__flag { width: 24px; height: 24px; }
.asp-lang__name { flex: 1; }
.asp-lang__code { font-family: "Poppins:Bold", sans-serif; font-size: 11px; letter-spacing: .1em; color: #5b7a99; }
.asp-lang__item:hover, .asp-lang__item:focus-visible { background: #e6f7fb; color: #03256c; outline: none; }
.asp-lang__item.is-current { background: #03256c; color: #fff; }
.asp-lang__item.is-current .asp-lang__code { color: #06bee1; }
[data-name="Header actions"] { gap: 12px; align-items: center; }
@media (max-width: 1100px) { .site-header .asp-lang { display: none; } }
/* mobile drawer (navy panel): the languages as a row of pills */
.site-drawer__langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; }
.site-drawer__langs a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; text-decoration: none; font: 13px/1 "Poppins:SemiBold", sans-serif; letter-spacing: .08em; transition: border-color .18s, background-color .18s; }
.site-drawer__langs a:hover { border-color: #06bee1; }
.site-drawer__langs a.is-current { background: #06bee1; border-color: #06bee1; color: #03256c; }
.site-drawer__langs .asp-lang__flag { width: 20px; height: 20px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.site-drawer__langs-label { margin: 24px 0 12px; font: 11px/1 "Poppins:Bold", sans-serif; letter-spacing: .18em; color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .asp-lang__menu, .asp-lang__chev { transition: none; } }

/* translated pages: very long single words (German compounds) break with a hyphen instead of overflowing */
html:not([lang^="en"]) :is(h1, h2, h3, h4) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 600px) { html:not([lang^="en"]) p { hyphens: auto; -webkit-hyphens: auto; } }

/* desktop heroes never shorter than the English layout (a shorter translation must not shrink the hero);
   top-level sections only - surf-packs also has an inner block named "Hero" (brxe-d1mo4k) */
@media (min-width: 1101px) {
	.page-id-153 #brx-content > [data-name="Hero"] { min-height: 760px; }
	.page-id-154 #brx-content > [data-name="Hero"] { min-height: 664px; }
	.page-id-155 #brx-content > [data-name="Hero"] { min-height: 598px; }
	.page-id-156 #brx-content > [data-name="Activities hero"] { min-height: 593px; }
	.page-id-157 #brx-content > [data-name="Hero"] { min-height: 557px; }
	.page-id-158 #brx-content > [data-name="Hero"] { min-height: 523px; }
}

/* Bricks editor only (bricks-draggable-item never reaches the public site): the prototype's images ignore the mouse
   (pointer-events-none), so a click on a photo selected its frame instead of the image */
.brxe-image.bricks-draggable-item, .bricks-draggable-item > .brxe-image { pointer-events: auto; }
/* Bricks editor only: a text being typed in place gets overflow-wrap:break-word, which turns the prototype's
   width:min-content into ONE letter - the title collapsed into a vertical column while the client edited it */
.bricks-draggable-item[contenteditable="true"] { overflow-wrap: normal !important; }
.bricks-draggable-item[contenteditable="true"].w-\[min-content\] { width: 100% !important; }

/* tablet / phone: the language pill sits beside the burger button (the drawer no longer repeats it) */
.site-header .asp-lang--mobile { display: none; }
@media (max-width: 1100px) {
	.site-header .asp-lang--mobile { display: inline-flex; margin-left: auto; margin-right: 10px; align-self: center; }
	.site-header .asp-lang--mobile .asp-lang__btn { height: 40px; padding: 0 10px 0 6px; gap: 6px; }
	.site-header .asp-lang--mobile .asp-lang__flag { width: 24px; height: 24px; }
	.site-header .asp-lang--mobile .asp-lang__menu { right: -58px; min-width: 200px; }
	.site-header .asp-lang--mobile .asp-lang__menu::before { right: 80px; }
}

/* homepage activities gallery: scrollable whenever the 5 cards don't fit, with arrows above it */
[data-name="Activity gallery"] { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
[data-name="Activity gallery"]::-webkit-scrollbar { display: none; }
[data-name="Activity gallery"] > * { scroll-snap-align: start; }
.asp-carousel-nav { display: none; justify-content: flex-end; gap: 10px; width: 100%; margin: -8px 0 4px; }
.asp-carousel-nav.is-on { display: flex; }
.asp-carousel-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid #03256c; border-radius: 50%; background: #fff; color: #03256c; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, opacity .18s; }
.asp-carousel-nav__btn svg { width: 20px; height: 20px; }
.asp-carousel-nav__btn:hover:not(:disabled) { background: #03256c; color: #fff; }
.asp-carousel-nav__btn:focus-visible { outline: 2px solid #06bee1; outline-offset: 2px; }
.asp-carousel-nav__btn:disabled { opacity: .35; cursor: default; }

/* home / Google Reviews fed by the listing (google-reviews.php): summary row + carousel of the written reviews */
[data-live-reviews] [data-name="Rating summary"] { flex-wrap: wrap; row-gap: 24px; }
.asp-reviews__all { display: flex; align-items: center; justify-content: center; flex: none; height: 56px; margin-left: auto; padding: 0 24px; border-radius: 999px; background: #03256c; }
.asp-reviews__all > p { margin: 0; font-family: "Poppins:Bold"; font-size: 13px; line-height: normal; letter-spacing: .8px; color: #fff; white-space: nowrap; }
.asp-reviews { display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; }
/* the track is its own scroll box: the padding (pulled back by the margins) leaves the card shadows uncut */
.asp-reviews__track { display: flex; align-items: stretch; gap: 24px; margin: -4px -12px -28px; padding: 4px 12px 40px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; overscroll-behavior-x: contain; scrollbar-width: none; }
.asp-reviews__track::-webkit-scrollbar { display: none; }
.asp-reviews__track:focus-visible { outline: 2px solid #06bee1; outline-offset: 4px; border-radius: 20px; }
.asp-review { position: relative; display: flex; flex: 0 0 calc((100% - 48px) / 3); flex-direction: column; gap: 16px; min-width: 0; min-height: 216px; padding: 24px; overflow: clip; border: 1px solid #03256c; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px 0 rgba(31, 42, 58, .07); scroll-snap-align: start; }
.asp-review__accent { position: absolute; width: 4px; height: 4px; border-radius: 2px; background: #b86b4a; }
.asp-review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asp-review__stars { margin: 0; font-family: "Poppins:Bold"; font-size: 22px; line-height: 1; letter-spacing: 2px; color: #03256c; white-space: nowrap; }
.asp-review__stars > span { opacity: .22; }
.asp-review__google { flex: none; width: 22px; height: 22px; }
.asp-review__text { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; font-family: "Poppins:Regular"; font-size: 15px; line-height: 1.5; color: #1f2a3a; word-break: break-word; }
.asp-review.is-open .asp-review__text { display: block; -webkit-line-clamp: none; line-clamp: none; }
.asp-review__more { align-self: flex-start; margin: -8px 0 0; padding: 4px 0; border: 0; background: none; font-family: "Poppins:Bold"; font-size: 11px; letter-spacing: 1.2px; color: #1768ac; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.asp-review__more:hover { color: #03256c; }
.asp-review__more:focus-visible { outline: 2px solid #06bee1; outline-offset: 2px; border-radius: 4px; }
.asp-review__more-close, .asp-review.is-open .asp-review__more-open { display: none; }
.asp-review.is-open .asp-review__more-close { display: inline; }
.asp-review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(3, 37, 108, .12); }
.asp-review__avatar { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #03256c; font-family: "Poppins:Bold"; font-size: 18px; color: #fff; }
.asp-review__avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asp-review__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.asp-review__name { overflow: hidden; font-family: "Poppins:Bold"; font-size: 14px; line-height: normal; color: #1f2a3a; text-overflow: ellipsis; white-space: nowrap; }
.asp-review__date { font-family: "Poppins:SemiBold"; font-size: 11px; line-height: normal; letter-spacing: 1.2px; color: #6f5b4a; text-transform: uppercase; }
.asp-reviews__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.asp-reviews__controls[hidden] { display: none; }
.asp-reviews__dots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.asp-reviews__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(3, 37, 108, .2); cursor: pointer; transition: width .25s, background-color .25s; }
.asp-reviews__dot.is-active { width: 28px; background: #03256c; }
.asp-reviews__arrows { display: flex; flex: none; gap: 10px; }
@media (max-width: 1100px) {
	.asp-review { flex-basis: calc((100% - 24px) / 2); }
	[data-live-reviews] [data-name="Rating block"], [data-live-reviews] [data-name="Review count block"] { width: auto; min-width: 200px; }
}
@media (max-width: 600px) {
	.asp-review { flex-basis: 100%; }
	/* the two figures stay side by side, the link to the listing takes the full row below */
	[data-live-reviews] [data-name="Rating summary"] { flex-direction: row; align-items: flex-start; column-gap: 16px; }
	[data-live-reviews] [data-name="Rating block"], [data-live-reviews] [data-name="Review count block"] { flex: 1 1 0; min-width: 0; }
	.asp-reviews__all { flex: 1 0 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .asp-reviews__dot { transition: none; } }