/* ============================================================================
   Garant · UAE Business Intelligence — дизайн-система
   Премиальный редакционный портал. Палитра бренда Garant: navy + gold + графит.
   Mobile-first. Logical properties (inline/block) — готовность к RTL (арабский).
   ============================================================================ */

/* ---- Design tokens ---- */
:root {
  /* Бренд */
  --navy:        #1B247C;   /* primary — авторитет */
  --navy-700:    #161d63;
  --navy-900:    #0f143f;
  --gold:        #BF9C33;   /* accent — премиум */
  --gold-600:    #a9862a;
  --gold-100:    #f6efdc;
  --red:         #BD0336;   /* live/urgent — умеренно */
  --teal:        #0f766e;

  /* Нейтральные */
  --ink:         #201f1d;   /* основной текст / графит логотипа */
  --ink-soft:    #4a4845;
  --muted:       #736f69;
  --line:        #e7e3db;   /* тонкие разделители */
  --line-soft:   #f0ede7;
  --paper:       #ffffff;
  --paper-2:     #faf8f4;   /* тёплый off-white фон секций */
  --paper-3:     #f4f1ea;

  /* Типографика */
  /* Единое семейство Noto Sans (выбор владельца) — кириллица + латиница + арабский */
  --font-serif: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* заголовки */
  --font-ui:    'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* навигация, метки, кнопки */
  --font-body:  'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* текст */

  /* Ритм */
  --container: 1240px;
  --gap: 24px;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(20,20,40,.06), 0 1px 3px rgba(20,20,40,.05);
  --shadow-md: 0 6px 24px rgba(20,20,40,.08);
  --shadow-lg: 0 18px 48px rgba(15,20,63,.14);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input { font: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
p { margin-block: 0 1em; }
strong { font-weight: 700; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(40px, 5vw, 72px); }
.section--tint { background: var(--paper-2); }
.grid { display: grid; gap: var(--gap); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-block-end: 28px; border-block-end: 2px solid var(--ink); padding-block-end: 14px; }
.section-head h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.section-head .more { font-family: var(--font-ui); font-weight: 600; font-size: .82rem; color: var(--navy); letter-spacing: .02em; white-space: nowrap; }
.section-head .more:hover { color: var(--gold-600); }

/* ============================================================================
   Topbar
   ============================================================================ */
.topbar { background: var(--navy-900); color: #cfd3ef; font-family: var(--font-ui); font-size: .76rem; letter-spacing: .03em; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; }
.topbar__meta { display: flex; gap: 18px; align-items: center; }
.topbar__meta time { color: #9aa0d8; }
.topbar__mkt { display: flex; gap: 16px; align-items: center; }
.topbar__mkt span { color: #cfd3ef; }
.topbar__mkt b { color: #fff; font-weight: 600; }
.topbar__mkt .up { color: #67e8b0; } .topbar__mkt .down { color: #ff8fa3; }
@media (max-width: 720px){ .topbar__mkt { display: none; } }

/* ============================================================================
   Header + Nav
   ============================================================================ */
.masthead { background: var(--paper); border-block-end: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.masthead__row { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 34px; width: auto; }
.brand__desc { font-family: var(--font-ui); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
@media (max-width: 900px){ .brand__desc { display: none; } }

.nav { display: flex; align-items: center; gap: 26px; margin-inline-start: auto; }
.nav a { font-family: var(--font-ui); font-weight: 600; font-size: .86rem; letter-spacing: .01em; color: var(--ink); padding-block: 6px; position: relative; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .22s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); }

.tools { display: flex; align-items: center; gap: 10px; }
.langsw { display: flex; align-items: center; gap: 2px; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; }
.langsw a, .langsw span { padding: 4px 7px; border-radius: var(--radius); color: var(--muted); }
.langsw a[aria-current="true"], .langsw span[aria-current="true"] { background: var(--navy); color: #fff; }
.langsw a:hover { color: var(--navy); }
.langsw .dis { opacity: .4; cursor: not-allowed; }

.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius); color: var(--ink); }
.icon-btn:hover { background: var(--paper-3); color: var(--navy); }
.nav-toggle { display: none; }
@media (max-width: 860px){
  .nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; gap: 0; background: var(--paper); border-block-end: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 8px 20px 16px; }
  .nav.open { display: flex; align-items: stretch; }
  .nav a { padding-block: 12px; border-block-end: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  .nav-toggle { display: grid; }
}

/* ============================================================================
   Hero
   ============================================================================ */
.hero { padding-block: clamp(28px, 3vw, 44px); }
.hero__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; }
@media (max-width: 940px){ .hero__grid { grid-template-columns: 1fr; gap: 28px; } }

.lead-card { position: relative; }
.lead-card__media { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.lead-card__media img { width: 100%; height: 100%; object-fit: cover; }
.lead-card__media .cat-badge { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; }
.lead-card h1 { margin-block: 18px 12px; }
.lead-card__excerpt { color: var(--ink-soft); font-size: 1.08rem; max-width: 60ch; }
.lead-card__meta { margin-block-start: 14px; }

.hero__aside { display: flex; flex-direction: column; }
.hero__aside .aside-title { font-family: var(--font-ui); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding-block-end: 12px; border-block-end: 2px solid var(--ink); margin-block-end: 4px; }
.mini { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding-block: 16px; border-block-end: 1px solid var(--line); align-items: start; }
.mini:last-child { border-block-end: none; }
.mini__num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold); line-height: 1; font-weight: 600; }
.mini h3 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.mini h3 a:hover { color: var(--navy); }
.mini .mini__meta { margin-block-start: 6px; }

/* ============================================================================
   Meta line (author / date / read)
   ============================================================================ */
.meta { font-family: var(--font-ui); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meta a { color: var(--ink-soft); font-weight: 600; }
.meta a:hover { color: var(--navy); }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .6; }

/* ---- Category badge ---- */
.cat-badge { font-family: var(--font-ui); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius); background: var(--navy); color: #fff; display: inline-block; }
.cat-badge--gold { background: var(--gold); color: #241c00; }
.cat-badge--red  { background: var(--red); }
.cat-badge--teal { background: var(--teal); }
.cat-badge--ghost { background: transparent; color: var(--gold-600); padding-inline: 0; }

/* ============================================================================
   Article cards
   ============================================================================ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px){ .cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 600px){ .cards { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; }
.card__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); margin-block-end: 14px; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__cat { margin-block-end: 8px; }
.card h3 { font-size: 1.16rem; margin-block-end: 8px; }
.card h3 a:hover { color: var(--navy); }
.card__excerpt { color: var(--ink-soft); font-size: .96rem; margin-block-end: 12px; }
.card .meta { margin-block-start: auto; }

/* compact list (no image) */
.list { display: grid; gap: 2px; }
.list-item { display: grid; grid-template-columns: 1fr; gap: 6px; padding-block: 18px; border-block-end: 1px solid var(--line); }
.list-item:first-child { padding-block-start: 0; }
.list-item h3 { font-size: 1.12rem; }
.list-item h3 a:hover { color: var(--navy); }

/* ============================================================================
   Two-column feature (section block on home)
   ============================================================================ */
.block { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px){ .block { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Newsletter / CTA ---- */
.cta { background: var(--navy); color: #eef0ff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(191,156,51,.35), transparent 70%); }
.cta h2 { color: #fff; position: relative; }
.cta p { color: #c3c8f2; position: relative; max-width: 52ch; }
.cta__form { display: flex; gap: 10px; margin-block-start: 18px; position: relative; flex-wrap: wrap; }
.cta__form input { flex: 1 1 240px; padding: 13px 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
.cta__form input::placeholder { color: #9aa0d8; }
.btn { font-family: var(--font-ui); font-weight: 700; font-size: .85rem; letter-spacing: .02em; padding: 13px 22px; border-radius: var(--radius); background: var(--gold); color: #241c00; transition: background .2s var(--ease), transform .1s var(--ease); }
.btn:hover { background: var(--gold-600); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; border: 1px solid var(--gold); color: var(--gold); }

/* ============================================================================
   Breadcrumbs
   ============================================================================ */
.crumbs { font-family: var(--font-ui); font-size: .78rem; color: var(--muted); padding-block: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--navy); }
.crumbs .sep { opacity: .5; }

/* ============================================================================
   Article page
   ============================================================================ */
.article { max-width: 760px; margin-inline: auto; }
.article__header { margin-block-end: 26px; }
.article__header h1 { margin-block: 14px; }
.article__dek { font-family: var(--font-serif); font-size: 1.28rem; color: var(--ink-soft); font-style: italic; line-height: 1.5; margin-block-end: 18px; }
.article__hero { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); margin-block: 24px; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__body { font-size: 1.12rem; line-height: 1.75; color: #2b2926; }
.article__body h2 { font-size: 1.55rem; margin-block: 1.4em .5em; }
.article__body h3 { font-size: 1.25rem; margin-block: 1.2em .4em; }
.article__body p { margin-block-end: 1.15em; }
.article__body ul { margin-block: 0 1.15em; padding-inline-start: 1.2em; list-style: disc; }
.article__body li { margin-block-end: .5em; }
.article__body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.article__body blockquote { border-inline-start: 3px solid var(--gold); padding-inline-start: 20px; margin-block: 1.4em; font-family: var(--font-serif); font-size: 1.3rem; font-style: italic; color: var(--ink); }
.callout { background: var(--paper-2); border: 1px solid var(--line); border-inline-start: 3px solid var(--navy); border-radius: var(--radius); padding: 20px 22px; margin-block: 1.6em; }
.callout .eyebrow { display: block; margin-block-end: 8px; }
.callout p:last-child { margin-block-end: 0; }
.updated { font-family: var(--font-ui); font-size: .8rem; color: var(--muted); background: var(--gold-100); border-radius: var(--radius); padding: 8px 12px; display: inline-flex; gap: 8px; align-items: center; }

/* Таблицы в статьях (пришли из content_writer — сравнения/пороги) */
.article__body .table-wrap { overflow-x: auto; margin-block: 1.7em; border: 1px solid var(--line); border-radius: var(--radius); }
.article__body table { border-collapse: collapse; width: 100%; font-size: .97rem; min-width: 460px; }
.article__body th, .article__body td { text-align: start; padding: 11px 15px; border-block-end: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.article__body thead th { background: var(--paper-2); font-family: var(--font-ui); font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); border-block-end: 2px solid var(--line); white-space: nowrap; }
.article__body tbody tr:last-child td { border-block-end: none; }
.article__body td:first-child { font-weight: 600; color: var(--ink); }

.byline { display: flex; align-items: center; gap: 12px; padding-block: 16px; border-block: 1px solid var(--line); margin-block: 22px; }
.byline__av { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; flex: none; }
.byline__who { font-family: var(--font-ui); }
.byline__who b { font-size: .92rem; }
.byline__who span { display: block; font-size: .78rem; color: var(--muted); }

/* ============================================================================
   Footer
   ============================================================================ */
.footer { background: var(--navy-900); color: #b9bde6; margin-block-start: 40px; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-block: 52px; }
@media (max-width: 860px){ .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px){ .footer__top { grid-template-columns: 1fr; } }
.footer__logo { height: 32px; margin-block-end: 16px; }
.footer__about { font-size: .9rem; color: #9aa0d8; max-width: 42ch; }
.footer h4 { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-block-end: 14px; }
.footer li { margin-block-end: 9px; }
.footer a { font-size: .9rem; color: #b9bde6; }
.footer a:hover { color: var(--gold); }
.footer__bottom { border-block-start: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: #8388c4; font-family: var(--font-ui); }
.footer__disclaimer { max-width: 70ch; padding-block-end: 22px; font-size: .78rem; color: #7176b5; line-height: 1.6; }

/* ============================================================================
   News section (/<lang>/news/) — лента, источник, теги, FAQ
   ============================================================================ */
.news-empty { padding: 48px 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper-2); color: var(--ink-soft); font-size: 1.05rem; }

.source-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-block: 28px 8px; padding: 15px 20px; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: var(--radius); background: var(--paper-2); }
.source-box__label { font-family: var(--font-ui); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.source-box__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: .92rem; color: var(--navy); text-decoration: none; }
.source-box__link:hover { color: var(--gold-600); }
.source-box__link svg { flex: none; }

.tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: 22px; }
.tags__label { font-family: var(--font-ui); font-weight: 600; font-size: .78rem; color: var(--muted); }
.tag { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); background: var(--paper-3); padding: 4px 11px; border-radius: 999px; }

.faq { margin-block: 34px; }
.faq > h2 { font-size: 1.4rem; margin-block-end: 14px; padding-block-end: 10px; border-block-end: 2px solid var(--ink); }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; padding: 15px 4px; font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-ui); font-size: 1.4rem; line-height: 1; color: var(--gold-600); flex: none; }
.faq__item[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 4px 16px; }
.faq__a p { color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; inset-block-start: 8px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: var(--radius); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* ---- RTL adjustments (для ar, dir=rtl) ---- */
[dir="rtl"] {
  --font-serif: 'Noto Sans Arabic', 'Noto Sans', system-ui, sans-serif;
  --font-ui:    'Noto Sans Arabic', 'Noto Sans', system-ui, sans-serif;
  --font-body:  'Noto Sans Arabic', 'Noto Sans', system-ui, sans-serif;
}
/* Арабская вязь не терпит letter-spacing — обнуляем в заголовках и метках */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .eyebrow, [dir="rtl"] .cat-badge, [dir="rtl"] .nav a,
[dir="rtl"] .brand__desc, [dir="rtl"] .section-head .more, [dir="rtl"] .btn { letter-spacing: 0; }
[dir="rtl"] .nav a::after { transform-origin: right; }
[dir="rtl"] .article__body a { text-underline-offset: 3px; }
[dir="rtl"] .article__body { text-align: right; }
[dir="rtl"] .section-head .more svg, [dir="rtl"] .btn svg { transform: scaleX(-1); } /* стрелки зеркалим */
[dir="rtl"] .mini__num { font-variant-numeric: normal; }
[dir="rtl"] .source-box__link svg { transform: scaleX(-1); } /* стрелка источника — зеркалим */
[dir="rtl"] .source-box { border-inline-start: 1px solid var(--line); border-inline-end: 3px solid var(--gold); }
[dir="rtl"] .tag, [dir="rtl"] .source-box__label { letter-spacing: 0; }