/* ==========================================================================
   AREA STRÁNKY (/area.php) — prefix .ar-*
   Navazuje na style.css (tokeny, .property-card), guides.css (.gd-closing,
   .gd-series) a services.css (.svc-wa-icon).

   RYTMUS: foto hero → skenovací dlaždice → próza → okolí → MAPA přes celou
   šířku → sezónnost → nemovitosti → tmavý CTA pás. Mapa a fotky nesou vizuál,
   proto je zbytek střídmý — lokalita je vizuální téma, ale chrome držíme.

   KONTRAST: zlatá na světlém jen jako --color-gold-shadow a jen pro grafiku
   nebo velký text; na tmavém heru a pásu patří --color-gold-hi.
   ========================================================================== */

.ar-section { padding: clamp(48px, 5.5vw, 84px) 0; }
.ar-section + .ar-section { padding-top: 0; }

/* Zapuštěný pás mezi hero a mapou — odliší tři sekce, ať nesplývají do jedné
   plochy (rytmus base → sunken → base → mapa). Má vlastní horní i dolní vzduch
   a sekce hned za ním si vezme zpět horní odsazení. */
.ar-section.ar-section--band {
  background: var(--bg-sunken);
  padding-top: clamp(40px, 4.6vw, 68px);
  padding-bottom: clamp(40px, 4.6vw, 68px);
}
.ar-section--band + .ar-section {
  padding-top: clamp(48px, 5.5vw, 84px);
}

.ar-section {
  --ar-measure: 62ch;
  --ar-body-sm: clamp(15px, 0.35vw + 14px, 16.5px);
}

.ar-head { margin-bottom: clamp(20px, 2.4vw, 30px); max-width: var(--ar-measure); }
.ar-head h2 { margin-top: 8px; }

.ar-head-row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* ==========================================================================
   1. HERO — fotka přes celou šířku, text na tmavém přechodu
   ========================================================================== */

/* Hero = dvousloupec na SVĚTLÉM pozadí: text vlevo, plovoucí foto vpravo.
   (Dřív full-bleed foto s textem přes ni → na světlých fotkách nečitelné.) */
.ar-hero {
  background: var(--color-bone);
  padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 76px);
}

.ar-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.ar-hero-grid--nomedia { grid-template-columns: 1fr; max-width: 760px; }

.ar-hero-text { min-width: 0; }

.ar-hero .eyebrow { color: var(--color-gold-shadow); }   /* tmavší zlatá kvůli kontrastu na světlé */

.ar-hero h1 {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.06;
  color: var(--text-main);
  text-wrap: balance;
}

.ar-hero-claim {
  margin-top: 14px;
  max-width: 52ch;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---- Plovoucí foto vpravo ---- */
.ar-hero-media { position: relative; }
.ar-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: clamp(16px, 2vw, 26px);
  box-shadow: 0 24px 60px rgba(18, 16, 11, 0.22);
}

/* ---- Stat řádek ---- */

.ar-stats {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--border-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}

.ar-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.ar-stat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  flex-shrink: 0;
}

/* Počet je živý údaj — zvýrazněný, ať se pozná od statických faktů */
.ar-stat.is-count {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-main);
}

/* Mobil: foto nad text, jeden sloupec. */
@media (max-width: 860px) {
  .ar-hero-grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); }
  .ar-hero-media { order: -1; }
  .ar-hero-photo { aspect-ratio: 16 / 10; }
}

.ar-hero-cta { margin-top: clamp(22px, 2.6vw, 30px); }

@media (max-width: 559px) {
  .ar-hero-cta .btn { width: 100%; }
}

/* ==========================================================================
   2. AT A GLANCE — skenovací dlaždice
   ========================================================================== */

.ar-glance-section { padding-top: clamp(30px, 3.6vw, 48px); }

.ar-glance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-line);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (min-width: 860px) { .ar-glance { grid-template-columns: repeat(4, 1fr); } }

/* Mezery mezi buňkami dělá 1px gap na podkladu — vznikne mřížka bez dvojlinek */
.ar-glance-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--bg-surface);
}

.ar-glance-ico { color: var(--color-gold-shadow); margin-bottom: 6px; }
.ar-glance-ico svg { width: 26px; height: 26px; stroke-width: 1.5; }

.ar-glance-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ar-glance-value {
  font-size: var(--ar-body-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-main);
}

/* ==========================================================================
   3. THE AREA — nadpis vlevo, próza vpravo na čtecí míře
   ========================================================================== */

.ar-prose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 32px);
}

@media (min-width: 900px) {
  .ar-prose-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ar-measure));
    gap: clamp(36px, 4.5vw, 76px);
    align-items: start;
  }

  /* Titulek se veze s uživatelem podél delší prózy — stejně jako na About Us.
     Drží se pod fixní hlavičkou (~79px) s odstupem. */
  .ar-prose-grid .ar-head {
    margin-bottom: 0;
    position: sticky;
    top: clamp(96px, 8vw, 112px);
    align-self: start;
  }

  .ar-prose-grid .ar-head h2 { text-wrap: balance; }
}

