/* ==========================================================================
   FRANCUZ.BY — дизайн-токены
   Подключить один раз, до остальных стилей.
   Шрифт: Montserrat (400/500/600/700/800, latin + cyrillic).
   npm i @fontsource/montserrat  →  import '@fontsource/montserrat/cyrillic-400.css' и т.д.
   ========================================================================== */

:root {
  /* --- цвет: базовая палитра бренда --- */
  --f-navy:        #20303F;
  --f-blue:        #526B96;
  --f-ivory:       #F4F0E8;
  --f-red:         #D66C6C;
  --f-grey:        #D9D6D0;

  /* --- цвет: производные, только из базовых --- */
  --f-navy-900:    #17232E;   /* подложка футера, оверлей на фото */
  --f-navy-700:    #2B3E50;   /* ховер тёмных поверхностей */
  --f-blue-600:    #43587C;   /* ховер синего */
  --f-blue-300:    #8FA3C4;   /* осветлённый French Blue — ТОЛЬКО для тёмных фонов (контраст) */
  --f-blue-100:    #E3E7EF;   /* заливка синего бейджа */
  --f-red-600:     #C25656;   /* ховер красного */
  --f-red-100:     #F7E4E4;   /* заливка красного бейджа */
  --f-white:       #FFFFFF;
  --f-ivory-deep:  #ECE7DC;   /* чередование секций */

  /* --- цвет: роли --- */
  --f-bg:            var(--f-ivory);
  --f-bg-alt:        var(--f-ivory-deep);
  --f-surface:       var(--f-white);
  --f-text:          var(--f-navy);
  --f-text-muted:    #5C6672;
  --f-text-faint:    #8A939D;
  --f-text-invert:   var(--f-white);
  --f-border:        var(--f-grey);
  --f-border-strong: #C3BFB7;
  --f-focus:         var(--f-blue);

  /* --- типографика --- */
  --f-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* шкала 1.25 от 16px */
  --f-text-xs:   0.8125rem;  /* 13 — подписи, мелкие метки */
  --f-text-sm:   0.9375rem;  /* 15 — вторичный текст */
  --f-text-base: 1rem;       /* 16 — основной текст */
  --f-text-md:   1.25rem;    /* 20 — лид, крупный текст */
  --f-text-lg:   1.5625rem;  /* 25 — заголовок карточки, H4 */
  --f-text-xl:   1.9375rem;  /* 31 — H3 */
  --f-text-2xl:  2.4375rem;  /* 39 — H2 */
  --f-text-3xl:  3.0625rem;  /* 49 — H1 */
  --f-text-4xl:  3.8125rem;  /* 61 — герой */

  --f-leading-tight: 1.12;   /* крупные заголовки */
  --f-leading-snug:  1.32;   /* средние заголовки */
  --f-leading-body:  1.65;   /* текст */

  --f-tracking-tight: -0.02em;  /* от 39px и выше */
  --f-tracking-none:   0;
  --f-tracking-label:  0.22em;  /* капслок-метки, экономно */

  --f-w-regular: 400;
  --f-w-medium:  500;
  --f-w-semi:    600;
  --f-w-bold:    700;
  --f-w-black:   800;

  /* --- сетка и отступы: шаг 4 --- */
  --f-space-1:  0.25rem;   /*  4 */
  --f-space-2:  0.5rem;    /*  8 */
  --f-space-3:  0.75rem;   /* 12 */
  --f-space-4:  1rem;      /* 16 */
  --f-space-5:  1.5rem;    /* 24 */
  --f-space-6:  2rem;      /* 32 */
  --f-space-7:  3rem;      /* 48 */
  --f-space-8:  4rem;      /* 64 */
  --f-space-9:  6rem;      /* 96 */
  --f-space-10: 8rem;      /* 128 */

  --f-container: 1140px;
  --f-measure:   64ch;     /* предельная длина строки текста */
  --f-gutter:    var(--f-space-5);

  /* --- форма --- */
  --f-radius-sm:   6px;    /* инпут, бейдж */
  --f-radius:      10px;   /* кнопка, мелкий блок */
  --f-radius-lg:   16px;   /* карточка */
  --f-radius-pill: 999px;

  --f-border-w: 1px;

  /* тени экономно: только для того, что физически поднято над страницей */
  --f-shadow-card:  0 1px 2px rgba(32,48,63,.05), 0 8px 24px -12px rgba(32,48,63,.18);
  --f-shadow-pop:   0 12px 40px -12px rgba(32,48,63,.30);

  /* --- движение --- */
  --f-ease: cubic-bezier(.4, 0, .2, 1);
  --f-dur:  160ms;

  --f-z-header: 100;
  --f-z-pop:    200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --f-dur: 0ms; }
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font);
  font-size: var(--f-text-base);
  font-weight: var(--f-w-regular);
  line-height: var(--f-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--f-w-black);
  line-height: var(--f-leading-tight);
  letter-spacing: var(--f-tracking-tight);
}
h1 { font-size: var(--f-text-3xl); }
h2 { font-size: var(--f-text-2xl); }
h3 { font-size: var(--f-text-xl);  line-height: var(--f-leading-snug); letter-spacing: var(--f-tracking-none); }
h4 { font-size: var(--f-text-lg);  line-height: var(--f-leading-snug); letter-spacing: var(--f-tracking-none); font-weight: var(--f-w-bold); }

p { margin: 0 0 var(--f-space-4); max-width: var(--f-measure); }

a { color: var(--f-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--f-blue-600); }

:focus-visible {
  outline: 2px solid var(--f-focus);
  outline-offset: 2px;
  border-radius: var(--f-radius-sm);
}

