* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* HERO */
.hero-group {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

/* VIDEO */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* HEADLINE */
.hero-title {
  position: absolute;
  top: 26vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff; 
  z-index: 2;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  /* text-shadow: 0 2px 12px rgba(0,0,0,0.35); */
  width: min(92vw, 900px);
}

.hero-title-desktop { display: block; }
.hero-title-mobile  { display: none; }

/* NAV */
.hero-nav {
  position: absolute;
  top: 45vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero-nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
  justify-content: center;
}

.hero-nav a {
  position: relative;
  padding: 6px 10px;
  border-radius: 4px;

  font-size: 20px;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

/* =================================================
   INTRO – ALAP SZÖVEGSZÍN (KÉK)
   ================================================= */
.hero-nav a.is-intro {
  color: #7BC2FF;
  opacity: 1;
}

/* =================================================
   HOVER HÁTTÉR – ALAPÉRTELMEZETT: SÁRGA
   (Conservation / Science / Movie)
   ================================================= */
.hero-nav a::before {
  content: "";
  position: absolute;
  inset: 0;

  background: #f4c430; /* SÁRGA */
  border-radius: 4px;

  opacity: 0;
  z-index: -1;

  transition: opacity 0.2s ease;
}

/* =================================================
   INTRO HOVER HÁTTÉR – KÉK (FELÜLÍRÁS)
   ================================================= */
.hero-nav a.is-intro::before {
  background: #6EC1E4; /* KÉK */
}

/* =================================================
   HOVER ÁLLAPOT – FEHÉR FELIRAT MINDENHOL
   ================================================= */
.hero-nav a:hover {
  color: #fff;
  opacity: 1;
}

.hero-nav a:hover::before {
  opacity: 1;
}

/* MARQUEE */
.hero-marquee {
  position: absolute;
  bottom: 140px;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee var(--marquee-duration, 18s) linear infinite;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0.9;
  padding-right: var(--marquee-gap, 64px);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 800px))); }
}

/* CTA */
.hero-cta {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.btn {
  background: #f4c430;
  color: #000;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

.btn:hover {
  background: #73673E;
  color: #fff;
  transform: translateY(-1px);
}

/* TAP TO PLAY (shared style: centered, slightly lower – like index.html)
   NOTE: Text is controlled in HTML/JS; CSS keeps it compact and prevents wrapping.
*/
.video-play{
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  z-index: 3;

  display: none; /* shown only when .video-needs-click is present */

  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: auto;
}

.hero-group.video-needs-click .video-play{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Wrapper becomes positioning context for overlay button */
.media-wrap{ position: relative; }

/* INLINE VIDEO – TAP TO PLAY (same look + placement as hero) */
.inline-video-play{
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  z-index: 3;

  display: none; /* shown only when .video-needs-click is present */

  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: auto;
}

.video-needs-click .inline-video-play{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* MOBILE */
@media (max-width: 640px) {
  .video-play,
  .inline-video-play{
    top: 78%;
  }
  
  .hero-title {
    top: 14vh;
    font-size: clamp(28px, 6.2vw, 38px);
    width: 92vw;
  }

  .hero-title-desktop { display: none; }
  .hero-title-mobile  { display: block; }

  .hero-nav {
    top: 48vh;
    width: 92vw;
  }

  .hero-nav ul {
    flex-direction: column;
    gap: 14px;
  }

  .hero-nav a {
    font-size: 18px;
  }

  .hero-marquee {
    bottom: 118px;
  }

  .marquee-content {
    font-size: 11px;
  }

  .hero-cta {
    bottom: 54px;
  }
}

/* LANDSCAPE PHONE */
@media (max-height: 520px) and (orientation: landscape) {

  .hero-title {
    top: 10vh;
    font-size: clamp(26px, 4.2vw, 42px);
  }

  .hero-nav {
    top: 44vh;
  }

  .hero-nav ul {
    flex-direction: row;
    gap: 22px;
  }

  .hero-marquee {
    bottom: 92px;
  }

  .marquee-content {
    font-size: 11px;
  }

  .hero-cta {
    bottom: 38px;
  }
}


/* ================================
   FOOTER
================================ */
.site-footer{ color:#fff; }

.site-footer__main{
  background:#333333;
  padding: 24px 0;  /* 28px → 24px, még szűkebben */
}

.site-footer__inner{
  width: min(50%, 92vw);  /* 1100px → 1080px */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 130px 1fr 330px;  /* 140px → 130px, 340px → 330px */
  gap: 12px;  /* 14px → 12px */
  align-items: center;  /* center helyett */
}

.site-footer__logo{
  max-width: 130px;  /* 140px → 130px */
  width: 100%;
  height: auto;
  display: block;
}

.site-footer__col--left{
  justify-self: center;  /* center helyett */
}

.site-footer__col--center{
  align-self: center;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site-footer__program{ text-align:center; }

.site-footer__title{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 15px;  /* 16px → 15px */
  text-transform: uppercase;
  line-height: 1.15;  /* 1.2 → 1.15 */
  max-width: 340px;  /* 360px → 340px */
  margin: 0 auto;
  text-align: center;
}

.site-footer__subtitle{
  margin-top: 4px;  /* 6px → 4px */
  font-weight: 700;
  letter-spacing: .03em;
  font-size: 12px;  /* 13px → 12px */
  text-transform: uppercase;
  opacity: .9;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.site-footer__social{
  margin-top: 12px;  /* 16px → 12px */
  display: flex;
  justify-content: center;
  gap: 10px;  /* 12px → 10px */
}

.social-btn{
  width: 32px;
  height: 32px;
  opacity: 0.9;
  border-radius: 999px;
  background: #4C4C4C;  /* default */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.social-btn:hover{
  background: #f4c430;
  color: #000;
  opacity: 1;
  transform: scale(1.1);
}

/* Social icons (local SVGs inside the round buttons)
   NOTE: these icons are included via <img>, so `color` does NOT affect them.
   We force them to render as white by inverting the rasterized result.
*/
.social-btn img{
  width: 16px;
  height: 16px;
  display: block;

  /* Make dark/black SVGs appear white when used as <img> */
  filter: brightness(0) invert(1);
}

/* Keep icons readable on hover as well */
.social-btn:hover img{
  filter: brightness(0) invert(1);
}

@media (max-width: 640px){
  .social-btn{
    width: 30px;
    height: 30px;
  }

  .social-btn img{
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
  }
}
.site-footer__col--right{
  display: grid;
  justify-items: start;
  row-gap: 1px;  /* 10px → 8px */
}

.site-footer__heading{
  font-weight: 600;
  margin-bottom: 1px;  /* 6px → 4px */
  font-size: 12px;  /* 13px → 12px */
  opacity: .95;
}

.site-footer__links{
  list-style: none;
  margin: 0;  /* 6px → 4px */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(60px, 1fr));  /* min 60px, max 1fr */  /* 110px → 100px */
  column-gap: 2%;  /* 26px → 20px */
  row-gap: 4px;  /* 8px → 6px */
}

.site-footer__links a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 12px;  /* 13px → 12px */
  line-height: 1.15;
  display: inline-block;
  padding: 0.5vh 0.1vw;  /* 2px → 1px */
}

.site-footer__links a:hover{ color:#f4c430; }

.site-footer__contact{
  margin-top: 4px;  /* 6px → 4px */
  display: inline-flex;
  gap: 6px;  /* 8px → 6px */
  align-items: center;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  font-size: 12px;
}

.site-footer__contact:hover{
  color: #f4c430;
  opacity: 1;
}

.site-footer__bottom{
  background: #000;
  text-align: center;
  padding: 10px 12px;
  font-size: 11px;  /* 12px → 11px */
  color: rgba(255,255,255,.85);
}

/* Responsive */
@media (max-width: 860px){
  .site-footer__inner{
    grid-template-columns: 110px 1fr;
    gap: 14px;
  }

  .site-footer__logo{
    max-width: 110px;
  }

  .site-footer__col--left{
    justify-self: start;
  }

  .site-footer__col--right{
    display: none;
  }

  .site-footer__col--center{
    transform: translateY(0);
    text-align: center;
  }
}

@media (max-width: 640px){
  .site-footer__main{
    padding: 18px 0;  /* 24px → 18px */
  }

  .site-footer__inner{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .site-footer__logo{
    max-width: 90px;  /* 100px → 90px */
    margin: 0 auto;
  }

  /* Mobile: keep partner/Angola SVG logo centered (prevent drifting to the right) */
  .site-footer__col--left{
    justify-self: center;
    text-align: center;
  }

  .site-footer__col--left a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .site-footer__col--left img,
  .site-footer__col--left svg{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .site-footer__col--left{
    justify-self: center;
  }

  .site-footer__col--right{
    display: block;
    justify-items: center;
  }

  /* Mobile: hide Sitemap (heading + links), keep Contact Us and center it */
  .site-footer__col--right .site-footer__heading,
  .site-footer__col--right .site-footer__links{
    display: none;
  }

  .site-footer__contact{
    width: 100%;
    justify-content: center;
    justify-self: center;
    text-align: center;
  }

  .site-footer__title{
    font-size: 14px;
  }

  .site-footer__subtitle{
    font-size: 11px;
  }
}

/* =========================
   HERO
   ========================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/intro/images/hero-intro-lg.webp");
  background-size: cover;
  /* background-position: center; */
  background-position: center 70%;
  background-repeat: no-repeat;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__title {
  color: #fff;
  font-size: clamp(3rem, 10vw, 9rem);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-align: center;
}

/* =========================
   INTRO HERO (egyértelműen scope-olva)
   Csak az intro.html-re hat: .page-intro
   ========================= */

.page-intro .hero{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* háttérkép */
.page-intro .hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("/assets/intro/images/hero-intro-lg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 100%;
  z-index: 0;
}

/* sötét átmenet (olvasgathatóság) */
.page-intro .hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 55%,
    rgba(0, 0, 0, 0.075) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* title tartó – lejjebb tesszük a headlinet */
.page-intro .hero__content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 45vh;
}

/* headline – “index-szerű” méret */
.page-intro .hero__title{
  color: #fff;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-size: clamp(46px, 4vw, 76px);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* 10vh “szünet” a szöveges blokkok körül */
.page-intro .content-block--text{
  padding-top: 10vh;
  padding-bottom: 10vh;
}

/* Szöveg ne tapadjon a szélekhez */
.page-intro .content-inner{
  width: min(1100px, 96vw);   /* SZÉLESEBB */
  margin: 0 auto;
  padding-left: 2vw;         /* KISEBB oldalsó margó */
  padding-right: 2vw;
}

.page-intro .content-block--intro .content-inner{
  width: min(1100px, 96vw);
  margin: 0 auto;
}

/* INTRO – teljes szélességű képek */
.page-intro .content-block--image {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* valódi full-bleed */
  overflow: hidden;
}

.page-intro .content-block--image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 0;
  outline: 0;
}

/* IMAGE BLOCK – remove hairline seams */
.content-block--image{
  background: #000;
  line-height: 0;
  font-size: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.content-block--image img{
  display: block;
  width: 100%;
  height: auto;
/*   transform: translateY(1px); */
}

.page-intro .content-block--intro{
  background: #000;
  border-top: 0 !important;
  box-shadow: none !important;
}

.page-intro .content-block--text p{
  letter-spacing: 0.01em;
}

.page-intro .content-block--text strong{
  letter-spacing: 0.02em;
}

.page-intro .content-block--intro h2{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;   /* enyhe, természetes */
  text-transform: uppercase;
  margin-bottom: 18px;
  max-width: 900px;
  margin: 0 auto 18px;
  text-align: left;
}

.page-intro .content-block--intro p{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;   /* alap / vékonyabb */
  max-width: 900px;   /* szélesebb, de még nem folyik szét */
  margin: 0 auto;     /* középre teszi a hasábot */
  text-align: left;   /* a szöveg balra zárt marad */
}

.page-intro .content-block--intro strong{
  color: #f4c430;
  font-weight: 400;
}

.page-intro br.intro-break{
  display: block;
  margin-top: 6px;
}

.page-intro .highlight-link{
  color: #f4c430;
  font-weight: 500;
  text-decoration: none;
}

.page-intro .highlight-link:hover{
  color: #ffe27a;
  opacity: 0.85;
  text-decoration: none;
}

/* =========================
   INTRO – INTERTITLE / TEXT SLIDE
   ========================= */

.page-intro .content-block--intertitle{
  min-height: 60vh;              /* „szünet”, levegő */
  display: flex;
  align-items: center;           /* függőlegesen közép */
  justify-content: center;       /* vízszintesen közép */
  text-align: center;

  background: #000;
  padding: 12vh 6vw;             /* felső–alsó hézag */
}

.page-intro .content-block--intertitle h2{
  max-width: 900px;

  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;

  color: #fff;
}

/* Mobil finomhangolás */
@media (max-width: 640px){
  .page-intro .hero__bg{
    background-position: center 78%;
  }
  .page-intro .hero__content{
    padding-bottom: 16vh;
  }
}

@media (max-width: 640px){
  .page-intro .hero__title{
    letter-spacing: -0.01em;
  }

  .page-intro .content-block--text p{
    letter-spacing: 0;
  }
}

@media (max-width: 640px){
  .page-intro .content-block--intro h2{
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .page-intro .content-block--intro p{
    font-size: 16px;
  }
}
/* =========================
   INTRO – CTA BUTTON ROW
   ========================= */

.page-intro .content-block--cta{
  background: #000;
  padding: 12vh 6vw;           /* nagy „szünet” */
}

.page-intro .intro-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;

  color: #fff;
  text-align: center;
}

.page-intro .intro-cta__label{
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-right: 8px;
}

/* ALAP GOMB */
.page-intro .intro-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 22px;

  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

/* KERETES – Background */
.page-intro .intro-cta__btn--outline{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
}

.page-intro .intro-cta__btn--outline:hover{
  background: rgba(255,255,255,0.25);
  transform: translateY(-0px);
}

/* KIEMELT – Support us */
.page-intro .intro-cta__btn--highlight{
  background: #f4c430;
  color: #000;
  border: 1px solid #f4c430;
}

.page-intro .intro-cta__btn--highlight:hover{
  background: #7b6316;
  color: #fff;
  transform: translateY(-0px);
}

.page-intro .intro-cta__label{
  text-decoration: none;
  color: #fff;
}

.page-intro .intro-cta__label:hover{
  color: #f4c430;
}


/* =========================
   CONSERVATION HERO (scope-olva)
   Csak a conservation.html-re hat: .page-conservation
   ========================= */

/* háttérkép: a conservation.html inline style-ja / class-a adja, itt csak biztosítjuk a renderelést */
.page-conservation .hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

.page-conservation .hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("/assets/conservation/images/hero-conservation-lg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  /* mutasson többet a tetőből és az aljából is: kicsit feljebb húzzuk a fókuszt */
  background-position: center 42%;
  z-index: 0;
}

/* olvashatósági sötétítés (finom) */
.page-conservation .hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.50) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* A headline-t abszolút pozicionáljuk – így nem tud "koppanásig" balra esni a flex / width miatt */
.page-conservation .hero__content--statement{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.page-conservation .hero__content{
  position: static;
  display: block;
  height: auto;
}

.page-conservation .hero__statement{
  position: absolute;
  /* kb. a bal 1/3-tól induljon */
  left: clamp(32%, 36vw, 42%);
  bottom: clamp(18px, 5vw, 64px);

  margin: 0;
  max-width: 18ch;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.86; /* kisebb sortáv */
  font-size: clamp(46px, 4vw, 76px);

  color: #fff;
  text-shadow: 0 6px 22px rgba(0,0,0,0.50);
  pointer-events: auto;
}

.page-conservation .hero__statement .highlight{
  color: #f4c430;
}

/* Mobil: ne csússzon túl jobbra */

@media (max-width: 640px){
  .page-conservation .hero__statement{
    left: 6vw;
    right: 6vw;
    max-width: 22ch;
    font-size: clamp(28px, 9vw, 50px);
    line-height: 0.92;
  }
}

/* =========================
   CONSERVATION – FULL-BLEED MEDIA (képek + videó)
   ========================= */

/* A Conservation oldalon a media blokkok menjenek faltól-falig, mint az Intro-n */
.page-conservation .content-block--image,
.page-conservation .content-block--video,
.page-conservation .content-block--media-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #000;
  line-height: 0;
  font-size: 0;
}

.page-conservation .content-block--image img,
.page-conservation .content-block--video video,
.page-conservation .content-block--media-fullbleed video,
.page-conservation .content-block--media-fullbleed img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 0;
  outline: 0;
}

/* =========================
   CONSERVATION – TWO IMAGES SIDE BY SIDE
   (apply when HTML wraps two images in .media-two-up)
   ========================= */

.page-conservation .media-two-up{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 0.24fr 0.76fr;
  gap: 2px;                 /* thin black divider */
  background: #000;         /* gap color */

  /* lock a pleasant, consistent height so both images align */
  height: clamp(300px, 36vw, 560px);
  overflow: hidden;
}

.page-conservation .media-two-up img{
  width: 100%;
  height: 100%;
  display: block;

  /* keep each image fully visible inside its half */
  object-fit: cover;
  object-position: center;
  background: #000;
}

@media (max-width: 640px){
  .page-conservation .media-two-up{
    height: clamp(220px, 48vw, 360px);
    gap: 2px;
  }
}
  
/* =========================
   CONSERVATION – CONTENT SPACING (mint az Intro)
   ========================= */

/* 10vh “szünet” a szöveges blokkok körül */
.page-conservation .content-block--text{
  padding-top: 10vh;
  padding-bottom: 10vh;
}

/* Szöveg ne tapadjon a szélekhez */
.page-conservation .content-inner{
  width: min(1100px, 96vw);
  margin: 0 auto;
  padding-left: 3vw;
  padding-right: 3vw;
}

/* Conservation text tipográfia (intro-szerű, levegős) */
.page-conservation .content-block--text h2{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 auto 18px;
  max-width: 900px;
  text-align: left;
}

.page-conservation .content-block--text p{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

/* Kiemelések/linkek (sárga, mint a többi oldalon) */

.page-conservation .highlight-link{
  color: #f4c430;
  font-weight: 700;
  text-decoration: none;
}

.page-conservation .highlight-link:hover{
  color: #ffe27a;
  opacity: 0.9;
}

/* Safety net: prevent default blue links inside Conservation content areas */
.page-conservation .content-inner a,
.page-conservation .content-inner a:visited{
  color: inherit;
}

/* Linkek alapból ne legyenek kékek a Conservation oldalon (browser default felülírás) */
.page-conservation .content-block--text a,
.page-conservation .content-block--text a:visited{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
}

.page-conservation .content-block--text a:active,
.page-conservation .content-block--text a:focus{
  color: inherit;
  outline-color: rgba(255,255,255,0.35);
}

/* Ha highlight-linket használunk, maradjon sárga és ne legyen aláhúzva */
.page-conservation .content-block--text a.highlight-link,
.page-conservation .content-block--text a.highlight-link:visited{
  color: #f4c430;
  text-decoration: none;
}

@media (max-width: 640px){
  .page-conservation .content-block--text{
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  .page-conservation .content-inner{
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .page-conservation .content-block--text h2{
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .page-conservation .content-block--text p{
    font-size: 16px;
  }
}


/* =========================
   CONSERVATION – CTA BUTTON ROW
   ========================= */

.page-conservation .content-block--cta{
  background: #000;
  padding: 12vh 6vw;
  color: #fff;
}

.page-conservation .content-block--cta h2{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.page-conservation .intro-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  color: #fff;
  text-align: center;
}

.page-conservation .intro-cta__label,
.page-conservation .intro-cta__label:visited{
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-right: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
}

.page-conservation .intro-cta__label:hover{
  color: #f4c430;
  opacity: 1;
  text-decoration: none;
}

.page-conservation .intro-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.page-conservation .intro-cta__btn--outline{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
}

.page-conservation .intro-cta__btn--outline:hover{
  background: rgba(255,255,255,0.25);
  transform: translateY(0);
}

.page-conservation .intro-cta__btn--highlight{
  background: #f4c430;
  color: #000;
  border: 1px solid #f4c430;
}

.page-conservation .intro-cta__btn--highlight:hover{
  background: #7b6316;
  color: #fff;
  transform: translateY(0);
}

@media (max-width: 640px){
  .page-conservation .content-block--cta h2{
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .page-conservation .intro-cta{
    justify-content: center;
  }

  .page-conservation .content-block--cta{
    padding: 10vh 6vw;
  }
}

/* =========================
   PAGER – nyíl animáció + center link
   ========================= */

.page-pager{
  background: #54595F;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 32px;                 /* itt állítod a közelséget */
  padding: 18px 6vw;
}

.pager-link{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: .9;
  transition: opacity .2s ease, color .2s ease;
}

.pager-link:hover{
  opacity: 1;
  color: #fff;
}

/* Center (SPONSORS) link – sárgás kiemelés, de visszafogott */
.page-pager .pager-link--center{
  color: #f4c430;
}

.page-pager .pager-link--center:hover{
  color: #fff;
}

/* Nyilak – finom “csúszás” hoverre */
.pager-arrow{
  display: inline-block;
  transition: transform .22s ease;
  will-change: transform;
}

/* PREV: balra “lebeg” */
.pager-link--prev:hover .pager-arrow{
  transform: translateX(-6px);
}

/* NEXT: jobbra “lebeg” */
.pager-link--next:hover .pager-arrow{
  transform: translateX(6px);
}

/* Kis mozgásérzékenység esetén */
@media (prefers-reduced-motion: reduce){
  .pager-arrow{ transition: none; }
}

/* =========================
   CONSERVATION – INTERTITLE
   ========================= */

.page-conservation .content-block--intertitle{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
  padding: 12vh 6vw;
}


.page-conservation .content-block--intertitle h2{
  max-width: 900px;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
}

/* =========================
   PAGER – mobile label shortening
   Hide only the word "Page" on small screens.
   Requires HTML to wrap the word in <span class="pager-word">Page</span>
   ========================= */

.page-pager .pager-word{ display: inline; }

@media (max-width: 640px){
  .page-pager .pager-word{ display: none; }
}


/* =========================
   SCIENCE HERO (scope-olva)
   Csak a science.html-re hat: .page-science
   ========================= */

.page-science .hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

.page-science .hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("/assets/science/images/hero-science-lg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 45%;
  z-index: 0;
}

@media (max-width: 1024px){
  .page-science .hero__bg{ background-image: url("/assets/science/images/hero-science-md.webp"); }
}

@media (max-width: 640px){
  .page-science .hero__bg{ background-image: url("/assets/science/images/hero-science-sm.webp"); }
}

.page-science .hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.50) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.page-science .hero__content--statement{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.page-science .hero__statement{
  position: absolute;
  left: clamp(32%, 36vw, 42%);
  bottom: clamp(18px, 5vw, 64px);

  margin: 0;
  max-width: 18ch;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.90;
  font-size: clamp(46px, 4vw, 76px);

  color: #fff;
  text-shadow: 0 6px 22px rgba(0,0,0,0.50);
  pointer-events: auto;
}

@media (max-width: 640px){
  .page-science .hero__statement{
    left: 6vw;
    right: 6vw;
    max-width: 22ch;
    font-size: clamp(28px, 9vw, 50px);
    line-height: 0.95;
  }
}

/* =========================
   SCIENCE – CTA BUTTON ROW
   ========================= */

.page-science .content-block--cta{
  background: #000;
  padding: 12vh 6vw;
  color: #fff;
}

.page-science .intro-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;

  color: #fff;
  text-align: center;
}

.page-science .intro-cta__label,
.page-science .intro-cta__label:visited{
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-right: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
}

.page-science .intro-cta__label:hover{
  color: #f4c430;
  opacity: 1;
  text-decoration: none;
}

.page-science .intro-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 22px;

  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.page-science .intro-cta__btn--outline{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
}

.page-science .intro-cta__btn--outline:hover{
  background: rgba(255,255,255,0.25);
  transform: translateY(0);
}

.page-science .intro-cta__btn--highlight{
  background: #f4c430;
  color: #000;
  border: 1px solid #f4c430;
}

.page-science .intro-cta__btn--highlight:hover{
  background: #7b6316;
  color: #fff;
  transform: translateY(0);
}

@media (max-width: 640px){
  .page-science .content-block--cta{
    padding: 10vh 6vw;
  }
}

/* =========================
   SCIENCE – FULL-BLEED MEDIA (képek + videó)
   ========================= */

.page-science .content-block--image,
.page-science .content-block--video,
.page-science .content-block--media-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #000;
  line-height: 0;
  font-size: 0;
}

.page-science .content-block--image img,
.page-science .content-block--video video,
.page-science .content-block--media-fullbleed video,
.page-science .content-block--media-fullbleed img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 0;
  outline: 0;
}

/* Science: inset images (used for the two DATA counting frames)
   Goal: side margins so these feel “featured” vs. full-bleed illustrations.
*/
.page-science .content-block--image.content-block--image-inset{
  width: auto;
  margin-left: 0;
  padding: 0 6vw;
  background: #000;
  line-height: 0;
  font-size: 0;
}

.page-science .content-block--image.content-block--image-inset img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 640px){
  .page-science .content-block--image.content-block--image-inset{
    padding: 0 5vw;
  }
}

/* =========================
   SCIENCE – CONTENT SPACING + TYPO
   Match Conservation rhythm; avoid accidental “double gaps”.
   ========================= */

/* 10vh “szünet” a szöveges blokkok körül (same as Conservation) */
.page-science .content-block--text{
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.page-science .content-inner{
  width: min(1100px, 96vw);
  margin: 0 auto;
  padding-left: 3vw;
  padding-right: 3vw;
}

.page-science .content-block--text p{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

/* If a text block contains multiple paragraphs, keep a modest internal gap */
.page-science .content-block--text p + p{
  margin-top: 12px;
}

/* Headings inside text blocks (Conservation-like baseline) */
.page-science .content-block--text h2{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 auto;
  max-width: 900px;
  text-align: left;
}

.page-science .content-block--text strong{
  letter-spacing: 0.02em;
}

/* Inline statement H2 (keeps it close to the preceding paragraph and makes it feel “statement-like”) */
.page-science .content-block--text h2.science-inline-statement{
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* =========================
   SCIENCE – INTERTITLE (match Conservation)
   ========================= */

.page-science .content-block--intertitle{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
  padding: 12vh 6vw;
}

.page-science .content-block--intertitle h2{
  max-width: 900px;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
}

/* The “A heaven…” statement should separate from what follows (extra space BELOW) */
.page-science .content-block--intertitle--science-statement{
  padding-bottom: 18vh;
}

@media (max-width: 640px){
  .page-science .content-block--text{
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  .page-science .content-inner{
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .page-science .content-block--text p{
    font-size: 16px;
  }

  .page-science .content-block--text h2{
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  /* Keep the inline statement readable on mobile (don’t force the intro-like tracking) */
  .page-science .content-block--text h2.science-inline-statement{
    font-size: 18px;
    letter-spacing: 0.01em;
    margin-top: 10px;
  }

  .page-science .content-block--intertitle{
    padding: 12vh 6vw;
  }

  .page-science .content-block--intertitle--science-statement{
    padding-bottom: 16vh;
  }
}

/* Science: prevent default blue links */
.page-science .content-inner a,
.page-science .content-inner a:visited{
  color: inherit;
}

.page-science .content-block--text a,
.page-science .content-block--text a:visited{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
}

/* =========================
   MOVIE HERO (scope-olva)
   Csak a movie.html-re hat: .page-movie
   ========================= */

.page-movie .hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

.page-movie .hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("/assets/movie/images/hero-movie-lg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40%;
  z-index: 0;
}

.page-movie .hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.60) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.page-movie .hero__content--statement{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.page-movie .hero__statement{
  position: absolute;
  left: clamp(38%, 46vw, 58%);
  bottom: clamp(24px, 6vw, 80px);

  margin: 0;
  max-width: 10ch;

  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.9;
  font-size: clamp(48px, 6vw, 92px);

  color: #fff;
  text-shadow: 0 6px 22px rgba(0,0,0,0.50);
  pointer-events: auto;
}

@media (max-width: 640px){
  .page-movie .hero__statement{
    left: 6vw;
    right: 6vw;
    max-width: 16ch;
    font-size: clamp(30px, 10vw, 52px);
    line-height: 0.95;
  }
}

/* =========================
   MOVIE – FULL-BLEED MEDIA
   ========================= */

.page-movie .content-block--image,
.page-movie .content-block--video,
.page-movie .content-block--media-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #000;
  line-height: 0;
  font-size: 0;
}

.page-movie .content-block--image img,
.page-movie .content-block--video video,
.page-movie .content-block--media-fullbleed video,
.page-movie .content-block--media-fullbleed img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 0;
  outline: 0;
}

/* =========================
   MOVIE – CONTENT SPACING + TYPO
   ========================= */

.page-movie .content-block--text{
  padding-top: 7vh;
  padding-bottom: 7vh;
}

.page-movie .content-inner{
  width: min(1100px, 96vw);
  margin: 0 auto;
  padding-left: 3vw;
  padding-right: 3vw;
}

.page-movie .content-block--text h2{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 auto 18px;
  max-width: 900px;
  text-align: left;
}

.page-movie .content-block--text p{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

/* =========================
   MOVIE – INTERTITLE
   ========================= */

.page-movie .content-block--intertitle{
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
  padding: 10vh 6vw;
}

.page-movie .content-block--intertitle h2{
  max-width: 900px;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
}

@media (max-width: 640px){
  .page-movie .content-block--text{
    padding-top: 6vh;
    padding-bottom: 6vh;
  }

  .page-movie .content-inner{
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .page-movie .content-block--text h2{
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .page-movie .content-block--text p{
    font-size: 16px;
  }

  .page-movie .content-block--intertitle{
    padding: 8vh 6vw;
  }
}

/* =========================
   MOVIE – CTA BUTTON ROW
   ========================= */

.page-movie .content-block--cta{
  background: #000;
  padding: 12vh 6vw;
  color: #fff;
}

.page-movie .intro-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  color: #fff;
  text-align: center;
}

.page-movie .intro-cta__label,
.page-movie .intro-cta__label:visited{
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-right: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
}

.page-movie .intro-cta__label:hover{
  color: #f4c430;
  opacity: 1;
  text-decoration: none;
}

.page-movie .intro-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.page-movie .intro-cta__btn--outline{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
}

.page-movie .intro-cta__btn--outline:hover{
  background: rgba(255,255,255,0.25);
  transform: translateY(0);
}

.page-movie .intro-cta__btn--highlight{
  background: #f4c430;
  color: #000;
  border: 1px solid #f4c430;
}

.page-movie .intro-cta__btn--highlight:hover{
  background: #7b6316;
  color: #fff;
  transform: translateY(0);
}

@media (max-width: 640px){
  .page-movie .content-block--cta{
    padding: 10vh 6vw;
  }
}