/*
 * BSide travellers – stíluslap (design system)
 *
 * TARTALOM
 *   1. Design tokenek ........ színek, betűk, méretek, árnyékok, lekerekítések
 *   2. Alapok ................ reset, body, címsorok, bekezdés, link
 *   3. Tipográfia osztályok .. .h1–.h4: a címsor kinézete bármilyen tagen
 *   4. Layout ................ oldal váz, fő tartalmi terület
 *   5. Komponensek
 *      5.1 Fejléc és menü        5.6 Hírlevél
 *      5.2 Szlogen               5.7 Felugró ablak (dialog)
 *      5.3 Gombok                5.8 Süti banner
 *      5.4 Kártyák               5.9 Lábléc
 *      5.5 Szűrő + masonry       5.10 Cikk tartalom
 *   6. Oldalak
 *      6.1 Főoldal (.page-home)  6.2 Rólunk  6.3 Adatvédelmi tájékoztató
 *   7. Segédosztályok
 *
 * TÖRÉSPONTOK (média lekérdezésekben nem lehet változót használni):
 *   ≤1919px  nagy asztali   ≤1200px  laptop   ≤960px  tablet (mobil menü)   ≤767px  mobil
 */

@import url("https://fonts.googleapis.com/css2?family=Peralta&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* =====================================================================
   1. DESIGN TOKENEK
   ===================================================================== */
:root {
  /* Márkaszínek */
  --color-primary: #112724; /* sötétzöld: háttér, szöveg, gombok */
  --color-primary-glass: rgba(17, 39, 36, 0.5); /* áttetsző fejléc */
  --color-accent: #ffd501; /* sárga: gombok, kiemelések */
  --color-accent-soft: #fff7cc;

  /* Világos tónusok */
  --color-white: #ffffff;
  --color-mint-50: #eef9f8; /* világos szöveg sötét háttéren */
  --color-mint-100: #ddf3f0; /* szlogen */
  --color-sky-50: #f6fdfe; /* hírlevél háttér */
  --color-sky-100: #e6f9fe; /* ég színátmenet, süti banner szöveg */
  --color-sky-300: #9fccd9; /* ég színátmenet */

  /* Szürkék */
  --color-gray-50: #f5f5f5;
  --color-gray-300: #dbdbdb;
  --color-gray-400: #cccccc;
  --color-gray-500: #888888;
  --color-gray-700: #505050;
  --color-black: #000000;

  /* Pasztell foltok a főoldali tipp-kollázsban */
  --color-pastel-yellow: #ffecc3;
  --color-pastel-teal: #ccf0ee;
  --color-pastel-blue: #cdd7f0;
  --color-pastel-pink: #ffdce0;

  /* Linkek a cikkek szövegében */
  --color-link: blue;

  /* Betűtípusok */
  --font-display: Peralta, serif; /* címsorok */
  --font-body: Roboto, sans-serif; /* szöveg, kártyák, gombok */
  --font-hero: system-ui; /* főoldali slider szövege */
  --font-footer: Arial, sans-serif;

  /* Címsor méretek (a töréspontoknál lent felülírva) */
  --h1-size: 3.5rem;
  --h2-size: clamp(1.5rem, calc(1.5rem + (0.0417 * (100vw - 480px))), 2rem);
  --h3-size: 2rem;
  --h4-size: 1.6rem;
  --collage-title-size: 2rem; /* képre írt címek a főoldalon */
  --hero-title-size: 4.5rem;
  --hero-text-size: 2rem;
  --nav-link-size: 1.4rem;

  /* Lekerekítések */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Árnyékok */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 2px 2px 4px rgba(255, 213, 1, 0.1);
  --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-photo: 5px 10px 18px var(--color-gray-500);
  --shadow-slide: 0 30px 50px var(--color-gray-700);
  --text-shadow-strong: 2px 2px 4px var(--color-black);
  --text-shadow-soft: 1px 0 3px var(--color-black);

  /* Mozgás */
  --transition-fast: 0.3s ease;
  --transition-slow: 0.5s ease-in-out;
}

@media (min-width: 1919px) {
  :root {
    --h2-size: 1.8rem;
  }
}
@media (max-width: 1919px) {
  :root {
    --h1-size: 3rem;
    --h3-size: 1.8rem;
    --h4-size: 1.5rem;
    --collage-title-size: 1.8rem;
    --hero-title-size: 4rem;
    --hero-text-size: 1.8rem;
    --nav-link-size: 1.2rem;
  }
}
@media (max-width: 1200px) {
  :root {
    --h1-size: 2.8rem;
    --h2-size: 1.5rem;
    --h3-size: 1.5rem;
    --h4-size: 1.4rem;
    --collage-title-size: 1.5rem;
    --hero-title-size: 3.5rem;
    --hero-text-size: 1.5rem;
    --nav-link-size: 1.1rem;
  }
}
@media (max-width: 960px) {
  :root {
    --h1-size: 2.55rem;
    --h2-size: 1.3rem;
    --h3-size: 1.25rem;
    --h4-size: 1.3rem;
    --collage-title-size: 1.25rem;
    --hero-title-size: 3.25rem;
    --hero-text-size: 1.25rem;
  }
}
@media (max-width: 767px) {
  :root {
    --h1-size: 1.5rem;
    --h2-size: 1.1rem;
    --h3-size: 1.2rem;
    --h4-size: 1.1rem;
    --collage-title-size: 1rem;
    --hero-title-size: 1rem;
    --hero-text-size: 1rem;
  }
}

/* =====================================================================
   2. ALAPOK
   ===================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
/* A width/height attribútum csak a képarányt adja (helyfoglalás betöltés előtt), a méretet a CSS */
img {
  height: auto;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 140%;
  background-color: var(--color-primary);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-align: center;
  color: var(--color-primary);
}
h1 {
  font-size: var(--h1-size);
  line-height: 160%;
  padding: 0 5% 1%;
}
h2 {
  font-size: var(--h2-size);
  line-height: 160%;
  padding: 10px 1%;
}
h3 {
  font-size: var(--h3-size);
  padding: 5px 1% 15px;
}
h4 {
  font-size: var(--h4-size);
  line-height: 120%;
  padding: 0 1% 30px;
}
p {
  padding: 10px;
}

/* Billentyűzetes fókusz: jól látható keret mindenhol (sötét háttéren sárga, lent felülírva) */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.navigation :focus-visible,
.slogen :focus-visible,
footer :focus-visible,
.cookie-banner :focus-visible,
.cookie-settings:focus-visible,
.page-home .hero-container :focus-visible {
  outline-color: var(--color-accent);
}
.nav-links :focus-visible {
  outline-color: var(--color-primary); /* sárga menügombon belül */
}
/* Az ugrólink célpontja (main) ne kapjon keretet, csak a fókusz kerüljön oda */
main:focus {
  outline: none;
}
/* "Ugrás a tartalomra": csak billentyűzetes fókuszra jelenik meg */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.75rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 700;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: none;
}

