/* ==========================================================================
   Vigh Virágok — design tokens
   ========================================================================== */
:root {
  /* Color */
  --color-bg: #fbf6ee;
  --color-bg-alt: #f3e6d6;
  --color-surface: #ffffff;
  --color-text: #3a2b21;
  --color-text-muted: #6e5a4c;
  --color-text-soft: #8a7666;
  --color-primary: #bd5b2c;
  --color-primary-dark: #8f4220;
  --color-primary-light: #e2a469;
  --color-accent: #6f3223;
  --color-sage: #838f6f;
  --color-border: #e6d6c1;
  --color-border-strong: #d8bf9e;
  --color-on-primary: #fff9f2;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  /* Reserved for package name plates only (Terra Love and future packages).
     Italiana ships latin only — no ő/ű — which is why package names stay English. */
  --font-plate: "Italiana", "Didot", "Bodoni MT", serif;

  /* Spacing (4/8pt scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(58, 43, 33, 0.09);
  --shadow-md: 0 10px 30px rgba(58, 43, 33, 0.12);
  --shadow-lg: 0 24px 60px rgba(58, 43, 33, 0.16);

  /* Layout */
  --container-w: 1220px;
  --pad-inline: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-sm: 180ms;
  --dur-md: 320ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #211812;
    --color-bg-alt: #2a1e17;
    --color-surface: #2c2019;
    --color-text: #f3e7da;
    --color-text-muted: #cbb7a4;
    --color-text-soft: #a8907c;
    --color-primary: #e2884f;
    --color-primary-dark: #f0a06e;
    --color-primary-light: #e2a469;
    --color-border: #403126;
    --color-border-strong: #513e30;
    --color-on-primary: #241a13;
  }
}

/* Manual theme switch — higher specificity than the media query above,
   so an explicit choice always wins over the OS preference. */
:root[data-theme="dark"] {
  --color-bg: #211812;
  --color-bg-alt: #2a1e17;
  --color-surface: #2c2019;
  --color-text: #f3e7da;
  --color-text-muted: #cbb7a4;
  --color-text-soft: #a8907c;
  --color-primary: #e2884f;
  --color-primary-dark: #f0a06e;
  --color-primary-light: #e2a469;
  --color-border: #403126;
  --color-border-strong: #513e30;
  --color-on-primary: #241a13;
}
:root[data-theme="light"] {
  --color-bg: #fbf6ee;
  --color-bg-alt: #f3e6d6;
  --color-surface: #ffffff;
  --color-text: #3a2b21;
  --color-text-muted: #6e5a4c;
  --color-text-soft: #8a7666;
  --color-primary: #bd5b2c;
  --color-primary-dark: #8f4220;
  --color-primary-light: #e2a469;
  --color-accent: #6f3223;
  --color-border: #e6d6c1;
  --color-border-strong: #d8bf9e;
  --color-on-primary: #fff9f2;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps anchor targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem); font-weight: 500; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }
.section--alt { background: var(--color-bg-alt); }
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-12);
}
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { color: var(--color-text-muted); font-size: 1.05rem; }
.lede { font-size: 1.15rem; color: var(--color-text-muted); max-width: 60ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-sm) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-text);
}
.btn-outline:hover { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); }
.btn-light {
  background: var(--color-on-primary);
  color: var(--color-primary-dark);
}
.btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 97%, transparent);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
}
.brand img { height: 44px; width: 44px; object-fit: contain; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-links a {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  position: relative;
  padding-block: var(--space-1);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-md) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: background var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);
}
.theme-toggle:hover { background: var(--color-border); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-moon { display: none; }
  .theme-toggle .icon-sun { display: block; }
}
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--pad-inline);
    gap: var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out), visibility var(--dur-md);
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links a { font-size: 1.3rem; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-primary.header-cta { display: none; }
}

.icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(82vh, 760px);
  display: flex;
  align-items: center;
  color: var(--color-on-primary);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* <picture> is an inline box by default, so `height: 100%` on the inner <img>
   has no definite containing block to resolve against and collapses to the
   photo's intrinsic ratio. Every wrapper that stretches an image needs this. */
.hero-media picture,
.split-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Mirrored horizontally so the floral centrepiece sits on the right,
   clear of the text column on the left. */
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: scaleX(-1);
}

