/* ---------------------------------------------------------------------------
   A blog.

   A `portal.css` fölé kerül: onnan jön a papír, a betű, a színek és a lábléc,
   itt csak az van, ami a nyitóoldalon nincs — az olvasható hasáb és a
   bejegyzések tipográfiája.

   A blog lapjain NINCS JavaScript. Nem is kell hozzá: szöveget olvasni
   szkript nélkül is lehet. Így a lap kikapcsolt JavaScript mellett is teljes,
   és nincs rajta mit betiltani.
   --------------------------------------------------------------------------- */

main.blog {
  /* Szűkebb, mint a nyitóoldal 1080 pixele: hosszú szöveget olvasni széles
     hasábban fárasztó — a sor végéről a szem nem talál vissza a következő
     sor elejére. */
  max-width: 760px;
}

.blog-head {
  margin-bottom: 2.4rem;
}

.blog-head h1 {
  margin-top: 0.2rem;
}

.blog-lead {
  color: var(--muted);
  font-size: 1.06rem;
  margin: 0 0 1.1rem;
}

/* Vissza a nyitóoldalra. A blog nem zsákutca: aki innen érkezik egy megosztott
   hivatkozásról, egy kattintással eljut oda, ahol az anyagok vannak. */
.blog-back {
  margin: 0;
  font-size: 0.92rem;
}

.blog-back a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(57, 123, 128, 0.3);
}

.blog-back a:hover {
  border-bottom-color: var(--teal);
}

/* ---------------------------------------------------------------------------
   A lista.
   --------------------------------------------------------------------------- */

.blog-list {
  display: grid;
  gap: 1rem;
}

.blog-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-sm);
}

.blog-item h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  margin: 0.15rem 0 0.5rem;
}

.blog-item h2 a {
  color: var(--ink);
  text-decoration: none;
}

.blog-item h2 a:hover {
  color: var(--deep);
}

.blog-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.blog-excerpt {
  margin: 0 0 0.7rem;
  color: var(--muted);
}

.blog-more {
  margin: 0;
  font-size: 0.9rem;
}

.blog-more a {
  color: var(--teal);
  font-weight: 650;
  text-decoration: none;
}

.blog-more a:hover {
  text-decoration: underline;
}

.blog-empty {
  color: var(--muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Egy bejegyzés.
   --------------------------------------------------------------------------- */

.blog-post .blog-date {
  margin-top: 1.6rem;
}

.blog-post h1 {
  margin: 0.3rem 0 0.7rem;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
}

/* A bejegyzés szövege. Nagyobb betű és bőségesebb sorköz, mint a
   nyitóoldalon: ott bekezdéseket olvas az ember, itt oldalakat. */
.blog-body {
  font-size: 1.07rem;
  line-height: 1.72;
  color: #2c3f44;
}

.blog-body > * {
  margin: 0 0 1.15rem;
}

/* A hosszabb tanulmányjellegű bekezdések könyvszerű, sorkizárt tördelést
   kapnak. A magyar elválasztás és a balra zárt utolsó sor mérsékli a túl
   nagy szóközöket keskeny képernyőn is. */
.blog-body p,
.blog-body li {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

.blog-body h2 {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  margin: 2.2rem 0 0.8rem;
}

.blog-body h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.8rem 0 0.6rem;
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.3rem;
}

.blog-body li {
  margin-bottom: 0.4rem;
}

.blog-body a {
  color: var(--deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 89, 97, 0.32);
}

.blog-body a:hover {
  border-bottom-color: var(--deep);
}

/* A külső hivatkozást jelöljük, ahogy a nyitóoldalon is — ne érje váratlanul
   a látogatót, hogy elhagyja a lapot. */
.blog-body a[target='_blank']::after {
  content: ' ↗';
  font-size: 0.85em;
  color: var(--muted);
}

.blog-body blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--gold);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  font-style: italic;
  color: var(--ink);
}

.blog-body blockquote p {
  margin: 0;
}

.blog-body blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 650;
  color: var(--muted);
}