.ar-prose { max-width: var(--ar-measure); }

.ar-prose p {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-muted);
}

.ar-prose p + p { margin-top: 16px; }

.ar-prose .ar-lede {
  font-size: clamp(17px, 0.5vw + 16px, 19px);
  line-height: 1.65;
  color: var(--text-main);
}

/* ==========================================================================
   4. LIVING HERE — ikona + řádek
   ========================================================================== */

.ar-living {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 18px);
}

@media (min-width: 640px)  { .ar-living { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ar-living { grid-template-columns: repeat(3, 1fr); } }

.ar-living-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  font-size: var(--ar-body-sm);
  line-height: 1.55;
  color: var(--text-main);
}

.ar-living-ico { flex: none; color: var(--color-gold-shadow); }
.ar-living-ico svg { width: 22px; height: 22px; stroke-width: 1.5; }


/* ==========================================================================
   5. LOKALITY V ZÓNĚ — výrazný TMAVÝ pruh s chipy (nahradilo mapu; zóny jsou
   charakterové, ne souvislé území). Full-bleed tmavá plocha se zlatými akcenty
   kontrastuje se světlou stránkou → sekce „vyskočí".
   ========================================================================== */

.ar-places {
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(34px, 4.5vw, 52px) 0;
  background-color: var(--bg-dark-main);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 75, 0.14), transparent 70%);
  text-align: center;
}

.ar-places .eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--color-gold-hi);
}

.ar-place-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}

.ar-place {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-dark-main);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 999px;
  transition: background var(--trans-fast), border-color var(--trans-fast);
}
.ar-place:hover {
  background: rgba(201, 162, 75, 0.12);
  border-color: var(--color-gold-base);
}
.ar-place::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-gold);
  flex-shrink: 0;
}

/* ==========================================================================
   6b. FOTOGALERIE — první snímek velký, zbytek mřížka
   ========================================================================== */

.ar-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

@media (min-width: 760px) {
  .ar-gallery { grid-template-columns: repeat(4, 1fr); }
  /* Vedoucí snímek zabere čtverec 2×2 — rozbije to fádní pás stejných dlaždic */
  .ar-shot.is-lead { grid-column: span 2; grid-row: span 2; }
}

.ar-shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-sunken);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

.ar-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-medium), filter var(--trans-medium);
}

.ar-shot:hover img { transform: scale(1.04); filter: brightness(1.05); }

.ar-shot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.55);
}

/* ---- Lightbox ---- */

.ar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 11, 8, 0.94);
}

.ar-lightbox[hidden] { display: none; }

.ar-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.ar-lb-close,
.ar-lb-nav {
  position: absolute;
  border: 1px solid rgba(243, 238, 227, 0.28);
  background: rgba(18, 16, 11, 0.6);
  color: var(--color-bone);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--trans-fast), border-color var(--trans-fast);
}

.ar-lb-close:hover,
.ar-lb-nav:hover { background: var(--color-gold-shadow); border-color: var(--color-gold-base); }

.ar-lb-close {
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 46px;
  height: 46px;
}

.ar-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}

/* SVG se vejde do kruhu se stejnou mezerou ze všech stran */
.ar-lb-close svg { width: 20px; height: 20px; display: block; }
.ar-lb-nav svg   { width: 24px; height: 24px; display: block; }

.ar-lb-nav.is-prev { left: clamp(8px, 1.6vw, 22px); }
.ar-lb-nav.is-next { right: clamp(8px, 1.6vw, 22px); }

/* ==========================================================================
   7. SEZÓNNOST + ŽIVÉ POČASÍ — jedno klima pro celý region, proto sdílené
   ========================================================================== */

/* ---- Živé počasí (Open-Meteo) ---- */

.ar-now {
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding: clamp(16px, 2vw, 22px);
  background: var(--bg-dark-main);
  background-image: radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 75, 0.16), transparent 62%);
  border: 1px solid var(--border-dark-line);
  border-radius: var(--radius-card);
  color: var(--text-dark-main);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

/* Fáze dne — jemný odstín pozadí dlaždice (přes tmavý základ) + chip s ikonou */
.ar-now { position: relative; }
.ar-now--morning { background-image:
  radial-gradient(120% 90% at 0% 0%, rgba(201,162,75,.16), transparent 62%),
  radial-gradient(95% 85% at 95% 0%, rgba(255,178,120,.15), transparent 60%); }
.ar-now--day { background-image:
  radial-gradient(120% 90% at 0% 0%, rgba(201,162,75,.14), transparent 62%),
  radial-gradient(95% 85% at 95% 0%, rgba(120,180,255,.12), transparent 60%); }
