/* ============================================================
   Душа Калининграда — Design Tokens + Component Classes
   Источник: handoff Claude Design jihhxt8v3dhpYvVc7YJiCw
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Sky (primary brand — Baltic sky) */
  --sky-50:  #EFF8FD;
  --sky-100: #DDF0FA;
  --sky-200: #B8E1F3;
  --sky-300: #88CBE8;
  --sky-400: #52AED8;
  --sky-500: #2891C1;
  --sky-600: #1A74A0;
  --sky-700: #175E82;
  --sky-800: #174E6C;
  --sky-900: #0F2F44;

  /* Amber (accent — Baltic sunset / kaliningrad amber) */
  --amber-50:  #FFF6EC;
  --amber-100: #FFE9CD;
  --amber-200: #FFD199;
  --amber-300: #FFB461;
  --amber-400: #FF9633;
  --amber-500: #F57C18;
  --amber-600: #D85F05;
  --amber-700: #B44802;
  --amber-800: #8F3A06;
  --amber-900: #5E270B;

  /* Sand (warm neutral) */
  --sand-50:  #FBF7EF;
  --sand-100: #F5EEDE;
  --sand-200: #EADEC2;
  --sand-300: #DCC99F;
  --sand-400: #C8B07B;
  --sand-500: #A8915E;
  --sand-600: #836F44;

  /* Ink (graphite) */
  --ink-50:  #F6F8FA;
  --ink-100: #ECEFF3;
  --ink-150: #DCE2E9;
  --ink-200: #C6CED8;
  --ink-300: #9AA5B3;
  --ink-400: #6B7685;
  --ink-500: #4A5462;
  --ink-600: #333B47;
  --ink-700: #22272F;
  --ink-800: #161A21;
  --ink-900: #0A0D12;

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-400);
  --fg-inverse: #FFFFFF;
  --fg-brand: var(--sky-700);
  --fg-accent: var(--amber-600);

  --bg-1: #FFFFFF;
  --bg-2: var(--sand-50);
  --bg-3: var(--sky-50);
  --bg-inverse: var(--sky-900);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong: var(--ink-200);

  --success-500: #2E9A64;
  --success-bg:  #E5F5EC;
  --warning-500: #E5A61A;
  --warning-bg:  #FEF4DC;
  --danger-500:  #D94A3B;
  --danger-bg:   #FCECEA;

  --font-display: 'Unbounded', 'Futura', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Manrope', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-display-1: 72px;
  --fs-display-2: 56px;
  --fs-h1: 44px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.08em;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-14: 96px;
  --space-16: 128px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  --shadow-soft:  0 1px 2px rgba(15, 40, 60, 0.04), 0 2px 8px rgba(15, 40, 60, 0.06);
  --shadow-lift:  0 4px 12px rgba(15, 40, 60, 0.08), 0 16px 32px rgba(15, 40, 60, 0.10);
  --shadow-float: 0 8px 24px rgba(15, 40, 60, 0.12), 0 24px 64px rgba(15, 40, 60, 0.14);
  --shadow-ring-focus: 0 0 0 3px rgba(245, 124, 24, 0.30);

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med:  250ms;
  --dur-slow: 450ms;

  --gradient-sky-sunset: linear-gradient(135deg, var(--sky-300) 0%, var(--sky-200) 35%, var(--amber-200) 75%, var(--amber-300) 100%);
  --gradient-protect-bottom: linear-gradient(to top, rgba(15, 40, 60, 0.65) 0%, rgba(15, 40, 60, 0.20) 40%, transparent 65%);

  --max-content: 1280px;
  --side-margin: 32px;
}

/* ============================================================
   Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out-soft); }
input { font-family: inherit; }

/* ============================================================
   Type classes
   ============================================================ */

.display-1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--sky-900); }
.display-2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--sky-900); }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--sky-900); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--sky-900); }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--ink-900); }
.h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--ink-900); }
.h5 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--ink-900); }
.body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-3); }
.micro { font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-snug); color: var(--fg-3); }
.overline {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600;
  line-height: var(--lh-snug); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--fg-accent);
}
.quote { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--sky-800); font-style: italic; }

/* ============================================================
   Layout primitives
   ============================================================ */

.layout {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--side-margin);
}
.section { padding: var(--space-12) 0; }
.section--sand { background: var(--sand-50); }
.section--sky  { background: var(--sky-50); }
.section--dark { background: var(--sky-900); color: #fff; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }
.stack-48 > * + * { margin-top: 48px; }

.section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.section-title-row .h2 { max-width: 720px; margin-top: 8px; }

.focus-ring:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600;
  border-radius: var(--radius-pill);
  transition: all var(--dur-med) var(--ease-out-soft);
  text-decoration: none;
  white-space: nowrap;
}
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-md { padding: 12px 22px; font-size: 15px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }

.btn-primary {
  background: var(--amber-500); color: #fff;
  box-shadow: 0 2px 10px rgba(245, 124, 24, 0.28);
}
.btn-primary:hover { background: var(--amber-600); }
.btn-secondary { background: var(--sky-700); color: #fff; }
.btn-secondary:hover { background: var(--sky-800); }
.btn-ghost {
  background: transparent; color: var(--sky-700);
  border: 1.5px solid var(--sky-600);
}
.btn-ghost:hover { background: var(--sky-50); }
.btn-white {
  background: #fff; color: var(--sky-900);
  box-shadow: var(--shadow-soft);
}
.btn-white:hover { background: var(--sky-50); }
.btn-link {
  background: none; color: var(--amber-600); padding: 4px 2px; font-weight: 700;
  border-radius: 0;
}
.btn-link:hover { color: var(--amber-700); }

/* ============================================================
   Chips (filters)
   ============================================================ */

.chip {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--ink-150);
  background: var(--ink-50); color: var(--ink-700);
  transition: all var(--dur-fast) var(--ease-out-soft);
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--sky-700); }
.chip.is-active {
  background: var(--sky-900); color: #fff; border-color: var(--sky-900);
}

/* ============================================================
   Badges
   ============================================================ */

.badge {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-sky { background: var(--sky-100); color: var(--sky-800); }
.badge-amber { background: var(--amber-100); color: var(--amber-800); }
.badge-success { background: var(--success-bg); color: var(--success-500); }
.badge-sand { background: var(--sand-100); color: var(--sand-600); }

/* ============================================================
   Header (sticky floating-pill)
   ============================================================ */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out-soft), border-color var(--dur-med);
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--ink-100);
}
.header__inner {
  max-width: var(--max-content); margin: 0 auto;
  padding: 14px var(--side-margin);
  display: flex; align-items: center; gap: 28px;
}
.header__brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.header__brand-text {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: var(--ls-snug); line-height: 1.1;
  color: #fff; text-shadow: 0 1px 4px rgba(15, 40, 60, 0.3);
}
.header.is-scrolled .header__brand-text { color: var(--sky-900); text-shadow: none; }
.header__nav {
  display: flex; gap: 20px; margin-left: 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.header__nav a {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(15, 40, 60, 0.25);
  transition: color var(--dur-fast);
}
.header.is-scrolled .header__nav a { color: var(--ink-700); text-shadow: none; }
.header__nav a:hover { color: var(--amber-400); }
.header__nav a.is-active { color: var(--amber-500); font-weight: 700; }
.header.is-scrolled .header__nav a.is-active { color: var(--amber-500); }
.header__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.header__icon-btn {
  background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px);
  border: 0; border-radius: 50%; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer; color: #fff;
}
.header.is-scrolled .header__icon-btn { background: var(--ink-50); color: var(--ink-700); }

/* ============================================================
   Footer (dark sky-900)
   ============================================================ */

.footer { background: var(--sky-900); color: #fff; padding: 64px 0 32px; margin-top: 96px; }
.footer__grid {
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 40px; margin-bottom: 48px;
}
.footer__brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: var(--ls-snug); margin-bottom: 10px;
}
.footer__brand-desc {
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.7); max-width: 260px; margin-bottom: 16px;
}
.footer__sub-form { display: flex; gap: 8px; }
.footer__sub-input {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; flex: 1;
}
.footer__sub-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer__sub-btn {
  background: var(--amber-500); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
}
.footer__col-title {
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--amber-300); margin-bottom: 14px;
}
.footer__col a {
  display: block; font-size: 14px;
  color: rgba(255, 255, 255, 0.8); margin-bottom: 8px;
}
.footer__col a:hover { color: #fff; }
.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   PlaceCard (карточка заведения)
   ============================================================ */

.place-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all var(--dur-med) var(--ease-out-soft);
  cursor: pointer; display: block; position: relative;
}
.place-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.place-card__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--sand-100) center/cover no-repeat;
}
.place-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-protect-bottom);
}
.place-card__tag-row {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; gap: 6px;
}
.place-card__tag {
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  color: var(--sky-900);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.place-card__heart {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-700);
  cursor: pointer;
}
.place-card__heart.is-fav { color: var(--amber-500); }
.place-card__body { padding: 16px 18px; }
.place-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--sky-900); letter-spacing: var(--ls-snug);
  margin-bottom: 4px;
}
.place-card__desc {
  font-size: 13px; color: var(--ink-500); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.place-card__meta {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-400);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.place-card__meta strong { color: var(--ink-700); font-weight: 600; }
.place-card__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-600); font-weight: 700; }

