/* ============================================
   KERÜLŐ NAPLÓ — extra stílusok
   Linkelhető a kerulo-naplo.html-ben:
   <link href="../css/naplo-extra.css" rel="stylesheet">
   ============================================ */

/* ------------------------------------------
   1. ARROW BUTTON — hover animáció
   Alapból rejtett, jobbról animálódik be hoverre
   ------------------------------------------ */

.modul_arrow {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.modul_1x1:hover .modul_arrow,
.modul_2x2:hover .modul_arrow,
.modul_1x2:hover .modul_arrow,
.modul_2x1:hover .modul_arrow {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.modul_arrow.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ------------------------------------------
   2. KÁRTYÁK — alap háttér és szöveg
   A téma változókat használjuk
   ------------------------------------------ */

.modul_1x1,
.modul_2x2 {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: outline 0.15s ease;
}

.modul_1x1 h5,
.modul_2x2 h5,
.modul_1x1 p,
.modul_2x2 p {
  color: var(--_theme---text);
}

/* ------------------------------------------
   3. KÉPES KÁRTYA — fehér szöveg
   Ha van háttérkép, a szöveg mindig fehér
   ------------------------------------------ */

.modul_1x1:has(.bg_image-abs) h5,
.modul_1x1:has(.bg_image-abs) p,
.modul_2x2:has(.bg_image-abs) h5,
.modul_2x2:has(.bg_image-abs) p {
  color: white;
}

/* Arrow gomb — képes kártyán mindig fehér, témától függetlenül */
.modul_1x1:has(.bg_image-abs) .arrow-button,
.modul_2x2:has(.bg_image-abs) .arrow-button,
.modul_1x2:has(.bg_image-abs) .arrow-button,
.modul_2x1:has(.bg_image-abs) .arrow-button {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  color: white;
}

.modul_1x1:has(.bg_image-abs) .arrow-svg path,
.modul_2x2:has(.bg_image-abs) .arrow-svg path,
.modul_1x2:has(.bg_image-abs) .arrow-svg path,
.modul_2x1:has(.bg_image-abs) .arrow-svg path {
  fill: white;
}

/* Dark módban képes kártyán is fehér marad */
.u-theme-dark .modul_1x1:has(.bg_image-abs) .arrow-button,
.u-theme-dark .modul_2x2:has(.bg_image-abs) .arrow-button,
.u-theme-dark .modul_1x2:has(.bg_image-abs) .arrow-button,
.u-theme-dark .modul_2x1:has(.bg_image-abs) .arrow-button {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.u-theme-dark .modul_1x1:has(.bg_image-abs) .arrow-svg path,
.u-theme-dark .modul_2x2:has(.bg_image-abs) .arrow-svg path,
.u-theme-dark .modul_1x2:has(.bg_image-abs) .arrow-svg path,
.u-theme-dark .modul_2x1:has(.bg_image-abs) .arrow-svg path {
  fill: white;
}

/* Képmentes kártyákon — téma szerinti szín */
.modul_1x1:not(:has(.bg_image-abs)) .arrow-svg path,
.modul_2x2:not(:has(.bg_image-abs)) .arrow-svg path,
.modul_1x2:not(:has(.bg_image-abs)) .arrow-svg path,
.modul_2x1:not(:has(.bg_image-abs)) .arrow-svg path {
  fill: var(--_theme---text);
}

/* ------------------------------------------
   4. AKTÍV KÁRTYA — kiemelés
   ------------------------------------------ */

.modul_2x2.is-active,
.modul_1x1.is-active {
  outline: 2px solid var(--base-color-brand--kerulo--brand-400);
  outline-offset: -2px;
}

/* ------------------------------------------
   5. DARK TÉMA — napló specifikus elemek
   ------------------------------------------ */

/* Poszt tartalom jobb oldal */
.u-theme-dark .naplo_right-col {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
}

.u-theme-dark .post-title,
.u-theme-dark .post-body,
.u-theme-dark .post_caption {
  color: var(--_theme---text);
}

.u-theme-dark .post-date {
  color: var(--base-color-brand--kerulo--brand-400);
}

/* Grid kártyák sötét módban */
.u-theme-dark .modul_1x1,
.u-theme-dark .modul_2x2,
.u-theme-dark .modul_1x2,
.u-theme-dark .modul_2x1 {
  background-color: var(--base-color-brand--kerulo--brand-800);
  border-color: var(--_theme---border);
}

.u-theme-dark .modul_1x1 h5,
.u-theme-dark .modul_2x2 h5,
.u-theme-dark .modul_1x2 h5,
.u-theme-dark .modul_2x1 h5,
.u-theme-dark .modul_1x1 p,
.u-theme-dark .modul_2x2 p,
.u-theme-dark .modul_1x2 p,
.u-theme-dark .modul_2x1 p {
  color: var(--_theme---text);
}

/* Képes kártyák sötét módban — szöveg marad fehér */
.u-theme-dark .modul_1x1:has(.bg_image-abs) h5,
.u-theme-dark .modul_1x1:has(.bg_image-abs) p,
.u-theme-dark .modul_2x2:has(.bg_image-abs) h5,
.u-theme-dark .modul_2x2:has(.bg_image-abs) p,
.u-theme-dark .modul_1x2:has(.bg_image-abs) h5,
.u-theme-dark .modul_1x2:has(.bg_image-abs) p,
.u-theme-dark .modul_2x1:has(.bg_image-abs) h5,
.u-theme-dark .modul_2x1:has(.bg_image-abs) p {
  color: white;
}

/* Grid háttér sötét módban */
.u-theme-dark .grid_naplo_left-col {
  background-color: var(--base-color-brand--kerulo--brand950);
}

/* Napló content wrapper sötét módban */
.u-theme-dark .naplo_content_wrapper {
  background-color: var(--_theme---background);
}

/* Jobb oszlop előnézet — ne olvadjon a sötét háttérbe */
.u-theme-dark .naplo_right-col .post-title,
.u-theme-dark .naplo_right-col .post-body,
.u-theme-dark .naplo_right-col .naplo-list-map-link-wrapper-copy,
.u-theme-dark .naplo_right-col .separate-page-link {
  color: var(--_theme---text);
}

.u-theme-dark .naplo_right-col a {
  color: var(--base-color-brand--kerulo--brand-400);
}

/* Post cover kép kerete */
.u-theme-dark .naplo_image-wrapper {
  border-color: var(--_theme---border);
}

/* ------------------------------------------
   6. POSZT KÁRTYA — post-card class
   ------------------------------------------ */

.post-card {
  cursor: pointer;
}

.poat-card {
  cursor: pointer;
}

/* ------------------------------------------
   7. KÁRTYA KÉPEK — cover fit
   ------------------------------------------ */

.bg_image-abs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------
   8. GRID SPANS — kártya méretek
   ------------------------------------------ */

/*
 * Webflow export: grid-template-rows: 1fr auto — az első 1fr sor felveszi a függőleges
 * maradék helyet → vastag üres sáv a rácsban (Designerben másképp mérhető, mint élesen).
 * Fix: explicit sorok kikapcsolása + fix auto-rows + kártyák kitöltik a cellát (height: 100%).
 * Fontos: naplo-extra.css a <head>-ben a kerulo-client.webflow.css UTÁN legyen.
 */
.grid_naplo_left-col {
  --naplo-grid-row: 13.5rem;
  --naplo-grid-gap: 4px;
  grid-template-rows: none;
  grid-auto-flow: dense;
  align-content: start;
  align-items: stretch;
  grid-auto-rows: var(--naplo-grid-row);
}

/* Desktop: Webflow fix magasság (13.5 / 27 rem) nem tartalmazza a row-gap-et → 2 soros modul alja „lecsúszik” */
@media screen and (min-width: 992px) {
  .grid_naplo_left-col > .modul_1x1.post-card,
  .grid_naplo_left-col > .modul_1x1.poat-card {
    grid-column: span 1;
    grid-row: span 1;
    height: 100%;
    min-height: var(--naplo-grid-row);
    box-sizing: border-box;
  }

  .grid_naplo_left-col > .modul_2x2.post-card,
  .grid_naplo_left-col > .modul_2x2.poat-card {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%;
    min-height: calc(2 * var(--naplo-grid-row) + var(--naplo-grid-gap));
    box-sizing: border-box;
  }

  .grid_naplo_left-col > .modul_1x2.post-card,
  .grid_naplo_left-col > .modul_1x2.poat-card {
    grid-column: span 1;
    grid-row: span 2;
    height: 100%;
    min-height: calc(2 * var(--naplo-grid-row) + var(--naplo-grid-gap));
    box-sizing: border-box;
  }

  .grid_naplo_left-col > .modul_2x1.post-card,
  .grid_naplo_left-col > .modul_2x1.poat-card {
    grid-column: span 2;
    grid-row: span 1;
    height: 100%;
    min-height: var(--naplo-grid-row);
    box-sizing: border-box;
  }
}

/* 1x2 / 2x1 — háttér + padding (Webflow export) */
.modul_1x2 {
  background-color: var(--base-color-brand--kerulo--light-100);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.modul_2x1 {
  background-color: var(--base-color-brand--kerulo--light-100);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* ≤991px: Webflow 2 oszlop; fix 13.5rem magasság ≠ cellaszélesség → téglalap.
 * auto sor + aspect-ratio: 1x1 négyzetes, többoszlopos modulok aránya követhető. */
@media screen and (max-width: 991px) {
  .grid_naplo_left-col {
    grid-auto-rows: auto;
  }

  .grid_naplo_left-col > .modul_1x1.post-card,
  .grid_naplo_left-col > .modul_1x1.poat-card {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .grid_naplo_left-col > .modul_2x1.post-card,
  .grid_naplo_left-col > .modul_2x1.poat-card {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .grid_naplo_left-col > .modul_1x2.post-card,
  .grid_naplo_left-col > .modul_1x2.poat-card {
    height: auto;
    aspect-ratio: 1 / 2;
  }

  .grid_naplo_left-col > .modul_2x2.post-card,
  .grid_naplo_left-col > .modul_2x2.poat-card {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ------------------------------------------
   9. POSZT TARTALOM — tipográfia és bekezdések
   ------------------------------------------ */

.post-body p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* Cím és excerpt közötti távolság — felülírja a Webflow 1.25rem gap-jét */
.modul_text-wrapper {
  gap: 0.5rem;
  row-gap: 0.5rem;
}

/* Háttérkép hover — alacsonyabb opacity */
.modul_1x1:has(.bg_image-abs):not(.is-active):hover .bg_image-abs,
.modul_2x2:has(.bg_image-abs):not(.is-active):hover .bg_image-abs,
.modul_1x2:has(.bg_image-abs):not(.is-active):hover .bg_image-abs,
.modul_2x1:has(.bg_image-abs):not(.is-active):hover .bg_image-abs {
  opacity: 0.35;
}

.post-body p:last-child {
  margin-bottom: 0;
}

.post-body h2,
.post-body h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* ------------------------------------------
   10. KÁRTYA HOVER — excerpt beúszás felülről
   ------------------------------------------ */

/* Az excerpt alapból rejtett és fentről tolva */
.modul_excerpt {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  color: var(--_theme---text);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Hoverre megjelenik */
.modul_1x1:hover .modul_excerpt,
.modul_2x2:hover .modul_excerpt,
.modul_1x2:hover .modul_excerpt,
.modul_2x1:hover .modul_excerpt {
  opacity: 1;
  transform: translateY(0);
}

/* Aktív kártyán is látszik */
.modul_1x1.is-active .modul_excerpt,
.modul_2x2.is-active .modul_excerpt,
.modul_1x2.is-active .modul_excerpt,
.modul_2x1.is-active .modul_excerpt {
  opacity: 1;
  transform: translateY(0);
}

/* Képes kártyákon fehér marad */
.modul_1x1:has(.bg_image-abs) .modul_excerpt,
.modul_2x2:has(.bg_image-abs) .modul_excerpt,
.modul_1x2:has(.bg_image-abs) .modul_excerpt,
.modul_2x1:has(.bg_image-abs) .modul_excerpt {
  color: white;
}

/* Cím hoverre halványodik */
.modul_1x1:hover h5,
.modul_2x2:hover h5,
.modul_1x2:hover h5,
.modul_2x1:hover h5 {
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

/* ------------------------------------------
   11. AKTÍV KÉPES KÁRTYA — szürke kép + fekete szöveg
   ------------------------------------------ */

/* Aktív képes kártyán a kép szürke és 50% opacity */
.modul_1x1.is-active .bg_image-abs,
.modul_2x2.is-active .bg_image-abs,
.modul_1x2.is-active .bg_image-abs,
.modul_2x1.is-active .bg_image-abs {
  mix-blend-mode: luminosity;
  opacity: 0.5;
}

/* Aktív képes kártyán a szöveg fekete */
.modul_1x1.is-active:has(.bg_image-abs) h5,
.modul_2x2.is-active:has(.bg_image-abs) h5,
.modul_1x2.is-active:has(.bg_image-abs) h5,
.modul_2x1.is-active:has(.bg_image-abs) h5,
.modul_1x1.is-active:has(.bg_image-abs) .modul_excerpt,
.modul_2x2.is-active:has(.bg_image-abs) .modul_excerpt,
.modul_1x2.is-active:has(.bg_image-abs) .modul_excerpt,
.modul_2x1.is-active:has(.bg_image-abs) .modul_excerpt {
  color: var(--_theme---text);
}

/* Arrow is sötét aktív képes kártyán */
.modul_1x1.is-active:has(.bg_image-abs) .arrow-svg path,
.modul_2x2.is-active:has(.bg_image-abs) .arrow-svg path,
.modul_1x2.is-active:has(.bg_image-abs) .arrow-svg path,
.modul_2x1.is-active:has(.bg_image-abs) .arrow-svg path {
  fill: var(--_theme---text);
}

/* Nem aktív képes kártyákon visszaáll a kép normálisra hoverre */
.modul_1x1:not(.is-active):hover .bg_image-abs,
.modul_2x2:not(.is-active):hover .bg_image-abs,
.modul_1x2:not(.is-active):hover .bg_image-abs,
.modul_2x1:not(.is-active):hover .bg_image-abs {
  mix-blend-mode: normal;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* ------------------------------------------
   12. KÉPES KÁRTYÁN HOVER — szürke kép + fekete szöveg
   ------------------------------------------ */

/* Képes kártyán hoverre: szürke kép */
.modul_1x1:has(.bg_image-abs):hover .bg_image-abs,
.modul_2x2:has(.bg_image-abs):hover .bg_image-abs,
.modul_1x2:has(.bg_image-abs):hover .bg_image-abs,
.modul_2x1:has(.bg_image-abs):hover .bg_image-abs {
  mix-blend-mode: luminosity;
  opacity: 0.5;
  transition: opacity 0.25s ease, mix-blend-mode 0.25s ease;
}

/* Képes kártyán hoverre fekete szöveg */
.modul_1x1:has(.bg_image-abs):hover h5,
.modul_2x2:has(.bg_image-abs):hover h5,
.modul_1x2:has(.bg_image-abs):hover h5,
.modul_2x1:has(.bg_image-abs):hover h5,
.modul_1x1:has(.bg_image-abs):hover .modul_excerpt,
.modul_2x2:has(.bg_image-abs):hover .modul_excerpt,
.modul_1x2:has(.bg_image-abs):hover .modul_excerpt,
.modul_2x1:has(.bg_image-abs):hover .modul_excerpt {
  color: var(--_theme---text);
}

.single-post-image-wrapper {
  width: 100%;
}

.single-post-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-top: 1px solid var(--_theme---border);
}

.image_caption {
  font-size: 0.8rem;
  color: var(--_theme---text-secondary);
  margin-top: 0.35rem;
}

/* ------------------------------------------
   GRADIENS PLACEHOLDER — kép nélküli posztok
   Cseréld le a naplo-extra.css-ben a korábbi
   .naplo-gradient-placeholder szabályt
   ------------------------------------------ */

.naplo-gradient-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-top: 1px solid var(--_theme---border);
  position: relative;
  overflow: hidden;
  background-color: var(--_theme---background);
}

.naplo-gradient-placeholder canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Napló fejléc — minimális ragasztó (Webflow: kerulo-client.webflow.css + shrink JS)
   Sticky: exportban nincs. z-index: .modul_text-wrapper 100, .modul_arrow 200 → fejléc fölé. */
.naplo_header-section {
  position: sticky;
  top: 6rem;
  z-index: 210;
  width: 100%;
  background-color: var(--_theme---background);
  transition: background-color 0.2s ease, margin-top 0.24s ease;
}

.naplo_header-section.shrinked {
  background-color: var(--_theme---background-2);
  transition-delay: 0.12s;
}

/* Shrinked kinézet: a JS a sectionre teszi a .shrinked-et (nem a címre) — descendant szabályok */
.naplo_header-section .container-large.padding-vertical.padding-medium,
.naplo_header-section .container-large {
  transition: padding-top 0.24s ease, padding-bottom 0.24s ease;
}

.naplo_header-section.shrinked .container-large.padding-vertical.padding-medium,
.naplo_header-section.shrinked .container-large {
  padding-top: 0;
  padding-bottom: 0;
  transition-delay: 0.12s;
}

.naplo_header-section .naplo-header-sticky {
  transition: grid-row-gap 0.24s ease;
}

.naplo_header-section.shrinked .naplo-header-sticky {
  align-items: center;
  grid-row-gap: 0;
  transition-delay: 0.12s;
}

.naplo_header-section .heading-style-h3-naplo {
  transition: font-size 0.24s ease, line-height 0.24s ease;
}

.naplo_header-section.shrinked .heading-style-h3-naplo {
  font-size: 1.125rem;
  line-height: 1.2;
  transition-delay: 0.12s;
}

.naplo_header-section .naplo_header_message {
  max-height: 10rem;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.18s ease, max-height 0.24s ease;
}

.naplo_header-section.shrinked .naplo_header_message {
  max-height: 0;
  opacity: 0;
  transition-delay: 0.12s;
}

/* Gyűjtő oldal: tartalom ne menjen a sticky fejléc fölé */
.naplo_content_wrapper,
.naplo_left-col,
.naplo_right-col {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 991px) {
  .naplo_header-section {
    top: 4rem;
  }
}

.naplo_image-wrapper .naplo-gradient-placeholder {
  width: 100%;
  min-height: 300px; /* fallback ha az aspect-ratio nem működik flex-ben */
}

/* ------------------------------------------
   NAV: Napló aktív (listing + poszt)
   Webflow w-nav JS törli a w--current-et, ha az URL nem egyezik
   (pl. poszt: /szavak/posts/... vs link: /szavak/kerulo-naplo.html)
   ------------------------------------------ */
body.page-naplo .nav_menu a.nav_menu_link[href="/szavak/kerulo-naplo.html"] {
  color: var(--base-color-brand--kerulo--brand-400);
  text-decoration: underline;
}