/**
 * Типографика woodlakes-php — единый источник правды.
 * В шаблонах используйте .t-* классы, не разрозненные text-3xl/sm:text-4xl.
 */

:root {
  --font-sans: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Адаптивная шкала (mobile → desktop), чуть крупнее прежней */
  --text-meta: 0.8125rem;                                         /* 13 */
  --text-label: 0.875rem;                                         /* 14 */
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);          /* 16→17 */
  --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);           /* 17→20 */
  --text-card: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);       /* 18→22 */
  --text-title: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem);          /* 26→40 */
  --text-display: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);           /* 36→64 */
  --text-hero: clamp(2.5rem, 1.65rem + 3.2vw, 4rem);              /* 40→64 */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-meta: 0.18em;

  --measure-prose: 65ch;
  --measure-heading: 45ch;

  /* Единый каркас страницы (как /arenda-kottedzhei/{slug}: max-w-7xl) */
  --layout-max: 80rem; /* 1280px */
  --layout-gutter: 1rem;

  /* Цвета из брендбука (совпадают с site.css) */
  --color-heading: #1574A1; /* brand primary blue — главные заголовки */
  --color-meta: #A67C52;    /* gold — eyebrow / .t-meta */
  --color-body: #0F283D;
  --color-muted: #4b5563;
}

@media (min-width: 640px) {
  :root {
    --layout-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-gutter: 2rem;
  }
}

/**
 * Оболочка контента на больших экранах.
 * Hero/full-bleed — снаружи; секции страницы — внутри .l-shell.
 */
.l-shell {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  min-width: 0;
}

.l-shell--flush {
  padding-inline: 0;
}

/**
 * Страница с сайдбаром (дом, услуга и т.п.).
 * Левая колонка уже основной контент и обязана сжиматься (minmax(0,1fr)),
 * правая — фиксированная ширина, без min-width %, чтобы не вылезать из .l-shell.
 */
:root {
  --layout-sidebar: 18rem; /* 288px */
  --layout-split-gap: 1.5rem;
}

.l-split {
  display: flex;
  flex-direction: column;
  gap: var(--layout-split-gap);
  width: 100%;
  min-width: 0;
}

.l-split__main {
  width: 100%;
  min-width: 0;
}

.l-split__aside {
  display: block;
  width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  .l-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-sidebar);
    align-items: start;
  }

  /*
   * Sticky на aside (overflow: visible!), скролл — у внутреннего .l-split__stick.
   * overflow на самом sticky ломает position: sticky.
   */
  .l-split__aside {
    position: sticky;
    top: 6rem;
    align-self: start;
  }

  .l-split__stick {
    max-height: calc(100dvh - 6rem - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

.dark {
  --color-heading: #38bdf8; /* sky-400 */
  --color-meta: #fbbf24;
  --color-body: #f1f5f9;
  --color-muted: #cbd5e1;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  font-weight: 400;
}

/* Формы иначе берут системный UI-шрифт */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* ——— Семантические роли ——— */

/* Eyebrow / надзаголовок секции */
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-meta);
  margin: 0 0 0.5rem;
}

/* Крупный витринный заголовок секции (Montserrat + brand blue) */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  max-width: var(--measure-heading);
  margin: 0;
  text-wrap: balance;
}

/* Hero H1 */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Заголовок блока / каталога / страницы */
.t-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  max-width: var(--measure-heading);
  margin: 0;
  text-wrap: balance;
}

.dark .t-title {
  color: var(--color-heading);
}

/* Подзаголовок / lead */
.t-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: 48rem;
  margin: 0.75rem 0 0;
  text-wrap: balance;
}

/* Заголовок карточки */
.t-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-card);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-body);
  margin: 0;
  text-wrap: balance;
}

.dark .t-card-title {
  color: #fff;
}

/* Основной текст */
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: var(--measure-prose);
  margin: 0;
}

/* Мелкая подпись / бейдж */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  margin: 0;
}

/* Hero lead на тёмном фоне */
.t-hero-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.9);
  max-width: 42rem;
  margin: 0 auto 0.5rem;
}

/* На тёмном медиа (hero, карточки-оверлеи) — цвет через модификатор */
.t-on-media {
  color: #fff;
}

.t-on-media-muted {
  color: rgba(255, 255, 255, 0.9);
}

/* Утилиты меры / цвета */
.t-prose {
  max-width: var(--measure-prose);
}

.t-measure {
  max-width: var(--measure-heading);
}

.t-flush {
  max-width: none;
}

.t-ink {
  color: var(--color-body);
}

.dark .t-ink {
  color: #e2e8f0;
}