/* Akinek a rendszerében "kevesebb mozgás" van beállítva: nincs animáció, áttűnés */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   3. TIPOGRÁFIA OSZTÁLYOK
   A címsor kinézete leválasztva a tagről: <h2 class="h1"> úgy néz ki,
   mint egy h1, <p class="h3"> mint egy h3. Így a tag a tartalom szerkezetét
   (SEO), az osztály a kinézetet adja meg.
   ===================================================================== */
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-display);
  font-weight: bold;
  text-align: center;
  color: var(--color-primary);
}
.h1 {
  font-size: var(--h1-size);
  line-height: 160%;
  padding: 0 5% 1%;
}
.h2 {
  font-size: var(--h2-size);
  line-height: 160%;
  padding: 10px 1%;
}
.h3 {
  font-size: var(--h3-size);
  line-height: inherit;
  padding: 5px 1% 15px;
}
.h4 {
  font-size: var(--h4-size);
  line-height: 120%;
  padding: 0 1% 30px;
}

/* =====================================================================
   4. LAYOUT
   ===================================================================== */
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
}
/* A fő tartalmi terület kitölti a fejléc és a hírlevél/lábléc közti helyet. */
.blog-content,
.content,
.service-content,
.trick-content,
.home-main {
  flex: 1 1;
}
.home-main {
  display: flex;
  flex-direction: column;
}

