/* portal.css — VERZIO 17 (ha ezt a sort latod, az uj fajl van fent) */
/* portal.css — a ditesportuje.cz kiegészítései a styles.css fölé.
   Csak az van benne, ami a német portálon nincs: szponzorsáv, kereső- és
   hírlevélsáv, közösségi sáv, sütitájékoztató, rovatbevezető, forrásmegjelölés.
   A styles.css változatlan marad, hogy később is frissíthető legyen. */

/* ── szponzorsáv ── */
.ss-sav { background: var(--black); border-bottom: 2px solid var(--orange); }
.ss-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 13px; padding-bottom: 13px; }
.ss-cimke {
  flex: none; background: var(--orange); color: var(--black);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 2px;
}
.ss-msg { flex: 1 1 300px; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.4; }
.ss-cta {
  flex: none; margin-left: auto; background: var(--orange); color: #fff;
  font-size: .9rem; font-weight: 600; padding: 7px 18px; border-radius: 2px; white-space: nowrap;
}
.ss-cta:hover { background: var(--orange-hover); color: #fff; }

/* ── kereső- és hírlevélsáv ── */
.eszkoz-sav { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.eszkoz-sav .container { display: flex; align-items: flex-start; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.eszkoz-sav .kereso-urlap { flex: 1 1 400px; margin-right: 22px; }
.eszkoz-sav .hirlevel-urlap { flex: 0 1 360px; }

.kereso-urlap, .hirlevel-urlap { display: flex; flex-wrap: wrap; margin: 0; }
.kereso-urlap input, .hirlevel-urlap input[type="email"] {
  flex: 1 1 180px; min-width: 0; background: var(--bg); color: var(--black);
  border: 1px solid var(--border); border-right: 0; border-radius: 3px 0 0 3px;
  padding: 10px 14px; font: inherit; font-size: .875rem;
}
.kereso-urlap input:focus, .hirlevel-urlap input:focus { border-color: var(--orange); outline: none; }
.kereso-urlap button, .hirlevel-urlap button {
  flex: none; border: 1px solid var(--orange); background: var(--orange); color: #fff;
  padding: 10px 20px; font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: 0 3px 3px 0; cursor: pointer;
}
.kereso-urlap button:hover, .hirlevel-urlap button:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.hirlevel-urlap .apro { flex: 1 0 100%; margin: 6px 0 0; font-size: .75rem; color: var(--gray); }
.kereso-urlap.nagy { max-width: 620px; margin: 0 0 26px; }
.kereso-urlap.nagy input { padding: 13px 16px; font-size: 1rem; }
.sidebar .hirlevel-urlap input[type="email"] { flex: 1 1 100%; border-right: 1px solid var(--border); border-radius: 3px; }
.sidebar .hirlevel-urlap button { flex: 1 0 100%; margin-top: 8px; border-radius: 3px; }

.ugras {
  position: absolute; left: -9999px; top: 0; z-index: 1001;
  background: var(--black); color: #fff; padding: 10px 16px; font-size: .875rem;
}
.ugras:focus { left: 8px; top: 8px; }

.rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mezesbodon { position: absolute !important; left: -9999px !important; }

/* ── közösségi sáv ── */
.kozossegi-sav { background: var(--ochre-light); border-bottom: 1px solid var(--border); }
.kozossegi-sav .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.kozossegi-felirat { font-size: .8125rem; color: var(--gray); margin-right: 8px; }
.kozossegi { display: flex; flex-wrap: wrap; align-items: center; }
.kozossegi a {
  display: inline-flex; align-items: center; margin: 3px 0 3px 8px;
  background: var(--black); color: #fff; text-decoration: none;
  font-size: .8rem; font-weight: 600; padding: 6px 13px; border-radius: 3px;
}
.kozossegi a:hover { background: var(--orange); color: #fff; }
.kozossegi-svg { width: 15px; height: 15px; margin-right: 7px; fill: currentColor; flex: none; }
.kozossegi-lab { margin-top: 12px; }
.kozossegi-lab a { margin: 3px 8px 3px 0; }

/* ── Rovatoldal: vezető mondat + ~300 szavas SEO-szöveg ──────────────────
   Az industrie-fachwissen.de mintája: sima bekezdések a H1 alatt, teljes
   szélességben, nem külön kiemelt dobozban. */

.category-header p.rovat-lead {
  font-size: 1.0625rem; color: var(--dark); max-width: 74ch; margin-bottom: 14px;
}
.rovat-szoveg p {
  font-size: .9375rem; line-height: 1.65; color: var(--gray);
  max-width: none; margin: 0;
}


/* ── forrásmegjelölés a cikkben ── */
.source-note, .forras {
  font-size: .8125rem; color: var(--gray); border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 18px;
}

/* ── üres rovat, üzenetek, találatok ── */
.ures { border: 1px dashed var(--border); padding: 22px; }
.ures p { margin: 0 0 .6rem; }
.uzenet { padding: 14px 18px; border-left: 4px solid var(--orange); background: var(--ochre-light); margin-bottom: 20px; }
.uzenet-hiba { border-left-color: #a8322a; background: #fbeceb; }
.talalatok { list-style: none; margin: 0; padding: 0; max-width: 78ch; }
.talalatok li { padding: 18px 0; border-top: 1px solid var(--border); }
.talalatok h2 { font-size: 1.2rem; margin: .1rem 0 .3rem; }
.szamlalo { font-size: .85rem; color: var(--gray); margin: 0 0 12px; }

/* ── sütitájékoztató ── */
.suti-sav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--black); color: rgba(255,255,255,.88); border-top: 2px solid var(--orange); }
.suti-sav[hidden] { display: none; }
.suti-sav .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.suti-sav p { margin: 0; font-size: .875rem; max-width: 92ch; }
.suti-sav p + p { margin-top: 4px; color: rgba(255,255,255,.7); }
.suti-sav a { color: var(--orange); }
.suti-gomb {
  flex: none; border: 0; background: var(--orange); color: #fff; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; padding: 10px 24px; border-radius: 2px;
}
.suti-gomb:hover { background: var(--orange-hover); }

@media (max-width: 860px) {
  .eszkoz-sav .container { display: block; }
  .eszkoz-sav .kereso-urlap { margin: 0 0 10px; }
  .ss-inner { display: block; }
  .ss-cimke { display: inline-block; margin-bottom: 8px; }
  .ss-cta { display: inline-block; margin: 10px 0 0; }
  .suti-sav .container { display: block; }
  .suti-gomb { margin-top: 12px; width: 100%; }
  .rovat-intro p { columns: 1; }
}


/* ── Oldalsáv: nincs saját görgetősáv ────────────────────────────────────
   A styles.css az oldalsávot a képernyő magasságához köti
   (max-height + overflow-y:auto), ezért saját görgetősávot kap, és a
   hosszabb tartalom eltűnik benne. Itt feloldjuk: az oldalsáv teljes
   hosszában látszik, és az oldallal együtt görög. */

.sidebar {
  position: static;
  max-height: none;
  overflow: visible;
  align-self: start;
}


/* ── Leíró szövegek a dobozokban ─────────────────────────────────────────
   A styles.css .ad-cta osztálya narancs gomb — csak gombra való. A doboz
   magyarázó szövegének külön, halk stílus jár. */

.doboz-szoveg {
  font-size: .8125rem; line-height: 1.55; color: var(--gray); margin: 0 0 12px;
}
.ad-strip .ad-headline { margin-bottom: 10px; }
.sidebar-ad .ad-cta, .ad-strip .ad-cta { text-decoration: none; }
.sidebar-ad .ad-cta:hover, .ad-strip .ad-cta:hover { background: var(--orange-hover); color: #fff; }


/* ── Kép nélküli állapotok ───────────────────────────────────────────────
   Amíg nincs fotó, ne maradjon üres képhely: a vezető blokk egy hasáb lesz,
   az üres rovatcsempe pedig rövid jelzést kap, nem egy egész mondatot. */

.hero-inner.nokep { display: block; }
.hero-inner.nokep .hero-body { max-width: none; }

.rovat-ures {
  margin: 8px 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-light);
}

/* ── Oldalsáv nélküli oldalak ───────────────────────────────────────────
   Ha nincs oldalsáv, a cikklista és a cikk a teljes oszlopot kapja. */

.articles-list { display: flex; flex-direction: column; }
.article-content, .article-header, .article-excerpt { max-width: 74ch; }


/* ── Főmenü: 11 pont egy sorban ─────────────────────────────────────────── */


/* Logó a bal szélen, a menü közvetlenül mellette, balról jobbra —
   ugyanaz az elrendezés, mint az industrie-fachwissen.de fejlécében. */
.site-header { height: auto; position: static; }
/* flex-wrap: nowrap — a menü SOHA nem csúszhat a logó alá, akárhány rovat van.
   A logó fix szélességű bal oszlop, a menü a maradékot kapja, és ha sok a
   rovat, a menü magán belül tördel, nem a logó alá ugrik. */
.site-header .nav-inner {
  justify-content: flex-start; flex-wrap: nowrap; align-items: center;
  padding-top: 10px; padding-bottom: 2px;
}
.site-logo { flex: 0 0 auto; width: 176px; margin: 0 22px 0 0; }
/* A logó betűmérete is kisebb, hogy a menü biztosan elférjen egy sorban. */
.logo-text { font-size: 1.4rem; }
.logo-tagline { font-size: .72rem; }
/* A mottó két sorba törik a logó alatt, így a menü elfér mellette. */
.logo-tagline { white-space: normal; line-height: 1.3; }
.site-nav { flex: 1 1 0; min-width: 0; height: auto; }
/* A styles.css fix 56 px-es fejlécsávra készült (.site-nav{height:100%}), ezért
   a több soros menü kilógna. Nálunk a fejléc magassága a tartalomhoz igazodik. */
.site-header .nav-inner { height: auto; }
.nav-links { flex-wrap: wrap; justify-content: flex-start; }
.nav-links li { margin: 2px 12px 2px 0; }
.nav-links li:last-child { margin-right: 0; }
.nav-links a {
  display: inline-block; padding: 10px 0 12px; font-size: .85rem; white-space: nowrap;
  color: var(--black); text-decoration: none; border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--border); color: var(--orange); }
.nav-links a.active { border-bottom-color: var(--orange); color: var(--orange); }




/* ── Igazítás az industrie-fachwissen.de méretei szerint ─────────────────
   Tartalom: 1200 px (.container a styles.css-ből, változatlanul).
   Fejléc és sávok: 1400 px, mint ott a .nav-inner. Középre igazítva,
   a két szélen egyenlő margóval. */

/* Egyetlen közös bal szél: a szponzorsáv, a logó, a menü, a közösségi sáv
   és a tartalom mind ugyanazon a függőleges vonalon kezdődik. */
.site-header .container,
.ss-inner,
.kozossegi-sav .container,
.eszkoz-sav .container,
.site-footer .container { max-width: var(--max-w); }

/* A rovatcsempék három hasábban, mint a Themenbereiche blokk. */
@media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .category-grid { grid-template-columns: 1fr; } }


/* ── Közös bal szél a címlapon is ────────────────────────────────────────
   A .hero és a .category-grid-section saját padding-ja (24px 0) felülírja a
   .container oldalsó 24 px-ét, ezért a címlap tartalma 24 px-szel balrébb
   csúszott, mint a fejléc. Itt visszaadjuk, így a szponzorsáv, a logó, a menü,
   a közösségi sáv és a szöveg mind egy vonalon kezdődik. */

.hero.container,
.category-grid-section.container,
main > .container,
main > section.container { padding-left: 24px; padding-right: 24px; }

@media (max-width: 768px) {
  .hero.container,
  .category-grid-section.container,
  main > .container,
  main > section.container { padding-left: 16px; padding-right: 16px; }
}


/* ── Mobilmenü ───────────────────────────────────────────────────────────
   768 px alatt a styles.css elrejti a menüt, és a hamburgergombbal nyílik.
   A legördülő menüt a dokumentumfolyamban hagyjuk (nem absolute), mert a
   fejléc itt nem fix magasságú. */

@media (max-width: 768px) {
  .site-header .nav-inner { flex-wrap: wrap; align-items: center; }
  .site-logo { flex: 1 1 auto; width: auto; max-width: none; margin: 0; }
  .nav-toggle { order: 2; margin-left: auto; }
  .site-nav { flex: 1 0 100%; order: 3; }
  .nav-links {
    position: static; top: auto; box-shadow: none; padding: 4px 0 8px;
    border-bottom: 0;
  }
  .nav-links li { margin: 0; width: 100%; }
  .nav-links li a {
    display: block; width: 100%; padding: 0; line-height: 44px;
    border-bottom: 1px solid var(--border); border-top: 0;
  }
  .nav-links li a.active { border-bottom-color: var(--orange); }
}


/* ── A vezető blokk alatti vonal igazítása ──────────────────────────────
   A .hero egyszerre .container is, ezért 24 px oldalsó paddingja van, és az
   alsó szegélye a padding külső széléig fut — 24 px-szel túllóg a szövegen
   és a csempéken. A vonalat átrakjuk a belső elemre, így pontosan ott kezdődik
   és végződik, ahol a szöveg és a rovatrács. */

.hero.container { border-bottom: 0; padding-bottom: 0; }
.hero.container > .hero-inner,
.hero.container > .hero-body {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}


/* ── Kép nélküli cikkkártya ─────────────────────────────────────────────
   A .card-horizontal két hasábos rács (240px kép + szöveg). Ha a cikkhez még
   nincs kép, a szöveg a 240px-es képoszlopba esne, és a jobb oldal üresen
   maradna. Ilyenkor a kártya egy hasábos, teljes szélességű. */

.card-horizontal.card-nokep { grid-template-columns: 1fr; }
.card-nokep .card-body { padding-left: 0; padding-right: 0; }
.card-nokep .card-desc { max-width: 80ch; }


/* ── Vezető blokk: a szöveg a teljes blokkszélességen ───────────────────
   A bevezető bekezdés és a H1 ugyanaddig fusson, mint az alatta lévő vonal
   és a rovatcsempék — ne alakuljon keskeny hasábbá. */

.hero-inner.nokep .hero-body,
.hero-inner.nokep .hero-excerpt,
.hero-inner.nokep h1 { max-width: none; }

/* ── Közösségi sáv: középre ─────────────────────────────────────────────
   A "Kövess minket" felirat és a gombok a sáv közepén állnak. */

.kozossegi-sav .container { justify-content: center; }


/* ── Képek: semmit ne vágjunk le ────────────────────────────────────────
   A styles.css fix magassagot ad a kepeknek (.card-image 150px stb.) es
   object-fit: cover-t hasznal, ezert a kepek szelet levagja — 16:9-nel 10%-ot,
   1,9:1-nel 16%-ot, negyzetesnel 38%-ot. A portal kepei feliratos grafikak,
   amelyeken a szoveg a szelekig er, ezert a levagas olvashatatlanna teszi oket.

   Megoldas: a kepdoboz 16:9 aranyu, a kep pedig "contain" — vagyis teljes
   egeszeben latszik, barmilyen aranyu is. Ha a kep nem 16:9, a maradek helyen
   halvany hatter latszik, nem levagott szoveg. */

/* A styles.css-ben .card-horizontal .card-image szerepel (ket osztaly),
   ezert itt is ket osztalyt kell hasznalni, kulonben nem ir felul. */
.card-horizontal .card-image,
.card-vertical .card-image,
.card .card-image,
.category-card .category-card-image,
.category-card-image,
.mini img {
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--bg-alt);
  display: block;
  width: 100%;
}