img, svg { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.f-btn {
  display: inline-flex; align-items: center; gap: var(--f-space-2);
  padding: 14px 26px;
  border: var(--f-border-w) solid transparent;
  border-radius: var(--f-radius);
  font: inherit;
  font-size: var(--f-text-sm);
  font-weight: var(--f-w-bold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease);
}
.f-btn--primary   { background: var(--f-red);  color: var(--f-white); }
.f-btn--primary:hover   { background: var(--f-red-600); color: var(--f-white); }
.f-btn--secondary { background: var(--f-navy); color: var(--f-white); }
.f-btn--secondary:hover { background: var(--f-navy-700); color: var(--f-white); }
.f-btn--outline   { background: transparent; color: var(--f-navy); border-color: var(--f-border-strong); }
.f-btn--outline:hover   { background: var(--f-white); border-color: var(--f-navy); color: var(--f-navy); }
.f-btn--ghost     { background: transparent; color: var(--f-blue); padding-left: 0; padding-right: 0; }
.f-btn--ghost:hover     { color: var(--f-blue-600); }
.f-btn--lg { padding: 18px 34px; font-size: var(--f-text-base); }
.f-btn--sm { padding: 10px 18px; font-size: var(--f-text-xs); }
.f-btn[disabled], .f-btn--disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Поля
   -------------------------------------------------------------------------- */

.f-field { display: grid; gap: var(--f-space-2); }
.f-label { font-size: var(--f-text-xs); font-weight: var(--f-w-semi); color: var(--f-text-muted); }
.f-input, .f-select, .f-textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--f-white);
  border: var(--f-border-w) solid var(--f-border);
  border-radius: var(--f-radius-sm);
  font: inherit;
  font-size: var(--f-text-sm);
  color: var(--f-text);
  transition: border-color var(--f-dur) var(--f-ease);
}
.f-input::placeholder, .f-textarea::placeholder { color: var(--f-text-faint); }
.f-input:hover, .f-select:hover, .f-textarea:hover { border-color: var(--f-border-strong); }
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--f-blue); outline: none; box-shadow: 0 0 0 3px var(--f-blue-100); }
.f-hint  { font-size: var(--f-text-xs); color: var(--f-text-faint); }
.f-error { font-size: var(--f-text-xs); color: var(--f-red-600); }
.f-input--error { border-color: var(--f-red); }

/* --------------------------------------------------------------------------
   Бейджи
   -------------------------------------------------------------------------- */

.f-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--f-radius-pill);
  font-size: var(--f-text-xs);
  font-weight: var(--f-w-semi);
  line-height: 1.3;
}
.f-badge--blue    { background: var(--f-blue-100); color: var(--f-blue-600); }
.f-badge--red     { background: var(--f-red-100);  color: var(--f-red-600); }
.f-badge--neutral { background: var(--f-grey);     color: var(--f-navy); }
.f-badge--solid   { background: var(--f-navy);     color: var(--f-white); }

/* --------------------------------------------------------------------------
   Карточка автомобиля
   -------------------------------------------------------------------------- */

.f-card {
  background: var(--f-surface);
  border: var(--f-border-w) solid var(--f-border);
  border-radius: var(--f-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.f-card:hover { border-color: var(--f-border-strong); box-shadow: var(--f-shadow-card); }
.f-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--f-navy); }
.f-card__badges { position: absolute; left: var(--f-space-3); top: var(--f-space-3); display: flex; gap: 6px; }
.f-card__body { padding: var(--f-space-5); display: grid; gap: var(--f-space-3); }
.f-card__title { font-size: var(--f-text-lg); font-weight: var(--f-w-bold); line-height: 1.2; }
.f-card__meta  { font-size: var(--f-text-sm); color: var(--f-text-muted); }
.f-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--f-space-3);
                 padding-top: var(--f-space-3); border-top: var(--f-border-w) solid var(--f-border); }
.f-card__price-value { font-size: var(--f-text-lg); font-weight: var(--f-w-black); letter-spacing: var(--f-tracking-tight); }
.f-card__price-label { font-size: var(--f-text-xs); color: var(--f-text-faint); }

/* --------------------------------------------------------------------------
   Фирменный элемент: три линии — маршрут Франция → Европа → Беларусь
   -------------------------------------------------------------------------- */

.f-lines { display: grid; gap: 5px; width: 84px; }
.f-lines i { display: block; height: 5px; border-radius: 3px; }
.f-lines i:nth-child(1) { background: var(--f-blue); }
.f-lines i:nth-child(2) { background: var(--f-ivory); }
.f-lines i:nth-child(3) { background: var(--f-red); }
.f-lines--on-dark i:nth-child(2) { background: var(--f-white); }

.f-rule { height: 1px; background: var(--f-border); border: 0; margin: var(--f-space-8) 0; }

/* --------------------------------------------------------------------------
   Раскладка
   -------------------------------------------------------------------------- */

.f-container { width: 100%; max-width: var(--f-container); margin-inline: auto; padding-inline: var(--f-gutter); }
.f-section   { padding-block: var(--f-space-9); }
.f-section--alt { background: var(--f-bg-alt); }
.f-section--dark { background: var(--f-navy); color: var(--f-text-invert); }
.f-grid { display: grid; gap: var(--f-space-5); }
.f-grid--3 { grid-template-columns: repeat(3, 1fr); }
.f-grid--2 { grid-template-columns: repeat(2, 1fr); }
.f-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .f-grid--3, .f-grid--4 { grid-template-columns: repeat(2, 1fr); }
  :root { --f-text-3xl: 2.4375rem; --f-text-2xl: 1.9375rem; --f-text-4xl: 2.75rem; }
}
@media (max-width: 600px) {
  .f-grid--2, .f-grid--3, .f-grid--4 { grid-template-columns: 1fr; }
  .f-section { padding-block: var(--f-space-7); }
}