/* =====================================================================
   5. KOMPONENSEK
   ===================================================================== */

/* ---------- 5.1 Fejléc és menü ---------- */
.navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-header);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 5%;
  color: var(--color-mint-50);
}
.nav-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}
.logo {
  width: 64px;
  border-radius: 10%;
}
/* "Utazz okosan, gazdaságosan" a logó mellett */
.site-tagline {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: bold;
  line-height: 160%;
  text-align: center;
  padding: 10px 1%;
  color: var(--color-mint-50);
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.menu-toggle svg[hidden] {
  display: none;
}
.nav-links-container {
  display: inline;
  flex-grow: 2;
}
.nav-links {
  list-style-type: none;
  display: inline-flex;
  gap: 0;
  padding: 0;
}
.nav-links li {
  background-color: var(--color-accent);
  border: 2px solid var(--color-primary-glass);
  border-radius: var(--radius-md);
  font-size: var(--nav-link-size);
  margin: 0 6px;
  padding: 1.5% 3%;
  display: inline;
  color: var(--color-primary);
}
.nav-links li:hover {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-mint-50);
}
@media (max-width: 960px) {
  .menu-toggle {
    display: block;
  }
  .navigation {
    flex-direction: column;
  }
  /* Teljes szélességű sor: logó + szlogen balra, hamburger ikon jobbra */
  .nav-container {
    align-self: stretch;
  }
  .site-tagline {
    text-align: left;
    margin-right: auto;
  }
  .nav-links-container {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
  .nav-links-container.open {
    display: flex;
  }
  .nav-links {
    flex-direction: column;
    width: 100%;
  }
  .nav-links li {
    margin: 10px 0;
  }
  .logo {
    width: 60px;
    padding-right: 10px;
  }
}
@media (max-width: 767px) {
  .logo {
    width: 50px;
  }
  /* Keskeny kijelzőn a szlogen inkább törjön sort, mint hogy kitolja a hamburger ikont */
  .site-tagline {
    white-space: normal;
    min-width: 0;
  }
  .menu-toggle {
    flex-shrink: 0;
  }
}

/* ---------- 5.2 Szlogen a fejléc alatt ---------- */
.slogen-text {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: bold;
  line-height: 160%;
  text-align: center;
  padding: 4px;
  color: var(--color-mint-100);
}

/* ---------- 5.3 Gombok ---------- */
/* Sárga, lekerekített gomb: szűrők, süti banner */
.filter-button,
.clear-filter-button,
.cookie-banner button {
  font-family: var(--font-body);
  padding: 6px 12px;
  border: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.filter-button,
.cookie-banner button {
  font-size: 0.9rem;
  background-color: var(--color-accent);
  color: var(--color-primary);
}
.filter-button.active {
  background-color: var(--color-primary);
  color: white;
}
.clear-filter-button {
  font-size: 1rem;
  margin-right: 8px;
  background-color: var(--color-mint-50);
  color: var(--color-primary);
}

/* ---------- 5.4 Kártyák (úti célok, tippek) ---------- */
.card {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  max-width: 550px;
  box-shadow: var(--shadow-card);
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}
.card-show {
  transform: scale(1);
  opacity: 1;
}
.card-hide {
  opacity: 0;
  transform: scale(0.9);
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin: 16px;
}
.card-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 120%;
  text-align: center;
  padding: 0 1% 30px;
  color: var(--color-primary);
}
.card-subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 0;
}
.card-description {
  max-height: 100px;
  font-size: 0.93rem;
  line-height: 1.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 0.5rem;
}
.img-wrapper {
  width: 100%;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  overflow: hidden;
}
.card img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  transition: all var(--transition-slow);
}
.card:hover img {
  scale: 1.15;
}
/* Tippek oldal: kártyák sorban, tördelve */
.trick-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 2%;
  justify-content: center;
}

