/* web_calculator/assets/prices-v1.css — prices page, design 06 «Prices» (UI v1 tokens).
   Loads after /ui/*.css. Numbers come from web_calculator/stats_v1.php (medians only). */

.pr-page { display: flex; flex-direction: column; gap: 56px; padding: 8px 0 24px; }
/* [2026-09-10] The right column was a hard 560px whether or not anything went into it, and the
   card that fills it is drawn only where the place has figures — so every thin page (which is
   exactly the noindex set) rendered its heading crushed into the left third beside 560px of empty
   canvas. At 1024px the fixed column plus the gap left ~336px for a 48px heading. It is a share
   with a ceiling now, and «is-solo» drops the column entirely when there is no card. */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 64px; align-items: center; padding-top: 24px; }
.pr-hero.is-solo { grid-template-columns: minmax(0, 1fr); }
.pr-hero.is-solo .pr-lead { max-width: 68ch; }
.pr-hero-text { display: flex; flex-direction: column; gap: 20px; }
.pr-title { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.pr-lead { margin: 0; font-size: 17px; color: var(--rp-text-2); line-height: 1.5; max-width: 620px; }
.pr-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-stat { position: relative; overflow: hidden; border-radius: 28px; background: var(--rp-ink); color: var(--rp-on-ink); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.pr-stat::before { content: ""; position: absolute; right: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; background: var(--rp-accent); }
.pr-stat > * { position: relative; }
.pr-stat-l { font-size: var(--rp-fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.pr-stat-v { display: flex; align-items: baseline; gap: 10px; }
.pr-stat-v strong { font-size: clamp(48px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pr-stat-v span { font-size: var(--rp-fs-17); color: rgba(255,255,255,.75); }
.pr-stat-row { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 6px; }
.pr-stat-row > div { display: flex; flex-direction: column; gap: 2px; }
.pr-stat-row b { font-size: var(--rp-fs-15); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.pr-stat-row b .rp-i { width: 14px; height: 14px; }
.pr-stat-row small { font-size: var(--rp-fs-12); color: rgba(255,255,255,.65); }
.pr-up { color: #4ADE80; }
.pr-down { color: #F87171; }

.pr-section { display: flex; flex-direction: column; gap: 20px; }
.pr-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pr-sec-head h2 { margin: 0; font-size: var(--rp-fs-24); font-weight: 800; letter-spacing: -.03em; }
.pr-sec-head span, .pr-sec-head a { font-size: var(--rp-fs-14); color: var(--rp-text-2); }
.pr-sec-head a { font-weight: 700; color: var(--rp-text); }

/* by bedrooms */
.pr-beds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-bed { min-width: 0; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--rp-border); border-radius: 20px; padding: 24px; color: inherit; transition: border-color var(--rp-t-fast); }
.pr-bed:hover { border-color: var(--rp-ink); color: inherit; }
.pr-bed-l { font-size: var(--rp-fs-14); color: var(--rp-text-2); font-weight: 600; }
.pr-bed-v { font-size: var(--rp-fs-36); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pr-bar { height: 6px; border-radius: var(--rp-r-pill); background: var(--rp-n100); overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--rp-accent); border-radius: var(--rp-r-pill); }
.pr-bed-n { font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.pr-bed-n b { color: var(--rp-text); font-weight: 700; }

/* two panels: places + months */
/* the row draws whichever of the two panels has data, so one of them alone is normal — on a
   district page there is never a places panel at all — and without «is-solo» the other half of
   the row stayed an empty bordered box */
.pr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pr-two.is-solo { grid-template-columns: minmax(0, 1fr); }
/* [2026-09-10] THIS COMPONENT IS DRAWN FOR HALF THE PAGE. When only one panel has data it takes
   the whole 1200px, and the same rows that look right at 570px become a 360px label column, a
   gulf, and a 750px black slab — eight of them stacked read as a redaction, not as a chart. Solo,
   the list runs in two columns of the width it was built for, and the chart keeps a ceiling. */
.pr-two.is-solo .pr-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 12px; }
.pr-two.is-solo .pr-months { max-width: 760px; }
.pr-panel { min-width: 0; border: 1px solid var(--rp-border); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.pr-panel .pr-sec-head h2 { font-size: var(--rp-fs-20); }
.pr-places { display: flex; flex-direction: column; gap: 12px; }
.pr-place { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) minmax(64px, auto); align-items: center; gap: 14px; color: inherit; font-size: var(--rp-fs-15); }
/* district names run long — «Jumeirah Village Circle» in an 88px cell used to spill over the bar */
.pr-place > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-place:hover { color: var(--rp-accent); }
.pr-place-bar { height: 40px; border-radius: 12px; background: var(--rp-surface); overflow: hidden; }
.pr-place-bar i { display: block; height: 100%; background: var(--rp-ink); border-radius: 12px; }
.pr-place.is-current .pr-place-bar i { background: var(--rp-accent); }
.pr-place-v { text-align: right; font-weight: 800; }
.pr-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 240px; }
.pr-month { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; }
.pr-month i { display: block; width: 100%; border-radius: 10px; background: var(--rp-ink); min-height: 6px; }
.pr-month.is-last i { background: var(--rp-accent); }
.pr-month.is-empty i { background: var(--rp-n200); }
.pr-month span { font-size: var(--rp-fs-12); color: var(--rp-text-2); font-weight: 600; }
.pr-note { margin: 0; font-size: var(--rp-fs-14); color: var(--rp-text-2); line-height: 1.5; }

/* other places */
.pr-cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pr-city { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.pr-city:hover { color: var(--rp-accent); }
.pr-city-img { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--rp-surface); }
.pr-city-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-city-t { font-size: var(--rp-fs-15); font-weight: 700; }
.pr-city-p { font-size: var(--rp-fs-14); color: var(--rp-text-2); }

/* CTA */
.pr-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 24px; background: var(--rp-surface); padding: 28px 32px; }
.pr-cta h3 { margin: 0 0 6px; font-size: var(--rp-fs-20); font-weight: 800; letter-spacing: -.02em; }
.pr-cta p { margin: 0; font-size: var(--rp-fs-14); color: var(--rp-text-2); }
.pr-cta-actions { display: flex; gap: 10px; flex: none; }

/* gallery of the place (existing location media) */
.pr-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pr-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--rp-surface); }
.pr-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SEO sections (web_calculator/seo_sections.php): countries, cities, districts & projects, bedrooms, guide */
.pr-seo { gap: 24px; }
.pr-seo-block { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.pr-seo-block > h4, .pr-seo-h3 { margin: 0; font-size: var(--rp-fs-20); font-weight: 800; letter-spacing: -.02em; }
.pr-seo-block > h4 { font-size: var(--rp-fs-17); }
.pr-text { margin: 0; max-width: 72ch; font-size: var(--rp-fs-15); color: var(--rp-text-2); line-height: 1.55; }
.pr-text-block { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.pr-text-block h3, .pr-text-block h4, .pr-text-block h5 { margin: 0; font-size: var(--rp-fs-17); font-weight: 800; letter-spacing: -.02em; }
.pr-text-block p { margin: 0; font-size: var(--rp-fs-15); color: var(--rp-text-2); line-height: 1.55; }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pr-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--rp-border); border-radius: 20px; padding: 20px; background: var(--rp-bg); }
.pr-card h3, .pr-card h4, .pr-card h5 { margin: 0 0 4px; font-size: var(--rp-fs-15); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
/* [2026-09-10] a card that is itself a link — the nightly block on the front page */
a.pr-card { color: inherit; transition: border-color var(--rp-t-fast); }
a.pr-card:hover { border-color: var(--rp-ink); color: inherit; }
.pr-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pr-card-v { font-size: var(--rp-fs-28); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pr-card-sub { font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.pr-card-n { font-size: var(--rp-fs-13); color: var(--rp-text-2); font-weight: 600; }
.pr-card-p { margin: 4px 0 0; font-size: var(--rp-fs-13); color: var(--rp-text-2); line-height: 1.5; }
.pr-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.pr-kv { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--rp-fs-13); }
.pr-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--rp-n100); }
.pr-kv dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--rp-text-2); }
/* «$1 250 000 · 1 204 лота» pushed past the card border: nowrap in a space-between row with no
   min-width has nothing to give way */
.pr-kv dd { margin: 0; min-width: 0; font-weight: 700; text-align: right; }
.pr-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.pr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--rp-fs-15); color: var(--rp-text-2); line-height: 1.5; }
.pr-list b { color: var(--rp-text); font-weight: 700; }
.pr-list-check li { display: flex; gap: 10px; align-items: flex-start; }
.pr-list-check .rp-i { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--rp-success); }
.pr-faq { display: flex; flex-direction: column; gap: 8px; }
.pr-faq details { border: 1px solid var(--rp-border); border-radius: 16px; padding: 14px 18px; }
.pr-faq summary { cursor: pointer; font-size: var(--rp-fs-15); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--rp-text-2); flex: none; }
.pr-faq details[open] summary::after { content: "–"; }
.pr-faq details p { margin: 10px 0 0; font-size: var(--rp-fs-14); color: var(--rp-text-2); line-height: 1.55; }
/* buttons inside cards: full width, text may wrap (long translated labels) */
.pr-card-actions .rp-btn { flex: 1 1 auto; height: auto; min-height: var(--rp-h-sm); padding: 8px 14px; white-space: normal; text-align: center; line-height: 1.25; }
/* district / project cards: wider, with sub-blocks per deal type */
/* 320px was the widest thing on the page between 600 and ~700px, where the reset below has not
   fired yet and the container padding is already eating the width */
