/*
Theme Name: OnePager Parallax
Author: Te
Version: 1.2
*/

/* =========================================================
   Fonts
   ========================================================= */
/* parisienne-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/parisienne/parisienne-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('fonts//playfair-display/playfair-display-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/inter/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =========================================================
   Variables
   ========================================================= */
:root{
  --max: 1100px;

  /* Light surfaces */
  --page: #f3ede3;
  --surface: #f7f2ea;
  --surface2: #efe6db;

  /* Text */
  --ink: #231c18;
  --muted: #5b524c;
  --line: rgba(35, 28, 24, .14);

  /* Dark */
  --dark: #0f0b0a;
  --darkText:#f5f3ef;
  --darkMuted:#fff;
  --darkLine: rgba(255,255,255,.10);

  /* Accent */
  --gold: #caa24a;
  --gold2:#f0d58a;

  /* UI */
  --radius: 18px;
  --shadow: 0 18px 55px rgba(0,0,0,.10);
  --shadowDark: 0 28px 90px rgba(0,0,0,.55);

  --font-script: "Parisienne", cursive;
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}

/* =========================================================
   Base / reset
   ========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin:0;
  font: 17px/1.75 var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 760px at 18% 0%, rgba(202,162,74,.10) 0%, rgba(246,241,232,0) 55%),
    radial-gradient(900px 520px at 84% 15%, rgba(120,70,55,.08) 0%, rgba(246,241,232,0) 55%),
    var(--page);
}

a{ color: inherit; text-decoration:none; }
a:hover{ color: #7a5a2c; }

:focus-visible{
  outline: 2px solid rgba(202,162,74,.9);
  outline-offset: 3px;
  border-radius: 10px;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  max-width: 1230px;
  /*transform: translateX(100px);*/
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  margin: 0 0 12px;
  line-height: 1.18;
  letter-spacing: .2px;
  color: inherit;
  font-family: var(--font-heading);
}

p{ margin: 0 0 14px; }

.lead{
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  max-width: 62ch;
  color: var(--muted);
}

h1, h2, h3, p, li{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

section *{ min-width: 0; }

/* "Magazin" címek (kérés szerint giccsesebb) */
h1, section h2{
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: .2px;
}

h1{
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.02;
}

section h2{
  font-size: clamp(2.1rem, 3.4vw, 3.0rem);
  line-height: 1.06;
}

/* Törzsszöveg olvasható marad */
.lead, p, li{
  font-family: var(--font-body);
}

/* alap: normál szekciókban arany marker */
section:not(.parallax-wrap) li::marker{
  color: #7a5a2c;
}

/* parallax szekciókban a marker a szöveg színét kövesse */
.parallax-wrap li::marker{
  color: inherit;
}

/* =========================================================
   CHROME FIX: szekciók tartalma egymás alatt (H2/H3/P/Div)
   ========================================================= */

/* Csak a front-page / home onepagerre érvényes (WP body classok) */
body.home section .container,
body.front-page section .container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* A szekciók közvetlen gyerekei mindig teljes sorok legyenek */
body.home section .container > *,
body.front-page section .container > *{
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  min-width: 0; /* Chrome overflow/flex edge case */
}


/* =========================================================
   Header
   ========================================================= */
.site-header .container{ max-width: 1320px; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(97, 63, 13, 0.62);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  min-width: 0;
}

/* Logo */
.brand{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}

.brand img{
  height: 52px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

/* Desktop nav */
.site-nav{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  line-height: 1.1;
  padding: 10px 8px;
  font-size: 14px;
  color: rgba(245,243,239,.90);
  font-weight: 520;
  border-radius: 12px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, opacity .15s ease;
  opacity: .92;
}

.site-nav a:hover{
  color: rgba(240,213,138,.98);
  background: rgba(255,255,255,.04);
}

.site-nav .nav-cta{
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 10px 16px;
  font-size: 14px;
}

/* Hamburger */
.nav-toggle{
  display:none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  align-items:center;
  justify-content:center;
  gap: 6px;
  cursor:pointer;
}

.nav-toggle__bar{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(245,243,239,.92);
  border-radius: 2px;
}

/* Backdrop */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 60;
  display: none;
  cursor: pointer;
}

/* Long menu => hamburger */
@media (max-width: 1240px){
  .nav-toggle{ display:none; }
  .brand img{ height: 44px; }

  .site-header .header-inner {
    justify-content: center;
  }

  .hero__copy {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .hero__copy h1 {
    font-size: 35px;
  }

  .hero__copy a {
    font-size: 15px;
    padding: 10px 15px;
  }

  .overlay {
    display: none;
  }

   .hero--bg .hero__copy{
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 0 !important;
    max-width: 92% !important;
  }

  .hero--bg .overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.35),
      rgba(0,0,0,.45)
    ) ;
  }

  .hero--bg .hero__copy h1,
  .hero--bg .hero__copy .lead,
  .hero--bg .hero__copy p,
  .hero--bg .hero__copy h2{
    color: #ffffff !important ;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
  }

  .parallax-img {
    filter: brightness(0.6) !important;
  }

  .site-nav{
    position: fixed;
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: 520px;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(15,11,10,.92);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);

    z-index: 70;

    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;

    white-space: normal;
    overflow: visible;
  }

  .site-nav a{
    padding: 12px 10px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
  }

  .site-nav .nav-cta{
    margin-left: 0;
    text-align: center;
    justify-content: center;
  }

  body.nav-open .site-nav{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  body.nav-open .nav-backdrop{ display: block; }

  #home.hero--bg img.parallax-img {
    left: 0 !important;
  }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #1a1a1a !important;
  font-weight: 700;
  border: 0;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
  gap: 8px;
}

.btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.btn--ghost{
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid rgba(35,28,24,.18);
  box-shadow: none;
}
.btn--ghost:hover{ background: rgba(35,28,24,.04); }

/* =========================================================
   Sections
   ========================================================= */
section{
  padding: 92px 0;
  border-top: 1px solid rgba(35,28,24,.08);
}
section:first-of-type{ border-top: 0; }

section h2{ margin: 0 0 18px; }
section h3{ margin: 18px 0 10px; }

section p{
  max-width: 70ch;
  color: var(--muted);
}
section ul, section ol{
  margin: 0 0 14px 20px;
  color: var(--muted);
}
section strong{ color: inherit; }

/* Light section surfaces by ID */
#rolam,
#szolgaltatasok,
#parkapcsolati_mediacio,
#blog{
  background:
    radial-gradient(900px 520px at 84% 8%, rgba(120,70,55,.08) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--surface2) 0%, rgba(239,230,219,.92) 100%);
}

#kapcsolat{
  background: rgba(245,238,228,.9);
  border-top: 1px solid rgba(35,28,24,.12);
  border-bottom: 1px solid rgba(35,28,24,.12);
}

.kapcsolat__phone{
  font-size: 1.15rem;
  font-weight: 600;
}

/* =========================================================
   Cards / grids
   ========================================================= */
.card{
  background: rgba(247,242,234,.92);
  border: 1px solid rgba(35,28,24,.14);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card h3{ margin-top: 0; }
.card p, .card div{ color: var(--muted); }

.cards-grid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 16px;
}

/* Blog cards */
.post-card a h3{ margin: 0 0 8px; }
.post-card a:hover h3{ color: #7a5a2c; }

/* =========================================================
   Reveal
   ========================================================= */
.reveal { opacity: 1; transform: none; }          /* default: látható */
.js .reveal {                                     /* csak JS esetén animálunk */
  opacity: 0;
  transform: translateY(66px);
  transition: opacity .75s ease, transform .75s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
a.reveal, .btn.reveal{ display:inline-flex; }

.parallax-wrap:not(.hero) p, 
.parallax-wrap:not(.hero) li {
  text-shadow: black 6px 4px 10px;
}

.js .reveal--soft{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}

.js .reveal--soft.is-visible{
  opacity: 1;
  transform: none;
}

/* =========================================================
   Parallax utility
   ========================================================= */
.parallax-wrap{
  position: relative;
  overflow: hidden;
  /*background: #0f0b0a;*/
  background: var(--paper); /* vagy rgba(243,237,227,.92) */
}

.parallax-wrap:not(.hero) .reveal{
  padding: 15px 15px;
  max-width: 800px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.01)
  );
  border-radius: 12px;
}