/* ---------- 5.5 Úti célok: szűrő + masonry ---------- */
.filter-wrapper {
  margin: 16px;
  display: block;
  text-align: center;
}
.filter-header {
  padding-top: 30px;
  padding-bottom: 0;
}
.filter-buttons {
  padding: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
.card-wrapper {
  margin: 2%;
  justify-content: center;
}
.card-result {
  text-align: center;
}
/* JS nélkül rács, JS-sel (js/site.js) oszlopos elrendezés */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  align-items: start;
}
.masonry.masonry-js {
  display: flex;
  gap: 30px;
}
.masonry-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

/* ---------- 5.6 Hírlevél ---------- */
.newsletter {
  background-color: var(--color-sky-50);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1% 5%;
}
.newsletter-title {
  font-weight: 700;
}
.newsletter-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
}
.newsletter-fields {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}
.newsletter-label {
  font-weight: 500;
  margin-bottom: -0.5rem; /* a címke a hozzá tartozó mező fölé simuljon */
}
.newsletter-input {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
/* A beleegyezés szövegében a link ne csak a helyzetéből derüljön ki */
.newsletter-consent a {
  text-decoration: underline;
}
.newsletter-status:empty {
  display: none;
}
.newsletter-status {
  padding: 0;
  font-weight: 500;
}
.newsletter-status.is-error {
  color: #b00020;
}
.newsletter-consent {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.newsletter-button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  cursor: pointer;
}
@media (max-width: 767px) {
  .newsletter-content {
    flex-direction: column;
  }
}

/* ---------- 5.7 Felugró ablak (dialog) ---------- */
.dialog {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  padding: 10px;
  min-width: 300px;
}
.dialog button {
  align-self: center;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  cursor: pointer;
}

/* ---------- 5.8 Süti banner ---------- */
/* Süti beállítások ikon: a jobb alsó sarokban lebeg, nem foglal helyet az oldal tetején */
.cookie-settings {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999; /* a süti banner (1000) alatt */
  display: flex;
  padding: 4px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  border: none;
  cursor: pointer;
}
.cookie-banner {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: var(--color-primary);
  color: var(--color-sky-100);
  z-index: 1000;
  padding: 1%;
}
.cookie-banner-header {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.cookie-banner-title,
.cookie-banner-description {
  color: var(--color-sky-100);
}
.cookie-buttons,
.cookie-options {
  display: flex;
  gap: 2rem;
}
.cookie-options {
  flex-direction: row;
}
.cookie-banner .cookie-button-secondary {
  background-color: var(--color-primary);
  border: none;
  color: var(--color-sky-100);
}

/* ---------- 5.9 Lábléc ---------- */
footer {
  display: block;
  padding: 2rem;
  background-color: var(--color-primary);
  color: var(--color-mint-50);
  font-family: var(--font-footer);
  border-top: 1px solid var(--color-black);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-brand-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  align-items: center;
  justify-content: flex-start;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 120%;
  text-align: center;
  padding: 0 1% 30px;
  color: var(--color-mint-50);
}
.footer-link-section {
  flex: 3 1;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-link-section > * {
  min-width: 150px;
  margin: 0 1rem;
}
.footer-title {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: 700;
  line-height: 120%;
  text-align: left;
  white-space: nowrap;
  padding: 0 1% 30px;
  color: var(--color-mint-50);
}
.footer-link-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-link-section li {
  margin: 0.5rem;
}
.social-links {
  display: flex;
  align-items: center;
}
.social-links li {
  display: inline;
}
.social-soon {
  display: inline-flex;
}
.social-icon {
  filter: invert(1);
}
.social-icon--muted {
  filter: invert(0.5); /* még nincs YouTube csatorna */
}
.footer-bottom {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.875rem;
}
.footer-legal {
  display: flex;
  gap: 1rem;
}
.footer-legal-link {
  padding-right: 80px;
}

/* ---------- 5.10 Cikk tartalom (GrapesJS-ben szerkesztett cikkek) ---------- */
.article-body {
  max-width: 1400px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.content a {
  text-decoration: underline;
  color: var(--color-link);
}
/* GrapesJS rács: .row > .cell (újabb cikkek), .gjs-row > .gjs-cell (régebbiek) */
.article-body .row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  padding: 10px;
}
.article-body .cell {
  min-height: 75px;
  flex-grow: 1;
  flex-basis: 100%;
}
.article-body .gjs-row {
  display: table;
  width: 100%;
  padding: 10px;
}
.gjs-cell {
  justify-content: center;
}
.article-body .gjs-cell {
  display: table-cell;
  width: 8%;
  height: 75px;
}
/* Szövegblokk a cellákban / cellák között */
.article-body .article-text {
  padding: 10px;
}
/* Bekezdések, listák, alcímek a szövegblokkban: a térköz egy üres sornyi (mint a korábbi <br><br>) */
.article-text p,
.article-text ul {
  padding: 0;
  margin: 0 0 1.4em;
}
.article-text ul {
  padding-left: 1.5em;
}
.article-text > :last-child {
  margin-bottom: 0;
}
.article-body .article-subheading {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 140%;
  text-align: left;
  padding: 0;
  margin: 0 0 0.5em;
}
.article-body .article-text--indent {
  margin-left: 10px;
}
@media (max-width: 768px) {
  .article-body .row {
    flex-wrap: wrap;
  }
  .article-body .gjs-cell {
    display: block;
    width: 100%;
  }
}
@media (max-width: 960px) {
  .content .row {
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
/* Fotók "kitűzött kép" stílusban, enyhén elforgatva */
.content img {
  width: 90%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 15px solid white;
  box-shadow: var(--shadow-photo);
  -webkit-box-shadow: var(--shadow-photo);
  -moz-box-shadow: var(--shadow-photo);
  transition: all var(--transition-slow);
  margin-top: 30px;
  margin-bottom: 30px;
}
.content img:nth-child(odd) {
  transform: rotate(-3deg);
}
.content img:hover {
  transform: rotate(0deg);
}

/* =====================================================================
   6. OLDALAK
   ===================================================================== */

/* ---------- 6.1 Főoldal (body.page-home) ---------- */

/* Repülő animáció */
.page-home .animated-airplane-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100vw;
  aspect-ratio: 12/1;
  min-height: 80px;
  max-height: 200px;
  background-image: linear-gradient(var(--color-sky-300), var(--color-sky-100));
  overflow: hidden;
}
.page-home #airplane {
  z-index: 10;
  left: 60%;
  height: 100%;
  animation: airplane-slide 10.5s linear infinite;
}
.page-home #airplane,
.page-home .cloud {
  position: absolute;
}
.page-home .cloud {
  left: -200px;
}
.page-home #cloud-1 {
  animation: cloud-slide 10s linear infinite;
  height: 100%;
  z-index: 15;
}
.page-home #cloud-2 {
  animation: cloud-slide 13.5s linear infinite;
  height: 70%;
  z-index: 8;
}
.page-home #cloud-3 {
  animation: cloud-slide 22.5s linear infinite;
  height: 50%;
  z-index: 5;
}
@keyframes cloud-slide {
  0% {
    left: -200px;
  }
  to {
    left: 100%;
  }
}
@keyframes airplane-slide {
  0% {
    transform: translateY(4%);
  }
  50% {
    transform: translateY(-7%);
  }
  to {
    transform: translateY(4%);
  }
}