/* Soft left-side scrim: enough contrast for the text, feathered out so the
   right two-thirds of the decor photo stay clear and vivid. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(90deg, rgba(24, 16, 10, 0.74) 0%, rgba(24, 16, 10, 0.52) 18%, rgba(24, 16, 10, 0.16) 30%, rgba(24, 16, 10, 0) 39%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 39%);
  mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 39%);
  pointer-events: none;
}
/* On phones the portrait hero photo is shown almost whole: its top third is
   out-of-focus background, so the copy sits up there and the decor below stays
   completely unobscured. The mask keeps the scrim (and its blur) off the
   bottom two-thirds — previously a full-height gradient washed out the whole
   photo, which is the one thing the hero has to show. */
@media (max-width: 820px) {
  .hero { align-items: flex-start; }
  /* The desktop mirror exists to push the centrepiece clear of the left-hand
     text column; on phones the copy sits above the photo, so show it as shot. */
  /* Manually approved crop for the DAN08322 mobile photo: the source is
     shipped full-frame (no pre-crop) so this scale/pan can be tuned live in
     the browser — see test-hero-a2.html for the calibration tool. */
  .hero-media img { object-position: 50% 50%; transform: scale(1.2) translateY(5%); }
  .hero-actions { justify-content: flex-start; gap: var(--space-3); }
  .hero-actions .btn { padding-inline: 1.4rem; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(24, 16, 10, 0.74) 0%, rgba(24, 16, 10, 0.6) 34%, rgba(24, 16, 10, 0.18) 58%, rgba(24, 16, 10, 0) 72%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 72%);
  }
  .hero-content { padding-top: var(--space-10); padding-bottom: var(--space-16); }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  margin-inline: 0;
  text-align: left;
  padding-inline-start: clamp(1.75rem, 7vw, 6rem);
}
/* Warm off-white rather than --color-primary-light: the pale orange sat on a
   pale photo and was barely legible. */
.hero .eyebrow { color: rgba(255, 246, 236, 0.94); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
/* Slightly smaller than the global h1 scale. At the default 3.75rem this
   headline balances onto three stubby lines inside the text column; at 3.1rem
   it settles into two. The column can't simply grow instead — the scrim only
   darkens the left 39% of the photo, so wider text runs onto the bright areas. */
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem);
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
  margin-bottom: var(--space-4);
}
.hero-content { max-width: 680px; }
.hero p.lede { color: rgba(255, 250, 244, 0.95); margin-bottom: var(--space-8); text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 820px) {
  .hero-content { max-width: 100%; }
}