/*
#kuldetes.parallax-wrap::before ,
#esemenyek.parallax-wrap::before ,
#csaladmediacio.parallax-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);   
  z-index: 1;
  backdrop-filter: blur(1px);
}*/
/*
.parallax-wrap > * {
  position: relative;
  z-index: 2;
}*/

.parallax-img{
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;
  bottom: -18%;
  width: 100%;
  height: 136%;
  object-fit: cover;
  object-position: 85% center;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform;
  filter: saturate(1.04) contrast(1.02);
}

/* Dark parallax sections */
#kuldetes.parallax-wrap,
#esemenyek.parallax-wrap,
#csaladmediacio.parallax-wrap{
  color: var(--darkText);
  background: linear-gradient(180deg, rgba(10,7,7,1), rgba(15,11,10,1));
  border-top: 1px solid rgba(255,255,255,.06);
}

#kuldetes.parallax-wrap p,
#kuldetes.parallax-wrap li,
#esemenyek.parallax-wrap p,
#esemenyek.parallax-wrap li,
#csaladmediacio.parallax-wrap p,
#csaladmediacio.parallax-wrap li{
  color: var(--darkMuted);
}

#kuldetes.parallax-wrap::after,
#esemenyek.parallax-wrap::after,
#csaladmediacio.parallax-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.20) 45%, rgba(0,0,0,.48));
  pointer-events:none;
}

#kuldetes.parallax-wrap .container,
#esemenyek.parallax-wrap .container,
#csaladmediacio.parallax-wrap .container{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Backbar (blog/single)
   ========================================================= */
.backbar{
  position: sticky;
  top: 64px;
  z-index: 40;
  background: rgba(15,11,10,.75);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.backbar .container{ padding: 10px 20px; }

.backlink{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 10px;
  color: rgba(245,243,239,.92);
  opacity: .95;
}
.backlink:hover{
  border-color: rgba(255,255,255,.35);
  color: rgba(240,213,138,.98);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(
    to bottom,
    rgba(60,52,46,.92),
    rgba(40,34,30,1)
  );
  padding: 22px 0;
  color: rgba(245,243,239,.82);
}

/* =========================================================
   Sticky anchor offset
   ========================================================= */
[id]{ scroll-margin-top: 90px; }

/* =========================================================
   HERO – A (split) + C (full bg)
   ========================================================= */
.hero{
  position: relative;
  padding: 34px 0 70px;
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
}

.hero__inner{
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero .container{ max-width: 1200px; }

/* A: split */
.hero--split .hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: clamp(22px, 4vw, 70px);
  align-items: center;
}

.hero__copy{ max-width: 560px; }

.hero__copy h1{
  margin: 0 0 10px;
  max-width: 18ch;
  text-wrap: balance;
}

.hero__copy .lead{ margin: 0 0 18px; }

.hero__media{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.hero__portrait{
  width: min(520px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid rgba(35,28,24,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.25);
  filter: saturate(.92) contrast(1.03) brightness(.99);
}

/* A: beige hero */
.hero--solid{
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(202,162,74,.16) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 86% 20%, rgba(120,70,55,.10) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border-bottom: 1px solid rgba(35,28,24,.10);
}

.hero--solid .hero__copy h1{ color: var(--ink); }
.hero--solid .hero__copy .lead{ color: var(--muted); }
.hero--solid .btn{ box-shadow: 0 14px 30px rgba(35,28,24,.18); }

/* C: full background hero (parallax-wrap) */
.hero--bg{
  color: var(--ink);
}

/* overlay layer */
.hero--bg .overlay{
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10) 45%, rgba(0,0,0,.20));
}

/* Bal panel + jobbra kifutó fade */
.hero--bg .overlay::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: min(46vw, 640px);

  background: linear-gradient(90deg, rgba(243, 237, 227, 1) 0%, rgba(243, 237, 227, 0.8) 70%, rgba(243, 237, 227, 0) 100%);
  
  width: 940px;
}