/* Lakóautó animáció */
.page-home .animated-rv-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100vw;
  aspect-ratio: 12/1;
  min-height: 80px;
  max-height: 200px;
  background-image: linear-gradient(var(--color-sky-100), var(--color-sky-300));
  overflow: hidden;
  border-bottom: thick solid var(--color-gray-300);
}
.page-home #rv {
  z-index: 10;
  left: 25%;
}
.page-home #rv,
.page-home .forest {
  position: absolute;
  height: 100%;
}
.page-home .forest {
  left: -200px;
  z-index: 5;
  animation: slide 30s linear infinite;
}
.page-home #forest-1 {
  animation-delay: 0s;
}
.page-home #forest-2 {
  animation-delay: 5s;
}
.page-home #forest-3 {
  animation-delay: 7s;
}
.page-home #forest-4 {
  animation-delay: 11s;
}
.page-home .tree {
  position: absolute;
  height: 100%;
  left: -200px;
  z-index: 15;
  animation: slide 15s linear infinite;
}
.page-home #tree-1 {
  animation-delay: 2s;
}
.page-home #tree-2 {
  animation-delay: 6s;
}
.page-home #tree-3 {
  animation-delay: 8s;
}
@keyframes slide {
  0% {
    left: 100%;
  }
  to {
    left: -200px;
  }
}

