/* -------------------------------
   Alapok / Változók / Reszponzív
---------------------------------- */
:root{
  --malaga: #7a1f2a;        /* Malaga-vörös */
  --malaga-600:#681a23;
  --malaga-100:#f7eaec;
  --ink:#101114;
  --muted:#565a60;
  --bg:#ffffff;
  --card:#faf8f8;
  --radius:16px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --header-h: 64px; /* alapérték, JS felülírja valós magassággal */
}

*{ box-sizing:border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px); /* offset a sticky headerhez */
}

/* Sticky header offset minden anchorhoz */
section[id]{
  scroll-margin-top: calc(var(--header-h) + 8px);
}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}

.container{ width:min(1100px, 92%); margin-inline:auto; }

h1,h2,h3{ line-height:1.2; margin:0 0 .5rem 0; }
h1{ font-size: clamp(2rem, 3.2vw + 1rem, 3rem); }
h2{ font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
h3{ font-size: 1.125rem; }

p{ margin:.5rem 0 1rem; color:var(--ink); }
.lead{ font-weight:500; }

a{ color:var(--malaga); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* -------------------------------
   Navigáció
---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid #eee;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}

/* Láthatatlan, de képernyőolvasón olvasható szöveg */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Logó */
.logo{
  display:flex; align-items:center;
  gap:.5rem;
  text-decoration:none;
}
.logo-img{
  display:block;
  height: clamp(28px, 4.2vw, 36px);
  width:auto;
  max-width: 220px;
}
@media (max-width: 840px){
  .logo-img{ height: clamp(24px, 6vw, 30px); }
}

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{
  padding:.5rem .75rem;
  border-radius:999px;
  transition:background .2s ease;
}
.nav a:hover{ background:var(--malaga-100); text-decoration:none; }

/* Hamburger (mobil) */
.nav-toggle{ display:none; }
.hamburger{ display:none; cursor:pointer; padding:.5rem; }
.hamburger span{
  display:block; width:24px; height:2px; background:#222; margin:5px 0; transition:transform .2s ease;
}

/* Mobil menü */
@media (max-width: 840px){
  .hamburger{ display:block; }
  .nav{
    position:fixed; inset:56px 0 auto 0;
    display:grid; gap:0; background:#fff;
    border-bottom:1px solid #eee;
    transform:translateY(-120%); transition:transform .25s ease;
    padding:.5rem 1rem 1rem;
  }
  .nav a{ padding:.9rem 1rem; border-radius:12px; }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle:checked ~ .nav{ transform:none; }
}

/* -------------------------------
   Hero
---------------------------------- */
.hero{
  background:
    radial-gradient(80% 60% at 70% 0%, #ffffff 0%, #fff 40%, #fff0 41%),
    linear-gradient(180deg, var(--malaga-100), #fff 55%);
  padding: clamp(3rem, 6vw + 1rem, 6rem) 0 3rem;
}
.hero-inner{ text-align:center; }
.hero p{ color:var(--muted); font-size:1.1rem; }
.accent{ color:var(--malaga); font-weight:600; }

.cta-row{
  margin-top:1.2rem;
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-block; padding:.75rem 1rem; border-radius:999px; font-weight:600;
  border:1px solid var(--malaga);
}
.btn.primary{ background:var(--malaga); color:#fff; box-shadow: var(--shadow); }
.btn.primary:hover{ background:var(--malaga-600); text-decoration:none; }
.btn.ghost{ color:var(--malaga); background:#fff; }
.btn.ghost:hover{ background:var(--malaga-100); text-decoration:none; }
.btn.link{ border:none; background:transparent; padding:0; font-weight:600; }

/* -------------------------------
   Szekciók
---------------------------------- */
.section{ padding: 3.5rem 0; }
.section.alt{ background:#fff; }

.grid-2{
  display:grid;
  gap:1.5rem;
  grid-template-columns: 1.2fr .8fr;
  align-items: stretch;
}
@media (max-width: 840px){ .grid-2{ grid-template-columns: 1fr; } }

/* Szolgáltatáskártyák rácsa */
.cards{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------
   Képes kártya – 16:9 arány
---------------------------------- */
/* Ne nyújtsa a rács a bal hasáb magasságára; a kártya saját arányát tartsa */
.card.photo-card{
  align-self: start;

  /* keret/árnyék, hézag nélkül */
  padding: 0;
  border: 0;
  margin: 0;                /* <figure> alapmargó ki */
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 0 1px #eee;

  /* 16:9 arány minden nézetben */
  aspect-ratio: 16 / 9;
}

/* A kép férjen bele teljesen (nem vágunk) */
.photo-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* teljes kép látszik */
  background: var(--card);  /* világos háttér (#faf8f8) */
}

/* -------------------------------
   Alap kártya-stílusok
---------------------------------- */
.card{
  background:var(--card);
  border:1px solid #eee;
  border-radius: var(--radius);
  padding:1.1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card h3{ margin-bottom:.25rem; }
.note{ background:#fff; border:1px solid var(--malaga-100); }

/* A photo-card felülírásai (ne legyen belső perem) */
.card.photo-card{
  padding:0;
  border:0;
  margin:0;
  box-shadow: var(--shadow), inset 0 0 0 1px #eee;
}

/* -------------------------------
   Kapcsolat
---------------------------------- */
.checklist{ padding-left:1.1rem; margin: .5rem 0 1rem; }
.checklist li{ margin:.35rem 0; }

.pill-list{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pill{
  display:inline-block; background:var(--malaga-100); color:#2b2b2b;
  border:1px solid #eed0d5; padding:.5rem .75rem; border-radius:999px;
}

.contact{ list-style:none; padding:0; margin:1rem 0 0; }
.contact li{ padding:.5rem 0; border-bottom:1px dashed #e9e9e9; }
.contact li:last-child{ border-bottom:none; }

/* -------------------------------
   Lábléc
---------------------------------- */
.site-footer{ border-top:1px solid #eee; background:#fff; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; font-size:.95rem;
}
.to-top{ padding:.4rem .7rem; border-radius:999px; border:1px solid #ddd; }
.to-top:hover{ background:#f6f6f6; text-decoration:none; }

/* -------------------------------
   Cookie banner + modal
---------------------------------- */

/* Cookie banner: alapból rejtve, csak :not([hidden]) állapotban látszódjon */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid #eee; box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  display: none;
  align-items:center; gap:1rem; justify-content:space-between;
  padding: .9rem 1rem; width:100%;
}
.cookie-banner:not([hidden]){ display:flex; }
.cookie-banner[hidden]{ display:none !important; }
.cookie-banner .cookie-text{ max-width: 720px; }
.cookie-banner p{ margin:.25rem 0 0; color:var(--muted); font-size:.95rem; }
.cookie-actions{ display:flex; gap:.5rem; flex-shrink:0; }

/* Modál háttere: alapból rejtve, csak :not([hidden]) esetén látszódjon */
.cookie-modal-backdrop{
  position: fixed; inset:0; background: rgba(16,17,20,.4);
  display:none; place-items:center; z-index:60;
}
.cookie-modal-backdrop:not([hidden]){ display:grid; }
.cookie-modal-backdrop[hidden]{ display:none !important; }

.cookie-modal{
  width:min(680px, 94%); background:#fff; border-radius:16px; border:1px solid #eee; box-shadow: var(--shadow);
}
.cookie-modal-header{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem 0.5rem 1rem;
}
.cookie-modal-body{ padding: .5rem 1rem 1rem; display:grid; gap:.5rem; }
.cookie-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid #eee; border-radius:12px; padding:.75rem 1rem; background:#fafafa;
}
.cookie-row p{ margin: .25rem 0 0; color: var(--muted); font-size:.95rem; }
.cookie-modal-footer{ display:flex; justify-content:flex-end; gap:.5rem; padding: 0 1rem 1rem; }
.icon-btn{
  background:transparent; border:none; font-size:1.1rem; cursor:pointer; padding:.3rem .5rem; line-height:1;
}

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:48px; height:28px; }
.switch input{ display:none; }
.slider{
  position:absolute; cursor:pointer; inset:0; background:#ddd; border-radius:999px; transition: .2s;
}
.slider:before{
  content:""; position:absolute; height:22px; width:22px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider{ background: var(--malaga); }
.switch input:checked + .slider:before{ transform: translateX(20px); }


/* Kártyák képeinek egységes stílusa */
.card .card-img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.75rem;
  border-radius: var(--radius) var(--radius) 0 0;
}


/* Rólunk panel képe esztétikus méretben */
.grid-2 .card img.card-img {
  max-height: 400px;  /* ne legyen túl nagy */
  object-fit: contain;
  margin: auto;
}


/* Fehér hátterű kártya variáns — átlátszó SVG-k ne kapjanak színezett alátétet */
.card--white {
  background: #fff;
}