/*
Theme Name: TechnoToday
Description: Generated theme for technotoday.org, built from design tokens.
Version: 2.0
Text Domain: pressroom
*/

:root {
  --bg: #effbff;
  --text: #03080d;
  --muted: #2b5064;
  --accent: #73382a;
  --accent-contrast: #effbff;
  --border: #7da3ba;
  --surface: #c8dde9;
  --radius: 2px;
  --space: 0.9rem;
  --maxw: 1160px;
  --font-display: "Alegreya", Georgia, "Times New Roman", serif;
  --font-text: "Golos Text", system-ui, -apple-system, sans-serif;
  --font-kicker: "Oswald", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
/* Serif display for headlines; clean sans for UI/labels — an editorial pairing. */
h1,h2,h3,h4,.brand__name,.card__title,.section-head,.hero__title,.pick__title,.article__title {
  font-family:var(--font-display); font-weight:700; }
.nav a,.pill,.btn,.meta,.header-search input,.brand__logo { font-family:var(--font-text); }
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); }

/* Top social bar */
.topbar { background:var(--text); color:var(--bg); font-size:.8rem; }
.topbar .container { display:flex; justify-content:flex-end; gap:1rem;
  padding:.4rem var(--space); }
.topbar a { color:var(--bg); opacity:.85; }

/* Header */
.site-header { border-top:3px solid var(--accent); border-bottom:1px solid var(--border);
  background:var(--bg); position:sticky; top:0; z-index:20; }
.site-header__bar { display:flex; align-items:center; gap:var(--space);
  padding:calc(var(--space)*.9) 0; }
.brand { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.brand__logo { display:grid; place-items:center; width:40px; height:40px;
  border-radius:calc(var(--radius)*.7); background:var(--accent);
  color:var(--accent-contrast); font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; line-height:1; flex:0 0 auto; }
.brand__mark { flex:0 0 auto; line-height:0; }
.brand__mark svg { width:40px; height:40px; display:block; }
.brand__name { font-weight:800; font-size:1.5rem; letter-spacing:-.02em; white-space:nowrap; }
.nav { flex:1 1 auto; }
.nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:1.15rem; margin:0; padding:0; }
.nav a { font-weight:600; font-size:.92rem; }
.nav a:hover { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:.7rem; }
.header-search input { border:1px solid var(--border); border-radius:999px;
  padding:.45rem .9rem; font:inherit; font-size:.85rem; background:var(--surface);
  color:var(--text); width:150px; }
.btn { display:inline-block; font-weight:700; font-size:.85rem; padding:.5rem 1.05rem;
  border-radius:999px; background:var(--accent); color:var(--accent-contrast);
  border:1px solid var(--accent); cursor:pointer; }
.btn:hover { filter:brightness(.95); }

/* Pills */
.pill { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px;
  background:var(--surface); color:var(--accent); }

/* Hero — sits in a soft panel so the top of the page has weight */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:calc(var(--space)*1.6);
  align-items:center; margin:calc(var(--space)*1.4) 0;
  padding:calc(var(--space)*1.4); background:var(--surface);
  border-radius:calc(var(--radius)*1.3); }
.hero__imgwrap { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.hero__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hero__imgwrap:hover img { transform:scale(1.03); }
.hero__title { font-size:clamp(2rem, 4.2vw, 3.25rem); line-height:1.1;
  letter-spacing:-.015em; margin:.5rem 0 .4rem; text-wrap:balance; }
.hero__excerpt { color:var(--muted); font-size:1.12rem; line-height:1.55; margin:.5rem 0;
  max-width:46ch; }
/* Not flex: mixed text nodes + a separator span in a flex row could collapse
   onto one another on wrap. Plain inline text with a comfortable line-height. */
.meta { color:var(--muted); font-size:.82rem; line-height:1.6;
  font-family:var(--font-text); }
.meta .dot { opacity:.5; margin:0 .35rem; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } }

/* Section heads */
.section { padding:calc(var(--space)*1.2) 0; }
.section-head { display:flex; align-items:center; gap:.8rem; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 var(--space); }
.section-head::before { content:""; width:.65rem; height:1.3rem; border-radius:3px;
  background:var(--accent); flex:0 0 auto; }
.section-head::after { content:""; flex:1; height:2px; background:var(--border); }

/* Card grids */
.grid { display:grid; gap:calc(var(--space)*1.3); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid-3,.grid-4 { grid-template-columns:1fr; } }
/* Flex column so the card box always encloses image + pill + title + meta;
   without it the row can end at the image and the next block (pagination)
   draws over the titles. */
.card { display:flex; flex-direction:column; transition:transform .2s ease; }
.card:hover { transform:translateY(-3px); }
.card__imgwrap { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card:hover .card__imgwrap { box-shadow:0 8px 24px rgba(0,0,0,.12); }
.card__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card__imgwrap img { transform:scale(1.04); }
/* Never render an empty picture box: if a post has no image, drop the frame
   entirely (and let the hero fall back to a single column). */
.card__imgwrap:not(:has(img)), .hero__imgwrap:not(:has(img)),
.wire-lead__img:not(:has(img)), .pick__img:not(:has(img)) { display:none; }
.hero:not(:has(.hero__imgwrap img)) { grid-template-columns:1fr; }
.card__title { font-size:1.08rem; line-height:1.35; margin:.4rem 0 .35rem; }
.card:hover .card__title { color:var(--accent); }
/* Pills sit on their own line above the title with real separation. */
.card .pill, .hero .pill, .article .pill { display:inline-block; margin-bottom:.4rem; }
/* Long unbroken Cyrillic titles must wrap, not overrun neighbouring text. */
.card__title, .hero__title, .article__title, .pick__title { overflow-wrap:break-word; }
.card__title a, .hero__title a { display:inline-block; }

/* Editor picks: alternating list */
.picks { display:flex; flex-direction:column; gap:calc(var(--space)*1.2); }
.pick { display:grid; grid-template-columns:300px 1fr; gap:calc(var(--space)*1.2);
  align-items:center; }
.pick:nth-child(even) { grid-template-columns:1fr 300px; }
.pick:nth-child(even) .pick__img { order:2; }
.pick__img { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.pick__img img { width:100%; height:100%; object-fit:cover; }
.pick__title { font-family:var(--font-display); font-size:1.4rem; line-height:1.2;
  margin:.4rem 0; }
.pick__excerpt { color:var(--muted); margin:.3rem 0 .6rem; }
@media (max-width:700px) { .pick,.pick:nth-child(even) { grid-template-columns:1fr; }
  .pick:nth-child(even) .pick__img { order:0; } }

/* Pagination */
.pagination { display:flex; gap:.4rem; padding:var(--space) 0; flex-wrap:wrap;
  justify-content:center; clear:both; margin-top:calc(var(--space)*1.4);
  position:relative; z-index:1; }
.pagination a,.pagination span { font-family:var(--font-display); font-weight:600;
  padding:.5rem .85rem; border-radius:var(--radius); border:1px solid var(--border); }
.pagination .current { background:var(--accent); color:var(--accent-contrast);
  border-color:var(--accent); }

/* Article */
.article { max-width:740px; margin:0 auto; padding:calc(var(--space)*1.8) 0; }
.article__title { font-size:2.5rem; line-height:1.2; letter-spacing:-.02em; margin:.5rem 0; }
.article__img { border-radius:var(--radius); overflow:hidden; margin:var(--space) 0; }
.article__body { font-size:1.12rem; }
.article__body p { margin:0 0 1.2rem; }
.article__body h2 { font-family:var(--font-display); font-size:1.6rem; margin:2rem 0 .6rem; }
.article__body h3 { font-family:var(--font-display); font-size:1.22rem; margin:1.5rem 0 .5rem; }
.article__body ul { margin:0 0 1.2rem 1.2rem; }
.article__body li { margin:0 0 .4rem; }
.article__body a { color:var(--accent); text-decoration:underline; }

/* Footer */
.site-footer { background:var(--text); color:var(--bg); margin-top:calc(var(--space)*2.2);
  padding:calc(var(--space)*2) 0 var(--space); }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:calc(var(--space)*1.5);
  margin-bottom:calc(var(--space)*1.4); }
@media (max-width:700px) { .footer-cols { grid-template-columns:1fr; } }
.site-footer h3 { font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;
  opacity:.7; margin:0 0 .8rem; }
.site-footer a { opacity:.85; } .site-footer a:hover { opacity:1; color:var(--accent); }
.site-footer ul { list-style:none; margin:0; padding:0; line-height:2; }
.footer__brand { font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.footer__copy { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--space);
  opacity:.6; font-size:.82rem; }

/* --- Wire / news archetype: a dense headline river --- */
.wire-lead { display:grid; grid-template-columns:1.3fr 1fr; gap:calc(var(--space)*1.4);
  align-items:center; margin:var(--space) 0 calc(var(--space)*1.4); }
.wire-lead__img { aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.wire-lead__img img { width:100%; height:100%; object-fit:cover; }
.wire-lead__title { font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; margin:.4rem 0; }
@media (max-width:760px) { .wire-lead { grid-template-columns:1fr; } }
.wire-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--text); }
.wire-item { display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--border); }
.wire-item__time { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.wire-item__title { font-size:1.12rem; line-height:1.3; margin:0; }
.wire-item__title a:hover { color:var(--accent); }
.wire-item .pill { margin-right:.5rem; }
@media (max-width:560px) { .wire-item { grid-template-columns:1fr; gap:.2rem; } }

/* --- Knowledge base archetype: search + category tiles --- */
.kb-hero { text-align:center; background:var(--surface); border-radius:calc(var(--radius)*1.3);
  padding:calc(var(--space)*2.2) var(--space); margin:var(--space) 0 calc(var(--space)*1.6); }
.kb-hero h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 .4rem; }
.kb-hero p { color:var(--muted); margin:0 auto var(--space); max-width:52ch; }
.kb-hero form { display:flex; gap:.5rem; justify-content:center; }
.kb-hero input { border:1px solid var(--border); border-radius:999px; padding:.7rem 1.1rem;
  font:inherit; min-width:min(420px,70vw); background:var(--bg); color:var(--text); }
