/* ============================================================
   BROADSHEET — fekete-fehér, klasszikus újságos arculat
   ============================================================
   Ez egy FELÜLÍRÓ réteg: a meridian.css / custom.css és a
   layoutok inline stílusai fölé töltődik be (baseof.html, a
   head-extra blokk UTÁN), és átszabja a megjelenést anélkül,
   hogy a struktúrához hozzá kellene nyúlni.

   KI/BE KAPCSOLÁS: a baseof.html-ben a
   <link rel="stylesheet" href="/css/broadsheet.css"> sor
   törlésével minden visszaáll a korábbi navy arculatra.

   Alapelvek:
     · vonal határol, nem keret és nem árnyék
     · éles sarok mindenhol (papíron nincs lekerekítés)
     · kék fejlécblokk, alatta fekete-fehér újságos tördelés
     · két betű: Archivo Black (wordmark) + Inter (minden más)
     · rovatot ritkított kiskapitális jelöl, nem szín
     · a FOTÓK színesek maradnak — ld. a fájl végén a kapcsolót
   ============================================================ */

:root {
  --navy-900: #000;
  --navy-800: #111;
  --navy-700: #111;
  --navy-600: #1a1a1a;
  --navy-500: #333;

  --paper:   #fff;
  --paper-2: #fafafa;
  --paper-3: #f2f2f2;
  --rule:    #111;

  --ink-900: #111;
  --ink-700: #2b2b2b;
  --ink-500: #555;
  --ink-400: #777;

  --accent:      #111;
  --accent-soft: #eee;
  --highlight:   #111;

  /* Szerif betűket már nem töltünk be — ha a meridian.css vagy egy
     layout inline stílusa mégis ezekre hivatkozna, Interre essen
     vissza, ne a rendszer Georgiájára. */
  --font-headline: "Inter", -apple-system, sans-serif;
  --font-serif:    "Inter", -apple-system, sans-serif;
  --font-body:     "Inter", -apple-system, sans-serif;

  --bs-rule:      #111;
  --bs-rule-thin: #c9c9c9;

  /* Times of Israel-féle akcentus: egyetlen kék, visszafogottan */
  --bs-blue:      #10529e;
  --bs-blue-dark: #0b3d78;
  /* A logó napkorongja — egyben a második márkaszín */
  --bs-gold:      #f5c518;
  /* A hero sáv halvány szürke blokkja */
  --bs-tint:      #f1f1f0;
}