.page-hero {
  padding-block: calc(var(--space-24) + 1rem) var(--space-16);
  text-align: center;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero p { color: var(--color-text-muted); max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }

/* ==========================================================================
   Highlights bar
   ========================================================================== */
/* Top-only padding: the bottom gap comes from the next section's own
   top padding (--space-24). A bottom padding here used to stack on top of
   that, leaving noticeably more space below the bar than above it. */
.highlights-wrap { padding-top: var(--space-24); padding-bottom: 0; }
.highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.highlight-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.highlight-item .icon-badge { flex-shrink: 0; }
.highlight-item strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.highlight-item span { color: var(--color-text-muted); font-size: 0.9rem; }

@media (max-width: 980px) {
  .highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .highlights { grid-template-columns: 1fr; }
}

.icon-badge {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.icon-badge svg { width: 22px; height: 22px; }

/* ==========================================================================
   Split section (image + text)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy .quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.5;
  margin-block: var(--space-4) var(--space-3);
  position: relative;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-primary);
}
.split-copy .attribution {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}
.split-copy p.note { color: var(--color-text-muted); margin-bottom: var(--space-8); }
/* The name reads as a signature line, so it needs a beat before the story
   starts rather than sitting tight against the first paragraph. */
.split-copy h2.intro-name { margin-bottom: var(--space-6); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .split.reverse .split-media { order: 0; }
  /* A 16/11 landscape frame beheaded the portrait photo. Keep it upright and
     bias the crop upwards so the face stays whole. */
  .split-media { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
  .split-media img { object-position: 50% 22%; }
}

/* ==========================================================================
   Cards: packages, values, gallery
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card .icon-badge { margin-bottom: var(--space-4); }
.value-card h3 { margin-bottom: var(--space-2); }
.value-card p { color: var(--color-text-muted); font-size: 0.96rem; }

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}
@media (max-width: 860px) {
  .pkg-grid { grid-template-columns: 1fr; }
}
.pkg-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pkg-card.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.pkg-badge {
  position: absolute;
  top: -14px;
  right: var(--space-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
}
.pkg-card h3 { font-size: 1.4rem; margin-bottom: var(--space-1); }
.pkg-card .pkg-tag { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: var(--space-4); }
.pkg-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}
.pkg-price span { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-muted); font-weight: 500; }
.pkg-list { margin-bottom: var(--space-8); flex-grow: 1; }
.pkg-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.97rem;
}
.pkg-list li:last-child { border-bottom: none; }
.pkg-list svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.addon-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.addon-card h4 { margin-bottom: var(--space-1); font-family: var(--font-body); font-weight: 600; }
.addon-card p { color: var(--color-text-muted); font-size: 0.9rem; }

/* ==========================================================================
   Gallery grid + lightbox
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 70px;
  grid-auto-flow: dense;
  gap: var(--space-4);
}
.g-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-bg-alt);
  grid-row: span 4;
}
/* Every tile is a multiple of 4 rows. The old `g-tall` spanned 6, and because 6
   is not a multiple of 4 the dense packer kept leaving 2-row (156px) slivers
   nothing could fill — ten empty cells on the gallery page. The feature tile
   spans 8, which is exactly two stacked tiles plus the gap, so it tiles cleanly.
   Rule of thumb when adding photos: landscape = 2 columns, portrait = 1, and
   every band must add up to 4. */
.g-item.g-wide { grid-column: span 2; grid-row: span 4; }
.g-item.g-feature { grid-column: span 2; grid-row: span 8; }
.g-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-md) var(--ease-out);
}
.g-item:hover img { transform: scale(1.05); }
.g-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(40,26,17,0.55));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-sm) var(--ease-out);
}
.g-item:hover::after { opacity: 1; }
.g-item button {
  all: unset;
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
}

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 60px; }
}
@media (max-width: 520px) {
  .gallery-grid { gap: var(--space-2); grid-auto-rows: 52px; }
}

.lightbox {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25, 16, 10, 0.92);
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-md) var(--ease-out), visibility var(--dur-md);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.lightbox-close, .lightbox-nav {
  all: unset;
  position: absolute;
  color: #fff;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: var(--space-6); right: var(--space-6); }
.lightbox-nav svg, .lightbox-close svg { width: 22px; height: 22px; }
.lightbox-prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox-caption {
  position: absolute;
  bottom: var(--space-6);
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}
@media (max-width: 700px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: var(--space-2); }
  .lightbox-next { right: var(--space-2); }
  .lightbox-close { top: var(--space-2); right: var(--space-2); }
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  counter-reset: step;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}
.process-step { position: relative; padding-top: var(--space-8); }
.process-step .step-num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-border-strong);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.process-step .step-num::before {
  content: counter(step, decimal-leading-zero);
}
.process-step h3 { margin-bottom: var(--space-2); }
.process-step p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ==========================================================================
   Inventory — the concrete "what's actually in the box" list.
   Quantities are the hero here: a renter's first question is "is it enough?"
   ========================================================================== */
.capacity-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-12);
  background: var(--color-accent);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8);
  margin-bottom: var(--space-12);
  text-align: center;
}
.capacity-stat { display: flex; flex-direction: column; gap: 2px; }
.capacity-stat .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.capacity-stat .label {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 250, 244, 0.75);
}
.capacity-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.2); }
@media (max-width: 760px) {
  .capacity-band { gap: var(--space-6); padding: var(--space-6); }
  .capacity-divider { display: none; }
}

/* Coverage cards: organised by the parts of the wedding day a couple
   actually pictures — not by warehouse inventory. */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--space-5);
}
.cov-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.cov-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cov-check {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-sage) 26%, transparent);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.cov-check svg { width: 17px; height: 17px; }
.cov-item h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.cov-item p { color: var(--color-text-muted); font-size: 0.94rem; }