.blog-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, rgba(189, 148, 63, 0.55), rgba(189, 148, 63, 0));
  margin: 2.4rem 0;
}

.blog-body strong {
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Képsávok és galéria.
   --------------------------------------------------------------------------- */

/* Nyitókép a cikk tetején — a teljes szélességben, a saját arányában. */
.blog-hero-photo {
  margin: 1.4rem 0 0.5rem;
}

.blog-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* A cikk nyitó sora, ha teljes egészében félkövér, alcímként a nyitókép alatt
   középre igazítva jelenik meg. */
.blog-body > p:first-child:has(> strong:only-child) {
  text-align: center;
}

/* Képgaléria — kártyás rács a cikk végén. */
.blog-gallery {
  margin-top: 2.7rem;
}

.blog-gallery > h2 {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  margin: 0 0 0.9rem;
}

.blog-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.blog-gallery-item {
  margin: 0;
}

.blog-gallery-card {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}

.blog-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.blog-gallery-card:hover img,
.blog-gallery-card:focus-visible img {
  transform: scale(1.05);
}

.blog-gallery-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .blog-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.5rem;
  }
}

/* Nagy nézet — tiszta CSS „lightbox” a :target technikával, JavaScript nélkül.
   A kártyára kattintva a hozzá tartozó #blog-kep-N kerül :target állapotba, és
   a fixált réteg megjelenik; az előre/hátra nyíl a szomszédos képre ugrik, a
   háttér és a × pedig visszazár a galériához. */
.blog-lightbox {
  display: none;
}

.blog-lightbox:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  background: rgba(24, 20, 17, 0.92);
}

.blog-lightbox-scrim {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

.blog-lightbox-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
}

.blog-lightbox-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.blog-lightbox-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1b1714;
  font-size: 1.7rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.blog-lightbox-btn:hover {
  background: #fff;
}

.blog-lightbox-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  background: #fff;
}

.blog-lightbox-prev {
  left: clamp(0.4rem, 2vw, 1.4rem);
  top: 50%;
  transform: translateY(-50%);
}

.blog-lightbox-next {
  right: clamp(0.4rem, 2vw, 1.4rem);
  top: 50%;
  transform: translateY(-50%);
}

.blog-lightbox-close {
  top: clamp(0.4rem, 2vw, 1.4rem);
  right: clamp(0.4rem, 2vw, 1.4rem);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .blog-gallery-card img {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Megosztás.

   A gombok kinézete a `portal.css`-ből jön (`.share`, `.share-btn`) — ugyanaz
   a sáv, mint a nyitóoldalon. Itt csak két dolog más:

   1. A MESSENGER-GOMB csak érintőképernyőn látszik. A nyitóoldalon ezt a
      portal.js dönti el; itt nincs JavaScript, ezért a böngésző saját
      jelzésére hagyatkozunk: ahol nincs egérmutató, ott telefon van. A
      `fb-messenger://` hivatkozásnak számítógépen nincs mit megnyitnia —
      jobb, ha ott nincs is ott a gomb, mint ha ott van és nem tesz semmit.

   2. NINCS „hivatkozás másolása" gomb: a vágólaphoz JavaScript kellene.
      Helyette a cím kiírva, kijelölhetően ott áll a gombok alatt.
   --------------------------------------------------------------------------- */

.share-btn.only-touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .share-btn.only-touch {
    display: inline-flex;
  }
}

.share-address {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.share-address span {
  /* Kijelölhető, egybefüggő cím. Külön betűtípus, hogy ránézésre is látszódjon:
     ez nem mondat, hanem cím — és hogy a kötőjel meg a pont ne mosódjon össze. */
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 0.92em;
  color: var(--deep);
  word-break: break-all;
  user-select: all;
}

@media print {
  .share-row {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Lábléc. A nyitóoldalon az embléma is ott van; itt csak a szöveg és a
   hivatkozások — a blog lapjai rövidek, egy második embléma zaj volna.
   --------------------------------------------------------------------------- */

.blog-footer {
  margin-top: 3.5rem;
}

@media print {
  .blog-back,
  .blog-more,
  .skip-link {
    display: none;
  }
}