/* ============================================================================
   Page + component styles. Depends on base.css tokens.
   ========================================================================== */

/* ── theme bridge ───────────────────────────────────────────────────────────
   base.css owns the palette; this block only names the handful of values on
   these pages that base.css has no token for. Two rules govern it.

   1. SURFACE colours flip with the theme. Every light value below is
      byte-identical to the pre-dark file, so light mode cannot shift; the dark
      pair beneath retunes them. Dark elevation is a lighter surface, never a
      bigger shadow.

   2. ON-MEDIA colours do NOT flip, and are deliberately left as literals at
      their call sites: anything painted over a photograph or over the
      lightbox's own scrim already has a dark ground in BOTH themes. Mapping
      those onto --surface-solid (#FFFFFF in light, #23271F in dark) is what
      turns "+12 kép" and every lightbox control into dark-grey-on-black. Each
      one carries a comment saying so — please don't tokenise them back.

   Both dark selectors are required: the media query is "follow the OS unless
   the reader forced light", the attribute is "the reader forced dark". Keep
   the two blocks in sync. */
:root {
  --veil-bg:      linear-gradient(150deg, rgba(255,255,255,0.66), rgba(255,255,255,0.44));
  --veil-bg-flat: rgba(255,255,255,0.93);
  --cell-bg:      rgba(255,255,255,0.62);
  --bc-card-bg:   rgba(255,255,255,0.50);
  --cell-line:    rgba(20,23,26,0.07);
  --cell-key:     var(--ink-4);
  --bc-line:      rgba(20,23,26,0.08);
  --track-rest:   rgba(20,23,26,0.12);
  --svc-icon-ink: #5C4319;
  --svc-icon-bg:  linear-gradient(150deg, rgba(200,154,78,0.32), rgba(168,124,63,0.18));
  --svc-icon-rim: rgba(255,255,255,0.7);
  --note-ok-bg:    rgba(36,69,59,0.1);
  --note-ok-line:  rgba(36,69,59,0.22);
  --note-ok-ink:   #1B342C;
  --note-err-bg:   rgba(180,85,60,0.1);
  --note-err-line: rgba(180,85,60,0.26);
  --note-err-ink:  #7C3320;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {

      /* surfaces --------------------------------------------------------- */
      /* The veil sits ON a photograph. A white film cannot carry the
         near-white --ink at night, so at night it becomes a dark scrim —
         which is also what the eye expects over a picture after dark. */
      --veil-bg:      linear-gradient(150deg, rgba(9,11,10,0.74), rgba(9,11,10,0.56));
      --veil-bg-flat: rgba(9,11,10,0.90);
      /* Elevation by a LIGHTER surface, not a heavier shadow. */
      --cell-bg:      var(--surface-1);
      --bc-card-bg:   rgba(255,255,255,0.04);
      --cell-line:    var(--hairline);
      /* --ink-4 on the lifted cell is ~3.3:1 — fine as a light-mode whisper,
         too quiet for a 12.6px uppercase label on a dark ground. */
      --cell-key:     var(--ink-2);
      --bc-line:      var(--hairline);
      /* An unfilled track has to read as a track: --tint-ink (7%) disappears
         next to lit brass. */
      --track-rest:   rgba(255,255,255,0.16);
      --svc-icon-ink: var(--brass-lit);
      --svc-icon-bg:  linear-gradient(150deg, rgba(210,165,92,0.26), rgba(210,165,92,0.11));
      --svc-icon-rim: var(--spec-strong);
      /* Status washes keep their hue and borrow the already-brightened
         --forest / --clay so the message itself stays legible. */
      --note-ok-bg:    rgba(94,156,134,0.14);
      --note-ok-line:  rgba(94,156,134,0.34);
      --note-ok-ink:   var(--forest);
      --note-err-bg:   rgba(217,118,90,0.14);
      --note-err-line: rgba(217,118,90,0.36);
      --note-err-ink:  var(--clay);
  }
}