.inv-note {
  margin-top: var(--space-8);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.inv-note svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.inv-note strong { display: block; margin-bottom: var(--space-1); }
.inv-note p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ==========================================================================
   Rental flow — horizontal numbered path (how the rental actually works)
   ========================================================================== */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
}
@media (max-width: 900px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
}
.flow-step .flow-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}
.flow-step h3 { font-size: 1.08rem; margin-bottom: var(--space-2); }
.flow-step p { color: var(--color-text-muted); font-size: 0.93rem; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2,
.cta-banner p,
.cta-banner .btn-actions {
  position: relative;
  z-index: 1;
}
.cta-banner h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-banner p { color: rgba(255,250,244,0.86); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-8); }
.cta-banner .btn-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.cta-banner .deco {
  position: absolute;
  z-index: 0;
  opacity: 0.2;
  color: #fff;
  width: 220px; height: 220px;
  pointer-events: none;
}
.cta-banner .deco--tl { top: -50px; left: -50px; }
.cta-banner .deco--br { bottom: -60px; right: -60px; transform: rotate(35deg); }

@media (max-width: 700px) {
  .cta-banner { padding: var(--space-12) var(--space-6); }
}

/* ==========================================================================
   Photo credit note
   ========================================================================== */
.credit-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.85rem;
  margin-top: var(--space-6);
}
.credit-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field .req { color: var(--color-primary); }
.field input, .field select, .field textarea {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  transition: border-color var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: 0.82rem; color: var(--color-text-soft); }
.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.field-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); flex-shrink: 0; }

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.success { background: color-mix(in srgb, var(--color-sage) 18%, transparent); color: var(--color-text); border: 1px solid var(--color-sage); }
.form-status.error { background: color-mix(in srgb, #b3402c 14%, transparent); color: var(--color-accent); border: 1px solid var(--color-accent); }

/* ==========================================================================
   Contact page layout
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--space-16);
  align-items: start;
}
@media (max-width: 940px) {
  .contact-layout { grid-template-columns: 1fr; }
}
.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-item .icon-badge { flex-shrink: 0; }
.contact-info-item > div { min-width: 0; flex: 1; }
.contact-info-item strong { display: block; margin-bottom: 2px; }
.contact-info-item a, .contact-info-item span.value { color: var(--color-text-muted); }
.contact-info-item a:hover { color: var(--color-primary); }
.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.service-area {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.service-area h4 { font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-3); font-size: 0.95rem; }
.service-area ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-area li {
  font-size: 0.82rem;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
/* Centred like every other block in the section — the heading above it and the
   price notes below it are both centred, so a left-flush list left ~360px of
   dead space on the right. The block centres; the text inside stays left. */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform var(--dur-md) var(--ease-out); flex-shrink: 0; width: 20px; height: 20px; color: var(--color-primary); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-muted); }