/* Kevesebb mozgás: a felhők, fák állóképként a helyükön maradnak (különben kiúsznának a képből) */
@media (prefers-reduced-motion: reduce) {
  .page-home .cloud,
  .page-home .forest,
  .page-home .tree,
  .page-home #airplane {
    animation: none !important;
  }
  .page-home #cloud-1 { left: 12%; }
  .page-home #cloud-2 { left: 38%; }
  .page-home #cloud-3 { left: 82%; }
  .page-home #forest-1 { left: 4%; }
  .page-home #forest-2 { left: 34%; }
  .page-home #forest-3 { left: 62%; }
  .page-home #forest-4 { left: 86%; }
  .page-home #tree-1 { left: 16%; }
  .page-home #tree-2 { left: 48%; }
  .page-home #tree-3 { left: 74%; }
}

/* Slider (hero) */
.page-home .hero-container {
  position: relative;
  width: 100vw;
  background-color: var(--color-gray-50);
  aspect-ratio: 16/9;
  overflow: hidden;
}
.page-home #slide {
  width: max-content;
}
.page-home .item {
  overflow: hidden;
  width: 200px;
  aspect-ratio: 2/3;
  background-position: 50% 50%;
  display: inline-block;
  transition: 0.5s;
  background-size: cover;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-slide);
}
.page-home .item:first-child,
.page-home .item:nth-child(2) {
  left: 0;
  top: 0;
  transform: translate(0);
  border-radius: 0;
  width: 100%;
  aspect-ratio: 16/9;
  box-shadow: none;
}
.page-home .item:nth-child(3) {
  left: 70%;
}
.page-home .item:nth-child(4) {
  left: calc(70% + 220px);
}
.page-home .item:nth-child(5) {
  left: calc(70% + 440px);
}
.page-home .item:nth-child(n + 6) {
  display: none;
  left: calc(70% + 660px);
  opacity: 0;
}
.page-home .item .content {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 55%;
  text-align: left;
  padding: 0;
  color: #fff;
  text-shadow: var(--text-shadow-strong);
  transform: translateY(-50%);
  display: none;
  font-family: var(--font-hero);
}
.page-home .item:nth-child(2) .content {
  display: block;
  z-index: 11111;
}
.page-home .item .name {
  font-size: var(--hero-title-size);
  font-weight: 700;
  padding-bottom: 1rem;
  animation: showcontent 1s ease-in-out 1 forwards;
}
.page-home .item .desc,
.page-home .item .name {
  line-height: 130%;
  opacity: 0;
}
.page-home .item .desc {
  font-size: var(--hero-text-size);
  margin: 20px 0;
  animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}
