/* GEEK Timeline Reviews — уникальные стили */

:root{
  --gtr-bg:#ffffff;
  --gtr-surface:#f6f7f9;
  --gtr-text:#111418;
  --gtr-muted:#6b7380;
  --gtr-border:#eef0f5;
  --gtr-accent:#0b008a;
  --gtr-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

.gdt-dark :root,
.gdt-dark{
  --gtr-bg:#0f1115;
  --gtr-surface:#161a21;
  --gtr-text:#e7eaf0;
  --gtr-muted:#9aa5b5;
  --gtr-border:rgba(231,234,240,.14);
  --gtr-accent:#9bb8ff;
  --gtr-shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
}

/* ===== Каркас ===== */
.gtr-wrap{
  background:var(--gtr-bg);
  border:1px solid var(--gtr-border);
  border-radius:5px;
  /* адаптивные внутренние отступы */
  padding: clamp(16px,4vw,40px) clamp(14px,5vw,60px) 12px clamp(14px,5vw,60px);
  box-shadow: var(--gtr-shadow);
}

.gtr-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px; flex-wrap:wrap;
}
.gtr-title{
  margin: 0;
  color: var(--gtr-text);
  font-family: "Share Tech Mono", monospace !important;
  font-size: 18px;        /* фиксированная высота кегля */
  line-height: 1.2;
  font-weight: 700;       /* у Share Tech Mono только Regular; 700 даст «фальшивый» bold */
  letter-spacing: .2px;
  text-transform: uppercase;
}
.gtr-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:5px;
  border:1px solid var(--gtr-accent);
  color:var(--gtr-accent); text-decoration:none; font:600 14px/1 system-ui;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.gtr-all:hover{ background:var(--gtr-accent); color:#fff; }

/* ===== Таймлайн ===== */
.gtr-list{ list-style:none; margin:0; padding:10px 0 0 0; position:relative; }
.gtr-list::before{
  content:""; position:absolute; left:14px; top:0; bottom:0;
  width:2px; background:var(--gtr-border);
}

.gtr-item{ position:relative; }

.gtr-link{
  display:grid; grid-template-columns: 1fr 160px;
  gap:16px; align-items:center;
  text-decoration:none; padding:16px 0 16px 28px;
  border-top:1px solid var(--gtr-border);
}
.gtr-item:first-child .gtr-link{ border-top:none; }

.gtr-pin{
  position:absolute; left:7px; top:28px;
  width:16px; height:16px; border-radius:50%;
  background:var(--gtr-accent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--gtr-accent) 18%, transparent);
}

.gtr-content{ min-width:0; }
.gtr-h3{
  margin:0 0 6px; color:var(--gtr-text);
  font:700 clamp(15px,2.7vw,18px)/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap:balance;
  font-size: 15px;
}
.gtr-link:hover .gtr-h3{
  text-decoration: underline;
  text-underline-offset:2px;
  text-decoration-thickness:2px;
}

.gtr-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--gtr-muted); font:600 13px/1.2 system-ui;
}
.gtr-meta time{
  padding:4px 8px; border-radius:5px;
  background:var(--gtr-surface); border:1px solid var(--gtr-border);
  color:var(--gtr-muted);
}
.gtr-dot{ opacity:.6; }
.gtr-cat{ opacity:.9; }

/* NEW бейдж */
.gtr-new::after{
  content:"NEW"; margin-left:8px;
  display:inline-block; font:800 10px/1 system-ui; letter-spacing:.6px;
  padding:4px 6px; border-radius:5px; color:#fff; background:#ff4757;
}

/* Превью справа */
.gtr-thumb{
  width:160px; height:100px; border-radius:5px; overflow:hidden; background:var(--gtr-surface);
  transition: transform .18s ease;
}
.gtr-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.gtr-link:hover .gtr-thumb{ transform: translateY(-2px); }

/* Подвал */
.gtr-foot{ display:flex; justify-content:center; padding:8px 0 2px; }
.gtr-button{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:5px; border:1px solid var(--gtr-border);
  background:var(--gtr-surface); color:var(--gtr-text); text-decoration:none; font:700 14px/1 system-ui;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gtr-button:hover{
  transform: translateY(-2px);
  border-color:transparent;
  box-shadow: var(--gtr-shadow);
}

/* Пусто */
.gtr-empty{
  padding:25px 0 4px 28px; color:var(--gtr-muted);
}

/* ===== Адаптация ===== */

/* планшеты / узкие ноуты */
@media (max-width: 980px){
  .gtr-link{ grid-template-columns: 1fr 140px; }
  .gtr-thumb{ width:140px; height:92px; }
}

/* телефоны среднего размера */
@media (max-width: 780px){
  .gtr-all{ align-self:flex-start; }
  .gtr-link{ grid-template-columns: 1fr 120px; padding:25px 0 14px 26px; }
  .gtr-thumb{ width:120px; height:84px; }
  .gtr-meta{ font-size:12px; gap:6px; }
  .gtr-pin{ left:6px; top:24px; width:14px; height:14px; }
  .gtr-list::before{ left:12px; }
}

/* маленькие телефоны */
@media (max-width: 560px){
  .gtr-wrap{ padding:25px 12px 10px; }
  .gtr-list::before{ left:10px; }
  .gtr-link{
    grid-template-columns: 1fr;            /* превью уходит ниже */
    padding-left:24px;
    gap:10px;
  }
  .gtr-thumb{
    order:2;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 10;                 /* стабильная высота */
    max-height: clamp(120px, 36vw, 180px);
  }
  .gtr-pin{ left:3px; top:20px; width:12px; height:12px; }
}

/* сверхкомпактные экраны */
@media (max-width: 380px){
  .gtr-title{ font-size:18px; }
  .gtr-meta{ font-size:11px; }
  .gtr-thumb{ max-height: 160px; }
}

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