/*
 * Elena Driga — premium visual system
 * -----------------------------------
 * A final, site-scoped design layer for the public Elena experience. Private
 * routes (/528 and /love) deliberately opt out through data-site-surface.
 * Palette values remain owned by src/theme/brand-tokens.css; this file only
 * defines semantic scale, rhythm and component treatment.
 */

html[data-site-surface="elena"] {
  /* Compatibility aliases for older page modules. */
  --surface: var(--surface-raised);
  --violet: var(--brand-primary);
  --sky: var(--story-sea);
  --noir-raised: var(--surface-inverse-raised);
  --font-sans: var(--font-body);

  /* Typography. */
  --premium-font-body: var(--font-body);
  --premium-font-heading: var(--font-display);
  --premium-text-caption: 0.75rem;
  --premium-text-body: 1rem;
  --premium-text-lead: clamp(1.0625rem, 0.99rem + 0.28vw, 1.25rem);
  --premium-leading-body: 1.72;
  --premium-leading-heading: 1.12;
  --premium-measure: 68ch;
  --premium-measure-narrow: 52ch;
  --premium-tracking-eyebrow: 0.13em;

  /* Layout rhythm. */
  --premium-gutter: clamp(1.125rem, 2.8vw, 3rem);
  --premium-section-y: clamp(4.5rem, 7vw, 7.5rem);
  --premium-stack-xs: 0.5rem;
  --premium-stack-sm: 0.875rem;
  --premium-stack-md: 1.5rem;
  --premium-stack-lg: clamp(2rem, 3vw, 3rem);
  --premium-content: 72rem;
  --premium-content-wide: 92rem;
  --premium-reading: 48rem;
  --premium-header-height: 4.75rem;

  /* Shape. */
  --premium-radius-control: 0.875rem;
  --premium-radius-card: 1.375rem;
  --premium-radius-feature: 1.75rem;
  --premium-radius-media: 1.5rem;
  --premium-radius-pill: 999px;
  --radius: var(--premium-radius-control);

  /* One restrained elevation family, inherited by every selectable theme. */
  --premium-shadow-hairline: 0 1px 0 color-mix(in oklab, var(--surface-solid) 72%, transparent);
  --premium-shadow-control:
    0 10px 28px -22px color-mix(in oklab, var(--surface-inverse) 30%, transparent),
    var(--premium-shadow-hairline);
  --premium-shadow-card:
    0 24px 64px -46px color-mix(in oklab, var(--surface-inverse) 38%, transparent),
    var(--premium-shadow-hairline);
  --premium-shadow-panel:
    0 34px 88px -52px color-mix(in oklab, var(--surface-inverse) 50%, transparent),
    var(--premium-shadow-hairline);
  --premium-shadow-media: 0 38px 88px -46px
    color-mix(in oklab, var(--surface-inverse) 60%, transparent);
  --premium-shadow-focus: 0 0 0 4px color-mix(in oklab, var(--focus-ring) 20%, transparent);
  --premium-shadow-header: 0 12px 38px -32px
    color-mix(in oklab, var(--surface-inverse) 42%, transparent);

  /* Normalize legacy elevation tokens without changing palette identity. */
  --shadow-section: var(--premium-shadow-panel);
  --section-shadow: var(--premium-shadow-panel);
  --shadow-card: var(--premium-shadow-card);
  --shadow-card-soft: var(--premium-shadow-card);
  --shadow-control: var(--premium-shadow-control);
  --shadow-action: var(--premium-shadow-control);
  --shadow-action-hover: var(--premium-shadow-card);
  --shadow-media: var(--premium-shadow-media);
  --shadow-resilience-card: var(--premium-shadow-card);
  --shadow-resilience-icon: var(--premium-shadow-control);
  --shadow-resilience-stage: var(--premium-shadow-panel);
  --shadow-resilience-step: var(--premium-shadow-control);
  --shadow-resilience-number: var(--premium-shadow-control);
  --shadow-resilience-chip: var(--premium-shadow-control);

  /* Motion. */
  --premium-duration-fast: 160ms;
  --premium-duration-base: 220ms;
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[lang="en"][data-site-surface="elena"],
html[lang="ru"][data-site-surface="elena"] {
  --font-body: "Manrope Variable", "Inter", system-ui, sans-serif;
  --font-display: "PT Serif", "Cormorant Garamond Variable", Georgia, serif;
  --premium-tracking-eyebrow: 0.105em;
}

html[lang="he"][data-site-surface="elena"] {
  --premium-tracking-eyebrow: 0.055em;
}

html[data-site-surface="elena"] body {
  background:
    radial-gradient(
      70rem 38rem at 8% -12%,
      color-mix(in oklab, var(--brand-emotive) 14%, transparent),
      transparent 66%
    ),
    radial-gradient(
      62rem 34rem at 104% 4%,
      color-mix(in oklab, var(--story-sea) 13%, transparent),
      transparent 64%
    ),
    var(--surface-page);
  color: var(--text-primary);
  font-family: var(--premium-font-body);
  font-size: var(--premium-text-body);
  font-weight: 400;
  line-height: var(--premium-leading-body);
  text-rendering: optimizeLegibility;
}

html[data-site-surface="elena"] :where(h1, h2, h3, h4) {
  /* Color is intentionally inherited so inverse panels and explicit heading
     utilities retain their contrast in every theme and locale. */
  font-family: var(--premium-font-heading);
  line-height: var(--premium-leading-heading);
  text-wrap: balance;
}

html[data-site-surface="elena"] main:not([data-page-surface="legal"]) h1 {
  font-size: clamp(2.65rem, 5.2vw, 5.75rem);
  letter-spacing: -0.025em;
}

html[data-site-surface="elena"]
  main
  :is(h2, h3):is(
    [class*="text-3xl"],
    [class*="text-4xl"],
    [class*="text-5xl"],
    [class*="text-6xl"],
    [class*="text-7xl"]
  ) {
  letter-spacing: -0.018em;
  line-height: 1.14;
}

html[data-site-surface="elena"]
  main
  h2:is([class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"], [class*="text-7xl"]) {
  font-size: clamp(2.15rem, 3.8vw, 4.25rem);
}

html[data-site-surface="elena"] :where(p, li, dd, figcaption) {
  text-wrap: pretty;
}

html[data-site-surface="elena"] main p:not([class*="max-w-"]) {
  max-inline-size: var(--premium-measure);
}

html[data-site-surface="elena"] main :is(p, span)[class*="uppercase"][class*="tracking"] {
  letter-spacing: var(--premium-tracking-eyebrow);
}

html[lang="ru"][data-site-surface="elena"]
  main
  :is(p, span)[class*="uppercase"][class*="tracking"] {
  letter-spacing: 0.075em;
}

html[data-site-surface="elena"]
  main
  :where([class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"]) {
  font-size: var(--premium-text-caption);
}

html[data-site-surface="elena"]
  main
  :where(
    [class*="text-[0.68rem]"],
    [class*="text-[0.7rem]"],
    [class*="text-[0.70rem]"],
    [class*="text-[0.72rem]"]
  ) {
  font-size: 0.8125rem;
}

html[data-site-surface="elena"] :where(a[href^="mailto:"], a[href^="tel:"]) {
  overflow-wrap: anywhere;
}

/* Page rhythm and media safety. */
html[data-site-surface="elena"] main > section {
  padding-inline: var(--premium-gutter);
  scroll-margin-top: calc(var(--premium-header-height) + 1.25rem);
}

html[data-site-surface="elena"] main :where(img, picture, video, svg) {
  max-inline-size: 100%;
}

html[data-site-surface="elena"] .section-grain::after {
  opacity: min(var(--grain-opacity, 0.025), 0.025);
}

html[data-site-surface="elena"] :where(.chapter-bg, .sunrise-bg, .sea-bg, .sage-bg, .clay-bg) {
  background-attachment: scroll;
}

/* Actions: one quiet interaction language, while retaining semantic colors. */
html[data-site-surface="elena"]
  :where(header, main, footer, [role="dialog"])
  :is(a, button)[class*="rounded-full"][class*="px-"] {
  min-block-size: 2.75rem;
  border-radius: var(--premium-radius-pill);
  font-weight: 600;
  line-height: 1.25;
  transition-duration: var(--premium-duration-base);
  transition-property: background-color, border-color, box-shadow, color, opacity, transform;
  transition-timing-function: var(--premium-ease);
}

html[data-site-surface="elena"] :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

html[data-site-surface="elena"]
  main
  :where(.input, input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible,
html[data-site-surface="elena"]
  [role="dialog"]
  :where(.input, input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
  outline: none;
}

html[data-site-surface="elena"] :where(button, input, textarea, select):disabled,
html[data-site-surface="elena"] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

/* Interactive controls that rely on compact utility sizing still retain the
   shared 44px target without altering their labels or handlers. */
html[data-site-surface="elena"] .a11y-panel button,
html[data-site-surface="elena"] [role="dialog"] button[aria-label] {
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

@media (hover: hover) {
  html[data-site-surface="elena"]
    :where(header, main, footer)
    :is(a, button)[class*="hover:-translate-y"]:hover {
    transform: translateY(-1px);
  }

  html[data-site-surface="elena"]
    main
    :is(article, aside, figure)[class*="hover:-translate-y"]:hover {
    transform: translateY(-2px);
  }

  html[data-site-surface="elena"] .group:hover [class*="group-hover:scale"] {
    transform: scale(1.015);
  }
}

/* Form controls. */
html[data-site-surface="elena"]
  main
  :where(
    .input,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select
  ),
html[data-site-surface="elena"]
  [role="dialog"]
  :where(
    .input,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select
  ) {
  inline-size: 100%;
  min-block-size: 3rem;
  border: 1px solid var(--border-control);
  border-radius: var(--premium-radius-control);
  background: color-mix(in oklab, var(--surface-solid) 94%, var(--surface-soft));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--surface-solid) 82%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  outline: none;
  padding: 0.78rem 1rem;
  text-align: start;
  transition:
    border-color var(--premium-duration-fast) ease,
    box-shadow var(--premium-duration-fast) ease,
    background-color var(--premium-duration-fast) ease;
}

html[data-site-surface="elena"] main textarea,
html[data-site-surface="elena"] [role="dialog"] textarea {
  min-block-size: 7.5rem;
  resize: vertical;
}

html[data-site-surface="elena"]
  main
  :where(.input, input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
html[data-site-surface="elena"]
  [role="dialog"]
  :where(.input, input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--focus-ring);
  background: var(--surface-solid);
  box-shadow: var(--premium-shadow-focus);
}

html[data-site-surface="elena"] :where(input, textarea)::placeholder {
  color: color-mix(in oklab, var(--text-secondary) 72%, transparent);
  opacity: 1;
}

html[data-site-surface="elena"] main :where(input[type="checkbox"], input[type="radio"]) {
  block-size: 1.25rem;
  inline-size: 1.25rem;
  accent-color: var(--brand-primary);
}

/* Cards, panels, accordions and dialogs. */
html[data-site-surface="elena"]
  main
  :where(article, aside, details, form)[class*="rounded-"][class*="border"] {
  border-color: color-mix(in oklab, var(--border-subtle) 78%, transparent);
  border-radius: var(--premium-radius-card);
  box-shadow: var(--premium-shadow-card);
}

html[data-site-surface="elena"]
  main
  :where(
    div,
    section
  )[class*="rounded-"][class*="border"][class*="shadow"][class*="overflow-hidden"]:not(
    [class*="rounded-full"]
  ) {
  border-radius: var(--premium-radius-feature);
}

html[data-site-surface="elena"] main figure[class*="rounded-"]:not([class*="rounded-full"]) {
  border-radius: var(--premium-radius-media);
}

html[data-site-surface="elena"]
  main
  :where(article, aside, section, div, figure)[class*="shadow-[0_"] {
  box-shadow: var(--premium-shadow-card);
}

html[data-site-surface="elena"] main details {
  border-color: color-mix(in oklab, var(--border-subtle) 82%, transparent);
  border-radius: var(--premium-radius-card);
  background: color-mix(in oklab, var(--surface-solid) 82%, var(--surface-soft));
  box-shadow: var(--premium-shadow-control);
  transition:
    border-color var(--premium-duration-base) ease,
    box-shadow var(--premium-duration-base) ease;
}

html[data-site-surface="elena"] main details[open] {
  border-color: color-mix(in oklab, var(--brand-primary) 40%, var(--border-subtle));
  box-shadow: var(--premium-shadow-card);
}

html[data-site-surface="elena"] main details > summary {
  min-block-size: 3.25rem;
  cursor: pointer;
  text-wrap: pretty;
}

html[data-site-surface="elena"] [role="dialog"] {
  border-color: color-mix(in oklab, var(--border-subtle) 76%, transparent);
  border-radius: var(--premium-radius-feature);
  box-shadow: var(--premium-shadow-panel);
}

html[data-site-surface="elena"]
  :where(figure, [class*="aspect-"])
  > :where(img, video):not(.object-contain) {
  object-fit: cover;
}

/* Shared visual shell for both existing Header implementations. */
html[data-site-surface="elena"] header[data-elena-header="primary"] {
  min-block-size: var(--premium-header-height);
  border-block-end: 1px solid color-mix(in oklab, var(--border-subtle) 62%, transparent) !important;
  background: color-mix(in oklab, var(--surface-solid) 90%, transparent) !important;
  box-shadow: var(--premium-shadow-header) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  transition-duration: var(--premium-duration-base);
}

html[data-site-surface="elena"] header[data-elena-header="primary"] > div:first-child {
  min-block-size: var(--premium-header-height);
  padding-block: 0.625rem;
}

html[data-site-surface="elena"]
  header[data-elena-header="primary"]
  :where(.main-menu-toggle, .shared-menu-toggle) {
  block-size: 2.75rem;
  inline-size: 2.75rem;
  border: 1px solid color-mix(in oklab, var(--border-subtle) 86%, transparent);
  background: color-mix(in oklab, var(--surface-solid) 92%, var(--surface-soft));
  box-shadow: var(--premium-shadow-control);
  color: var(--text-primary);
}

html[data-site-surface="elena"]
  header[data-elena-header="primary"]
  :where(.main-menu-toggle, .shared-menu-toggle)[aria-expanded="true"] {
  border-color: color-mix(in oklab, var(--brand-primary) 48%, var(--border-subtle));
  background: color-mix(in oklab, var(--brand-primary-soft) 32%, var(--surface-solid));
}

html[data-site-surface="elena"] .main-glass-nav > div[aria-hidden="true"],
html[data-site-surface="elena"] .main-glass-nav nav > span[aria-hidden="true"] {
  display: none;
}

html[data-site-surface="elena"] .main-glass-nav nav {
  border-color: color-mix(in oklab, var(--border-subtle) 82%, transparent);
  background: color-mix(in oklab, var(--surface-raised) 86%, transparent);
  box-shadow: var(--premium-shadow-control);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-site-surface="elena"] .main-glass-nav ul > span[aria-hidden="true"] {
  background: color-mix(in oklab, var(--brand-primary-soft) 38%, var(--surface-solid)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-primary) 28%, transparent) !important;
}

html[data-site-surface="elena"] :where(.main-glass-nav, .shared-desktop-nav) a {
  min-block-size: 2.5rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

html[data-site-surface="elena"] .shared-desktop-nav a[aria-current="page"] {
  border: 1px solid color-mix(in oklab, var(--brand-primary) 24%, transparent);
  background: color-mix(in oklab, var(--brand-primary-soft) 30%, var(--surface-solid));
  box-shadow: var(--premium-shadow-control);
}

html[data-site-surface="elena"]
  :where(.main-header-cta, .shared-header-cta, a[href*="wa.me"], a[href*="whatsapp"]) {
  box-shadow: var(--shadow-whatsapp);
}

html[data-site-surface="elena"] [role="group"]:has(button[data-theme-option]) {
  gap: 0.25rem;
}

html[data-site-surface="elena"] button[data-theme-option] {
  block-size: 2.5rem;
  inline-size: 2.5rem;
  box-shadow: none;
}

html[data-site-surface="elena"]
  header[data-elena-header="primary"]
  a[title][class*="rounded-full"] {
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

html[data-site-surface="elena"] [data-elena-mobile-panel] {
  max-block-size: calc(100dvh - var(--premium-header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block-end: env(safe-area-inset-bottom);
  background: color-mix(in oklab, var(--surface-solid) 96%, transparent) !important;
  box-shadow: 0 22px 44px -36px color-mix(in oklab, var(--surface-inverse) 38%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

html[data-site-surface="elena"] [data-elena-mobile-panel] nav > a {
  min-block-size: 2.875rem;
  border-radius: var(--premium-radius-control);
}

/* Home hero: editorial framing and calm depth, with existing content intact. */
html[data-site-surface="elena"] [data-elena-hero="primary"] [data-elena-surface="hero"] {
  border-color: color-mix(in oklab, var(--brand-primary) 22%, var(--border-subtle)) !important;
  border-radius: var(--premium-radius-feature) !important;
  background: color-mix(in oklab, var(--surface-solid) 72%, var(--surface-soft)) !important;
  box-shadow: var(--premium-shadow-panel) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
}

html[data-site-surface="elena"] [data-elena-surface="hero"] > div[aria-hidden="true"] {
  opacity: 0.46;
}

html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(1),
html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(2) {
  opacity: 0.32;
}

html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(3) {
  border-radius: var(--premium-radius-media) !important;
  box-shadow: var(--premium-shadow-media) !important;
}

html[data-site-surface="elena"]
  [data-elena-hero="primary"]
  .hero-copy
  > p:not(.hero-secondary-eyebrow) {
  max-inline-size: var(--premium-measure-narrow);
}

html[data-site-surface="elena"] [data-elena-hero="primary"] .hero-secondary-eyebrow {
  border-color: color-mix(in oklab, var(--brand-primary) 32%, transparent);
  background: color-mix(in oklab, var(--surface-solid) 74%, transparent);
  box-shadow: none;
  letter-spacing: var(--premium-tracking-eyebrow);
}

/* Desktop hero portrait stage: preserve the complete source frame while the
   existing mobile composition and crop remain untouched. */
@media (min-width: 1024px) {
  html[data-site-surface="elena"] [data-elena-media="hero"] {
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--brand-primary) 18%, var(--border-subtle));
    border-radius: 2.75rem;
    background: linear-gradient(
      145deg,
      color-mix(in oklab, var(--surface-solid) 92%, var(--brand-primary-soft)),
      color-mix(in oklab, var(--surface-solid) 80%, var(--surface-soft))
    );
    box-shadow:
      0 36px 82px -52px color-mix(in oklab, var(--surface-inverse) 54%, transparent),
      inset 0 1px 0 color-mix(in oklab, var(--surface-solid) 92%, transparent);
  }

  html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(1) {
    inset: -1rem;
    opacity: 0.22;
    filter: blur(28px);
  }

  html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(2) {
    inset: 0.4rem;
    border-radius: 2.3rem;
    opacity: 0.62;
    filter: blur(3px);
  }

  html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(3) {
    aspect-ratio: 848 / 1072 !important;
    border-radius: 2rem !important;
    background: color-mix(in oklab, var(--surface-solid) 94%, var(--surface-soft)) !important;
    box-shadow:
      0 30px 68px -42px color-mix(in oklab, var(--surface-inverse) 55%, transparent),
      0 0 0 1px color-mix(in oklab, var(--gold) 42%, transparent) !important;
  }

  html[data-site-surface="elena"] [data-elena-media="hero"] .hero-primary-media {
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }
}

/* Both Footer implementations now share rhythm, typography and interaction. */
html[data-site-surface="elena"] footer[data-elena-footer="primary"] {
  border-block-start-color: color-mix(in oklab, var(--border-subtle) 74%, transparent) !important;
  box-shadow: 0 -24px 68px -60px color-mix(in oklab, var(--surface-inverse) 34%, transparent);
}

html[data-site-surface="elena"] footer[data-elena-footer="primary"] :where(h2, h3) {
  letter-spacing: -0.012em;
}

html[data-site-surface="elena"] footer[data-elena-footer="primary"] :where(a, button) {
  display: inline-flex;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  align-items: center;
  transition-duration: var(--premium-duration-base);
  transition-timing-function: var(--premium-ease);
}

/* Social glyphs use the readable foreground role; the branded accent remains
   present in their border and hover treatment. */
html[data-site-surface="elena"]
  footer[data-elena-footer="primary"]:not([data-footer-version])
  a[target="_blank"][aria-label][title][class*="rounded-full"] {
  color: var(--champagne);
}

html[data-site-surface="elena"]
  footer[data-footer-version="premium-v1"]
  > section
  > div[aria-hidden="true"] {
  opacity: 0.54;
}

html[data-site-surface="elena"] footer[data-elena-footer="primary"]:not([data-footer-version]) {
  padding-block: clamp(3.5rem, 5vw, 4.5rem);
}

html[data-site-surface="elena"]
  footer[data-elena-footer="primary"]:not([data-footer-version])
  :where(a, button)[class*="hover:-translate-y"]:hover {
  transform: translateY(-1px);
}

/* Responsive refinement: mobile is composed independently, not compressed. */
@media (max-width: 767px) {
  html[data-site-surface="elena"] {
    --premium-gutter: clamp(1rem, 4.7vw, 1.25rem);
    --premium-section-y: clamp(3.75rem, 14vw, 5.25rem);
    --premium-header-height: 4.25rem;
    --premium-radius-card: 1.125rem;
    --premium-radius-feature: 1.35rem;
    --premium-radius-media: 1.125rem;
  }

  html[data-site-surface="elena"] body {
    font-size: 1rem;
    line-height: 1.68;
  }

  html[data-site-surface="elena"] main:not([data-page-surface="legal"]) h1 {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
  }

  html[data-site-surface="elena"]
    main
    h2:is([class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"], [class*="text-7xl"]) {
    font-size: clamp(2rem, 9.7vw, 2.85rem);
    line-height: 1.12;
  }

  html[data-site-surface="elena"] main > section {
    padding-inline: var(--premium-gutter);
  }

  html[data-site-surface="elena"]
    main
    :where(article, aside, details, form)[class*="rounded-"][class*="border"] {
    box-shadow: var(--premium-shadow-control);
  }

  html[data-site-surface="elena"] [data-elena-hero="primary"] [data-elena-surface="hero"] {
    border-radius: var(--premium-radius-feature) !important;
    box-shadow: var(--premium-shadow-card) !important;
  }

  html[data-site-surface="elena"] [data-elena-media="hero"] > div:nth-of-type(3) {
    border-radius: var(--premium-radius-media) !important;
    box-shadow: var(--premium-shadow-card) !important;
  }

  html[data-site-surface="elena"]
    :where(main, footer, [role="dialog"])
    :is(a, button)[class*="rounded-full"][class*="px-"] {
    min-block-size: 2.875rem;
  }

  html[data-site-surface="elena"] footer[data-elena-footer="primary"] a {
    min-block-size: 2.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html[data-site-surface="elena"] {
    --premium-header-height: 4.625rem;
  }

  html[data-site-surface="elena"] footer[data-elena-footer="primary"] .grid {
    align-items: start;
  }
}

@media (min-width: 1440px) {
  html[data-site-surface="elena"] [data-elena-hero="primary"] > div:last-child {
    max-inline-size: var(--premium-content-wide);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-surface="elena"] *,
  html[data-site-surface="elena"] *::before,
  html[data-site-surface="elena"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  html[data-site-surface="elena"] :where(a, button, article, aside, figure):hover {
    transform: none !important;
  }
}

/* Multilingual header fit and sticky resilience. */

/* `overflow-x-hidden` creates a scroll container that disables sticky headers.
   `clip` keeps decorative overflow contained without changing the scroll root. */
html[data-site-surface="elena"]
  :where(div, section):has(> header[data-elena-header="primary"]) {
  overflow-x: clip !important;
}

/* Preserve all three logical grid columns while the middle home navigation is
   hidden. Otherwise the action cluster auto-places beside the brand. */
html[data-site-surface="elena"] .main-glass-nav {
  grid-column: 2;
}

html[data-site-surface="elena"] .main-glass-nav + div {
  grid-column: 3;
  justify-self: end;
}

/* The wide home composition already uses the full navigation, social links and
   WhatsApp CTA. Keep the secondary brand tagline out of the EN/RU width budget. */
html:is([lang="en"], [lang="ru"])[data-site-surface="elena"]
  header[data-elena-header="primary"]:has(.main-glass-nav)
  > div
  > a:first-child
  > span
  > span:last-child {
  display: none !important;
}

/* Inner-page headers are flex based; keep their controls on the logical end. */
html[lang="en"][data-site-surface="elena"] .shared-desktop-nav + div,
html[lang="ru"][data-site-surface="elena"] .shared-desktop-nav + div {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
}

/* The current inner-page EN/RU labels are intentionally descriptive and too
   long for a stable one-line bar. A deliberate compact header preserves full
   readability and keeps every destination available in the menu. */
html[lang="en"][data-site-surface="elena"] .shared-desktop-nav,
html[lang="ru"][data-site-surface="elena"] .shared-desktop-nav {
  display: none !important;
}

html[lang="en"][data-site-surface="elena"] .shared-menu-toggle,
html[lang="ru"][data-site-surface="elena"] .shared-menu-toggle {
  display: inline-flex !important;
}

html[lang="en"][data-site-surface="elena"] .shared-mobile-panel,
html[lang="ru"][data-site-surface="elena"] .shared-mobile-panel {
  display: block !important;
}

html[lang="en"][data-site-surface="elena"] .shared-header-cta,
html[lang="ru"][data-site-surface="elena"] .shared-header-cta {
  display: none !important;
}

@media (min-width: 1280px) {
  html[lang="en"][data-site-surface="elena"] .shared-header-cta,
  html[lang="ru"][data-site-surface="elena"] .shared-header-cta {
    display: inline-flex !important;
  }
}

/* Home navigation appears only when each locale has a safe width budget.
   Browser zoom naturally falls back to the compact composition. */
@media (min-width: 1600px) and (max-width: 1759.98px) {
  html[lang="en"][data-site-surface="elena"] .main-glass-nav {
    display: none !important;
  }

  html[lang="en"][data-site-surface="elena"] .main-menu-toggle {
    display: inline-flex !important;
  }

  html[lang="en"][data-site-surface="elena"] .main-mobile-panel {
    display: block !important;
  }
}

@media (min-width: 1600px) and (max-width: 1919.98px) {
  html[lang="ru"][data-site-surface="elena"] .main-glass-nav {
    display: none !important;
  }

  html[lang="ru"][data-site-surface="elena"] .main-menu-toggle {
    display: inline-flex !important;
  }

  html[lang="ru"][data-site-surface="elena"] .main-mobile-panel {
    display: block !important;
  }
}

/* Continue the proven Russian desktop density from the existing upper
   boundary onward. The header container remains capped, so extra monitor
   width is not a fit budget. */
@media (min-width: 1920px) {
  html[lang="ru"][data-site-surface="elena"] .main-glass-nav > nav {
    padding-inline: 0.375rem;
  }

  html[lang="ru"][data-site-surface="elena"] .main-glass-nav ul {
    gap: 0;
  }

  html[lang="ru"][data-site-surface="elena"] .main-glass-nav ul > li > a {
    padding-inline: 0.5rem;
    font-size: 12px;
    letter-spacing: -0.01em;
  }

  html[lang="ru"][data-site-surface="elena"]
    .main-glass-nav
    ul
    > li:last-child {
    margin-inline-start: 0.125rem;
    padding-inline-start: 0.125rem;
  }

  html[lang="ru"][data-site-surface="elena"]
    .main-glass-nav
    ul
    > li:last-child
    button {
    gap: 0.25rem;
    padding-inline: 0.625rem;
  }
}