.kb-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space); }
@media (max-width:760px) { .kb-cats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .kb-cats { grid-template-columns:1fr; } }
.kb-cat { display:block; border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*1.1); background:var(--bg); transition:border-color .2s,transform .2s; }
.kb-cat:hover { border-color:var(--accent); transform:translateY(-2px); }
.kb-cat__name { font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.kb-cat__count { color:var(--muted); font-size:.85rem; }

/* --- Long-read archetype: single column, essay-forward --- */
.lr-wrap { max-width:760px; margin:0 auto; }
.lr-lead { padding:calc(var(--space)*1.8) 0 var(--space); border-bottom:1px solid var(--border); }
.lr-lead__title { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:.5rem 0;
  letter-spacing:-.02em; text-wrap:balance; }
.lr-lead__excerpt { font-size:1.2rem; color:var(--muted); line-height:1.6; }
.lr-list { list-style:none; margin:0; padding:0; }
.lr-item { padding:calc(var(--space)*1.3) 0; border-bottom:1px solid var(--border); }
.lr-item__title { font-size:1.7rem; line-height:1.2; margin:.2rem 0 .4rem; }
.lr-item__title a:hover { color:var(--accent); }
.lr-item__excerpt { color:var(--muted); margin:.2rem 0; }

/* ======================================================================
   MAGAZINE archetype (B) — "warm photo-led magazine"
   Photo-forward, restrained, no gimmicks. Colours come from the palette
   tokens (so every site differs); the warm-editorial feel is carried by
   structure, generous rhythm and the three-voice type system. Kickers use
   the condensed voice, headlines the serif, body the humanist sans.
   ====================================================================== */
.mag { padding-bottom:calc(var(--space)*2); }
.mag .kicker, .mag-kicker { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; font-weight:600; color:var(--accent); }
.mag .pill { font-family:var(--font-kicker); }

/* Photo boxes: strict crops, hairline frame, warm neutral fill behind the
   image. When a post has no featured image the frame collapses (see guards). */
.mag-photo { display:block; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); }
.mag-photo img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
a.mag-photo:hover img { transform:scale(1.03); }
.mag-photo:not(:has(img)) { display:none; }