.ar-now--evening { background-image:
  radial-gradient(120% 90% at 0% 0%, rgba(201,162,75,.15), transparent 62%),
  radial-gradient(100% 90% at 100% 0%, rgba(255,120,80,.17), transparent 58%),
  linear-gradient(180deg, rgba(80,45,75,.30), transparent 60%); }
.ar-now--night { background-image:
  radial-gradient(120% 90% at 0% 0%, rgba(201,162,75,.12), transparent 62%),
  radial-gradient(100% 90% at 100% 0%, rgba(70,95,175,.18), transparent 60%); }

.ar-now-phase {
  position: absolute; top: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-gold-hi); opacity: .85;
}
.ar-now-phase svg { width: 18px; height: 18px; stroke-width: 1.6; }
@media (max-width: 560px) { .ar-now-phase span { display: none; } }

.ar-now-current {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 240px;
}

.ar-now-ico { color: var(--color-gold-hi); }
.ar-now-ico svg { width: 34px; height: 34px; stroke-width: 1.5; }

.ar-now-temp {
  font-family: var(--font-serif);
  font-size: clamp(32px, 2vw + 24px, 44px);
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
}

.ar-now-meta { display: flex; flex-direction: column; gap: 2px; }
.ar-now-meta strong { font-size: var(--fs-sm); font-weight: 600; }
.ar-now-meta span { font-size: var(--fs-sm); color: var(--text-dark-muted); }

.ar-now-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-left: 1px solid var(--border-dark-line);
  padding-left: clamp(14px, 2vw, 26px);
}

@media (max-width: 639px) {
  .ar-now-days { border-left: 0; padding-left: 0; width: 100%; justify-content: space-between; }
}

.ar-now-days li { display: flex; align-items: center; gap: 8px; }

.ar-now-day {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

.ar-now-dayico { color: var(--color-gold-hi); display: inline-flex; }
.ar-now-dayico svg { width: 17px; height: 17px; }

.ar-now-range { font-size: var(--fs-sm); color: var(--text-dark-main); }

/* Atribuce je licenční podmínka Open-Meteo — nesmí zmizet */
.ar-now-credit {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--text-dark-muted);
}

.ar-now-credit a { color: var(--color-gold-hi); text-decoration: underline; }
.ar-now-credit a:hover { color: var(--color-bone); }

/* Příliv / odliv — řádek nad atribucí, dark styl dlaždice. */
.ar-now-tide {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  color: var(--text-dark-main);
}
.ar-now-tide-ico { display: inline-flex; flex: none; color: var(--color-gold-hi); }
.ar-now-tide-ico svg { width: 18px; height: 18px; display: block; }
.ar-now-tide-txt strong { color: var(--color-gold-hi); font-weight: 600; }
.ar-now-tide-approx { font-size: var(--fs-xs); color: var(--text-dark-muted); opacity: 0.85; }

.ar-weather {
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg-sunken);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
}

.ar-weather-head { max-width: var(--ar-measure); margin-bottom: clamp(18px, 2.2vw, 26px); }
.ar-weather-head h2 { margin-top: 8px; }
.ar-weather-head p {
  margin-top: 8px;
  font-size: var(--ar-body-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.ar-seasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 18px);
}

@media (min-width: 760px) { .ar-seasons { grid-template-columns: repeat(3, 1fr); } }

.ar-season {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
}

.ar-season-ico { color: var(--color-gold-shadow); margin-bottom: 6px; }
.ar-season-ico svg { width: 24px; height: 24px; stroke-width: 1.5; }

.ar-season strong {
  font-size: var(--fs-lg);
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-main);
}

.ar-season span {
  font-size: var(--ar-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ==========================================================================
   8. PROPERTIES IN THIS AREA — konverzní pás
   ========================================================================== */

.ar-viewall {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.ar-viewall svg { width: 15px; height: 15px; transition: transform var(--trans-fast); }
.ar-viewall:hover { color: var(--teal-accent); }
.ar-viewall:hover svg { transform: translateX(4px); }

.ar-props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Prázdný stav není chyba — je to příležitost zeptat se na off-market */
.ar-noprops {
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg-surface);
  border: 1px dashed var(--border-line);
  border-radius: var(--radius-card);
  text-align: center;
}

.ar-noprops p {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--ar-body-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

.ar-noprops-actions {
  margin-top: clamp(16px, 2vw, 22px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 559px) {
  .ar-noprops-actions .btn { width: 100%; }
}

/* ==========================================================================
   9. NEZNÁMÁ LOKALITA
   ========================================================================== */

.ar-missing {
  padding: clamp(120px, 14vw, 190px) 0 clamp(60px, 7vw, 100px);
  text-align: center;
}

.ar-missing h1 { margin-top: 10px; font-family: var(--font-serif); font-weight: 500; }
.ar-missing p { margin-top: 12px; color: var(--text-muted); }

.ar-missing-links {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}