.pr-cards-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pr-sub { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--rp-n100); }
.pr-sub h5 { margin: 0; font-size: var(--rp-fs-13); font-weight: 700; color: var(--rp-text); }
.pr-sub-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.pr-sub-row b { font-size: var(--rp-fs-20); font-weight: 800; letter-spacing: -.02em; color: var(--rp-text); }
.pr-tabs-seg { margin-top: 4px; }
.pr-tabs-seg .rp-seg-opt { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--rp-fs-14); font-weight: 600; color: var(--rp-text-2); }
.pr-tabs-seg .rp-seg-opt.is-active { background: var(--rp-bg); color: var(--rp-text); font-weight: 700; box-shadow: var(--rp-sh-sm); }
.pr-tabs-seg .rp-seg-opt:disabled { opacity: .4; cursor: default; }
.pr-list-q { gap: 4px; }
.pr-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr-mini { display: flex; flex-direction: column; gap: 2px; border-radius: 14px; background: var(--rp-surface); padding: 12px 14px; font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.pr-mini b { color: var(--rp-text); font-size: var(--rp-fs-14); }
/* other places without a photo: a compact bordered tile instead of an empty grey box */
.pr-city.no-img { border: 1px solid var(--rp-border); border-radius: 16px; padding: 18px 20px; gap: 4px; }
.pr-city.no-img:hover { border-color: var(--rp-ink); }

@media (max-width: 1023px) {
	.pr-hero, .pr-hero.is-solo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pr-guide { grid-template-columns: minmax(0, 1fr); }
	.pr-beds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-two, .pr-two.is-solo { grid-template-columns: minmax(0, 1fr); }
	.pr-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-cta { flex-direction: column; align-items: stretch; }
	.pr-cta-actions { flex-wrap: wrap; }
}
@media (max-width: 599px) {
	.pr-page { gap: 40px; }
	.pr-stat { padding: 24px; border-radius: 22px; }
	/* the columns are already 2 from the 1023 rule — only the spacing changes here */
	.pr-beds { gap: 10px; }
	.pr-bed { padding: 16px; gap: 8px; }
	/* six-figure sale prices wrapped mid-number in a ~162px cell */
	.pr-bed-v { font-size: var(--rp-fs-24); }
	.pr-panel { padding: 20px; }
	/* below 600 the panel is the screen: one column, or the bars are 150px of nothing */
	.pr-two.is-solo .pr-places { grid-template-columns: minmax(0, 1fr); }
	.pr-place { grid-template-columns: minmax(72px, 34%) minmax(0, 1fr) minmax(56px, auto); gap: 10px; font-size: var(--rp-fs-14); }
	.pr-place-bar { height: 32px; }
	/* twelve bars in 375px is a 21px bar with a 4px gap; below that they scroll instead of vanishing */
	.pr-months { height: 180px; gap: 4px; grid-template-columns: repeat(12, minmax(18px, 1fr)); overflow-x: auto; }
	.pr-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-cta { padding: 20px; }
	.pr-cta-actions .rp-btn { flex: 1; }
	.pr-cards, .pr-cards-wide { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.pr-mini-grid { grid-template-columns: minmax(0, 1fr); }
	.pr-tabs-seg { width: 100%; }
	.pr-tabs-seg .rp-seg-opt { flex: 1; justify-content: center; padding: 0 10px; white-space: normal; text-align: center; height: auto; min-height: 40px; }
	.pr-card { padding: 16px; }
	.pr-card-actions .rp-btn { flex: 1 1 100%; }
	.pr-faq details { padding: 12px 14px; }
}