/* Forced dark — keep in sync with the block above. */
:root[data-theme='dark'] {

    /* surfaces --------------------------------------------------------- */
    /* The veil sits ON a photograph. A white film cannot carry the
       near-white --ink at night, so at night it becomes a dark scrim —
       which is also what the eye expects over a picture after dark. */
    --veil-bg:      linear-gradient(150deg, rgba(9,11,10,0.74), rgba(9,11,10,0.56));
    --veil-bg-flat: rgba(9,11,10,0.90);
    /* Elevation by a LIGHTER surface, not a heavier shadow. */
    --cell-bg:      var(--surface-1);
    --bc-card-bg:   rgba(255,255,255,0.04);
    --cell-line:    var(--hairline);
    /* --ink-4 on the lifted cell is ~3.3:1 — fine as a light-mode whisper,
       too quiet for a 12.6px uppercase label on a dark ground. */
    --cell-key:     var(--ink-2);
    --bc-line:      var(--hairline);
    /* An unfilled track has to read as a track: --tint-ink (7%) disappears
       next to lit brass. */
    --track-rest:   rgba(255,255,255,0.16);
    --svc-icon-ink: var(--brass-lit);
    --svc-icon-bg:  linear-gradient(150deg, rgba(210,165,92,0.26), rgba(210,165,92,0.11));
    --svc-icon-rim: var(--spec-strong);
    /* Status washes keep their hue and borrow the already-brightened
       --forest / --clay so the message itself stays legible. */
    --note-ok-bg:    rgba(94,156,134,0.14);
    --note-ok-line:  rgba(94,156,134,0.34);
    --note-ok-ink:   var(--forest);
    --note-err-bg:   rgba(217,118,90,0.14);
    --note-err-line: rgba(217,118,90,0.36);
    --note-err-ink:  var(--clay);
}

/* ── section rhythm ────────────────────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section-tight { padding: clamp(38px, 5vw, 68px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(26px, 3.4vw, 46px); flex-wrap: wrap; }
.section-head p { max-width: 52ch; margin-top: 10px; }

/* ══ HERO ══════════════════════════════════════════════════════════════════
   Asymmetric: the type column overlaps the image plate, and a glass stat rail
   floats across the seam. The overlap is the point — it makes the glass read
   as glass, because it has something behind it to refract. */
.hero { position: relative; padding: clamp(30px, 5vw, 60px) 0 clamp(48px, 7vw, 90px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; } }

.hero-copy { position: relative; z-index: 3; }
.hero h1 { margin: 0.22em 0 0.34em; }
.hero h1 em { font-style: italic; color: var(--brass); font-variation-settings: 'opsz' 130, 'SOFT' 40, 'WONK' 1; }
.hero-lede { max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

.hero-plate {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 90px -34px rgba(var(--shadow-rgb),0.42), 0 2px 6px rgba(var(--shadow-rgb),0.06);
}
@media (max-width: 940px) { .hero-plate { aspect-ratio: 16 / 11; } }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-plate::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(190deg, transparent 46%, rgba(var(--shadow-rgb),0.34) 100%);
}

/* Glass rail floating over the seam between copy and plate. */
.hero-rail {
  position: relative; z-index: 4;
  margin-top: clamp(-30px, -3vw, -18px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero-rail .cell { padding: 18px 20px; text-align: center; }
.hero-rail .n { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 600; color: var(--ink); font-variation-settings: 'opsz' 50, 'SOFT' 12; letter-spacing: -0.03em; }
.hero-rail .k { font-size: 0.755rem; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
/* 0.66rem = 10.56px was below the 12px floor, and the 0.07em tracking is what
   pushed "AKTÍV INGATLAN" onto two lines in the first place. Larger and
   tighter fits the same cell in fewer lines. */
@media (max-width: 560px) {
  .hero-rail .cell { padding: 14px 6px; }
  .hero-rail .k { letter-spacing: 0.04em; font-size: 0.76rem; text-wrap: balance; }
}

/* Below ~400px the three-up strip stops working, and it is a sizing problem
   that cannot be solved by sizing: `1fr` is `minmax(auto, 1fr)`, so the cell
   holding the unbreakable word "Ügyfélértékelés" (117px of single-line type)
   refuses to shrink and takes 47% of a 284px rail, squeezing its neighbours to
   69–79px and wrapping "Aktív ingatlan". Equal columns are not an option
   either — 77px of content cannot hold a 117px word without breaking it
   mid-word. So on the narrowest phones the strip becomes three rows: every
   label then fits on one line, and the numerals keep a shared right edge. */
@media (max-width: 400px) {
  .hero-rail { grid-template-columns: 1fr; gap: 1px; }
  .hero-rail .cell {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; text-align: left; padding: 12px 16px;
  }
  /* Deliberately still wrappable: the EN/UK labels are longer than the HU
     ones, and a row that wraps to two right-aligned lines is fine — a forced
     nowrap would push them out of the panel. */
  .hero-rail .k { margin-top: 0; text-align: right; }
}

/* ══ LISTING CARDS ═════════════════════════════════════════════════════════ */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 700px) { .lgrid { grid-template-columns: 1fr; } }

.lcard { transition-delay: calc(var(--i, 0) * 55ms); }
.lcard-link { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0; box-shadow: var(--glass-shadow);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  will-change: transform; }
.lcard-link:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lift); }
.lcard-link:focus-visible { outline: 2.5px solid var(--brass); outline-offset: 3px; }