/* Szöveg a bal panelben – rögzítve a panel/fade geometriához */
.hero--bg .hero__copy{
  min-width: 0;
  margin-left: 140px; /*hero szöveget bal margin*/
  z-index: 2;
}


.hero--bg .hero__copy h1{
  color: var(--ink);
  text-shadow: none;
}

.hero--bg .hero__copy .lead{
  color: rgba(35,28,24,.78);
  max-width: 52ch;
}

.hero--bg .btn{
  box-shadow: 0 14px 30px rgba(35,28,24,.18);
}

#home.hero--bg{
  overflow: hidden;
}

#home.hero--bg img.parallax-img{
  left: 6%;
  width: 106%;
  object-fit: cover;
}

.hero .lead {
  line-height: 1.65;
}


/* =========================================================
   About image
   ========================================================= */
.about__img{
  margin-top: 18px;
  width: min(420px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(35,28,24,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* =========================================================
   Contact block
   ========================================================= */
.contact-box{
  display:grid;
  gap: 14px;
  margin-top: 14px;
  max-width: 64ch;
}

.contact-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
}

.contact-row strong{ min-width: 84px; }

.contact-row a{
  color: #533c1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-row a:hover{ color: #7a5a2c; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  body{ font-size: 16.5px; }

  section{ padding: 56px 0; }

  .hero{
    min-height: auto;
    padding: 26px 0 46px;
  }

  /* A: split => stacked */
  .hero--split .hero__inner{ grid-template-columns: 1fr; }
  .hero__media{
    justify-content: center;
    margin-top: 18px;
  }

  #home.hero--bg > img.parallax-img{ object-position: center center; }

  .hero--bg .hero__inner{
    min-height: 72vh;
    align-items: flex-end;
    padding-bottom: 22px;
    padding-top: 18px;
  }

  /* MOBIL HERO: nincs kártya, hanem finom “scrim” a szöveg mögött */
  .hero--bg .hero__copy{
    max-width: min(520px, 92%);
    margin: 0 auto;
    text-align: center;
    padding-bottom: 28px !important;

    /* felülírja a desktop calc logikát */
    --panelW: 100%;
    --fadeW: 0px;
    --padL: 0px;
    --padR: 0px;

    /* kártya-stílusok OFF */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* saját mobil padding */
    padding: 18px 16px 22px;
    position: relative;
    z-index: 2;
  }

  /* FULL-BLEED “fátyol” (nem doboz), hogy olvasható legyen */
  .hero--bg .hero__copy::before{
    content:"";
    position:absolute;
    left:-999px; right:-999px;      /* full-bleed, ne kártya */
    top:-10px; bottom:-10px;
    background: linear-gradient(
      180deg,
      rgba(92,74,55,.55),
      rgba(92,74,55,.28),
      rgba(92,74,55,.18)
    );
    z-index:-1;
  }

  .hero--bg .hero__copy::after{
  content:"";
  display:block;
  width: 48px;
  height: 2px;
  margin: 18px auto 0;
  background: rgba(255,255,255,.55);
  border-radius: 2px;
}

  /* szöveg olvashatóság mobilon */
  .hero--bg .hero__copy h1,
  .hero--bg .hero__copy .lead{
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
  }

  /* C: mobilon nincs panel/fade – csak a háttér + scrim */
  .hero--bg .overlay::before,
  .hero--bg .overlay::after{ display: none; }

  .hero .btn{
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }

  .parallax-wrap:not(.hero) .reveal{
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}



/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; }
  .parallax-img{ transform:none !important; }
}


article h1{
  text-align: center;
}




/* =========================================================
   Rólam – szöveg + kép egymás mellett
   ========================================================= */

.rolam__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 66px;
  align-items: start;
  margin-top: 0;
  align-items: center;
}