/* --- Signature: photo-led lead. Image dominates; the headline sits in a
   SOLID ink bar directly BENEATH the photo — never overlaid on it. --- */
.mag-lead { margin:calc(var(--space)*1.6) 0 calc(var(--space)*1.2); }
.mag-lead__img { aspect-ratio:16/9; border-radius:0; border-bottom:0; }
@media (min-width:820px) {
  .mag-lead__img { aspect-ratio:auto; height:56vh; min-height:420px; max-height:640px; }
}
.mag-lead__bar { background:var(--text); color:var(--bg);
  padding:calc(var(--space)*1.2) calc(var(--space)*1.3) calc(var(--space)*1.3); }
.mag-lead__bar .pill { margin-bottom:.7rem; }
.mag-lead__title { font-family:var(--font-display); font-weight:700; color:var(--bg);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.12; letter-spacing:-.01em;
  margin:.2rem 0 0; max-width:24ch; overflow-wrap:break-word; }
.mag-lead__title a { color:inherit; }
.mag-lead__title a:hover { color:var(--accent); }
.mag-lead__foot { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:baseline;
  margin-top:calc(var(--space)*1.1); padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.18); }
.mag-lead__foot .meta { color:var(--bg); opacity:.75; }
.mag-lead__caption { color:var(--muted); font-size:.95rem; line-height:1.55;
  margin:.9rem 0 0; max-width:70ch; }

/* Section head: a ruled bar with a condensed label and an "Все →" affordance. */
.mag-sec { margin-top:calc(var(--space)*2.4); }
.mag-sec__head { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; border-bottom:2px solid var(--text); padding-bottom:.6rem;
  margin-bottom:calc(var(--space)*1.3); }
.mag-sec__head h2 { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; font-size:1.25rem; margin:0; color:var(--text); }
.mag-all { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.mag-all:hover { text-decoration:underline; text-underline-offset:3px; }

/* Story grid — strict 3:2 crops. */
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--space)*1.6) calc(var(--space)*1.4); }
@media (max-width:820px) { .mag-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .mag-grid { grid-template-columns:1fr; } }
.mag-card__img { aspect-ratio:3/2; }
.mag-card .pill { display:inline-block; margin:.85rem 0 .5rem; }
.mag-card__title { font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  line-height:1.24; margin:0; overflow-wrap:break-word; }
.mag-card__title a:hover { color:var(--accent); }
.mag-card .meta { display:block; margin-top:.55rem; }