/* A kepre kattintva is a teljes doboz legyen az aktiv terulet. */
.card-image-link,
.category-card-image { display: block; background: var(--bg-alt); }

/* A vezeto kep ugyanigy: teljes kep, levagas nelkul. */
.hero-image {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--bg-alt);
  width: 100%;
}

/* A cikkoldal nyitokepe: ugyanolyan szeles, mint a cikk szovege, hogy egy
   oszlopban alljanak. Levagas itt sincs. */
.article-featured-image {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--bg-alt);
  width: 100%;
  max-width: 74ch;
  margin-bottom: 22px;
}

/* Az oldalsav es a rovatcsempek kis belyegkepei kicsik ahhoz, hogy felirat
   lassszon rajtuk, ott a kitoltes a jobb — de levagas nelkul, kozepre. */
.mini img { aspect-ratio: 16 / 9; object-fit: contain; height: auto !important; }

@media (max-width: 768px) {
  .card-horizontal .card-image, .card-vertical .card-image,
  .category-card-image, .hero-image, .article-featured-image {
    height: auto !important; aspect-ratio: 16 / 9;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   FEJLÉC — logó, mottó és menü EGY sorban, alacsonyabb sávok
   A portal.css VÉGÉRE illesztve. Semmi mást nem kell módosítani.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Egyetlen sor: logó | mottó | menü ────────────────────────────────
   A tartalomsáv belső szélessége 1152 px (1200 mínusz 2×24 px padding).
   Ebbe a logó (164) + mottó (~290) + menü szövege (~540) fér bele, tehát
   a menüpontok közti hézagot nem fix pixelben adjuk meg, hanem a
   space-between osztja szét a maradékot. Így a menü mindig pont kitölti
   a sort — ha egy rovattal több lesz, magától szorosabbra rendeződik. */

.site-header .nav-inner {
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 22px;
  padding-top: 10px;
  padding-bottom: 4px;
}

.site-logo {
  flex: 0 0 auto;                 /* a logó annyi helyet kap, amennyi kell */
  width: auto; max-width: none; margin: 0;
  flex-direction: row;
  align-items: baseline;
  /* A styles.css justify-content: center-t ad a logónak. Oszlopirányban ez
     függőlegesen rendezett; most, vízszintes irányban, középre húzná —
     ezért kell ide a flex-start. */
  justify-content: flex-start;
  gap: 12px;
  white-space: nowrap;
}

.logo-text { font-size: 1.4rem; line-height: 1.15; }

.logo-tagline {
  white-space: nowrap;
  margin-top: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: .72rem;
  line-height: 1.15;
}


/* ── 2. A menü kitölti a maradék helyet ──────────────────────────────── */

.site-header .site-nav { flex: 1 1 auto; min-width: 0; width: auto; }

.site-header .nav-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;   /* a hézagok maguktól állnak be */
  align-items: baseline;
  width: 100%;
}

.site-header .nav-links li { margin: 0; flex: 0 0 auto; }

/* Itt volt a legnagyobb veszteség: minden menüpont 66 px magas volt, mert a
   styles.css line-height-ja a RÉGI, fix 64 px-es fejlécmagassághoz van kötve
   (line-height: var(--header-h)). Egy 14 px-es szöveg alatt ez 40 px üres
   hely.  66 px  ->  31 px. */
.site-header .nav-links li a {
  line-height: 1.2;
  padding: 6px 0 7px;
  font-size: .82rem;
  border-bottom-width: 3px;
  white-space: nowrap;
}


/* ── 3. Ha nem fér ki egy sorba ──────────────────────────────────────────
   Keskenyebb ablakban a mottó tűnik el először, még keskenyebben a menü
   a logó alá kerül, teljes szélességben. Így soha nem lóg ki semmi. */

@media (max-width: 1270px) {
  .logo-tagline { display: none; }
}

/* 1050 px alatt a mottó eltűnt, a menü a logó alá kerül. Ez a blokk
   CSAK 769 px fölött szól bele — 768 px alatt a portal.css saját
   mobilmenüje dolgozik, azt nem szabad felülírni. */
@media (max-width: 1050px) and (min-width: 769px) {
  .site-header .nav-inner { flex-wrap: wrap; }
  .site-logo             { flex: 1 1 100%; }
  .site-header .site-nav { flex: 1 1 100%; width: 100%; }
  .site-header .nav-links { justify-content: flex-start; }
  .site-header .nav-links li { margin: 0 18px 0 0; }
}

/* Mobilon marad a hamburgermenü. A fenti .site-header .nav-links szabály
   erősebb, mint a styles.css .nav-links{display:none} sora, ezért itt
   külön vissza kell venni — különben a menü mobilon mindig nyitva lenne.
   Minden mást a portal.css meglévő 768 px-es blokkja intéz. */
@media (max-width: 768px) {
  .site-header .nav-links          { display: none; }
  .site-header .nav-links.nav-open { display: flex; flex-direction: column; }
  .site-header .nav-links li a     { font-size: .9375rem; }
}


/* ── 4. Szponzorsáv ──────────────────────────────────────────────────── */

.ss-inner { padding-top: 7px; padding-bottom: 7px; gap: 12px; }
.ss-msg   { font-size: .875rem; line-height: 1.35; }
.ss-cta   { padding: 5px 15px; font-size: .82rem; }
.ss-cimke { padding: 3px 9px; font-size: .68rem; }


/* ── 5. Keresősáv ────────────────────────────────────────────────────── */

.eszkoz-sav .container { padding-top: 7px; padding-bottom: 7px; align-items: center; }
.eszkoz-sav .kereso-urlap input  { padding: 7px 13px; }
.eszkoz-sav .kereso-urlap button { padding: 7px 18px; }


/* ── 6. Közösségi sáv ────────────────────────────────────────────────── */

.kozossegi-sav .container { padding-top: 5px; padding-bottom: 5px; }
.kozossegi a        { padding: 4px 11px; font-size: .76rem; margin: 2px 0 2px 7px; }
.kozossegi-svg      { width: 13px; height: 13px; margin-right: 6px; }
.kozossegi-felirat  { font-size: .78rem; }