.lcard-media { position: relative; aspect-ratio: 4 / 3; }
.lcard-link:hover .lcard-media > img { transform: scale(1.045); }
.lcard-media > img { transition: transform 1.2s var(--ease-out), opacity 0.85s var(--ease-out); }
.lcard-noimg { display: grid; place-items: center; height: 100%; color: var(--ink-4); font-size: 0.88rem; background: var(--bone-deep); }

.lcard-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

/* The frosted veil genuinely blurs the photo behind it — this is the signature
   moment of the design, so it must sit ON the image, not below it. */
.lcard-veil {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: var(--veil-bg);
  -webkit-backdrop-filter: saturate(210%) blur(24px); backdrop-filter: saturate(210%) blur(24px);
  border: 0;
  box-shadow: var(--glass-rim), 0 6px 20px -10px rgba(var(--shadow-rgb),0.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lcard-veil { background: var(--veil-bg-flat); }
}
.lcard-veil .price { font-size: 1.32rem; }
.lcard-ppm { font-size: 0.76rem; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

.lcard-body { padding: 15px 18px 18px; }
.lcard-title { font-size: 1.03rem; font-weight: 550; line-height: 1.3; font-variation-settings: 'opsz' 24, 'SOFT' 12; }
.lcard-meta { margin-top: 5px; font-size: 0.885rem; color: var(--ink-3); }
.lcard-meta .sep { opacity: 0.42; margin: 0 2px; }

/* ══ FILTER BAR ════════════════════════════════════════════════════════════ */
.filters { position: sticky; top: 74px; z-index: 40; padding: 14px; margin-bottom: clamp(22px, 3vw, 34px); }
.filters-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; align-items: end; }
.filters-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; }
.filter-count { font-size: 0.9rem; color: var(--ink-3); font-weight: 600; }
@media (max-width: 900px) { .filters { top: 68px; } }

/* Mobile: filters collapse into a sheet toggled by a pill. */
.filter-pill { display: none; }
@media (max-width: 700px) {
  .filters { position: static; padding: 0; background: none; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .filter-pill { display: inline-flex; }
  .filters-body {
    display: none; padding: 16px; border-radius: var(--r-lg); margin-top: 12px;
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0; box-shadow: var(--glass-shadow);
  }
  .filters-body.open { display: block; }
  .filters-row { grid-template-columns: 1fr 1fr; }
}

/* ══ LISTING DETAIL ════════════════════════════════════════════════════════ */
.detail-head { padding: clamp(18px, 3vw, 30px) 0 clamp(16px, 2vw, 24px); }
.crumbs { font-size: 0.85rem; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brass); }
.crumbs .sep { opacity: 0.4; }