#rolam h2{
  margin-bottom: 6px;
  padding-bottom: 0;
}

.rolam__image{
  justify-self: end;
  width: min(420px, 100%);
  overflow: hidden;
  border-radius: 18px;
}

/* a tényleges kép töltse ki a keretet */
.rolam__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* vág, nem torzít */
  display: block;
}

.rolam__text{
  max-width: 70ch;
  padding-top: 0;
}

@media (max-width: 1200px){
  .rolam__layout{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rolam__image{
    display: flex;
    justify-content: center;
    margin: 0 0 0;
  }

  .rolam__image img{
    width: min(92%, 420px);
    height: auto;
    /*max-width: 100%;*/
    border-radius: 18px; /* ha kell */
    display: block;
  }
}

main{ flex: 1 0 auto; }
.site-footer{ margin-top: auto; }

/* Blog/single fő tartalom: kapjon „cikk oldalt” érzetet */
body.single main.container,
body.blog main.container,
body.archive main.container,
body.home.blog main.container{
  padding-top: 44px;
  padding-bottom: 84px;
}

/* A backbar-os oldalak (single.php / home.php) is kapjanak jó spacinget */
.backbar + main.container{
  padding-top: 34px;
  padding-bottom: 84px;
}

/* Cikk „kártya” */
body.single article,
body.blog article,
body.archive article,
body.home.blog article{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(247,242,234,.92);
  border: 1px solid rgba(35,28,24,.12);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

/* Blogon a H1 ne legyen „magazin script” – legyen olvasható serif */
body.single article h1,
body.blog article h1,
body.archive article h1,
body.home.blog article h1{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--ink);
}

/* Tartalom: jobb olvashatóság */
body.single article > div,
body.blog article > div,
body.archive article > div,
body.home.blog article > div{
  color: var(--muted);
}

body.single article p,
body.blog article p,
body.archive article p,
body.home.blog article p{
  margin: 0 0 16px;
}

/* Kiemelések és linkek */
body.single article strong,
body.blog article strong,
body.archive article strong,
body.home.blog article strong{
  color: var(--ink);
}

body.single article a,
body.blog article a,
body.archive article a,
body.home.blog article a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kiemelt kép szebb legyen */
body.single article img,
body.blog article img,
body.archive article img,
body.home.blog article img{
  border-radius: 18px;
  border: 1px solid rgba(35,28,24,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  margin: 14px 0 18px;
}

body.single article,
body.blog article,
body.archive article,
body.home.blog article{
  max-width: 760px;              /* kisebb, elegánsabb */
  border-radius: 18px;           /* kevésbé „kapszula” */
  background: rgba(247,242,234,.86); /* kicsit áttetszőbb */
  box-shadow: 0 14px 40px rgba(0,0,0,.07); /* lágyabb */
  padding: clamp(20px, 2.6vw, 30px);
}

body.single article h1{
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  margin: 0 0 14px;
  margin-bottom: 10px;
  text-align: left;
}

body.single article{
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,.06);
}

body.single main.container::after {
  content: "";
  display: block;
  height: 40px;
}

body.page main.container{
  padding-top: 44px;
  padding-bottom: 84px;
}

body.page .page-article{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(247,242,234,92);
  border: 1px solid rgba(35,28,24,12);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,08);
}

body.page .page-article h1{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .2px;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  margin: 0 0 14px;
  text-align: left;
}

body.page .page-content p{
  margin: 0 0 16px;
  color: var(--muted);
}

body.page .page-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}