/* Topic rails: a lead story + two columns of headline-only items. */
.mag-rail { display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:calc(var(--space)*1.5); }
@media (max-width:820px) { .mag-rail { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .mag-rail { grid-template-columns:1fr; } }
.mag-rail__img { aspect-ratio:3/2; margin-bottom:.9rem; }
.mag-rail__lead h3 { font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  line-height:1.18; margin:.5rem 0 0; overflow-wrap:break-word; }
.mag-rail__lead h3 a:hover { color:var(--accent); }
.mag-rail__dek { color:var(--muted); font-size:.98rem; line-height:1.55; margin:.7rem 0 0;
  max-width:52ch; }
.mag-rail__col { display:flex; flex-direction:column; gap:calc(var(--space)*1.1); }
.mag-rail__item { border-top:1px solid var(--border); padding-top:.9rem; }
.mag-rail__item h4 { font-family:var(--font-text); font-weight:600; font-size:1rem;
  line-height:1.3; margin:0; overflow-wrap:break-word; }
.mag-rail__item h4 a:hover { color:var(--accent); }
.mag-rail__item .meta { display:block; margin-top:.4rem; }

/* Популярное — a text-only ranked list, plus an optional English teaser aside. */
.mag-pop { display:grid; grid-template-columns:2fr 1fr;
  gap:calc(var(--space)*2.4); align-items:start; }
.mag-pop--solo { grid-template-columns:1fr; }
@media (max-width:820px) { .mag-pop { grid-template-columns:1fr;
  gap:calc(var(--space)*1.8); } }
.mag-poplist { list-style:none; margin:0; padding:0; }
.mag-poplist li { display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  align-items:baseline; padding:.95rem 0; border-top:1px solid var(--border); }
.mag-poplist li:first-child { border-top:0; padding-top:0; }
.mag-num { font-family:var(--font-kicker); font-weight:600; font-size:1.7rem;
  line-height:1; color:var(--accent); min-width:1.4em; }
.mag-poplist a { font-family:var(--font-display); font-weight:700; font-size:1.08rem;
  line-height:1.3; overflow-wrap:break-word; }
.mag-poplist a:hover { color:var(--accent); }
.mag-poplist .meta { display:block; margin-top:.35rem; }

/* English-edition teaser (only rendered when the site has a secondary language). */
.mag-eng__dek { color:var(--muted); font-size:.95rem; line-height:1.55; margin:.2rem 0 1rem; }
.mag-eng__link { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:.85rem; color:var(--accent); }
.mag-eng__link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Light magazine footer — paper canvas, hairline rule, muted text. */
.mag-foot { display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  justify-content:space-between; align-items:flex-start; }
.mag-foot__brand { font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--text); }
.mag-foot small { display:block; margin-top:.5rem; color:var(--muted); font-size:.85rem;
  max-width:44ch; line-height:1.5; }
.mag-foot__nav { display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; list-style:none;
  margin:0; padding:0; }
.mag-foot__nav a { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; color:var(--muted); }
.mag-foot__nav a:hover { color:var(--accent); }
.site-footer--light { background:var(--bg); color:var(--text);
  border-top:1px solid var(--border);
  padding:calc(var(--space)*2) 0 calc(var(--space)*1.6); margin-top:calc(var(--space)*2.2); }

/* Cookie consent bar */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--text); color:var(--bg); padding:.85rem var(--space);
  display:flex; gap:1rem; align-items:center; justify-content:center;
  flex-wrap:wrap; font-size:.9rem; box-shadow:0 -2px 16px rgba(0,0,0,.18); }
/* The class's display:flex would otherwise beat the [hidden] attribute, so the
   bar could never be dismissed (nor stay dismissed). This wins on specificity. */
.cookie-bar[hidden] { display:none; }
.cookie-bar a { color:var(--bg); text-decoration:underline; }
.cookie-bar .btn { padding:.4rem .95rem; }

/* Mobile */
@media (max-width:820px) {
  body { font-size:16px; }
  .site-header__bar { flex-wrap:wrap; gap:.6rem; }
  .brand { flex:1 1 auto; }
  .nav { order:3; flex-basis:100%; overflow-x:auto; }
  .nav ul { flex-wrap:nowrap; gap:1rem; padding-bottom:.2rem; }
  .header-actions { margin-left:auto; }
  .header-search input { width:120px; }
  .hero__title { font-size:1.9rem; }
  .article__title { font-size:2rem; }
  .article__body { font-size:1.05rem; }
}
@media (max-width:460px) {
  .header-search { display:none; }
  .hero__title { font-size:1.6rem; }
}