/* bali.place reviews (villa pages + /reviews) — data from the Hub via /api/reviews, built by js/reviews.js.
   Design: approved draft v4 (26.9.2026). Fonts/colours = existing www fonts and villa CI colours. */
.bpr{
	--ink:#3c3a34; --ink-soft:#5c5a53; --muted:#8a877e; --line:#e2ddd2; --white:#fff; --paper:#fafaf8;
	--v:#AD332A; --vd:#AD332A; --tint:#EED7D1; --fill:#D08C84;
	--gold3:#9C6F22;
	--serif:"CormorantGaramondLight-Regular","Cormorant Garamond",Garamond,"Times New Roman",serif;
	--serif-light:"CormorantGaramondLight-Light","Cormorant Garamond",Garamond,"Times New Roman",serif;
	--sans:"RalewayThin-Light","Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
	--sans-m:"RalewayThin-Medium","Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
	--sans-sb:"RalewayThin-SemiBold","Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
	container-type:inline-size;
	color:var(--ink);
	font:normal 15px/1.6 var(--sans);
	text-align:left;
}
.bpr *,.bpr *::before,.bpr *::after{box-sizing:border-box}
.bpr h2,.bpr h3{font-family:var(--serif);font-weight:normal;margin:0;color:var(--ink);text-wrap:balance}
.bpr button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.bpr button:focus-visible,.bpr a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bpr b{font-family:var(--sans-sb);font-weight:normal}

/* source mark: logo as it is, no frame */
.bpr .srcmark{display:inline-flex;align-items:center;gap:8px;font:normal 12px/1 var(--sans-m);letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap}
.bpr .srcmark img{width:var(--s,28px);height:var(--s,28px);object-fit:contain;display:block}
.bpr .srcmark img.sq{border-radius:22%}