/* ── 1. Éles sarkok, semmi árnyék ── */
.masthead, .three-col, .hero-band, .news-grid, .bottom-grid, .mob-feed,
.article, .lp-hero, .lp-card, .lp-strip, .kapcsolodo-item, .inread,
.inread__item, .inread__img, .inread__ph, .legfrissebb-widget,
.legtobbet-widget, .fb-widget, .gnews-box, .page-card, .author-hero,
.author-card, .author-featured, .szerzo-card, .search-box, .sr-item,
.hb-lead__img, .hb-item__img, .ng-story__img, .col-img, .bot-img,
.hc-img, .article-hero, .lp-hero__img, .lp-card__img,
.legfrissebb-item__img, .legtobbet-item__img, .kapcsolodo-item__img,
.mob-story-img, .wm-block, .callout {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── 2. Lap háttere ── */
body { background: #fff; color: #111; }
main  { background: #fff; }
.main { background: #fff; }

/* ── 3. Fejléc ──
   Kék sáv legfelül a márkanévvel — ez az egyetlen szín a fejlécben,
   alatta jön a fehér, újságos masthead. */
.top-bar {
  background: var(--bs-blue-dark) !important; color: #fff !important;
  border: none !important;
  padding: 6px 0 !important;
}
.top-bar-inner {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 14px;
}
.tb-brand {
  font-weight: 800; letter-spacing: .1em; color: #fff;
  margin-right: auto;
}
.tb-right { color: rgba(255,255,255,.8); }
.tb-pip { background: #fff !important; }

/* Egybefüggő kék fejlécblokk: top bar + masthead + nav egy színben. */
.masthead { background: var(--bs-blue) !important; color: #fff; }
.masthead::after { display: none; }

.masthead-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 24px 14px;
}
.masthead-left  { justify-self: start; }
.masthead-right { justify-self: end; }

.wordmark { flex-direction: column !important; gap: 0 !important; text-align: center; }
.wm-block { display: none !important; }
/* Nagybetűs, tömör display-betű + napkorong jel.
   A "MA" időre utal, a korong a napi megjelenésre — a jel és a név
   ugyanazt mondja. A korongot átvágó két rés maszkkal készül, ezért
   bármilyen háttéren működik (fejlécben kék, láblécben fekete). */
.wm-name {
  font-family: 'Archivo Black', 'Inter', sans-serif !important;
  font-size: 48px !important; font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
}
.wm-mark {
  width: .78em; height: .78em; flex-shrink: 0;
  color: var(--bs-gold);
  transform: translateY(-.02em);
}
/* Kék háttéren a .hu halványabb fehér — így elválik, de nem harsog. */
.wm-name em {
  font-style: normal !important; opacity: 1; font-weight: 700;
  color: rgba(255,255,255,.62) !important;
}
.footer .wm-name em { color: rgba(255,255,255,.55) !important; }
.wm-tag { display: none !important; }

.hamburger span { background: #fff !important; }
.srch {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 13px;
}
.srch:hover { background: #fff !important; color: var(--bs-blue) !important; }

/* A rovatsáv fekete a kék masthead alatt — erős kontraszt, és egyben
   ez zárja le a fejlécblokkot a tartalom felé. */
.primary-nav {
  background: #111 !important;
  border: none !important;
  box-shadow: none !important;
  /* A meridian.css 1280px-re fogja a navot — a fekete sáv így csak a
     tartalom széléig ért. A sáv fusson ki teljes szélességben, a
     linkeket viszont a belső ul tartja középen. */
  max-width: none !important;
  width: 100% !important;
  /* A magasságot a sáv saját függőleges paddingja adja — az <a> inline
     elem, azon a vertikális padding nem növelné a sormagasságot. */
  padding: 14px 0 !important;
}
.primary-nav ul {
  justify-content: center !important;
  gap: 30px !important;
  max-width: 1280px; margin: 0 auto !important;
  padding: 0 24px !important;
  border-top: none !important;
}
.primary-nav li { padding-bottom: 0 !important; }
/* Az aktív rovat alatti csík aranyban (az --accent most fekete lenne). */
.primary-nav li.active::after { background: var(--bs-gold) !important; }
.primary-nav li:hover::after { background: rgba(255,255,255,.35) !important; }
.primary-nav a {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .13em !important; text-transform: uppercase;
  color: #fff !important; padding: 0 !important;
  border: none !important; opacity: .82;
}
.primary-nav a:hover { color: #fff !important; opacity: 1; }
/* Az éppen olvasott rovat aranyban — a logó napkorongjának színe. */
.primary-nav li.active a {
  font-weight: 800 !important; opacity: 1;
  color: var(--bs-gold) !important;
}

/* ── 4. Rovatcímkék: ritkított kiskapitális, szín helyett ── */
.col-section, .lp-card__cat, .lp-hero__cat, .kapcsolodo-item__cat,
.legfrissebb-item__cat, .legtobbet-item__cat, .inread__cat,
.article-cat, .author-card__cat, .author-featured__cat {
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: .2em !important; text-transform: uppercase !important;
  color: #555 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ── 5. Címek: vastag sans (Times of Israel-féle) ──
   A wordmark marad szerif — az adja a lap "fejlécét"; a hírcímek
   viszont sűrű, vastag groteszkkel a legolvashatóbbak. */
.hb-lead__title, .hc-title, .col-title, .bot-title, .ng-story__title,
.mob-story-title, .lp-hero__title, .lp-card__title, .lp-strip__title,
.article-title, .kapcsolodo-item__title, .legfrissebb-item__title,
.legtobbet-item__title, .inread__title, .hb-item__title,
.author-hero__name, .szerzok-hero__title, .page-card h1 {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.021em !important;
  line-height: 1.15 !important;
  color: #111 !important;
}
.article-title { font-size: 42px !important; line-height: 1.09 !important; }
.hb-lead__title { font-size: 35px !important; }
.ng-story__title, .bot-title { font-size: 19px !important; }
.hb-item__title { font-size: 17px !important; }

/* Szerző-sor kék kiskapitálissal — ToI-jelleg */
.article-meta a, .lp-hero__meta strong, .lp-strip__meta strong {
  color: var(--bs-blue) !important;
  font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .07em; font-size: .92em;
  border-bottom: none !important;
}

/* ── SEMMI ALÁHÚZÁS ──
   Hoverre a cím elkékül, nem aláhúzódik. (A cikkszövegben lévő
   linkek kivételek — ott az aláhúzás jelzi, hogy link; ha az is
   zavar, a 6. blokkban a .article-content a szabálynál vedd ki.) */
a, a:hover, a:focus,
.hb-lead__title, .hb-item__title, .ng-story__title, .bot-title,
.col-title, .hc-title, .inread__title, .kapcsolodo-item__title,
.legfrissebb-item__title, .legtobbet-item__title, .lp-hero__title,
.lp-card__title, .lp-strip__title, .mob-story-title,
.primary-nav a, .primary-nav a:hover, .footer a, .footer a:hover {
  text-decoration: none !important;
}
a:hover .hb-lead__title, a:hover .ng-story__title, a:hover .bot-title,
a:hover .col-title, a:hover .hb-item__title, a:hover .inread__title,
a:hover .kapcsolodo-item__title, a:hover .legfrissebb-item__title,
.col-story:hover .col-title, .hero-center:hover .hc-title,
.bot-story:hover .bot-title, .lp-hero:hover .lp-hero__title,
.lp-card:hover .lp-card__title, .mob-story:hover .mob-story-title {
  color: var(--bs-blue) !important;
}
.primary-nav a:hover { color: var(--bs-blue) !important; }
.inread__dek { font-family: 'Inter', -apple-system, sans-serif !important; color: #444 !important; }
.col-story:hover, .hero-center:hover, .bot-story:hover, .mob-story:hover {
  background: transparent !important;
}

/* ── 6. Leadek és szövegtörzs ──
   Groteszk, nem szerif: a Source Serif könyvszedéshez készült, hosszú
   hírszövegben képernyőn fárasztó. Az Inter kis fokozatban is tiszta,
   ezt használja a legtöbb hírportál (444, Telex) is. */
.col-dek, .hc-dek, .hb-lead__dek, .hb-item__dek, .ng-story__dek,
.mob-story-dek, .lp-hero__desc, .lp-card__desc, .lp-strip__desc,
.inread__dek, .kapcsolodo-item__desc--strip, .article-subtitle,
.page-content, .lp-strip__desc {
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: #333 !important;
}
.article-content {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  letter-spacing: -.003em !important;
  color: #1f1f1f !important;
}
.article-content p { margin-bottom: 20px !important; }
/* A szövegbeli linkek: fekete betű, alatta sárga vonal, hoverre sárga
   kiemelés. Tiszta sárga betű fehér alapon olvashatatlan lenne
   (1,8:1 kontraszt), így a szín jelként dolgozik, nem szövegszínként.
   A vonal border-bottom, nem text-decoration — vastagabb, dizájnelem. */
.article-content a {
  color: #111 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--bs-gold) !important;
  padding-bottom: 1px;
  transition: background .15s;
}
.article-content a:hover {
  background: var(--bs-gold) !important;
  border-bottom-color: #111 !important;
}
/* …de az ajánlókockák NEM szövegbeli linkek, rájuk ez nem vonatkozik.
   (Az .inread a cikktörzsön belül ül, ezért kapta meg az aláhúzást.) */
.article-content .inread__item,
.article-content .inread__item:hover,
.article-content .inread__item *,
.article-content .ajanlok-mini a {
  text-decoration: none !important;
}
.article-content .inread__dek {
  display: -webkit-box !important;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px !important; line-height: 1.42 !important;
  color: #555 !important; margin: 4px 0 0 !important;
}
.article-content h2 {
  font-family: 'Inter', -apple-system, sans-serif !important; text-transform: none !important;
  border-bottom: 1px solid var(--bs-rule) !important; color: #111 !important;
}
.article-content h3 { font-family: 'Inter', -apple-system, sans-serif !important; color: #111 !important; }
.article-content blockquote:not(.twitter-tweet):not(.tiktok-embed):not(.instagram-media) p {
  background: #111 !important; color: #fff !important;
}

/* Iniciálé a cikk első bekezdésén */
.article-content > p:first-of-type::first-letter {
  float: left; font-family: 'Archivo Black', sans-serif;
  font-size: 3.6em; line-height: .82; font-weight: 700;
  padding: 4px 9px 0 0; color: #111;
}

/* ── 7. Blokkok: vonal, nem keret ── */
.news-grid, .bottom-grid, .three-col {
  border: none !important;
  border-top: 4px solid var(--bs-rule) !important;
  padding: 14px 0 20px !important;
  margin-bottom: 0 !important;
  background: #fff !important;
}
/* A hero sáv halvány szürke blokkon ül — ez emeli ki a nap fő hírét
   a fehér lapból, a ToI címlapjának mintájára. */
.hero-band {
  border: none !important;
  background: var(--bs-tint) !important;
  padding: 0 26px 26px !important;
  margin-bottom: 0 !important;
}
.hero-band .tc-head {
  margin: 0 -26px 20px !important;
  padding: 8px 26px !important;
}
.hero-band .hb-side { border-left: 1px solid #d6d6d4 !important; }
.hero-band .hb-item { border-top: 1px solid #d6d6d4 !important; }
.hero-band .hb-item:first-child { border-top: none !important; }
/* Fekete sáv a blokkfeliratok mögött (Aktuális, További hírek,
   Korábban történt) — erős, azonnal olvasható rovatjelölés. */
.tc-head, .bg-head {
  background: #111 !important;
  border-bottom: none !important;
  padding: 7px 12px !important;
  margin-bottom: 16px !important;
  display: flex !important; align-items: center !important;
}
.tc-bell { display: none !important; }
.tc-label, .bg-head h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}
.hb-side { border-left: 1px solid var(--bs-rule) !important; }
.hb-item { border-top: 1px solid var(--bs-rule-thin) !important; }
.hb-item:first-child { border-top: none !important; }
.ng-col + .ng-col, .bot-col + .bot-col {
  border-left: 1px solid var(--bs-rule) !important;
  padding-left: 26px !important;
}
.col-rule { border-top: 1px solid var(--bs-rule-thin) !important; }

/* ── 8. Cikkoldal ── */
.article { border: none !important; border-top: 4px solid var(--bs-rule) !important; }
.article-body { padding: 26px 0 !important; }
.article-meta, .article-share {
  border-color: var(--bs-rule) !important;
  font-family: 'Inter', sans-serif !important;
}
.article-subtitle { font-family: 'Inter', -apple-system, sans-serif !important; color: #333 !important; }
.read-progress { background: #111 !important; }
.fb-share-btn--small {
  background: #fff !important; color: #111 !important;
  border: 1px solid #111 !important; border-radius: 0 !important;
}
.fb-share-btn--small:hover { background: #111 !important; color: #fff !important; }

/* ── 9. Oldalsáv ── */
.legfrissebb-widget, .legtobbet-widget {
  border: none !important; border-top: 4px solid var(--bs-rule) !important;
}
.legfrissebb-widget__header, .legtobbet-widget__header {
  border-bottom: 1px solid var(--bs-rule) !important; padding: 8px 0 !important;
}
.legfrissebb-widget__header h2, .legtobbet-widget__header h2 {
  font-family: 'Inter', sans-serif !important; font-size: 10px !important;
  letter-spacing: .2em !important; color: #111 !important;
}
.legfrissebb-item, .legtobbet-item {
  padding: 12px 0 !important; border-bottom: 1px solid var(--bs-rule-thin) !important;
}
.legfrissebb-item:hover, .legtobbet-item:hover { background: transparent !important; }
.legfrissebb-item--noimg, .legtobbet-item--noimg { background: transparent !important; }
.legfrissebb-item--noimg::before, .legtobbet-item--noimg::before { display: none !important; }
.fb-widget { background: #111 !important; border-radius: 0 !important; }
.fb-widget__btn { border-radius: 0 !important; color: #111 !important; }

/* ── 10. Rovatoldal ── */
.lp-header { border-bottom: 4px solid var(--bs-rule) !important; }
.lp-title, .lp-title span {
  font-family: 'Inter', -apple-system, sans-serif !important; color: #111 !important;
}
.lp-hero, .lp-card, .lp-strip {
  border: none !important;
  border-top: 1px solid var(--bs-rule-thin) !important;
  background: transparent !important;
}
.lp-hero:hover, .lp-card:hover, .lp-strip:hover {
  transform: none !important; background: transparent !important;
}
.lp-strip { border-left: none !important; }

/* ── 11. Ajánlóblokkok ── */
.inread {
  border-top: 1px solid var(--bs-rule) !important;
  border-bottom: 1px solid var(--bs-rule) !important;
}
.inread__label {
  font-family: 'Inter', sans-serif !important; color: #111 !important;
  letter-spacing: .2em !important;
}
.inread__label::after { background: var(--bs-rule-thin) !important; }
.inread__item:hover { transform: none !important; }
.inread__ph { background: #111 !important; color: #fff !important; }
.kapcsolodo { border-top: 4px solid var(--bs-rule) !important; }
.kapcsolodo__title { font-family: 'Inter', sans-serif !important; color: #111 !important; }
.kapcsolodo-item {
  border: none !important; border-top: 1px solid var(--bs-rule-thin) !important;
}
.kapcsolodo-item:hover { transform: none !important; }
.kapcsolodo-item--noimg { background: transparent !important; border-left: none !important; }

/* ── 12. Lábléc ── */
.footer { background: #111 !important; border-top: 4px solid #111; }
.footer .wm-name { color: #fff !important; font-size: 30px !important; }
.footer .wm-block { display: none !important; }
.f-col h4 {
  font-family: 'Inter', sans-serif !important; font-size: 10px !important;
  letter-spacing: .2em !important; text-transform: uppercase;
}

/* ── 13. Kereső ── */
.search-box { border: 2px solid #111 !important; }
.sf-btn {
  border-radius: 0 !important; border: 1px solid #111 !important;
  font-family: 'Inter', sans-serif; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sf-btn.active { background: #111 !important; color: #fff !important; }
.search-input { font-family: 'Inter', -apple-system, sans-serif !important; }

/* ── 14. MOBIL ──
   A fenti !important szabályok felülírnák a meridian.css mobil
   méreteit is, ezért itt visszavesszük őket. */
@media (max-width: 900px) {
  .wm-name { font-size: 34px !important; }
  .article-title { font-size: 30px !important; }
  .hb-lead__title { font-size: 26px !important; }
}
/* Mobilon nincs hamburger: a négy rovat elfér egy sorban, és ha mégsem,
   a sáv vízszintesen görgethető. Egy kattintással kevesebb, és a
   rovatok azonnal láthatók. A baseof.html max-height:0 szabályát
   (a hamburger nyitás-zárását) itt semlegesítjük. */
@media (max-width: 768px) {
  .hamburger { display: none !important; }
  .primary-nav,
  .primary-nav.nav-open {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav ul {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 0 16px !important;
    width: max-content;
    min-width: 100%;
  }
  .primary-nav li { width: auto; padding-bottom: 0 !important; }
  .primary-nav a {
    padding: 4px 0 !important;
    border-bottom: none !important;
    white-space: nowrap;
    font-size: 11px !important;
    letter-spacing: .09em !important;
  }
}

@media (max-width: 600px) {
  /* A rovatcímkék .2em ritkítása szűk helyen (ajánlókockák, kis
     kártyák) kifuttatta a hosszabb neveket — mobilon szűkebb. */
  .col-section, .inread__cat, .lp-card__cat, .lp-hero__cat,
  .kapcsolodo-item__cat, .legfrissebb-item__cat, .legtobbet-item__cat,
  .article-cat, .author-card__cat {
    letter-spacing: .1em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .masthead-inner { padding: 12px 16px 10px !important; }
  .wm-name { font-size: 21px !important; letter-spacing: 0; gap: 10px; }
  .article-title { font-size: 24px !important; line-height: 1.15 !important; }
  .article-body { padding: 18px 0 !important; }
  .primary-nav ul { justify-content: flex-start !important; gap: 18px !important; }
  .article-content > p:first-of-type::first-letter { font-size: 3em; }
}

/* ── KIEMELT IDÉZET (.kiemelt) ──
   Az osztálynév marad, mert 361 cikk hivatkozik rá — csak a stílus
   változik. A régi szürke mező, navy él, lekerekítés és árnyék helyett
   tiszta tipográfia: nagyobb fokozat, több levegő, semmi keret.
   Az eredeti szabály a custom.css 5. sorától él; ez felülírja. */
.kiemelt {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2.4rem 0 !important;
  max-width: 680px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  /* A szintetikus kurzív alapból 14°-os, ami vastag szedésnél sok.
     Az oblique szöggel enyhébbre vesszük; a régebbi böngészők az
     előző sorra esnek vissza. */
  font-style: italic !important;
  font-style: oblique 7deg !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  color: #111 !important;
  text-align: left !important;
  border-left: 5px solid var(--bs-gold) !important;
  padding-left: 20px !important;
}
/* A szövegekben már ott a nyitó „ karakter — a CSS idézőjel duplázna. */
.kiemelt::before, .kiemelt::after { display: none !important; }
.kiemelt p { margin: 0 !important; }

@media (max-width: 600px) {
  .kiemelt {
    font-size: 1.08rem !important;
    margin: 1.8rem 0 !important;
    padding-left: 16px !important;
  }
}

/* ── 15. FOTÓK ──
   A hírfotó információt hordoz, ezért színes marad — a fekete-fehér
   tipográfia mellett ez adja a kontrasztot.
   SZÜRKÉRE VÁLTÁS: töröld a "grayscale(0)" szót és írd helyette
   "grayscale(1)". Ha csak hoverre legyen színes, hagyd a szabályt
   grayscale(1)-en és tartsd meg alatta a :hover blokkot. */
.hb-lead__img img, .hb-item__img img, .ng-story__img img,
.bot-img img, .col-img img, .article-hero img,
.lp-hero__img img, .lp-card__img img, .inread__img img {
  filter: grayscale(0);
  transition: filter .3s ease;
}
a:hover .hb-lead__img img, a:hover .hb-item__img img,
a:hover .ng-story__img img, a:hover .inread__img img {
  filter: grayscale(0);
}