/* "Elolvasom" gomb */
.page-home .item .hero-button {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: 5%;
  font-size: var(--hero-text-size);
  padding: 2% 4%;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.6s 1 forwards;
}
.page-home .item .hero-button:hover {
  background-color: var(--color-white);
}
/* Előző / következő gombok */
.page-home .buttons {
  display: inline-flex;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  position: absolute;
  bottom: 30px;
  z-index: 500;
  text-align: center;
  width: 100%;
}
.page-home .buttons button {
  background-color: var(--color-accent);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  transition: 0.5s;
}
.page-home .buttons #pause {
  font-size: 1rem; /* a ❚❚ / ▶ jel kisebb, mint a nyilak */
}
.page-home .buttons button:hover {
  background-color: var(--color-primary);
  color: var(--color-mint-50);
}
@media (max-width: 960px) {
  .page-home .item:nth-child(3),
  .page-home .item:nth-child(4),
  .page-home .item:nth-child(5) {
    display: none;
  }
  .page-home .buttons button {
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 767px) {
  .page-home .item .content {
    top: 50%;
    left: 3%;
    width: 80%;
  }
  .page-home .item .desc {
    font-size: 0.7rem;
    margin: 5px 0;
  }
  .page-home .buttons {
    bottom: 10px;
  }
  .page-home .buttons button {
    font-size: 1.1rem;
  }
}
@keyframes showcontent {
  0% {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(33px);
  }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

/* "Népszerű élménybeszámolók" kollázs */
.page-home .blog {
  padding: 2% 5% 5%;
  background-image: linear-gradient(var(--color-sky-100), var(--color-white), var(--color-sky-100));
}
.page-home .collage-blog {
  padding: 2% 0;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}
.page-home .collage-blog div {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.page-home .collage-card {
  white-space: normal;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* "Legjobb bejegyzések a tippek rovatból" kollázs */
.page-home .trick {
  padding: 2% 5% 5%;
}
.page-home .collage {
  padding: 2% 0;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "..   two two    two    three  four ..    .."
    "one  two two    two    five   five six   .."
    "..   two two    two    five   five seven eight"
    "nine ten eleven eleven twelve ..   ..    .."
    "..   ..  eleven eleven ..     ..   ..    ..";
}
.page-home .collage div {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.page-home .collage :first-child {
  grid-area: one;
}
.page-home .collage :nth-child(2) {
  grid-area: two;
}
.page-home .collage :nth-child(3) {
  grid-area: three;
}
.page-home .collage :nth-child(4) {
  grid-area: four;
  background-color: var(--color-pastel-yellow);
  border-bottom-right-radius: 100%;
}
.page-home .collage :nth-child(5) {
  grid-area: five;
}
.page-home .collage :nth-child(6) {
  grid-area: six;
  background-color: var(--color-pastel-teal);
  border-top-right-radius: 100%;
}
.page-home .collage :nth-child(7) {
  grid-area: seven;
}
.page-home .collage :nth-child(8) {
  grid-area: eight;
  background-color: var(--color-pastel-blue);
  border-radius: 100%;
}
.page-home .collage :nth-child(9) {
  grid-area: nine;
  background-color: var(--color-pastel-pink);
  border-top-left-radius: 100%;
}
.page-home .collage :nth-child(10) {
  grid-area: ten;
}
.page-home .collage :nth-child(11) {
  grid-area: eleven;
}
.page-home .collage :nth-child(12) {
  grid-area: twelve;
}

/* Közös: képre írt cím és nagyítható kép mindkét kollázsban */
.page-home .collage-card p,
.page-home .collage p {
  z-index: 100;
  position: absolute;
  padding: 10px;
  font-size: var(--collage-title-size);
  color: #fff;
  text-shadow: var(--text-shadow-soft);
}
.page-home .collage-card p {
  line-height: 120%;
}
.page-home .collage-blog img,
.page-home .collage img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  transition: all var(--transition-slow);
}
.page-home .collage-blog img:hover,
.page-home .collage img:hover {
  scale: 1.15;
  rotate: 3deg;
}
@media (max-width: 767px) {
  .page-home .collage-blog {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-home {
    line-height: 160%;
  }
}

/* ---------- 6.2 Rólunk ---------- */
.about-content-flex {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: center;
  padding-top: 2%;
  padding-bottom: 2%;
}
@media (max-width: 960px) {
  .about-content-flex {
    flex-direction: column;
  }
}
.about-photo {
  width: 90%;
  height: auto;
}

/* ---------- 6.3 Adatvédelmi tájékoztató (.legal) ---------- */
.legal {
  max-width: 900px;
  min-width: 0; /* flex elemként se nőjön a széles táblázat miatt a képernyőnél szélesebbre */
  padding-left: 16px;
  padding-right: 16px;
  overflow-wrap: anywhere; /* hosszú URL-ek mobilon */
}
.legal h2,
.legal h3,
.legal h4 {
  text-align: left;
  scroll-margin-top: 110px; /* a ragadós fejléc ne takarja ki a horgonyra ugráskor */
}
.legal h2 {
  font-size: var(--h4-size);
  padding: 2rem 10px 0.5rem;
}
.legal h3,
.legal h4 {
  font-family: var(--font-body);
  font-weight: 700;
  padding: 1.25rem 10px 0;
}
.legal h3 {
  font-size: 1.15rem;
}
.legal h4 {
  font-size: 1rem;
}
.legal-meta {
  text-align: center;
  color: var(--color-gray-700);
}
.legal ul,
.legal ol {
  padding: 0 10px 0 2.5rem;
}
.legal ol ol {
  padding-left: 1.75rem;
}
.legal li {
  margin: 0.4rem 0;
}
/* Tartalomjegyzék */
.legal-toc {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin: 1rem 10px;
  padding: 0.5rem 0 1rem;
}
.legal .legal-toc-title {
  font-size: 1.15rem;
  padding-top: 0.5rem;
}
/* Fogalmak és elérhetőségek */
.legal-terms {
  padding: 0 10px;
}
.legal-terms dt {
  font-weight: 700;
  margin-top: 0.75rem;
}
.legal-contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  padding: 10px;
}
.legal-contact dt {
  font-weight: 700;
}
.legal-contact a[href^="tel:"] {
  display: inline-block;
  padding: 4px 0; /* legalább 24px magas érintési célpont */
}
@media (max-width: 767px) {
  .legal-contact {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .legal-contact dd {
    margin-bottom: 0.5rem;
  }
}
/* Táblázat: szűk kijelzőn vízszintesen görgethető */
.legal-table-wrapper {
  overflow-x: auto;
  margin: 10px;
}
.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  background-color: var(--color-white);
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--color-gray-400);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background-color: var(--color-gray-50);
}

/* =====================================================================
   7. SEGÉDOSZTÁLYOK
   ===================================================================== */
/* Topográfiai háttérminta a tartalmi oldalakon */
.bg-pattern {
  background-image: url(/assets/img/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.flex-center {
  display: flex;
  justify-content: center;
}
/* függőlegesen is középre (flexben, pl. .flex-center mellé) */
.items-center {
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
/* normál vastagság félkövér szövegen belül */
.font-normal {
  font-weight: 400;
}
.nowrap {
  text-wrap: nowrap;
}
/* Csak képernyőolvasónak szóló szöveg (pl. "új lapon nyílik") */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Új lapon nyíló szöveges link jele (a felolvasott szöveget a .visually-hidden adja) */
a.ext::after {
  content: "\2197";
  content: "\2197" / "";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.8em;
  text-decoration: none;
}
/* A hidden attribútum mindig rejtsen el (akkor is, ha egy szabály display-t ad az elemnek) */
[hidden] {
  display: none !important;
}