.detail-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.detail-price { text-align: right; }
.detail-price .price { font-size: clamp(1.85rem, 3.6vw, 2.7rem); display: block; }
.detail-price .ppm { font-size: 0.88rem; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
@media (max-width: 620px) { .detail-title-row { flex-direction: column; align-items: flex-start; gap: 12px; } .detail-price { text-align: left; } }

/* Gallery: one large plate + a strip. On mobile it becomes a snap carousel. */
.gallery { display: grid; grid-template-columns: 2.1fr 1fr; gap: 10px; border-radius: var(--r-xl); overflow: hidden; }
.gallery .g-main { aspect-ratio: 3 / 2; }
.gallery .g-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.gallery .g-side .ph { aspect-ratio: 3 / 2; }
.gallery .ph { border-radius: var(--r-md); cursor: zoom-in; }
.gallery .ph img { transition: transform 1s var(--ease-out), opacity 0.8s var(--ease-out); }
.gallery .ph:hover img { transform: scale(1.04); }
/* ON the photograph, behind its own dark scrim, so the ink is a literal white
   in BOTH themes: --surface-solid is #23271F at night, which would paint this
   dark-grey-on-black. */
.g-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,23,26,0.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #fff; font-weight: 650; font-size: 1.02rem; letter-spacing: 0.01em; white-space: nowrap; }

/* Photo counter — the carousel's peeking slide clips the "+N kép" overlay on
   phones, so on mobile the count moves to a chip on the first slide instead. */
.g-count {
  display: none;
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  /* Also on the photo: literal white ink and white rim, both themes. */
  font-size: 0.78rem; font-weight: 650; color: #fff;
  background: rgba(20,23,26,0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  pointer-events: none;
}
@media (max-width: 780px) {
  .gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery .g-side { display: contents; }

  /* Slide width must be set on the SLIDES, not on the gallery's DOM children.
     `.g-side` is display:contents here, so its two `.ph` boxes become the flex
     items — but they are grandchildren in the DOM, so `.gallery > *` never
     matched them. With no basis and only an aspect-ratio they collapsed to
     13px slivers: two dead 13×234 strips beside the first photo, which were
     also the second and third gallery buttons. */
  .gallery > .ph,
  .gallery .g-side > .ph { flex: 0 0 88%; scroll-snap-align: center; }
  .gallery .g-main, .gallery .g-side .ph { aspect-ratio: 4 / 3; }
  .g-more { display: none; }
  .g-count { display: block; }
}

.detail-cols { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; margin-top: clamp(26px, 3.6vw, 44px); }
@media (max-width: 980px) { .detail-cols { grid-template-columns: 1fr; } }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--cell-line); }
.spec-cell { background: var(--cell-bg); padding: 15px 17px; }
/* Fillers keep the last row from showing bare gap colour; they never wrap to a
   row of their own because they have no height of their own. */
.spec-fill { padding: 0; min-height: 0; }
.spec-cell .k { font-size: 0.735rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cell-key); }
.spec-cell .v { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-top: 3px; }

.prose { font-size: 1.01rem; line-height: 1.75; color: var(--ink-2); }
.prose p { margin-bottom: 1.05em; }
.prose p:last-child { margin-bottom: 0; }

