/* Kettle & Key v2 · listing detail: gallery, media tabs, facts, booking panel, calculators, lightbox */
.media-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); overflow-x: auto; }
.media-tabs button { position: relative; border: 0; background: none; padding: 12px 18px 13px; font-weight: 600; font-size: 15.5px; color: var(--slate); white-space: nowrap; }
.media-tabs button[aria-selected=true] { color: var(--ink); }
.media-tabs button[aria-selected=true]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 4px; background: var(--board); }
.media { position: relative; }
.gal-main { position: relative; background: var(--mist-2); aspect-ratio: 16 / 8; overflow: hidden; }
.gal-stage, .gal-stage picture, .gal-stage img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gal-main .tag { top: 18px; left: 18px; }
.gal-main .counter { left: 18px; bottom: 18px; font-size: 13px; padding: 8px 10px; }
.gal-prev, .gal-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border: 0; }
.gal-prev { left: 18px; } .gal-next { right: 18px; }
.gal-all { position: absolute; right: 18px; bottom: 18px; z-index: 3; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.thumbs button { padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist-2); opacity: .7; transition: opacity .15s; }
.thumbs button[aria-current=true], .thumbs button:hover { opacity: 1; box-shadow: inset 0 -4px 0 var(--board); }
.thumbs img, .thumbs picture { width: 100%; height: 100%; object-fit: cover; }
.panel-plan, .panel-epc { background: #fff; border: 1px solid var(--line); padding: clamp(16px, 3vw, 40px); }
.floorplan { width: 100%; max-height: 520px; margin: 0 auto 12px; }
.fp-wall { fill: none; stroke: var(--ink); stroke-width: 4; }
.fp-room { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.fp-n { font: 600 11px var(--sans); fill: var(--ink); }
.fp-d { font: 500 9.5px var(--mono); fill: var(--slate); }
.fp-t { font: 600 12px var(--mono); fill: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.epc { width: 100%; max-width: 640px; }
.epc-h { font: 600 13px var(--sans); fill: var(--ink); }
.epc-r { font: 500 11px var(--mono); fill: #111; }
.epc-l { font: 700 16px var(--sans); fill: #111; }
.epc-v { font: 700 13px var(--sans); fill: #111; }
.mini-map { height: 520px; }
@media (max-width: 700px) { .gal-main { aspect-ratio: 4 / 3; } .thumbs { grid-template-columns: repeat(6, 64px); overflow-x: auto; } .gal-all { display: none; } .mini-map { height: 360px; } .gal-prev, .gal-next { width: 44px; height: 44px; } }

.lst { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 4vw, 72px); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.lst-head { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.lst-h { margin: 12px 0 18px; font-size: clamp(46px, 6vw, 96px); }
.lst-price { font-size: clamp(30px, 3vw, 44px); font-weight: 700; font-stretch: 86%; letter-spacing: -.02em; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.lst-price .q { flex-basis: 100%; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.lst-price s, .lst-price .pw { font-size: 17px; font-weight: 500; color: var(--slate); }
.lst-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.save.inline { position: static; border: 1px solid var(--ink); width: 40px; height: 40px; }
.blk { padding: 40px 0 8px; }
.blk-h { font-size: clamp(26px, 2.4vw, 34px); font-stretch: 88%; letter-spacing: -.02em; margin-bottom: 18px; }
.sub { font-size: 18px; margin: 0 0 10px; letter-spacing: 0; }
.mi { margin-top: 12px; }
.feat { list-style: none; columns: 2; column-gap: 32px; margin-bottom: 24px; }
.feat li { break-inside: avoid; padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--line); }
.feat li::before { content: ''; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; background: var(--board); border: 1px solid var(--ink); }
.desc { font-size: 18px; line-height: 1.65; max-width: 66ch; }
.love { background: var(--mist); padding: 22px 24px; margin-top: 18px; border-left: 6px solid var(--board); }
.love ol { margin: 10px 0 0 20px; display: grid; gap: 6px; font-size: 18px; font-weight: 500; }
.stations { list-style: none; border-top: 1px solid var(--line); margin-bottom: 24px; }
.stations li > .spec { white-space: nowrap; text-align: right; }
.stations li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.calc { display: grid; gap: 14px; align-content: start; }
.calc-out { background: var(--ink); color: #fff; padding: 18px 20px; }
.calc-out .big { font-size: 34px; font-weight: 700; font-stretch: 84%; margin: 0 0 4px; color: var(--board); }
.calc-out .big span { font-size: 16px; font-weight: 500; color: #fff; }
.calc-out p { margin: 0 0 4px; }
.calc-out .spec { color: #C7D0D9; }
@media (max-width: 1023px) { .lst { grid-template-columns: 1fr; } .feat { columns: 1; } }

.lst-side { position: sticky; top: calc(var(--hdr) + 20px); }
.book { border: 1px solid var(--ink); background: #fff; }
.agent { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 18px; border-bottom: 1px solid var(--ink); background: var(--mist); }
.agent picture, .agent img { width: 72px; height: 72px; object-fit: cover; }
.agent p { margin: 0; }
.agent .an { font-weight: 700; font-size: 19px; }
.agent a { font-family: var(--mono); font-weight: 500; }
#booking { padding: 20px 18px 22px; display: grid; gap: 14px; }
.bk-h { font-size: 24px; font-stretch: 88%; }
#booking > p { margin: 0; }
.dstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dstrip button { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 1px solid var(--line); background: #fff; }
.dstrip button b { font-size: 21px; line-height: 1.1; }
.dstrip [aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.dstrip [aria-pressed=true] .spec { color: #DCE2E8; }
.tslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tslots button { min-height: 44px; border: 1px solid #9AA4AF; background: #fff; font: 500 14px var(--mono); }
.tslots button[aria-pressed=true] { background: var(--board); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tslots button:disabled { color: #59626C; background: var(--mist); text-decoration: line-through; cursor: not-allowed; }
.bk-form { display: grid; gap: 14px; }
.bk-alt { text-align: center; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-decoration-color: var(--board); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; color: inherit; }
@media (max-width: 1023px) { .lst-side { position: static; } }

.lightbox { position: fixed; inset: 0; z-index: 160; background: rgba(8, 12, 18, .96); display: grid; grid-template-rows: auto 1fr; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gut); color: #fff; }
.lb-top .spec { color: #DCE2E8; }
.lb-stage { display: grid; place-items: center; padding: 0 72px 24px; min-height: 0; }
.lb-stage picture, .lb-stage img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; width: auto; height: auto; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
@media (max-width: 600px) { .lb-stage { padding: 0 8px 70px; } .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } }