/* ============================================================
   AKSAL CROWN — stránka jednej nehnuteľnosti
   Rovnaká kostra pre každý inzerát. Odlišuje ich odtieň
   z rodiny značky — vždy petrolejová alebo zemitá, nikdy
   mimo palety loga.
   ============================================================ */

/* ---------- odtiene identity (rodina značky) ---------- */
[data-theme="petrol"] { --accent:#14393b; --accent-2:#0d2627; --accent-soft:#e7eeee; }
[data-theme="teal"]   { --accent:#1c4f4c; --accent-2:#123734; --accent-soft:#e8f0ef; }
[data-theme="forest"] { --accent:#1f4433; --accent-2:#143024; --accent-soft:#e8f0eb; }
[data-theme="ocean"]  { --accent:#1b3f52; --accent-2:#122b39; --accent-soft:#e8eef2; }
[data-theme="olive"]  { --accent:#3f4a26; --accent-2:#2b331a; --accent-soft:#eef0e6; }
[data-theme="bronze"] { --accent:#6b5320; --accent-2:#4c3a15; --accent-soft:#f5f0e2; }
[data-theme="stone"]  { --accent:#3a4442; --accent-2:#272f2e; --accent-soft:#eceeed; }
[data-theme="plum"]   { --accent:#432f3f; --accent-2:#2f202c; --accent-soft:#f1ecef; }

[data-theme] h1, [data-theme] h2, [data-theme] h3 { color: var(--accent); }
[data-theme] .btn-primary { background: var(--accent); }
[data-theme] .btn-primary:hover { background: var(--accent-2); color: var(--gold); }
[data-theme] .btn-outline { color: var(--accent); border-color: var(--accent); }
[data-theme] .btn-outline:hover { background: var(--accent); color: #fff; }
[data-theme] .page-head, [data-theme] .hero { background: var(--accent); }

/* ============================================================
   Rozloženie prevzaté z projektu Pata — platí IBA na stránke
   jednej nehnuteľnosti (body.pt), nikde inde na webe.
   Serifové nadpisy, pokojné striedanie sekcií, mäkké karty.
   ============================================================ */
body.pt {
  --pt-serif: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --pt-r: 14px;
  --pt-mist: #f4f6f4;
  --pt-sh-sm: 0 1px 2px rgba(20,57,59,.05), 0 4px 14px rgba(20,57,59,.06);
  --pt-sh-md: 0 2px 6px rgba(20,57,59,.06), 0 18px 44px rgba(20,57,59,.10);
}
body.pt main h1, body.pt main h2, body.pt main h3 {
  font-family: var(--pt-serif); font-weight: 500; letter-spacing: 0; text-wrap: balance;
}

#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 600; background: var(--gold); transition: width .12s linear; }

/* ---------- rytmus sekcií ---------- */
.pt-sec { padding: 84px 0; }
.pt-sec.alt { background: var(--pt-mist); }
.pt-head { max-width: 62ch; margin: 0 auto 44px; text-align: center; }
.pt-head h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--accent, var(--petrol)); margin-top: 12px; }
.pt-head p { color: var(--muted); font-size: 16px; margin-top: 16px; line-height: 1.7; }
.pt-eyebrow {
  font-family: var(--f-b); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
}

/* ---------- 1 · úvod ---------- */
.pt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--accent, var(--petrol)); color: rgba(255,255,255,.84);
  padding: 34px 0 62px; min-height: min(78vh, 720px); display: flex; align-items: center;
}
.pt-hero-bg { position: absolute; inset: 0; z-index: -2; }
.pt-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.pt-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,22,23,.62) 0%, rgba(8,22,23,.34) 34%, rgba(8,22,23,.88) 100%),
    linear-gradient(95deg, var(--accent-2, #0d2627) 0%, rgba(13,38,39,.32) 62%, transparent 100%);
}
.pt-back {
  display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72);
  text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 34px;
  transition: color .2s, gap .2s;
}
.pt-back:hover { color: var(--gold); gap: 13px; }
.pt-hero-in { max-width: 830px; }
.pt-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.pt-hero .pt-eyebrow { color: var(--gold); }
.pt-hero h1 {
  color: #fff; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.12; margin-top: 14px;
  text-shadow: 0 2px 22px rgba(0,0,0,.35);
}
.pt-hero-sub {
  color: rgba(255,255,255,.86); font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.72; margin-top: 20px; max-width: 62ch;
}
.pt-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pt-btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--f-b); font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background .22s, color .22s, border-color .22s, transform .2s var(--e);
}
.pt-btn.primary { background: var(--gold); color: var(--petrol-deep); }
.pt-btn.primary:hover { background: #fff; transform: translateY(-2px); }
.pt-btn.light { border-color: rgba(255,255,255,.42); color: #fff; }
.pt-btn.light:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }

.pt-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  margin-top: 46px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--pt-r); overflow: hidden;
}
.pt-stat { background: rgba(9,26,27,.44); padding: 18px 20px; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.pt-stat b { display: block; font-family: var(--pt-serif); font-size: clamp(18px, 2vw, 24px); color: #fff; font-weight: 500; line-height: 1.22; }
.pt-stat span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 7px; }

/* ---------- lepivá lišta sekcií ---------- */
.p-bar {
  position: sticky; top: var(--nav-h); z-index: 400;
  background: rgba(250,247,241,.94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.p-bar > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 58px; }
.p-bar-links { display: flex; gap: 26px; list-style: none; }
.p-bar-links a {
  font-family: var(--f-b); font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  color: var(--muted); position: relative; padding: 5px 0; text-decoration: none; transition: color .2s;
}
.p-bar-links a:hover, .p-bar-links a.active { color: var(--accent, var(--petrol)); }
.p-bar-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); }
.p-bar-cta { display: flex; gap: 8px; }
@media (max-width: 900px) { .p-bar-links { display: none; } .p-bar > .wrap { justify-content: flex-end; } }
@media (max-width: 520px) { .p-bar-cta .btn span { display: none; } .p-bar-cta .btn { padding: 11px 15px; } }

/* ---------- 2 · lokalita ---------- */
.pt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 40px; }
.pt-fact {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pt-r);
  padding: 26px 22px; text-align: center; box-shadow: var(--pt-sh-sm);
  transition: transform .25s var(--e), box-shadow .25s var(--e);
}
.pt-fact:hover { transform: translateY(-3px); box-shadow: var(--pt-sh-md); }
.pt-fact-n { font-family: var(--pt-serif); font-size: clamp(26px, 3vw, 36px); color: var(--accent, var(--petrol)); line-height: 1.1; }
.pt-fact-n small { font-size: .52em; margin-left: 3px; color: var(--gold-deep); }
.pt-fact-l { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

.pt-map { background: var(--paper); border: 1px solid var(--line); border-radius: var(--pt-r); overflow: hidden; box-shadow: var(--pt-sh-md); }
.pt-map-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pt-map-head .ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft, var(--petrol-soft)); color: var(--accent, var(--petrol)); }
.pt-map-head b { display: block; font-family: var(--pt-serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.pt-map-head span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
/* ---------- dokument (ÚPI) ---------- */
.pt-doc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--pt-r); overflow: hidden; box-shadow: var(--pt-sh-md); }
.pt-doc-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pt-doc-head .ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft, var(--petrol-soft)); font-size: 19px; }
.pt-doc-head b { display: block; font-family: var(--pt-serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.pt-doc-head span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.pt-doc-head .btn { margin-left: auto; }
.pt-doc-view { width: 100%; height: 76vh; min-height: 420px; border: 0; display: block; background: var(--cream-2); }
@media (max-width: 760px) {
  .pt-doc-head { flex-wrap: wrap; }
  .pt-doc-head .btn { margin-left: 0; width: 100%; }
  .pt-doc-view { height: 58vh; min-height: 320px; }
}

/* vzdialenosť do najbližšieho mesta (pri dedinách). Zápis cez .pt-map-head,
   inak by ho prebilo všeobecné pravidlo .pt-map-head span vyššie */
.pt-map-head .pt-map-city {
  margin-left: auto; margin-top: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--accent-soft, var(--petrol-soft)); color: var(--accent, var(--petrol));
  font-family: var(--f-d); font-size: 12.5px; font-weight: 600;
}
@media (max-width: 560px) {
  .pt-map-head { flex-wrap: wrap; }
  .pt-map-head .pt-map-city { margin-left: 0; width: 100%; justify-content: center; }
}
.pt-map .map-canvas { border-radius: 0; }

/* ---------- 3 · popis ---------- */
/* Popis využíva šírku stránky: text v čitateľnej miere vľavo, inžinierske
   siete vedľa neho. Predtým to bol úzky stĺpec na stred, ktorý sa naťahoval
   do dĺžky a nechával po stranách prázdno. */
#popis .wrap { display: grid; gap: 34px 48px; align-items: start; }
#popis .pt-head { grid-column: 1 / -1; }
/* Na dva stĺpce delíme, len keď sú vyplnené inžinierske siete — inak by
   vedľa textu ostal navždy prázdny pás. Text je aj tak zarovnaný vľavo
   a v čitateľnej miere, takže sa už nenaťahuje do úzkeho stĺpca na stred. */
@media (min-width: 1040px) {
  #popis .wrap:has(.pt-utils) { grid-template-columns: minmax(0, 1fr) 290px; }
}
/* Popis zarovnaný vľavo. Krátky text ostáva v jednom stĺpci v čitateľnej
   miere; dlhý sa na širokej ploche rozloží do dvoch stĺpcov, aby využil
   šírku stránky namiesto toho, aby sa naťahoval do dĺžky a nechával
   vpravo prázdno. Triedu .je-dlhy pridáva detail.js podľa množstva textu. */
.pt-text { max-width: 74ch; margin-inline: 0; font-size: 16.5px; line-height: 1.85; color: var(--ink-2); }
@media (min-width: 1100px) {
  .pt-text.je-dlhy { max-width: none; columns: 2; column-gap: 54px; }
  /* odsek ani zoznam sa nesmie zlomiť medzi stĺpce */
  .pt-text.je-dlhy > * { break-inside: avoid; }
  .pt-text.je-dlhy > :first-child { margin-top: 0; }
}
.pt-text p { margin-bottom: 18px; }
.pt-text h3, .pt-text h4 { font-family: var(--pt-serif); color: var(--accent, var(--petrol)); margin: 30px 0 12px; }
.pt-text ul, .pt-text ol { margin: 0 0 18px 22px; }
.pt-text li { margin-bottom: 8px; }
.pt-utils { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (min-width: 1040px) {
  .pt-utils { flex-direction: column; align-items: stretch; position: sticky; top: calc(var(--nav-h) + 24px); }
}
.pt-util {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 600; color: var(--ink); box-shadow: var(--pt-sh-sm);
}
.pt-util span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent, var(--petrol)); color: var(--gold); }

/* ---------- 4 · galéria ---------- */
.pt-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }
.pt-frame {
  position: relative; border-radius: var(--pt-r); overflow: hidden; cursor: pointer;
  background: var(--cream-2); box-shadow: var(--pt-sh-sm);
  transition: transform .3s var(--e), box-shadow .3s var(--e);
}
.pt-frame:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); }
/* height:auto musí byť explicitne — atribút height v <img> je prezentačná
   pomôcka a bez tohto prebije aspect-ratio (galéria potom narastie do neba) */
.pt-frame img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .8s var(--e); }
.pt-frame:hover img { transform: scale(1.06); }

/* ---------- 5 · špecifikácie ---------- */
/* ---------- video ----------
   Bez obmedzenia výšky sa <video> vykreslí vo vlastnej veľkosti — zvislý
   záber z telefónu potom prekryje celú stránku a nie je z neho nič vidieť.
   Ovládanie ostáva bežné, zväčšenie na celú obrazovku si spustí divák sám. */
.stack { display: grid; gap: 18px; }
.video-wrap {
  position: relative; display: grid; place-items: center;
  border-radius: var(--pt-r); overflow: hidden;
  background: #0b1e1f; box-shadow: var(--pt-sh-md);
}
.video-wrap video {
  display: block; width: auto; max-width: 100%; max-height: 70svh;
  object-fit: contain; background: #0b1e1f;
}
.video-wrap iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
@media (max-width: 640px) { .video-wrap video { max-height: 58svh; } }

.pt-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.pt-spec {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pt-r);
  padding: 28px 26px; box-shadow: var(--pt-sh-sm);
  transition: transform .25s var(--e), box-shadow .25s var(--e), border-color .25s;
}
.pt-spec:hover { transform: translateY(-3px); box-shadow: var(--pt-sh-md); border-color: var(--gold); }
.pt-spec .ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: var(--accent-soft, var(--petrol-soft)); color: var(--accent, var(--petrol)); margin-bottom: 18px;
}
.pt-spec .ic svg { width: 22px; height: 22px; }
.pt-spec h3 { font-size: 19px; color: var(--accent, var(--petrol)); margin-bottom: 16px; }
.pt-spec dl { display: grid; gap: 1px; background: var(--line-2); border-radius: 9px; overflow: hidden; }
.pt-spec .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; background: var(--paper); padding: 11px 13px; }
.pt-spec dt { font-size: 14px; color: var(--muted); }
.pt-spec dd { font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: right; }

/* ---------- 7 · kontakt ---------- */
.pt-contact { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 26px; align-items: start; }
.pt-agent, .pt-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pt-r);
  padding: 28px; box-shadow: var(--pt-sh-md);
}
.pt-agent-top { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pt-agent-top img, .pt-agent-top .av {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none;
  display: grid; place-items: center; background: var(--accent, var(--petrol)); color: var(--gold);
  font-family: var(--pt-serif); font-size: 19px;
}
.pt-agent-top b { display: block; font-family: var(--pt-serif); font-size: 16.5px; color: var(--ink); font-weight: 600; }
.pt-agent-top span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.pt-price {
  font-family: var(--pt-serif); font-size: clamp(24px, 2.6vw, 31px); color: var(--accent, var(--petrol));
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.pt-price small { display: block; font-family: var(--f-b); font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 5px; }
.pt-agent-list { list-style: none; display: grid; gap: 11px; padding: 20px 0; }
.pt-agent-list a, .pt-agent-list span { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.pt-agent-list a:hover { color: var(--gold-deep); }
.pt-agent-list svg { color: var(--gold-deep); flex: none; }
.pt-code { font-size: 12px; color: var(--muted-2); margin-top: 16px; word-break: break-all; }
.pt-form h3 { font-size: 21px; color: var(--accent, var(--petrol)); margin-bottom: 20px; }

@media (max-width: 900px) {
  .pt-sec { padding: 58px 0; }
  .pt-head { margin-bottom: 32px; }
  .pt-contact { grid-template-columns: 1fr; }
  .pt-hero { min-height: 0; padding: 26px 0 46px; }
  .pt-stats { margin-top: 32px; }
  .pt-agent, .pt-form { padding: 22px; }
}
@media (max-width: 560px) {
  .pt-gal { grid-template-columns: 1fr 1fr; gap: 12px; }
}