/* GEEK Timeline Reviews — журнальный формат: заглавная статья + хронологический индекс */
/* Шрифт нигде не задаётся намеренно — блок наследует типографику темы сайта */
/* Фон карточки — #fff/#272727, как у всех остальных виджетов сайта (dc-wrap, gnr-widget,
   grp-scroll-card, about-author и т.д.), текст/рамка/тень — из общих токенов --gdt-*,
   поэтому блок совпадает с соседними карточками, а не живёт отдельной палитрой */

:root{
  --gtr-accent:#0b008a;
  --gtr-new-bg:#dff5e3;
  --gtr-new-text:#1b7a3d;
  --gtr-card-bg:#ffffff;
  --gtr-rule:#e5e7ec;
}
.gdt-dark{
  --gtr-accent:#9bb8ff; --gtr-card-bg:#272727;
  --gtr-new-bg:#1f3a26; --gtr-new-text:#7fe2a0;
}

/* ===== Каркас ===== */
.gtr-wrap{
  color:var(--gdt-text,#111418);
  background:var(--gtr-card-bg);
  border:1px solid var(--gdt-border,rgba(17,20,24,.12));
  border-radius:5px;
  box-shadow:var(--gdt-shadow,0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06));
  padding: clamp(18px,4vw,40px) clamp(16px,5vw,52px) clamp(20px,4vw,40px);
  margin:15px 0;
}

.gtr-mast{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin:0 0 24px;
  border-bottom:2px solid var(--gtr-rule);
}
.gtr-kicker{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gdt-text,#111418);
}
.gtr-all{
  font-size:13px; font-weight:600;
  color:var(--gdt-muted,#40464d); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.gtr-all:hover{ color:var(--gtr-accent); border-color:var(--gtr-accent); }
.gtr-all:focus-visible{ outline:2px solid var(--gtr-accent); outline-offset:3px; }

/* ===== Заглавная статья ===== */
.gtr-lead{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  align-items:center; text-decoration:none; color:inherit;
  padding-bottom:26px; margin-bottom:26px;
  border-bottom:1px solid var(--gtr-rule);
}
.gtr-lead-art{
  position:relative;
  aspect-ratio:16/10; border-radius:5px; overflow:hidden; background:var(--gdt-surface,#f6f7f9);
}
.gtr-lead-img{ width:100%; height:100%; object-fit:cover; display:block; }
.gtr-lead-body{ display:flex; flex-direction:column; gap:10px; min-width:0; justify-content:center; }
.gtr-eyebrow{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gtr-accent);
}
.gtr-lead-title{
  margin:0; font-size:clamp(19px,2.6vw,26px); line-height:1.24; font-weight:700;
  text-wrap:balance;
}
.gtr-lead:hover .gtr-lead-title{ color:var(--gtr-accent); }
.gtr-dek{ margin:0; font-size:16px; line-height:1.55; color:var(--gdt-muted,#40464d); font-style:normal; }
.gtr-lead:focus-visible{ outline:2px solid var(--gtr-accent); outline-offset:4px; border-radius:5px; }

/* ===== Хронологический индекс ===== */
.gtr-index{ list-style:none; margin:0; padding:0; }
.gtr-row{
  display:grid; grid-template-columns:48px 1fr 72px; gap:14px; align-items:center;
  padding:16px 0; border-top:1px solid var(--gtr-rule);
}
.gtr-index li:first-child .gtr-row{ border-top:none; padding-top:2px; }
.gtr-link{ display:block; text-decoration:none; color:inherit; border-radius:5px; }
.gtr-link:focus-visible{ outline:2px solid var(--gtr-accent); outline-offset:2px; }

.gtr-date{ line-height:1; font-variant-numeric:tabular-nums; }
.gtr-date-day{ display:block; font-size:24px; font-weight:700; color:var(--gdt-text,#111418); }
.gtr-date-month{
  display:block; margin-top:2px; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gdt-muted,#40464d);
}

.gtr-row-body{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.gtr-row-kicker{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gdt-muted,#40464d);
}
.gtr-row-title{
  margin:0; font-size:17px; line-height:1.32; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap:balance;
}
.gtr-row:hover .gtr-row-title{ color:var(--gtr-accent); }

.gtr-row-thumb{
  width:72px; aspect-ratio:1; border-radius:5px; overflow:hidden;
  background:var(--gdt-surface,#f6f7f9);
}
.gtr-row-img{ width:100%; height:100%; object-fit:cover; display:block; }

.gtr-new-badge{
  display:inline-block; margin-left:6px; font-size:10px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:1px;
  color:var(--gtr-new-text); background:var(--gtr-new-bg);
  border-radius:8px; padding:3px 10px;
}
.gtr-new-badge--over{
  position:absolute; top:10px; left:10px; z-index:1; margin-left:0;
}

/* Пусто */
.gtr-empty{ margin:0; padding:20px 0 4px; color:var(--gdt-muted,#40464d); }

/* Подвал */
.gtr-foot{ display:flex; justify-content:center; padding-top:20px; }
.gtr-more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  color:var(--gdt-text,#111418); text-decoration:none;
  border:1px solid var(--gdt-border,rgba(17,20,24,.12)); border-radius:5px; padding:10px 16px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.gtr-more:hover{ border-color:var(--gtr-accent); color:var(--gtr-accent); }
.gtr-more:focus-visible{ outline:2px solid var(--gtr-accent); outline-offset:3px; }

/* ===== Адаптация ===== */
@media (max-width:780px){
  .gtr-lead{ grid-template-columns:1fr; }
  .gtr-lead-art{ order:-1; }
}

@media (max-width:480px){
  .gtr-wrap{ padding:18px 14px 20px; }
  .gtr-row{ grid-template-columns:36px 1fr 56px; gap:10px; }
  .gtr-date-day{ font-size:19px; }
  .gtr-row-thumb{ width:56px; }
}

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .gtr-more, .gtr-all{ transition:none !important; }
}