/* ============================================================
   Sidebar cards (для detail-страницы)
   ============================================================ */

.side-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}
.side-card__title {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--sky-900); margin-bottom: 14px;
}
.side-card__row {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
}
.side-card__row:last-child { border-bottom: 0; }
.side-card__row-label { color: var(--ink-400); min-width: 90px; }
.side-card__row-value { color: var(--ink-800); font-weight: 500; }

/* ============================================================
   SVG icon helper
   ============================================================ */

.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ============================================================
   FOUC-fix для dusha-страниц.
   Bitrix-шаблон bs_hotel_s1 рендерит свои стандартные .bx-breadcrumb
   и h1.styled над контентом. На страницах с нашим hero (dn-hero/dd-hero
   /dnd-hero) или явным классом .dusha-page они избыточны и раньше
   мелькали при загрузке, пока JS их не убирал.
   Это правило срабатывает мгновенно на парсинге <head>, без ожидания JS.
   Подключается через design/header/type_dusha/header.php → tokens.css
   на всех страницах с dusha-шапкой, включая будущие.
   :has() поддерживается всеми современными браузерами (Chrome 105+, Safari 15.4+, Firefox 121+).
   ============================================================ */
body:has(.dd-hero) .bx-breadcrumb,
body:has(.dn-hero) .bx-breadcrumb,
body:has(.dnd-hero) .bx-breadcrumb,
body.dusha-page .bx-breadcrumb,
body:has(.dd-hero) .container_page > .content_container > h1.styled,
body:has(.dn-hero) .container_page > .content_container > h1.styled,
body:has(.dnd-hero) .container_page > .content_container > h1.styled,
body.dusha-page .container_page > .content_container > h1.styled,
body:has(.dd-hero) h1.styled,
body:has(.dn-hero) h1.styled,
body:has(.dnd-hero) h1.styled,
body.dusha-page h1.styled { display: none !important; }

/* ============================================================
   PICTURE / BG-PICTURE: site-wide rule for cover images.
   Mobile (<768px)  — PREVIEW_PICTURE (анонс из админки).
   Desktop (>=768px) — DETAIL_PICTURE (подробно из админки).
   Реализуется helpers.php → dushaPicture() и dushaBgPicture().
   Эти стили нужны для бэкграунд-варианта и для общего поведения
   <picture> внутри карточек (image-rendering, fit).
   ============================================================ */
.dusha-bg-pic {
    background-image: var(--dusha-bg-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 768px) {
    .dusha-bg-pic { background-image: var(--dusha-bg-desktop); }
}

/* picture-обёртка не должна ломать flex/grid */
picture {
    display: contents;
}
/* fallback: если picture в контексте, требующем block (карточки), использовать класс picture-block */
picture.picture-block { display: block; }

/* картинки внутри picture не должны выпадать за контейнер */
picture > img {
    max-width: 100%;
    height: auto;
}

/* Bridge: legacy --slide-bg в .dn-hero__slide (карусель новостей)
   подхватывает наши новые --dusha-bg-* переменные. */
.dn-hero__slide.dusha-bg-pic { --slide-bg: var(--dusha-bg-mobile); }
@media (min-width: 768px) {
    .dn-hero__slide.dusha-bg-pic { --slide-bg: var(--dusha-bg-desktop); }
}

/* === Унифицированный плейсхолдер для карточек еды (IBLOCK 18). ===
   Применять как ДОПОЛНИТЕЛЬНЫЙ класс на существующий контейнер картинки/обложки,
   когда у заведения нет PREVIEW/DETAIL_PICTURE. Контейнер сам задаёт размеры
   и border-radius — этот класс отвечает только за фон-градиент и SVG-иконку
   вилки/ножа по центру. */
.dusha-food-ph,
.dl-card__media.dusha-food-ph {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7c0 1.1.9 2 2 2h2v11'/><path d='M5 2v7'/><path d='M21 14V2c-2 0-4 2-4 4v6h4z'/><path d='M17 12v10'/></svg>") center / 36% no-repeat,
        linear-gradient(135deg, var(--amber-400, #FF9633) 0%, var(--amber-600, #D85F05) 100%);
    color: rgba(255, 255, 255, 0.85);
}
/* на крупных карточках листинга иконка фиксированного размера, а не 36% ширины */
.dl-card__media.dusha-food-ph {
    background-size: 56px auto, auto;
}