/* laurel award */
.bpr .award{display:grid;justify-items:start;gap:6px}
.bpr .award .row1{display:flex;align-items:center;gap:6px}
.bpr .laurel{width:26px;height:54px;flex:none;color:var(--ink)}
.bpr .laurel.r{transform:scaleX(-1)}
.bpr .award .num{font:normal 46px/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums;padding:0 2px}
.bpr .award .title{font:normal 11px/1.2 var(--sans-sb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.bpr .award.golden .title{color:var(--gold3)}
.bpr .award .sub{font-size:13px;color:var(--ink-soft)}

/* stars / "x out of 10" */
.bpr .stars{color:var(--vd);letter-spacing:3px;font-size:14px;line-height:18px}
.bpr .ten{font:normal 13px/18px var(--sans-sb);color:var(--vd)}

/* ───── Villa page block ───── */
.bpr-villa{padding:10px 0 20px}
.bpr .spot{background:var(--tint);border-radius:18px;display:grid;grid-template-columns:minmax(170px,240px) 1fr;gap:clamp(24px,5cqi,70px);padding:clamp(26px,4.5cqi,56px);min-height:400px}
.bpr .spot-side{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.bpr .names{list-style:none;margin:0;padding:0;border-top:1px solid rgba(60,58,52,.18)}
.bpr .names li{border-bottom:1px solid rgba(60,58,52,.18)}
.bpr .names button{width:100%;text-align:left;background:none;border:0;padding:11px 0;display:grid;gap:1px;color:rgba(60,58,52,.4);transition:color .2s}
.bpr .names button:hover{color:var(--ink-soft)}
.bpr .names button[aria-current="true"]{color:var(--ink)}
.bpr .names .n{font:normal 16px/1.25 var(--sans-m)}
.bpr .names .d{font-size:12px;letter-spacing:.04em}
.bpr .names li.on{border-bottom-color:var(--ink)}
.bpr .names li.before-on{border-bottom-color:var(--ink)}
.bpr .names li.on:first-child{box-shadow:0 -1px 0 var(--ink)}
.bpr .spot-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.bpr .spot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.bpr .qmark{width:58px;height:46px;color:var(--vd);flex:none;margin-top:6px}
.bpr .quote{margin:0;font:italic normal var(--qs,30px)/1.32 var(--serif);color:var(--ink);max-width:36em;white-space:pre-line;overflow-wrap:anywhere}
.bpr .quote.clamp{display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.bpr .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto}
.bpr .who{display:grid;gap:4px;font-size:13px;color:var(--ink-soft)}
.bpr .who b{color:var(--ink);font-size:15px}
.bpr .who .line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bpr .who .inline-src{display:none}
.bpr .arrows{display:flex;gap:10px}
.bpr .arrows button{width:54px;height:54px;border-radius:50%;border:1px solid var(--ink);background:transparent;display:grid;place-items:center;padding:0}
.bpr .arrows button.next{background:var(--ink);color:var(--white)}
.bpr .arrows svg{width:20px;height:20px}
.bpr .see{display:flex;justify-content:center;margin-top:28px}
.bpr .see .btn{max-width:420px}
@container (max-width:680px){
	.bpr .spot{grid-template-columns:1fr;min-height:0;gap:18px;border-radius:14px;padding:22px 20px}
	.bpr .spot-side{display:contents}
	.bpr .names{order:1;display:flex;gap:18px;overflow-x:auto;border:0;scrollbar-width:none}
	.bpr .names li{border:0!important;box-shadow:none!important;flex:none}
	.bpr .names button{padding:6px 0;border-bottom:1px solid transparent}
	.bpr .names button[aria-current="true"]{border-bottom-color:var(--ink)}
	.bpr .names .d{display:none}
	.bpr .spot-main{order:2;gap:14px}
	.bpr .spot-top .srcmark{display:none}
	.bpr .who .inline-src{display:inline-flex}
	.bpr .qmark{width:40px;height:32px;margin-top:4px}
	.bpr .quote{--qs:21px!important}
	.bpr .spot .award{order:3;padding-top:16px;border-top:1px solid rgba(60,58,52,.18)}
	.bpr .award .num{font-size:38px}
	.bpr .laurel{width:22px;height:46px}
	.bpr .arrows button{width:44px;height:44px}
	.bpr .see .btn{max-width:none}
}

/* ───── /reviews page (variant B) ───── */
.bpr-page{padding:30px 0 20px}
.bpr .pg-title{font-size:clamp(34px,6cqi,56px);line-height:1;margin-bottom:6px}
.bpr .pg-sub{color:var(--ink-soft);margin:0 0 26px;font-size:15px}
.bpr .vcards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:34px}
.bpr .vcard{--c:var(--line);border:1px solid var(--line);background:var(--white);border-radius:10px;overflow:hidden;padding:0;text-align:left;display:grid;grid-template-rows:auto 1fr}
.bpr .vcard img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.bpr .vcard .t{padding:10px 12px 12px;display:grid;gap:2px}
.bpr .vcard .t b{font:normal 20px/1.1 var(--serif);color:var(--ink)}
.bpr .vcard .t span{font-size:12px;color:var(--muted)}
.bpr .vcard .t em{font-style:normal;font-size:13px;color:var(--ink-soft)}
.bpr .vcard:hover{border-color:var(--c)}
.bpr .vcard[aria-pressed="true"]{border-color:var(--c);box-shadow:inset 0 -3px 0 var(--c)}
.bpr .vcard[aria-pressed="false"] img{filter:saturate(.75) opacity(.85)}
.bpr .sum{display:grid;grid-template-columns:auto minmax(0,380px);gap:22px 56px;align-items:end;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bpr .sum h3{grid-column:1/-1;font-size:34px;line-height:1}
.bpr .dist{display:grid;gap:7px;padding-bottom:2px}
.bpr .dist .h{font-size:13px;color:var(--ink-soft);margin-bottom:2px}
.bpr .dist .h b{font-size:13px;color:var(--ink)}
.bpr .drow{display:grid;grid-template-columns:34px 1fr 28px;gap:14px;align-items:center;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bpr .drow .s{color:var(--ink);white-space:nowrap}
.bpr .drow .s i{font-style:normal;color:var(--vd)}
.bpr .drow .track{display:block;height:24px;border-radius:5px;background:var(--tint);overflow:hidden}
.bpr .drow .track span{display:block;height:100%;background:var(--fill);border-radius:5px}
.bpr .drow .c{text-align:right}
.bpr .facts{grid-column:1/-1;font-size:13px;color:var(--muted);display:flex;gap:6px 18px;flex-wrap:wrap}
.bpr .list-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:30px 0 6px}
.bpr .list-head h3{font-size:28px}
.bpr .chips{display:flex;gap:6px;flex-wrap:wrap}
.bpr .chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:5px 12px 5px 8px;font-size:12.5px;display:inline-flex;gap:7px;align-items:center}
.bpr .chip.all{padding-left:12px}
.bpr .chip img{width:16px;height:16px;object-fit:contain}
.bpr .chip img.sq{border-radius:22%}
.bpr .chip .c{color:var(--muted);font-variant-numeric:tabular-nums}
.bpr .chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.bpr .chip[aria-pressed="true"] .c{color:#cfcac0}
.bpr .rows{display:grid}
.bpr .row{display:grid;grid-template-columns:190px 1fr;gap:10px 28px;padding:22px 0;border-bottom:1px solid var(--line);margin:0}
.bpr .row .m{display:grid;gap:12px;align-content:start;font-size:13px;color:var(--muted)}
.bpr .row .m .ml,.bpr .row .m .mr{display:grid;gap:3px;line-height:1.3;justify-items:start}
.bpr .row .m b{color:var(--ink);font-size:14.5px}
.bpr .row .m .stars{letter-spacing:2px;font-size:12px}
.bpr .row .m .ten{font-size:12.5px}
.bpr .row .m .srcmark{--s:20px}
.bpr .row p{margin:0;white-space:pre-line;line-height:1.7;overflow-wrap:anywhere}
.bpr .row p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.bpr .more{border:0;background:none;padding:0;margin-top:6px;font:normal 13px/1.4 var(--sans-m);color:var(--vd);text-decoration:underline;text-underline-offset:3px}
.bpr .more[hidden]{display:none}
.bpr .loadmore{display:grid;justify-items:center;gap:10px;margin-top:26px;font-size:13px;color:var(--muted)}
.bpr .loadmore .btn{width:auto;padding-left:28px;padding-right:28px}
.bpr .notice{padding:40px 0;color:var(--ink-soft);text-align:center}
@container (max-width:680px){
	.bpr .vcards{grid-template-columns:repeat(5,150px);overflow-x:auto;scrollbar-width:none;margin-left:-12px;margin-right:-12px;padding:0 12px}
	.bpr .sum{grid-template-columns:1fr}
	.bpr .row{grid-template-columns:1fr}
	.bpr .row .m{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
	.bpr .row .m .mr{justify-items:end;text-align:right}
}
@media (prefers-reduced-motion:reduce){.bpr *{transition:none!important}}

/* Blocs sets display on .bloc — keep [hidden] working for the review block */
.bloc[hidden]{display:none!important}

/* Guest Favourite card with the Hub texts (27.09.2026, Thomas: variant B). Normal = light villa-colour gradient, Golden = gold gradient. */
.bpr .award.card{padding:20px 22px 22px;border:1px solid color-mix(in srgb,var(--v) 38%,transparent);border-radius:14px;max-width:360px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 85%,#fff) 0%,#fffdfb 78%);box-shadow:0 10px 30px color-mix(in srgb,var(--v) 12%,transparent)}
.bpr .award.card.golden{border-color:rgba(201,151,58,.55);background:linear-gradient(180deg,#fbf5e6 0%,#fffdf8 70%);box-shadow:0 10px 30px rgba(156,111,34,.10)}
.bpr .award .gf-d1{margin:8px 0 0;font:italic 19px/1.35 var(--serif);color:var(--ink)}
.bpr .award .gf-top{margin-top:12px;padding-top:12px;border-top:1px solid rgba(201,151,58,.45);display:grid;gap:6px}
.bpr .award .gf-mark{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(180deg,#d9b25a,#9C6F22);-webkit-background-clip:text;background-clip:text;color:transparent}
.bpr .award .gf-top p{margin:0;font:13px/1.5 var(--sans);color:var(--ink-soft)}