/* Sticky agent card — the primary conversion surface on desktop. */
.agent-card { position: sticky; top: 90px; padding: 22px; }
@media (max-width: 980px) { .agent-card { position: static; } }
.agent-top { display: flex; align-items: center; gap: 14px; }
.agent-avatar { width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(150deg, var(--brass-lit), var(--brass));
  display: grid; place-items: center; color: #24180A; font-family: var(--display); font-weight: 600; font-size: 1.28rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 20px -8px var(--brass-glow); flex: 0 0 auto; }
.agent-name { font-family: var(--display); font-size: 1.14rem; font-weight: 600; color: var(--ink); font-variation-settings: 'opsz' 28, 'SOFT' 14; }
.agent-role { font-size: 0.84rem; color: var(--ink-3); }

/* Mobile sticky contact bar — the single most important mobile conversion element. */
.mobile-cta {
  display: none;
  position: fixed; z-index: 55;
  left:   calc(10px + env(safe-area-inset-left,  0px));
  right:  calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 9px; gap: 8px;
  border-radius: 999px;
}
.mobile-cta .btn { flex: 1 1 0; padding: 0.78em 1em; }
@media (max-width: 980px) {
  .mobile-cta { display: flex; }

  /* Clearance for the bar itself (≈56px from the bottom edge) plus air, so the
     last line of the page can never come to rest underneath it. */
  body.has-mobile-cta { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

  /* Scroll-edge scrim, the bottom counterpart of `.site-head::before`.

     The bar is a pill inset by 10px, so body copy ran through the gaps beside
     and below it and through the pill itself at partial alpha — the same
     "text sliced in half" the header had. It cannot live on `.mobile-cta`:
     that element has a backdrop-filter, which makes it a containing block for
     fixed descendants AND paints its own background before any child, so a
     pseudo-element there would sit on top of the glass instead of behind it.
     It therefore hangs off <body>, one z-index below the bar. */
  body.has-mobile-cta::after {
    content: '';
    position: fixed;
    inset: auto 0 0 0;
    height: calc(128px + env(safe-area-inset-bottom, 0px));
    z-index: 54;
    pointer-events: none;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    background: linear-gradient(to top,
      rgba(var(--bone-rgb),0.94) 0%,
      rgba(var(--bone-rgb),0.80) 44%,
      rgba(var(--bone-rgb),0.42) 74%,
      rgba(var(--bone-rgb),0) 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 58%, transparent 100%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.has-mobile-cta::after {
      background: linear-gradient(to top,
        rgba(var(--bone-rgb),0.99) 0%, rgba(var(--bone-rgb),0.96) 58%, rgba(var(--bone-rgb),0) 100%);
    }
  }

  /* The lightbox is translucent by design, so the bar and its scrim stayed
     visible through it as a smudge behind the prev/next buttons. gallery.js
     sets `.lb-open` on <body> for exactly this. */
  body.lb-open .mobile-cta { display: none; }
  body.has-mobile-cta.lb-open::after { display: none; }
}

/* ══ LIGHTBOX ══════════════════════════════════════════════════════════════ */
.lb { position: fixed; inset: 0; z-index: 120; display: none; place-items: center;
  background: rgba(14,17,20,0.72); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); }
.lb.open { display: grid; animation: lbin 0.34s var(--ease-out); }
@keyframes lbin { from { opacity: 0; } to { opacity: 1; } }
.lb-img { max-width: min(94vw, 1500px); max-height: 84vh; border-radius: var(--r-md); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7); }
/* The lightbox lays down its own near-black scrim in BOTH themes, so its
   chrome is literal white — do not route it through the palette. */
.lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 16px; color: #fff; }
.lb-count { font-size: 0.9rem; font-weight: 600; opacity: 0.9; font-variant-numeric: tabular-nums; }
.lb-btn { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color 0.22s; }
.lb-btn:hover { background: rgba(255,255,255,0.28); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
@media (max-width: 620px) { .lb-nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; } .lb-prev { left: 22%; } .lb-next { right: 22%; } }

/* ══ FORMS / LEAD ══════════════════════════════════════════════════════════ */
.lead-form { display: grid; gap: 14px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .lead-row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.83rem; color: var(--ink-3); line-height: 1.5; }
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brass); flex: 0 0 auto; }
.consent a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.form-note { font-size: 0.85rem; padding: 12px 14px; border-radius: var(--r-sm); display: none; }
.form-note.ok  { display: block; background: var(--note-ok-bg);  border: 1px solid var(--note-ok-line);  color: var(--ok-fg, #1B342C); }
.form-note.err { display: block; background: var(--note-err-bg); border: 1px solid var(--note-err-line); color: var(--err-fg, #7C3320); }

/* ══ CTA BAND ══════════════════════════════════════════════════════════════ */
.cta-band { padding: clamp(34px, 5vw, 62px); border-radius: var(--r-xl); text-align: center; }
.cta-band h2 { margin-bottom: 0.4em; }
.cta-band .lede { max-width: 50ch; margin: 0 auto 1.6em; }

/* ══ EMPTY STATE ═══════════════════════════════════════════════════════════ */
.empty { text-align: center; padding: clamp(48px, 8vw, 92px) 22px; border-radius: var(--r-xl); }
.empty h3 { margin-bottom: 0.4em; }

/* ── legal pages ───────────────────────────────────────────────────────── */
.legal h3 { font-size: 1.12rem; margin: 1.6em 0 .5em; }
.legal h3:first-child { margin-top: 0; }
.legal p { margin-bottom: .9em; }
.legal a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }

/* ══ SLOGAN ════════════════════════════════════════════════════════════════
   "Ha ingatlan, akkor Klingatlan" — the wordmark keeps its two-tone inside the
   headline. The span stops any flex gap from splitting the word (the bug that
   rendered it "Kling atlan" in the header and map pill). */
/* Fraunces' hairlines thin out as opsz climbs; at the h1 default (opsz 130,
   weight 500) the H crossbar all but disappears and "Ha" reads as "I l".
   The slogan therefore runs at a lower optical size with more weight. */
.slogan {
  font-weight: 600;
  font-variation-settings: 'opsz' 60, 'SOFT' 26, 'WONK' 1;
  letter-spacing: -0.028em;
}
.slogan .wm { display: inline; white-space: nowrap; }
.slogan .wm em {
  font-style: normal;
  color: var(--brass);
  font-variation-settings: 'opsz' 60, 'SOFT' 26, 'WONK' 1;
}

/* ══ SERVICES ══════════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.svc { padding: clamp(22px, 2.6vw, 30px); transition-delay: calc(var(--i, 0) * 90ms); }
.svc h3 { font-size: 1.14rem; margin-bottom: 0.5em; font-variation-settings: 'opsz' 26, 'SOFT' 14; }
.svc p { font-size: 0.92rem; line-height: 1.62; color: var(--ink-3); }

.svc-icon {
  width: 46px; height: 46px; border-radius: 15px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--svc-icon-ink);
  background: var(--svc-icon-bg);
  box-shadow: inset 0 1px 0 var(--svc-icon-rim), 0 4px 12px -6px var(--brass-glow);
}
.svc-icon svg { width: 23px; height: 23px; }

.svc-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.svc-list li {
  position: relative; padding-left: 22px;
  font-size: 0.875rem; line-height: 1.5; color: var(--ink-2);
}
.svc-list li::before {
  content: ''; position: absolute; left: 3px; top: 0.52em;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--brass); opacity: 0.55;
}

.svc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: clamp(18px, 2.4vw, 28px);
}
.svc-foot p { font-size: 0.82rem; max-width: 62ch; margin: 0; }

.svc-link {
  display: inline-block; margin-top: 16px;
  font-size: 0.875rem; font-weight: 650; color: var(--brass);
  transition: transform 0.3s var(--ease-out);
}
.svc-link:hover { transform: translateX(3px); }

/* ══ VÁSÁRLÁSI KÖLTSÉGEK (listing detail) ═════════════════════════════════ */
.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px;
}
.bc-card {
  background: var(--bc-card-bg);
  border-radius: var(--r-md);
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bc-k { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.bc-tag {
  font-size: .68rem; letter-spacing: .04em; text-transform: none;
  background: var(--brass); color: #23180A; border-radius: var(--r-pill); padding: 1px 7px; font-weight: 700;
}
.bc-v { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 600; color: var(--ink); line-height: 1.15; }
.bc-sub { font-size: .76rem; }

/* slider */
.bc-slider { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bc-line); }
.bc-slider > label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: 7px; }
.bc-slider output { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
#bcMonths {
  --bc-fill: 100%;
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brass) 0 var(--bc-fill), var(--track-rest) var(--bc-fill) 100%);
  outline: none; cursor: pointer; margin: 6px 0 4px;
}
#bcMonths::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--brass);
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb),0.22); cursor: grab;
}
#bcMonths::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--brass);
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb),0.22); cursor: grab;
}
#bcMonths:focus-visible { box-shadow: 0 0 0 3px var(--brass-glow); }
.bc-monthly { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.bc-monthly span { font-size: .8rem; }
.bc-monthly strong { font-size: 1.12rem; color: var(--ink); }

.bc-note { font-size: .76rem; line-height: 1.5; color: var(--ink-3); margin: 10px 0 0; }
.bc-note.ok { color: var(--forest); }
.bc-note.warn { color: var(--clay); }

/* notary breakdown */
.bc-break { margin: 11px 0 0; display: flex; flex-direction: column; gap: 3px; }
.bc-break > div { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.bc-break dt { color: var(--ink-3); margin: 0; }
.bc-break dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* disclaimer */
.bc-disc { margin-top: 15px; font-size: .84rem; }
.bc-disc summary { cursor: pointer; color: var(--ink-2); font-weight: 600; padding: 6px 0; }
.bc-disc summary:hover { color: var(--ink); }
.bc-disc ul { margin: 8px 0 10px; padding-left: 1.15em; display: flex; flex-direction: column; gap: 6px; }
.bc-disc li { line-height: 1.5; color: var(--ink-2); }
.bc-disc p { font-size: .78rem; line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: reduce) { #bcMonths { transition: none; } }

/* Dark-only refinements that no token can express. */
@media (prefers-color-scheme: dark) {
  /* The tile is only a few per cent lighter than the glass panel it sits in —
     enough to lift it, not enough to hurt the small print on it — so it takes a
     hairline to hold its edge. Light needs neither. */
  :root:not([data-theme='light']) .bc-card  { box-shadow: inset 0 0 0 1px var(--hairline-2); }
  /* This one sits over a PHOTOGRAPH. Brightening the ink is the honest move
     here; deepening the scrim any further turns a frosted plate into a black
     bar and loses the signature of the card. */
  :root:not([data-theme='light']) .lcard-ppm { color: var(--ink-2); }
}
:root[data-theme='dark'] .bc-card  { box-shadow: inset 0 0 0 1px var(--hairline-2); }
:root[data-theme='dark'] .lcard-ppm { color: var(--ink-2); }

/* ══ MOBILE REFINEMENTS ════════════════════════════════════════════════════
   Phone-only corrections, mirroring the block at the foot of base.css. Two
   rules drive all of it:
     · no text under 12px — Hungarian is a long-word language, so a cramped
       label wants tighter tracking and wrapping, not smaller type;
     · nothing a finger taps under 44×44 — where the visual element must stay
       small, the hit area grows by padding that is cancelled with an equal
       negative margin, so the layout metrics do not move.
   Everything is inside a max-width query: the desktop layout is untouched. */
@media (max-width: 760px) {

  /* Spec keys were 11.76px at 0.1em — 31 of them on a listing page, the
     densest small type on the site. Bigger and tighter: same editorial voice,
     no extra wraps. */
  .spec-cell .k { font-size: 0.79rem; letter-spacing: 0.07em; }

  /* 10.88px, the smallest type anywhere on the page, and it carries the one
     number the panel is arguing about. */
  .bc-tag { font-size: 0.76rem; padding: 2px 8px; }

  /* Breadcrumbs are a real navigation row but measured 45×22. Padding grows
     the target; the matching negative margin keeps the row the same height. */
  .crumbs a { padding-block: 11px; margin-block: -11px; }

  /* 205×23 as the only link out of a service card. */
  .svc-link { padding-block: 11px; margin-top: 5px; }

  /* 310×34 on a control whose whole job is to be opened. */
  .bc-disc summary { padding: 11px 0; }

  /* The contact card's e-mail and phone are the two most important actions on
     /kapcsolat, and they rendered as bare 20px-tall inline links. Each sits
     alone beneath its own label, so it can take real padding: the hit area
     then also covers the label above it, which is the correct behaviour —
     that label names the link. */
  .stack a[href^="mailto:"],
  .stack a[href^="tel:"] { display: inline-block; padding-block: 12px; }

  /* The consent tick was 17×17. The <label> wraps the input, so the whole
     60–80px consent row already toggles it — this is about the box being
     visible and comfortable, not about creating the target.

     The inline privacy link inside that sentence is deliberately NOT padded
     out to 44px: its hit area would spill over the neighbouring lines of the
     same label, so a tap meant for the checkbox would navigate away from a
     half-filled form. Slightly larger type and a looser line give the link
     more room to be hit accurately instead. */
  .consent { gap: 12px; font-size: 0.87rem; line-height: 1.6; }
  .consent input { width: 22px; height: 22px; margin-top: 2px; }

  /* The instalment slider was a 6px-tall hit strip. The input box becomes a
     full 44px band while the visible track stays a hairline rail: the track
     and thumb pseudo-elements paint it, so the box can grow behind them.
     `--bc-fill` is set on the input by buycost.js and inherits into the track
     pseudo-element, so the fill keeps working untouched. */
  #bcMonths {
    height: 44px;
    background: none;
    margin: 0 0 2px;
  }
  #bcMonths::-webkit-slider-runnable-track {
    height: 10px; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brass) 0 var(--bc-fill), var(--track-rest) var(--bc-fill) 100%);
  }
  #bcMonths::-webkit-slider-thumb {
    width: 26px; height: 26px;
    /* Centre the thumb on the 10px track: (10 − 26) / 2. */
    margin-top: -8px;
  }
  #bcMonths::-moz-range-track {
    height: 10px; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brass) 0 var(--bc-fill), var(--track-rest) var(--bc-fill) 100%);
  }
  #bcMonths::-moz-range-thumb { width: 26px; height: 26px; }
}