.faq-item .faq-body p + p { margin-top: var(--space-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-accent);
  color: rgba(255, 250, 244, 0.86);
  padding-block: var(--space-16) var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand img { height: 40px; width: 40px; object-fit: contain; }
.footer-brand span { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.site-footer p { font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.95rem; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-sm) var(--ease-out);
}
.footer-social a:hover { background: rgba(255,255,255,0.22); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: rgba(255,250,244,0.6);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Hero micro-copy + scroll hint
   ========================================================================== */
/* Button labels swap by breakpoint: the short one fits the narrow phone
   buttons, the longer one is warmer and has room on desktop. */
.lbl-short { display: none; }
@media (max-width: 820px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
}

.hero-microcopy {
  margin-top: var(--space-5);
  font-size: 0.86rem;
  color: rgba(255, 250, 244, 0.82);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 2;
  /* Needs its own backing: a bare chevron disappears into a busy photo. */
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(24, 16, 10, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  color: rgba(255, 250, 244, 0.95);
  display: none;
}
.scroll-hint svg { width: 22px; height: 22px; animation: hint-bob 2.4s var(--ease-out) infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}
/* Only useful where the hero fills the screen and nothing peeks out below. */
@media (max-width: 820px) { .scroll-hint { display: flex; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

/* ==========================================================================
   Package name plate — the "wine label" treatment for Terra Love.
   Deliberately its own typeface so future packages inherit the same frame.
   ========================================================================== */
.plate {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: min(56vh, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
/* The wrapper carries the absolute positioning, not the <img>: .plate is a flex
   container, so an in-flow <picture> would sit beside the frame as a second
   flex item and squash it. */
.plate picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  z-index: -2;
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 24, 15, 0.28);
  z-index: -1;
}
.plate-inner {
  position: relative;
  width: min(100% - 2 * var(--space-8), 940px);
  border: 1px solid rgba(255, 250, 244, 0.6);
  padding: clamp(2rem, 5vw, 3.5rem) var(--space-6);
  text-align: center;
}
.plate-name {
  font-family: var(--font-plate);
  font-size: clamp(1.75rem, 0.6rem + 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.2em;
  /* letter-spacing also lands after the final glyph, which drags a centred
     wordmark visibly left. Padding compensates on every line, so it still
     looks centred if the name wraps. */
  padding-left: 0.2em;
  color: #fff8ef;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
@media (max-width: 560px) {
  .plate { min-height: min(62vh, 420px); }
  .plate-inner { width: calc(100% - 2 * var(--space-4)); padding-inline: var(--space-3); }
  .plate-name { letter-spacing: 0.14em; padding-left: 0.14em; }
}

.plate-copy {
  max-width: 62ch;
  margin: var(--space-8) auto 0;
  text-align: center;
}
.plate-copy p { color: var(--color-text-muted); }
.plate-copy p + p { margin-top: var(--space-4); }

/* ==========================================================================
   Audience list — "Nektek való, ha…"
   ========================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-8);
  max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.audience-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}
.style-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.style-tags span {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.95rem;
  font-size: 0.86rem;
}
.style-tags span::before { content: "#"; opacity: 0.6; }

/* ==========================================================================
   Launch offer band — sits above the prices so the numbers are read as
   already-discounted rather than discovered afterwards.
   ========================================================================== */
.launch-band {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.launch-band .icon-badge { flex-shrink: 0; }
.launch-band strong { display: block; font-size: 1.1rem; margin-bottom: var(--space-2); }
.launch-band p { color: var(--color-text-muted); font-size: 0.96rem; }
.launch-band p + p { margin-top: var(--space-3); }
.launch-band .launch-season { color: var(--color-primary-dark); font-weight: 600; }
@media (max-width: 620px) { .launch-band { flex-direction: column; gap: var(--space-4); } }

.pkg-price .was {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: line-through;
  margin-right: var(--space-3);
  vertical-align: middle;
}

.price-notes {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-4);
  max-width: 74ch;
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.price-notes strong { color: var(--color-text); }

/* ==========================================================================
   Legal pages — long-form reading, narrow measure
   ========================================================================== */
.legal { max-width: 74ch; margin-inline: auto; }
.legal h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal p { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.legal ul { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.legal li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text-muted);
}
/* Számozott lista a jogi/tájékoztató oldalakon: a pont helyett sorszám,
   mert ott a lépések sorrendje is információ (pl. köszönőoldal). */
.legal ol { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); counter-reset: legal-step; }
.legal ol > li { counter-increment: legal-step; }
.legal ol > li::before {
  content: counter(legal-step) ".";
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--color-primary);
  font-weight: 600;
}

.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: 0.95rem;
}
.legal th, .legal td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.legal th { background: var(--color-bg-alt); font-weight: 600; }
.legal td:first-child { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.legal-scroll { overflow-x: auto; }
.legal-updated { color: var(--color-text-soft); font-size: 0.9rem; margin-top: var(--space-12); }

/* Placeholder marker — deliberately loud so no draft value reaches production. */
.todo {
  display: inline-block;
  background: #fde8d8;
  color: #8f4220;
  border: 1px dashed #bd5b2c;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
}
:root[data-theme="dark"] .todo { background: #3a2418; color: #f0a06e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .todo { background: #3a2418; color: #f0a06e; }
}

.legal-callout {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.legal-callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Sticky mobile CTA — on phones the header's "Ajánlatkérés" button is hidden
   behind the hamburger, so once the hero scrolls away there is no visible way
   to convert. This keeps one always in reach.
   ========================================================================== */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--space-3) var(--pad-inline) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  gap: var(--space-3);
  transform: translateY(110%);
  transition: transform var(--dur-md) var(--ease-out);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { flex: 1; padding-block: 0.8rem; }
.mobile-cta .btn-call {
  flex: 0 0 auto;
  width: 48px;
  padding-inline: 0;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
}
.mobile-cta .btn-call svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .mobile-cta { display: flex; }
  /* keep the footer clear of the bar */
  .site-footer { padding-bottom: calc(var(--space-8) + 64px); }
}