/* ============================================================
   new_styles.css – Modern Redesign
   Stílus: Természet-ihlette, letisztult önkormányzati design
   Paletta: Mélyzöld + Sage + Krém + Köd
   Betűtípusok: Playfair Display (cím) + DM Sans (szöveg)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── CSS Változók ───────────────────────────────────────── */
:root {
  --zold:        #3B6B50;
  --zold-vilag:  #519872;
  --zold-sote:   #2A4E3A;
  --sage:        #B8C4AD;
  --sage-halvany:#E8EDE3;
  --krem:        #F7F4EF;
  --krem-sotet:  #EDE8DF;
  --szurke:      #4A4A4A;
  --szurke-halvany: #9A9A8E;
  --feher:       #FFFFFF;
  --arnyek-kicsi: 0 2px 8px rgba(42, 78, 58, 0.08);
  --arnyek-kozepes: 0 6px 24px rgba(42, 78, 58, 0.12);
  --arnyek-nagy: 0 16px 48px rgba(42, 78, 58, 0.16);
  --radius-s:    6px;
  --radius-m:    12px;
  --radius-l:    20px;
  --atm-gyors:   0.2s ease;
  --atm-kozepes: 0.35s ease;
  --atm-lassu:   0.5s ease;
  --font-cim:    'Playfair Display', Georgia, serif;
  --font-szoveg: 'DM Sans', 'Segoe UI', sans-serif;
}

/* ── Reset & Alap ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-szoveg);
  font-weight: 400;
  color: var(--szurke);
  background-color: var(--krem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Keret ──────────────────────────────────────────────── */
#keret {
  width: 100%;
  margin: 0 auto;
}

/* ── Fejléc ─────────────────────────────────────────────── */
#header {
  width: 100%;
  background: var(--feher);
}

#fejlec_felso {
  width: 100%;
  position: relative;
}

#logo {
  position: absolute;
  top: 16px;
  left: 48px;
}

/* ── Videó háttér ───────────────────────────────────────── */
.video-background {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  background: var(--zold-sote);
}

.video-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(42, 78, 58, 0.35) 80%,
    rgba(42, 78, 58, 0.65) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 120vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

#nagykep {
  width: 100%;
  height: auto;
  overflow: hidden;
}

#nagykep img {
  width: 100%;
  display: block;
}

#yt-mobile {
  display: none;
}

/* ── Görgetés-jelző ─────────────────────────────────────── */
.scroll-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: var(--feher);
  animation: bounce 1.4s ease-in-out infinite;
  opacity: 0.75;
  cursor: pointer;
  z-index: 50;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: background var(--atm-kozepes), box-shadow var(--atm-kozepes),
              border-color var(--atm-kozepes);
  border-bottom: 1px solid rgba(184, 196, 173, 0.3);
  height: 68px;
}

.navbar.scrolled {
  background: rgba(247, 244, 239, 0.98);
  box-shadow: 0 1px 0 rgba(184,196,173,0.5), var(--arnyek-kicsi);
}

.logo-m { display: none; }

/* ── Hamburger (csak mobil) ─────────────────────────────── */
.hamburger {
  width: 100%;
  display: none;
  font-size: 28px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 2px solid var(--sage);
  background: var(--krem);
}

.hamburger img {
  float: right;
  height: 38px;
  width: auto;
}

/* ── Menü lista ─────────────────────────────────────────── */
.menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
  height: 68px;
}

.menu li {
  position: static;   /* mega-menu full-width miatt */
  display: flex;
  align-items: center;
}

/* ── Menü linkek és toggle-ok ───────────────────────────── */
.menu li a,
.menu .dropdown-toggle {
  color: var(--szurke);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  transition: color var(--atm-gyors);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  font-family: var(--font-szoveg);
}

/* Aktív jelző vonal alul */
.menu li a::after,
.menu .dropdown-toggle::after {
  content: '';
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.menu li a:hover,
.menu .dropdown-toggle:hover,
.menu .dropdown-toggle.nav-active {
  color: var(--zold);
  text-decoration: none;
  background: none;
}

.menu li a:hover::after,
.menu .dropdown-toggle:hover::after,
.menu .dropdown-toggle.nav-active::after {
  transform: scaleX(1);
}

/* Chevron ikon a dropdown-toggle-ökön */
.nav-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.dropdown-toggle.nav-active .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Logó a menü közepén ────────────────────────────────── */
.logo {
  padding: 0 8px;
}

.logo img {
  height: 48px;
  display: block;
  transition: transform var(--atm-kozepes), opacity var(--atm-gyors);
}

.logo img:hover {
  transform: scale(1.06);
  opacity: 0.85;
}

/* Logó ::after ne legyen */
.logo a::after { display: none; }

/* ══════════════════════════════════════════════════════════
   MEGA-MENÜ PANEL
══════════════════════════════════════════════════════════ */
.mega-panel {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 998;
  background: rgba(250, 248, 244, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184,196,173,0.4);
  box-shadow: 0 8px 32px rgba(42,78,58,0.12);

  /* Animáció */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  overflow: hidden;
}

.mega-panel.mega-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Belső tartalom */
.mega-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 6px;
}

/* Panel fejléc felett dekoratív vonal */
.mega-panel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--zold-vilag), var(--sage), var(--zold-vilag), transparent);
}

/* ── Mega-menü egyedi linkek ────────────────────────────── */
.mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--szurke);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background var(--atm-gyors), color var(--atm-gyors),
              transform var(--atm-gyors);
  border: 1px solid transparent;
}

.mega-link:hover {
  background: var(--sage-halvany);
  color: var(--zold-sote);
  border-color: var(--sage);
  transform: translateX(3px);
  text-decoration: none;
}

.mega-link-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background: var(--sage-halvany);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--zold-vilag);
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

.mega-link:hover .mega-link-icon {
  background: var(--zold-vilag);
  color: var(--feher);
}

.mega-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega-link-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--zold-sote);
  line-height: 1.2;
}

.mega-link-desc {
  font-size: 0.75rem;
  color: var(--szurke-halvany);
  font-weight: 400;
  line-height: 1.3;
}

/* Panel fejléc (kategória neve) */
.mega-panel-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--krem-sotet);
}

.mega-panel-title {
  font-family: var(--font-cim);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szurke-halvany);
}

.mega-panel-title-line {
  flex: 1;
  height: 1px;
  background: var(--krem-sotet);
}

/* ── Overlay (háttér sötétítés) ─────────────────────────── */
.mega-overlay {
  position: fixed;
  inset: 0;
  top: 68px;
  background: rgba(30, 40, 35, 0.18);
  z-index: 997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mega-overlay.mega-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Almenü (legacy – csak desktop submenu hover fallback) ─ */
.submenu { display: none !important; }

/* ── Általános konténer ─────────────────────────────────── */
.container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

.container h2 {
  font-family: var(--font-cim);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--zold-sote);
  border-bottom: 3px solid var(--zold-vilag);
  padding-bottom: 12px;
  margin-bottom: 28px;
  text-transform: none;
  letter-spacing: -0.01em;
}

.content {
  margin: auto;
}

/* ── Köszöntő szekció ───────────────────────────────────── */
#greeting {
  width: 80%;
  margin: 0 auto 10vh;
  background: var(--feher);
  padding: 40px 48px;
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kicsi);
}

#greeting .greeting-content {
  font-size: 1.05rem;
  color: var(--szurke);
  line-height: 1.85;
}

#greeting .greeting-footer {
  margin-top: 28px;
  font-weight: 600;
  text-align: right;
  color: var(--zold-sote);
  font-size: 0.95rem;
}

#greeting img {
  float: left;
  margin: 0 28px 20px 0;
  width: 272px;
  height: auto;
  aspect-ratio: 288/367;
  border-radius: var(--radius-m);
  box-shadow: var(--arnyek-kozepes);
  border-bottom: 3px solid var(--zold-vilag);
  border-left: 3px solid var(--zold-vilag);
}

/* ── Hírek szekció ──────────────────────────────────────── */
#news {
  margin-bottom: 10vh;
  background: var(--sage-halvany);
  padding: 36px 0;
  position: relative;
  overflow: hidden;
}

#news::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zold-vilag), var(--sage), var(--zold-vilag));
}

#news .container {
  width: 80%;
  padding: 0 20px;
  margin: auto;
}

.news-slider {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
}

.news-item {
  min-width: 100%;
  scroll-snap-align: start;
  position: relative;
}

.news-item img {
  width: 14%;
  height: auto;
  border-radius: var(--radius-m);
  border-bottom: 2px solid var(--zold-vilag);
  border-right: 2px solid var(--zold-vilag);
  float: right;
  margin-right: 4vh;
  box-shadow: var(--arnyek-kicsi);
}

.news-content {
  padding-left: 12px;
}

.news-dots {
  text-align: center;
  margin-top: 18px;
}

.news-dot {
  height: 8px;
  width: 8px;
  margin: 0 5px;
  background: var(--sage);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
}

.news-dot.active {
  background: var(--zold);
  transform: scale(1.3);
}

.news-read-more {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--zold);
  color: var(--feher);
  text-decoration: none;
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--atm-gyors), transform var(--atm-gyors), box-shadow var(--atm-gyors);
}

.news-read-more:hover {
  background: var(--zold-sote);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 107, 80, 0.3);
}

/* ── Események szekció ──────────────────────────────────── */
#events {
  width: 80%;
  margin: 0 auto 10vh;
}

#events .events-content {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.events-left,
.events-right {
  width: 48%;
}

.event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-left: 3px solid var(--zold-vilag);
  border-radius: var(--radius-m);
  transition: box-shadow var(--atm-gyors), transform var(--atm-gyors), border-left-color var(--atm-gyors);
  margin-top: 10px;
  margin-bottom: 18px;
}

.event:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateX(3px);
  border-left-color: var(--zold-sote);
}

.event-info {
  max-width: 80%;
}

.event-title {
  font-family: var(--font-cim);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--zold-sote);
}

.event-date {
  font-size: 0.82rem;
  margin: 0 0 5px;
  color: var(--szurke-halvany);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-description {
  font-size: 0.88rem;
  color: #6A6A5E;
  margin: 0;
}

.event-arrow {
  display: flex;
  align-items: center;
}

.event-view-more {
  font-size: 1.4rem;
  color: var(--zold-vilag);
  text-decoration: none;
  transition: color var(--atm-gyors), transform var(--atm-gyors);
  display: flex;
  align-items: center;
}

.event-view-more:hover {
  color: var(--zold-sote);
  transform: translateX(4px);
}

/* ── Naptár ─────────────────────────────────────────────── */
#calendar,
#calendar-header {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}

#calendar .day,
#calendar .day-name {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--sage);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
}

#calendar .day-name {
  font-weight: 600;
  background: var(--sage-halvany);
  color: var(--zold-sote);
  border-color: var(--sage);
}

#calendar .today {
  background: var(--sage);
  border-radius: 50%;
  color: var(--zold-sote);
  font-weight: 600;
}

#calendar-header {
  display: flex;
  grid-template-columns: unset;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#calendar-header button {
  padding: 6px 14px;
  cursor: pointer;
  background: var(--feher);
  border: 1px solid var(--sage);
  border-radius: var(--radius-s);
  color: var(--zold);
  font-family: var(--font-szoveg);
  font-size: 0.9rem;
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

#calendar-header button:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

#calendar-header h3 {
  font-family: var(--font-cim);
  font-size: 1.1rem;
  color: var(--zold-sote);
}

/* ── Faluleírás szekció ─────────────────────────────────── */
#description {
  margin-bottom: 10vh;
}

#description .container {
  width: 80%;
}

#description img {
  float: right;
  margin: 0 0 0 24px;
  width: 260px;
  height: auto;
  border-radius: var(--radius-m);
  border-bottom: 3px solid var(--zold-vilag);
  border-right: 3px solid var(--zold-vilag);
  box-shadow: var(--arnyek-kozepes);
}

#desc-content {
  font-size: 1.02rem;
  color: var(--szurke);
  line-height: 1.85;
}

.desc-read-more {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 22px;
  background: var(--zold);
  color: var(--feher);
  text-decoration: none;
  border-radius: var(--radius-s);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
}

.desc-read-more:hover {
  background: var(--zold-sote);
  transform: translateY(-2px);
}

/* ── Pályázat banner (fix) ──────────────────────────────── */
#bottom-banner {
  position: fixed;
  max-width: 100%;
  width: 50%;
  margin: auto;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--feher);
  box-shadow: 0 -4px 20px rgba(42, 78, 58, 0.12);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  flex-direction: column;
  transition: opacity var(--atm-kozepes), transform var(--atm-kozepes);
  border-top: 2px solid var(--sage);
}

#bottom-banner.hide {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

#bottom-banner #close-banner {
  position: absolute;
  top: 8px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--szurke-halvany);
  transition: color var(--atm-gyors);
}

#bottom-banner #close-banner:hover {
  color: var(--szurke);
}

.banner-images {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.banner-images img {
  width: auto;
  height: 90px;
  border-radius: var(--radius-s);
  opacity: 0.9;
  transition: opacity var(--atm-gyors);
}

.banner-images img:hover {
  opacity: 1;
}

/* ── Hírek oldal ────────────────────────────────────────── */
.article-container {
  width: 100%;
  margin: auto;
}

.article-header {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--zold-vilag);
  margin: 15vh auto 28px;
}

.article-header h1 {
  font-family: var(--font-cim);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

.article-box {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  padding: 24px;
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-m);
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
  overflow: hidden;
  flex-grow: 1;
  margin: 0 auto 20px;
  opacity: 0;
}

.article-box.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.article-box.odd {
  background-color: var(--krem);
}

.article-box:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateY(-3px);
}

.article-image {
  flex: 0 0 280px;
  margin-right: 24px;
}

.article-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  display: block;
}

.article-content {
  flex: 1;
}

.article-title {
  font-family: var(--font-cim);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.article-title a {
  text-decoration: none;
  color: var(--zold-sote);
  transition: color var(--atm-gyors);
}

.article-title a:hover {
  color: var(--zold-vilag);
}

.article-summary {
  margin-bottom: 16px;
  color: #5E5E52;
  font-size: 0.97rem;
  line-height: 1.7;
}

.article-read-more a {
  text-decoration: none;
  color: var(--zold-vilag);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--atm-gyors);
  letter-spacing: 0.03em;
}

.article-read-more a:hover {
  color: var(--zold-sote);
}

.article-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  min-width: 50px;
}

.article-date .month {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zold-vilag);
}

.article-date .day {
  font-family: var(--font-cim);
  font-size: 2rem;
  font-weight: 700;
  color: var(--zold-sote);
  line-height: 1;
}

/* ── Keresés ────────────────────────────────────────────── */
.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-form input[type="text"] {
  padding: 10px 16px;
  font-size: 0.95rem;
  font-family: var(--font-szoveg);
  border: 1.5px solid var(--sage);
  border-radius: 50px;
  width: 240px;
  transition: width var(--atm-kozepes), border-color var(--atm-gyors), box-shadow var(--atm-gyors);
  background: var(--feher);
  color: var(--szurke);
}

.search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--zold-vilag);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.15);
  width: 290px;
}

.search-form button {
  background: var(--zold);
  color: var(--feher);
  padding: 10px 18px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: var(--font-szoveg);
  font-weight: 500;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
}

.search-form button:hover {
  background: var(--zold-sote);
  transform: translateY(-1px);
}

/* ── Lapozás ────────────────────────────────────────────── */
.pagination {
  text-align: center;
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pagination a {
  text-decoration: none;
  padding: 7px 14px;
  background: var(--feher);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  color: var(--szurke);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--atm-gyors), color var(--atm-gyors), border-color var(--atm-gyors);
}

.pagination a:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

.pagination .active {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

.pagination .prev,
.pagination .next {
  font-weight: 700;
}

.pagination svg {
  display: none;
}

/* ── Tartalom-elem ──────────────────────────────────────── */
.content-item {
  max-width: 960px;
  min-width: 340px;
  margin: 48px auto;
  padding: 52px;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  transition: transform var(--atm-kozepes);
}

.content-item:hover {
  transform: translateY(-4px);
}

.content-item h1 {
  font-family: var(--font-cim);
  font-size: 2.4rem;
  color: var(--zold-sote);
  margin-bottom: 28px;
  text-align: center;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.2;
}

.content-item a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--atm-gyors);
}

.content-item a:hover {
  color: var(--zold-sote);
  text-decoration: underline;
}

.header-item {
  background: var(--sage-halvany);
  padding: 32px;
  border-radius: var(--radius-m);
  text-align: center;
  margin-bottom: 40px;
  border: 1px solid var(--sage);
}

.header-item img {
  width: 30%;
  height: auto;
  border-radius: var(--radius-m);
  margin: 20px 0;
  box-shadow: var(--arnyek-kicsi);
}

.lead-item {
  margin: 24px 0;
  font-size: 1.2rem;
  color: #555;
  line-height: 1.85;
  font-style: italic;
}

.text-item {
  margin: 32px 0;
  color: var(--szurke);
  line-height: 1.85;
  font-size: 1.05rem;
}

.back-link {
  display: inline-block;
  margin-top: 40px;
  color: var(--zold);
  background: var(--sage-halvany);
  padding: 11px 26px;
  border-radius: var(--radius-s);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1.5px solid var(--sage);
  transition: background var(--atm-gyors), transform var(--atm-gyors), color var(--atm-gyors);
}

.back-link:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
  transform: translateY(-2px);
}

/* ── Testület / Dolgozók ────────────────────────────────── */
.page-title {
  text-align: center;
  margin: 28px 0;
  font-family: var(--font-cim);
  font-size: 2.2rem;
  color: var(--zold-sote);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-container {
  max-width: 1700px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  justify-content: center;
}

.card {
  display: flex;
  align-items: stretch;
  height: 38vh;
  width: calc(80% - 10px);
  max-width: 600px;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kicsi);
  overflow: hidden;
  opacity: 0;
  transition: transform var(--atm-kozepes), box-shadow var(--atm-kozepes);
  border: 1px solid var(--krem-sotet);
}

.card.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--arnyek-nagy);
}

.card-image {
  width: 150px;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.card-info {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-name {
  font-family: var(--font-cim);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 8px;
  line-height: 1.2;
}

.card-title {
  font-size: 0.95rem;
  color: var(--szurke-halvany);
  margin: 0 0 10px;
  font-weight: 500;
}

.card-contact {
  font-size: 0.88rem;
  color: var(--szurke);
  line-height: 1.6;
}

.card-contact a {
  color: var(--zold-vilag);
  text-decoration: none;
  transition: color var(--atm-gyors);
}

.card-contact a:hover {
  color: var(--zold-sote);
  text-decoration: underline;
}

/* ── Szekció cím ────────────────────────────────────────── */
.section-title {
  font-family: var(--font-cim);
  font-size: 1.6rem;
  color: var(--zold-sote);
  text-align: center;
  margin: 24px 0 10px;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--sage);
  padding-bottom: 8px;
}

.info-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: var(--krem-sotet);
  border-top: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  margin: 24px 0;
}

.info-section div {
  flex: 1;
  padding: 16px;
  background: var(--feher);
  border-radius: var(--radius-m);
  box-shadow: var(--arnyek-kicsi);
}

.centered-section {
  text-align: center;
  padding: 24px;
  background: var(--feher);
  border-radius: var(--radius-m);
  margin: 24px auto;
  width: 80%;
  box-shadow: var(--arnyek-kicsi);
}

/* ── Dokumentumtár ──────────────────────────────────────── */
.docs-container {
  max-width: 1200px;
  margin: 15vh auto 0;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  overflow: hidden;
}

.docs-header {
  background: linear-gradient(135deg, var(--zold-sote), var(--zold));
  color: var(--feher);
  text-align: center;
  padding: 28px 16px;
}

.docs-header h1 {
  font-family: var(--font-cim);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.docs-info {
  background: var(--krem);
  padding: 18px 24px;
  border: 1px solid var(--sage-halvany);
  border-left: 4px solid var(--zold-vilag);
  border-radius: var(--radius-s);
  font-size: 1rem;
  margin: 16px 20px 0;
  color: var(--szurke);
}

.docs-info p {
  margin: 0;
  line-height: 1.65;
}

.docs-info a {
  color: var(--zold-vilag);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--atm-gyors), color var(--atm-gyors);
}

.docs-info a:hover {
  color: var(--zold-sote);
  border-bottom-color: var(--zold-sote);
}

.docs-content {
  padding: 24px;
}

.docs-category {
  margin-bottom: 24px;
}

.docs-category-title {
  font-family: var(--font-cim);
  font-size: 1.15rem;
  color: var(--zold-sote);
  margin-bottom: 12px;
  border-bottom: 2px solid var(--sage-halvany);
  padding-bottom: 6px;
}

.docs-list {
  list-style: none;
  margin: 10px 0;
  padding-left: 8px;
}

.docs-item {
  margin-bottom: 8px;
}

.docs-item a {
  text-decoration: none;
  color: var(--zold-vilag);
  transition: color var(--atm-gyors);
  font-size: 0.97rem;
}

.docs-item a:hover {
  color: var(--zold-sote);
}

.docs-separator {
  border: none;
  height: 1px;
  background: var(--krem-sotet);
  margin: 20px 0;
}

.docs-filter {
  margin: 20px;
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.docs-filter label {
  font-size: 0.95rem;
  color: var(--szurke);
  font-weight: 500;
}

.docs-filter select {
  padding: 8px 14px;
  font-size: 0.95rem;
  font-family: var(--font-szoveg);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--feher);
  color: var(--szurke);
  transition: border-color var(--atm-gyors);
}

.docs-filter select:focus {
  border-color: var(--zold-vilag);
}

.docs-filter button {
  background: var(--zold);
  color: var(--feher);
  border: none;
  border-radius: var(--radius-s);
  padding: 9px 20px;
  font-size: 0.95rem;
  font-family: var(--font-szoveg);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--atm-gyors), box-shadow var(--atm-gyors), transform var(--atm-gyors);
}

.docs-filter button:hover {
  background: var(--zold-sote);
  box-shadow: 0 4px 12px rgba(59, 107, 80, 0.25);
  transform: translateY(-1px);
}

/* ── Intézmények ────────────────────────────────────────── */
.ins-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 24px;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kicsi);
}

.ins-container h1 {
  text-align: center;
  font-family: var(--font-cim);
  color: var(--zold-sote);
  margin-bottom: 32px;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}

.institution {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  padding: 24px;
  background: var(--krem);
  border-radius: var(--radius-m);
  border: 1px solid var(--krem-sotet);
  transition: box-shadow var(--atm-gyors);
}

.institution:hover {
  box-shadow: var(--arnyek-kozepes);
}

.institution a {
  text-decoration: none;
  color: var(--zold-vilag);
  font-weight: 600;
  transition: color var(--atm-gyors);
}

.institution a:hover {
  color: var(--zold-sote);
}

.institution:nth-child(even) {
  flex-direction: row-reverse;
}

.institution img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  margin: 0 24px;
  border-radius: var(--radius-m);
  box-shadow: var(--arnyek-kicsi);
}

.institution .text {
  flex: 1;
}

.institution h2 {
  font-family: var(--font-cim);
  color: var(--zold-sote);
  margin-bottom: 12px;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.institution p {
  margin: 6px 0;
  font-size: 1rem;
  color: var(--szurke);
}

.institution p strong {
  color: var(--zold);
}

/* ── Nemzetiségi önkormányzat ───────────────────────────── */
.container-ro {
  width: 90%;
  max-width: 1200px;
  margin: 24px auto;
  background: var(--feher);
  padding: 24px;
  box-shadow: var(--arnyek-kicsi);
  border-radius: var(--radius-m);
}

.container-ro h1,
.container-ro h2 {
  text-align: center;
  color: var(--zold-sote);
  font-family: var(--font-cim);
}

.representatives {
  margin-bottom: 24px;
}

.rep-card {
  background: var(--krem-sotet);
  padding: 16px 20px;
  margin: 10px 0;
  border-radius: var(--radius-m);
  border-left: 3px solid var(--zold-vilag);
  font-size: 0.97rem;
}

/* ── Egyesületek ────────────────────────────────────────── */
.org-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  margin-top: 15vh;
}

.org-main {
  flex: 1 1 600px;
  max-width: 900px;
}

.organization-header {
  background: linear-gradient(135deg, var(--zold-sote), var(--zold-vilag));
  color: var(--feher);
  text-align: center;
  padding: 36px 30px;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
}

.organization-logo {
  width: 120px;
  height: auto;
  transition: transform var(--atm-kozepes);
}

.organization-logo:hover {
  transform: rotate(4deg) scale(1.08);
}

.organization-contact,
.organization-images {
  max-width: 900px;
  margin: 32px auto;
  background: var(--feher);
  padding: 32px;
  box-shadow: var(--arnyek-kozepes);
  border-radius: var(--radius-l);
}

.organization-contact p {
  font-size: 1.05rem;
  color: var(--szurke);
}

.organization-contact strong {
  color: var(--zold);
}

.image-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.org-image {
  width: 48%;
  border-radius: var(--radius-m);
  transition: transform var(--atm-kozepes), box-shadow var(--atm-kozepes);
}

.org-image:hover {
  transform: scale(1.05);
  box-shadow: var(--arnyek-nagy);
}

.org-facebook {
  flex: 0 0 320px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
  background: var(--feher);
  padding: 20px;
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  height: fit-content;
  border: 1px solid var(--krem-sotet);
}

.fb-icon-link {
  display: inline-block;
  margin-top: 10px;
}

/* ── IKSZT Foglalás ─────────────────────────────────────── */
.main-box {
  background-image: url("../images/borito.png");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: var(--zold-sote);
  box-shadow: var(--arnyek-kozepes);
  padding: 100px;
  min-height: 400px;
  text-align: center;
  margin: 0 auto;
}

.alter-box {
  width: 50%;
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-nagy);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  padding: 32px;
  margin: 0 auto;
  border: 1px solid var(--krem-sotet);
}

.main-box h1 {
  font-family: var(--font-cim);
  font-size: 2rem;
  margin-bottom: 24px;
  color: var(--zold-sote);
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.main-box h3 {
  margin-top: 24px;
  margin-bottom: 14px;
  color: var(--zold-sote);
  font-family: var(--font-cim);
  font-size: 1.2rem;
}

.main-box .calendar-container {
  max-width: 400px;
  width: 100%;
  background: var(--feher);
  padding: 20px;
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  margin: 20px auto;
}

.main-box .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.main-box .calendar-header h2 {
  font-family: var(--font-cim);
  font-size: 1.3rem;
  color: var(--zold-sote);
}

.main-box .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--zold-vilag);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.main-box .calendara {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.main-box .day {
  text-align: center;
  padding: 12px 0;
  border-radius: var(--radius-s);
  background: var(--krem);
  cursor: pointer;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
  font-weight: 500;
  color: var(--szurke);
  font-size: 0.92rem;
}

.main-box .day:hover {
  background: var(--sage-halvany);
  transform: scale(1.05);
}

.main-box .selected-day {
  background: var(--zold);
  color: var(--feher);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.3);
}

.main-box .disabled-day {
  background: var(--krem-sotet);
  color: var(--szurke-halvany);
  cursor: not-allowed;
  pointer-events: none;
}

.main-box .submit-btn {
  margin: auto;
  margin-top: 24px;
  padding: 11px 28px;
  background: var(--zold);
  color: var(--feher);
  border: none;
  border-radius: var(--radius-s);
  font-size: 1rem;
  font-family: var(--font-szoveg);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
  display: inline-block;
  letter-spacing: 0.02em;
}

.main-box .submit-btn:hover:not(:disabled) {
  background: var(--zold-sote);
  transform: translateY(-2px);
}

.main-box .submit-btn:disabled {
  background: var(--szurke-halvany);
  cursor: not-allowed;
}

.main-box .arrow-btn {
  cursor: pointer;
  font-size: 20px;
  padding: 6px 12px;
  background: none;
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  color: var(--zold);
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

.main-box .arrow-btn:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

.main-box .rental-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

.main-box .rental-card {
  background: var(--krem);
  padding: 20px;
  border-radius: var(--radius-m);
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--atm-gyors), box-shadow var(--atm-gyors), border-color var(--atm-gyors);
  color: var(--szurke);
}

.main-box .rental-card h4 {
  margin: 0 0 10px;
  font-family: var(--font-cim);
  font-size: 1.05rem;
  color: var(--zold-sote);
}

.main-box .rental-card p {
  font-size: 1rem;
  font-weight: 700;
  color: var(--zold-vilag);
}

.main-box .rental-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--arnyek-kozepes);
}

.main-box .rental-card.selected {
  border-color: var(--zold-vilag);
  background: var(--sage-halvany);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.2);
}

.main-box .container {
  max-width: 500px;
  margin: 48px auto;
  padding: 32px;
  background: var(--feher);
  border-radius: var(--radius-m);
  box-shadow: var(--arnyek-kozepes);
  text-align: center;
}

.main-box label {
  display: block;
  margin-top: 16px;
  font-weight: 600;
  text-align: left;
  font-size: 0.9rem;
  color: var(--szurke);
  letter-spacing: 0.02em;
}

.main-box input[type="text"],
.main-box input[type="email"] {
  width: 100%;
  padding: 11px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  box-sizing: border-box;
  font-size: 0.97rem;
  font-family: var(--font-szoveg);
  background: var(--krem);
  color: var(--szurke);
  transition: border-color var(--atm-gyors), box-shadow var(--atm-gyors);
}

.main-box input[type="text"]:focus,
.main-box input[type="email"]:focus {
  outline: none;
  border-color: var(--zold-vilag);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.15);
  background: var(--feher);
}

.main-box .reset-btn {
  background: var(--krem-sotet);
  color: var(--szurke);
  border: 1.5px solid var(--sage);
  padding: 11px 28px;
  border-radius: var(--radius-s);
  font-size: 0.97rem;
  font-family: var(--font-szoveg);
  cursor: pointer;
  width: auto;
  min-width: 140px;
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

.main-box .reset-btn:hover {
  background: var(--sage);
  color: var(--zold-sote);
}

.main-box .rental-box {
  background: var(--feher);
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: var(--radius-m);
  color: var(--szurke);
  box-shadow: var(--arnyek-kicsi);
  border: 1px solid var(--krem-sotet);
}

.main-box .info-box {
  background: var(--sage-halvany);
  padding: 16px 18px;
  border-left: 4px solid var(--zold-vilag);
  margin-bottom: 24px;
  text-align: left;
  border-radius: var(--radius-s);
  color: var(--szurke);
  font-size: 0.95rem;
}

/* ── Összegzés konténer ─────────────────────────────────── */
.sum-container {
  max-width: 600px;
  margin: 48px auto;
  padding: 2rem;
  border-radius: var(--radius-l);
  background: var(--feher);
  box-shadow: var(--arnyek-kozepes);
}

.sum-container .row {
  margin-bottom: 1.4rem;
}

.sum-container .label {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--szurke);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sum-container .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.sum-container .btn {
  padding: 11px 22px;
  border: none;
  border-radius: var(--radius-s);
  font-family: var(--font-szoveg);
  font-size: 0.97rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
  min-width: 120px;
}

.sum-container .btn-success {
  background: var(--zold);
  color: var(--feher);
}

.sum-container .btn-success:hover {
  background: var(--zold-sote);
  transform: translateY(-2px);
}

.sum-container .btn-cancel {
  background: var(--krem-sotet);
  color: var(--szurke);
  border: 1.5px solid var(--sage);
}

.sum-container .btn-cancel:hover {
  background: var(--sage);
}

/* ── Lakossági bejelentés ───────────────────────────────── */
#lakossagi-bejelentes-form-container {
  max-width: 520px;
  margin: 36px auto;
  padding: 40px;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
}

#lakossagi-bejelentes-form-container h1 {
  font-family: var(--font-cim);
  color: var(--zold-sote);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 28px;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}

.bejelentes-alert {
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: var(--radius-s);
  font-weight: 500;
  font-size: 0.95rem;
}

.bejelentes-alert-success {
  color: #1a5c2f;
  background: #d1f0de;
  border: 1px solid #a8dfc0;
}

.bejelentes-alert-danger {
  color: #7c1b24;
  background: #fde8ea;
  border: 1px solid #f4bfc3;
}

#lakossagi-bejelentes-form-container .form-group-bejelentes {
  margin-bottom: 18px;
}

#lakossagi-bejelentes-form-container label {
  display: block;
  margin-bottom: 6px;
  color: var(--szurke);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

#bejelentes-nev,
#bejelentes-email,
#bejelentes-szoveg {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  box-sizing: border-box;
  font-size: 0.97rem;
  font-family: var(--font-szoveg);
  background: var(--krem);
  color: var(--szurke);
  transition: border-color var(--atm-gyors), box-shadow var(--atm-gyors);
}

#bejelentes-szoveg {
  resize: vertical;
  min-height: 150px;
}

#bejelentes-nev:focus,
#bejelentes-email:focus,
#bejelentes-szoveg:focus {
  border-color: var(--zold-vilag);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.18);
  background: var(--feher);
  outline: none;
}

#bejelentes-submit-btn {
  background: var(--zold);
  color: var(--feher);
  padding: 13px 28px;
  border: none;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-szoveg);
  font-weight: 600;
  transition: background var(--atm-gyors), transform var(--atm-gyors), box-shadow var(--atm-gyors);
  width: 100%;
  margin-top: 16px;
  letter-spacing: 0.03em;
}

#bejelentes-submit-btn:hover {
  background: var(--zold-sote);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 107, 80, 0.28);
}

.error-message-bejelentes {
  color: #c0392b;
  font-size: 0.83rem;
  margin-top: 5px;
  font-weight: 500;
}

#lakossagi-bejelentes-form-container input.is-invalid,
#lakossagi-bejelentes-form-container textarea.is-invalid {
  border-color: #c0392b;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: linear-gradient(160deg, #1E3329 0%, #2A4E3A 60%, #1A2B22 100%);
  color: rgba(255,255,255,0.9);
  padding: 40px 0 0;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zold-vilag), var(--sage), var(--zold-vilag));
}

.footer-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
  padding-bottom: 32px;
}

.footer-section {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  padding: 20px;
  flex: 1;
  min-width: 200px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(184, 196, 173, 0.12);
  transition: background var(--atm-gyors);
}

.footer-section:hover {
  background: rgba(255,255,255,0.09);
}

.footer-section h3 {
  margin-bottom: 14px;
  font-family: var(--font-cim);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(81, 152, 114, 0.5);
  padding-bottom: 8px;
  color: var(--feher);
}

.footer-section a {
  text-decoration: none;
  color: var(--sage);
  font-weight: 500;
  transition: color var(--atm-gyors);
}

.footer-section a:hover {
  color: var(--feher);
}

.footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-center img {
  max-width: 100%;
  height: 160px;
  filter: brightness(0.95);
}

.contact-info svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.8;
}

.footer-copyright {
  font-size: 0.82rem;
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}

/* ── Reszponzív – Tablet (≤1200px) ─────────────────────── */
@media (max-width: 1200px) {
  .video-background iframe {
    width: 100vw;
    height: 120vh;
  }

  #yt-mobile  { display: inherit; }
  #yt-desktop { display: none; }

  #events { width: 100%; }

  #events h2 {
    width: 80%;
    margin: 0 auto 20px;
  }

  #events .events-content {
    flex-direction: column;
    width: 100%;
  }

  .event {
    width: 70%;
    margin: 0 auto 3vh;
    flex-direction: column;
    align-items: flex-start;
  }

  .event-arrow {
    align-self: flex-end;
    margin-top: 10px;
  }

  .event-info   { max-width: 100%; }
  .event-title  { font-size: 1em; }
  .event-description { font-size: 0.82em; }
  .event-line   { text-align: center; }
  .view-more    { font-size: 1.2em; }

  .events-left,
  .events-right {
    width: 100%;
    margin-bottom: 20px;
  }

  #calendar,
  #calendar-header {
    width: 70%;
    margin: auto;
    gap: 3px;
  }

  #calendar .day { font-size: 0.82em; padding: 5px; }

  .card-name    { font-size: 1.4em; }
  .card-title   { font-size: 1.1em; }
  .card-contact { font-size: 0.88em; }
}

/* ── Reszponzív – Mobil (≤768px) ────────────────────────── */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  #keret { width: 100%; }

  /* Videó */
  .video-background iframe {
    width: 100vw;
    height: 100vh;
  }

  #yt-mobile  { display: inherit; }
  #yt-desktop { display: none; }

  /* Navbar mobilon */
  .navbar {
    background: var(--feher);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .navbar.scrolled {
    background: var(--feher);
    box-shadow: var(--arnyek-kicsi);
  }

  /* ── Hamburger sáv magasság változóként ── */
  .hamburger {
    display: flex;
    font-size: 24px;
    background: var(--krem-sotet);
    padding: 12px 18px;
    box-sizing: border-box;
  }

  /* ── Mobil menü: teljes képernyős kétpaneles rendszer ── */
  .menu {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background: var(--feher);
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - 52px);   /* dvh: dynamic viewport height, kezeli a mobilos cím/URL sávot */
    z-index: 998;
    padding: 0;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    border-top: 2px solid var(--sage-halvany);
    box-shadow: var(--arnyek-nagy);
    overflow: hidden;
    gap: 0;
  }

  .menu.open {
    transform: translateX(0);
    opacity: 1;
  }

  /* ── Főpanel (scrollozható) ── */
  .menu-main-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    transform: translateX(0);
    opacity: 1;
    padding: 4px 0 16px;
    background: var(--feher);
  }

  .menu-main-panel.slide-out {
    transform: translateX(-40%);
    opacity: 0;
    pointer-events: none;
  }

  /* ── Almenü panel (jobbról csúszik be) ── */
  .menu-sub-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--feher);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    padding: 0 0 40px;
    pointer-events: none;
  }

  .menu-sub-panel.slide-in {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Almenü panel fejléce ── */
  .menu-sub-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--sage-halvany);
    border-bottom: 1px solid var(--sage);
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .menu-sub-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-szoveg);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zold);
    padding: 6px 0;
    flex-shrink: 0;
  }

  .menu-sub-title {
    font-family: var(--font-cim);
    font-size: 1rem;
    font-weight: 700;
    color: var(--zold-sote);
    flex: 1;
    text-align: center;
    padding-right: 60px; /* kompenzálja a Vissza gombot */
  }

  /* ── Menüelemek mobilon ── */
  .menu li {
    flex: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--krem-sotet);
  }

  .menu li:last-child {
    border-bottom: none;
  }

  .menu li a,
  .menu .dropdown-toggle {
    font-size: 14.5px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    color: var(--szurke);
    font-weight: 500;
  }

  .menu li a:hover,
  .menu .dropdown-toggle:hover {
    background: var(--sage-halvany);
    color: var(--zold);
  }

  /* Jobbra nyíl a dropdown-oknál */
  .menu .dropdown-toggle::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--szurke-halvany);
    border-top: 2px solid var(--szurke-halvany);
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Logó középre a mobilmenüben */
  .logo-m {
    display: block;
    width: 100%;
    border-bottom: 2px solid var(--sage-halvany);
    background: var(--sage-halvany);
  }

  .logo-m a {
    display: flex !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  /* Desktop logó elrejtése mobilon */
  .menu li.logo { display: none; }

  /* ── Almenü linkek a sub-panelban ── */
  .menu-sub-panel .submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    font-size: 14.5px;
    color: var(--szurke);
    text-decoration: none;
    border-bottom: 1px solid var(--krem-sotet);
    transition: background var(--atm-gyors), color var(--atm-gyors);
    font-weight: 500;
  }

  .menu-sub-panel .submenu-item:active,
  .menu-sub-panel .submenu-item:hover {
    background: var(--sage-halvany);
    color: var(--zold);
  }

  /* Az eredeti CSS submenu elrejtve mobilon – a JS panel kezeli */
  .submenu {
    display: none !important;
  }

  /* Footer mobilon */
  .footer-container { flex-direction: column; align-items: center; }
  .footer-section   { padding: 16px; width: 100%; margin-bottom: 8px; }

  /* Tartalom */
  .container { padding-left: 0; }

  #tartalom {
    margin: 0 auto;
  }

  .content { width: 100%; }

  /* Köszöntő mobilon */
  #greeting {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 16px;
    border-radius: var(--radius-m);
  }

  #greeting h2 {
    font-size: 1.5rem;
    padding-bottom: 8px;
  }

  #greeting .greeting-content {
    font-size: 0.97rem;
    line-height: 1.7;
  }

  #greeting img {
    float: none;
    display: block;
    margin: 0 auto 20px;
    width: 140px;
    aspect-ratio: 288/367;
  }

  #greeting .greeting-footer {
    font-size: 0.9rem;
    margin-top: 20px;
  }

  /* Hírek mobilon */
  .container h2    { text-align: center; font-size: 1.5rem; }

  .article-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .search-form {
    flex-direction: column;
    align-items: center;
  }

  .news-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .news-item {
    min-width: 100%;
    scroll-snap-align: start;
    position: relative;
  }

  .news-item img {
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    float: none;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }

  .news-content { padding: 16px; }
  .news-dot     { height: 8px; width: 8px; margin: 0 4px; }

  /* Események mobilon */
  #events { width: 100%; }

  #events h2 {
    width: 80%;
    margin: 0 auto 20px;
  }

  #events .events-content {
    flex-direction: column;
    width: 100%;
  }

  .events-left,
  .events-right {
    width: 100%;
    margin-bottom: 16px;
  }

  .event {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1vh;
    width: 100%;
  }

  .event-arrow  { align-self: flex-end; margin-top: 10px; }
  .event-info   { max-width: 100%; }
  .event-title  { font-size: 1em; }
  .event-description { font-size: 0.82em; }
  .event-line   { text-align: center; }
  .view-more    { font-size: 1.2em; }

  #calendar {
    width: 100% !important;
    margin: auto !important;
    gap: 2px;
  }

  #calendar-header { width: 90%; margin: auto; }
  #calendar .day   { font-size: 0.78em; padding: 5px; }

  /* Leírás mobilon */
  #description       { width: 100%; }
  #description .container { width: 88%; }
  #description .container img { margin-bottom: 14px; float: none; width: 100%; height: auto; }
  #desc-2pg          { display: none; }

  /* Pályázat banner */
  .banner-images img { height: 72px; width: auto; }
  #bottom-banner {
    box-sizing: border-box;
    max-width: 100%;
    width: 92%;
  }

  /* Hírek oldal */
  .article-box { flex-direction: column; }
  .article-image { margin-right: 0; margin-bottom: 18px; }
  .article-content { padding: 0; }

  /* Tartalom-elem */
  .content-item { padding: 24px; }
  .content-item h1 { font-size: 1.8rem; }
  .back-link { font-size: 0.88rem; padding: 9px 18px; }

  /* Kártyák */
  .card { width: 100%; }
  .info-section { flex-direction: column; }
  .card-name    { font-size: 1.2em; }
  .card-title   { font-size: 1em; }
  .card-contact { font-size: 0.78em; }

  /* Dokumentumtár */
  .docs-container { margin: 10vh 10px; box-shadow: none; border-radius: var(--radius-m); }
  .docs-header h1 { font-size: 1.2rem; }
  .docs-category-title { font-size: 1rem; }
  .docs-item { margin-bottom: 10px; }
  .docs-item a { font-size: 0.95rem; }
  #category-filter { width: 100%; }
  .docs-filter { margin: 10px 0; }
  .docs-filter label { font-size: 0.88rem; }
  .docs-filter select { font-size: 0.88rem; padding: 6px; }

  /* Intézmények */
  .institution {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .institution:nth-child(even) { flex-direction: column; }
  .institution img { margin: 10px 0; width: 100%; height: auto; }
  .institution .text { width: 100%; }

  /* Nemzeti önkormányzat */
  .container-ro { width: 100%; padding: 14px; border-radius: var(--radius-m); }
  .rep-card      { font-size: 0.9rem; }

  /* Egyesületek */
  .org-container { flex-direction: column; align-items: center; margin-top: 10vh; }
  .org-facebook {
    position: static;
    width: 100%;
    margin: 14px auto 0;
  }

  .organization-header { padding: 24px 20px; }
  .organization-logo   { width: 90px; }

  .organization-contact,
  .organization-images {
    padding: 20px;
    max-width: 100%;
    margin: 16px;
  }

  .image-container { gap: 12px; }
  .org-image { width: 100%; }

  /* IKSZT foglalás */
  .main-box {
    padding: 40px 20px;
    background-attachment: scroll;
    background-size: cover;
    min-height: 250px;
  }

  .alter-box { width: 92%; padding: 20px; }
  .main-box h1 { font-size: 1.4rem; }
  .main-box h3 { font-size: 1.05rem; }

  .main-box .calendar-container { padding: 14px; max-width: 95%; }
  .main-box .calendar-header h2 { font-size: 1.1rem; }
  .main-box .day { padding: 8px 0; font-size: 0.88rem; }
  .main-box .calendar-days { font-size: 0.78rem; }

  .main-box .submit-btn {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
  }

  .main-box .rental-options { grid-template-columns: 1fr; }

  .main-box .container {
    max-width: 95%;
    margin: 28px auto;
    padding: 20px;
  }

  .main-box label { font-size: 0.88rem; }

  .main-box input[type="text"],
  .main-box input[type="email"] {
    padding: 10px;
    font-size: 0.9rem;
  }

  .main-box .submit-btn,
  .main-box .reset-btn {
    width: 100%;
    min-width: unset;
    padding: 13px;
    font-size: 0.97rem;
    margin-top: 14px;
  }

  .main-box .info-box { font-size: 0.9rem; padding: 12px; }
}

/* ============================================================
   NYITÓOLDAL – kiegészítő stílusok
   ============================================================ */

/* ── Videó overlay szöveg ───────────────────────────────── */
.video-overlay-text {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--feher);
  z-index: 3;
  pointer-events: none;
  width: 100%;
}

.video-overlay-text h1 {
  font-family: var(--font-cim);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  margin-bottom: 10px;
}

.video-overlay-text p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.88;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

/* ── Hírek kártya-szerű elrendezés ─────────────────────── */
.news-card {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 8px 0;
}

.news-card-image {
  flex: 0 0 220px;
  max-width: 220px;
}

.news-card-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--arnyek-kicsi);
  border-bottom: 2px solid var(--zold-vilag);
  border-right: 2px solid var(--zold-vilag);
}

.news-card-body {
  flex: 1;
}

.news-card-body h3 {
  font-family: var(--font-cim);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin-bottom: 8px;
  line-height: 1.3;
}

.news-card-body p {
  font-size: 0.97rem;
  color: #5E5E52;
  line-height: 1.7;
  margin-bottom: 12px;
}

.news-date {
  font-size: 0.78rem;
  color: var(--szurke-halvany);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Tartalom-szekciók belső padding ────────────────────── */
#tartalom1 {
  margin-top: 0;
}

#tartalom1 > .content > section {
  padding-top: 72px;
  padding-bottom: 72px;
}

#tartalom1 > .content > section:nth-child(even) {
  background: var(--krem-sotet);
}

/* ── Köszöntő belső igazítás ────────────────────────────── */
#greeting {
  width: 80%;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ── Hírek szekció háttér a nyitón ──────────────────────── */
#news {
  margin-bottom: 0;
}

/* ── Naptár fejléc gomb ─────────────────────────────────── */
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  width: 100%;
}

.calendar-nav h3 {
  font-family: var(--font-cim);
  font-size: 1.1rem;
  color: var(--zold-sote);
  font-weight: 600;
}

.calendar-nav button {
  background: var(--feher);
  border: 1.5px solid var(--sage);
  color: var(--zold);
  border-radius: var(--radius-s);
  padding: 5px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--atm-gyors), color var(--atm-gyors);
  font-family: var(--font-szoveg);
}

.calendar-nav button:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

/* ── Közelgő esemény badge ──────────────────────────────── */
.events-right > h3 {
  font-family: var(--font-cim);
  font-size: 1.2rem;
  color: var(--zold-sote);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sage-halvany);
}

@media (max-width: 768px) {
  .news-card {
    flex-direction: column;
    gap: 14px;
  }

  .news-card-image {
    flex: unset;
    max-width: 100%;
  }

  .news-card-image img {
    height: 200px;
    width: 100%;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    border: none;
  }

  .video-overlay-text {
    bottom: 60px;
    padding: 0 20px;
  }

  #greeting {
    width: 92%;
  }

  #tartalom1 > .content > section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ── Testület – fogadóóra sor ───────────────────────────── */
.card-reception {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--szurke-halvany);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-reception svg {
  flex-shrink: 0;
  color: var(--zold-vilag);
}

/* ── Intézmények – badge & link gombok ──────────────────── */
.institution-badge {
  display: inline-block;
  background: var(--sage-halvany);
  color: var(--zold-sote);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid var(--sage);
  margin-bottom: 10px;
}

.institution-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ins-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--feher);
  color: var(--zold);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--atm-gyors), color var(--atm-gyors), border-color var(--atm-gyors), transform var(--atm-gyors);
}

.ins-link-btn:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
  transform: translateY(-2px);
}

.ins-link-btn svg {
  flex-shrink: 0;
}

/* ── Intézmény kép üres placeholder ────────────────────── */
.institution img[src=""] {
  display: none;
}

/* ============================================================
   INTÉZMÉNYEK OLDAL – teljes redesign
   ============================================================ */

/* ── Oldal wrapper ──────────────────────────────────────── */
.ins-page {
  background: var(--krem);
  min-height: 100vh;
}

/* ── Hero fejléc ────────────────────────────────────────── */
.ins-hero {
  position: relative;
  background: linear-gradient(135deg, var(--zold-sote) 0%, var(--zold) 60%, #6aab85 100%);
  padding: 100px 40px 80px;
  text-align: center;
  overflow: hidden;
}

.ins-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%);
  pointer-events: none;
}

/* Dekoratív körök */
.ins-hero::before,
.ins-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}
.ins-hero::before {
  width: 400px; height: 400px;
  top: -100px; left: -100px;
}
.ins-hero::after {
  width: 300px; height: 300px;
  bottom: -60px; right: -60px;
}

.ins-hero-content {
  position: relative;
  z-index: 2;
}

.ins-hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
  padding: 4px 14px;
  border: 1px solid rgba(184, 196, 173, 0.35);
  border-radius: 50px;
}

.ins-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.ins-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  max-width: 480px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.6;
}

.ins-hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 3;
}

.ins-hero-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Szűrő sáv ──────────────────────────────────────────── */
.ins-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 32px 20px 8px;
}

.ins-filter-btn {
  padding: 9px 22px;
  border: 1.5px solid var(--sage);
  background: var(--feher);
  color: var(--szurke);
  border-radius: 50px;
  font-family: var(--font-szoveg);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--atm-gyors), color var(--atm-gyors),
              border-color var(--atm-gyors), box-shadow var(--atm-gyors),
              transform var(--atm-gyors);
  letter-spacing: 0.02em;
}

.ins-filter-btn:hover {
  border-color: var(--zold-vilag);
  color: var(--zold);
  transform: translateY(-2px);
}

.ins-filter-btn.active {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
  box-shadow: 0 4px 14px rgba(59, 107, 80, 0.3);
}

/* ── Kártya rács ────────────────────────────────────────── */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1280px;
  margin: 36px auto 64px;
  padding: 0 32px;
}

/* ── Kártya alap ────────────────────────────────────────── */
.ins-card {
  background: var(--feher);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--arnyek-kicsi);
  border: 1px solid var(--krem-sotet);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow var(--atm-kozepes);
}

.ins-card--visible {
  opacity: 1;
  transform: translateY(0);
}

.ins-card:hover {
  box-shadow: var(--arnyek-nagy);
  transform: translateY(-6px);
}

/* Széles kártya (2 oszlopnyi) */
.ins-card--wide {
  grid-column: span 2;
  flex-direction: row;
}

.ins-card--wide .ins-card-img {
  width: 42%;
  flex-shrink: 0;
  height: auto;
  min-height: 260px;
  border-radius: 0;
}

.ins-card--wide .ins-card-body {
  flex: 1;
}

/* ── Kártya kép rész ────────────────────────────────────── */
.ins-card-img {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--sage-halvany);
  overflow: hidden;
  flex-shrink: 0;
}

/* Kép overlay – alulról felfelé gradient */
.ins-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(42, 78, 58, 0.25) 100%
  );
  transition: opacity var(--atm-kozepes);
}

.ins-card:hover .ins-card-img::after {
  opacity: 0.5;
}

/* Kép zoom hover */
.ins-card-img[style*="background-image"] {
  background-size: 100%;
  transition: background-size var(--atm-lassu);
}

.ins-card:hover .ins-card-img[style*="background-image"] {
  background-size: 108%;
}

/* Placeholder (nincs kép) */
.ins-card-img--placeholder {
  background: linear-gradient(135deg, var(--sage-halvany) 0%, var(--krem-sotet) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ins-placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--sage);
  opacity: 0.5;
  z-index: 1;
}

/* Kategória badge a képen */
.ins-card-cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  color: var(--zold-sote);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.6);
}

.ins-card-badge-secondary {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(42, 78, 58, 0.82);
  backdrop-filter: blur(4px);
  color: var(--sage-halvany);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 50px;
  max-width: calc(100% - 28px);
}

/* ── Kártya tartalom ────────────────────────────────────── */
.ins-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ins-card-title {
  font-family: var(--font-cim);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--zold-sote);
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.ins-card-subtitle {
  font-size: 0.85rem;
  color: var(--szurke-halvany);
  margin: -4px 0 4px;
  font-style: italic;
}

.ins-card-note {
  font-size: 0.8rem;
  color: var(--szurke-halvany);
  font-style: italic;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--krem-sotet);
}

/* ── Részlet sorok ──────────────────────────────────────── */
.ins-card-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--szurke);
  line-height: 1.4;
}

.ins-card-detail svg {
  flex-shrink: 0;
  color: var(--zold-vilag);
}

.ins-card-detail a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--atm-gyors);
}

.ins-card-detail a:hover {
  color: var(--zold-sote);
}

.ins-detail-label {
  font-weight: 700;
  color: var(--zold-sote);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  min-width: 50px;
}

/* ── Időbeosztás ────────────────────────────────────────── */
.ins-card-schedule {
  margin-top: 6px;
  background: var(--sage-halvany);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  border-left: 3px solid var(--zold-vilag);
}

.ins-schedule-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zold-vilag);
  margin-bottom: 6px;
}

.ins-schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  color: var(--szurke);
  padding: 2px 0;
}

.ins-schedule-row + .ins-schedule-row {
  border-top: 1px solid rgba(184, 196, 173, 0.4);
  padding-top: 4px;
  margin-top: 2px;
}

/* ── Szolgáltatás tagek ─────────────────────────────────── */
.ins-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ins-tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  background: var(--krem-sotet);
  color: var(--szurke);
  border-radius: 50px;
  border: 1px solid var(--sage);
  white-space: nowrap;
}

/* ── Link gombok ────────────────────────────────────────── */
.ins-card-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}

.ins-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--feher);
  color: var(--zold);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-s);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--atm-gyors), color var(--atm-gyors),
              border-color var(--atm-gyors), transform var(--atm-gyors);
  white-space: nowrap;
}

.ins-link-btn:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
  transform: translateY(-2px);
}

.ins-link-btn--primary {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

.ins-link-btn--primary:hover {
  background: var(--zold-sote);
  border-color: var(--zold-sote);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ins-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
    gap: 20px;
  }

  .ins-card--wide {
    grid-column: span 2;
    flex-direction: row;
  }

  .ins-card--wide .ins-card-img {
    width: 40%;
    min-height: 220px;
  }
}

@media (max-width: 700px) {
  .ins-hero {
    padding: 80px 20px 60px;
  }

  .ins-hero-title {
    font-size: 2.2rem;
  }

  .ins-filters {
    gap: 8px;
    padding: 24px 16px 4px;
  }

  .ins-filter-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }

  .ins-grid {
    grid-template-columns: 1fr;
    padding: 0 14px;
    gap: 18px;
    margin-bottom: 40px;
  }

  .ins-card--wide {
    grid-column: span 1;
    flex-direction: column;
  }

  .ins-card--wide .ins-card-img {
    width: 100%;
    height: 200px;
  }

  .ins-card-title {
    font-size: 1.1rem;
  }

  .ins-schedule-row {
    flex-direction: column;
    gap: 1px;
  }
}

/* ── Hamburger ikon méret ───────────────────────────────── */
.hb-icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
}

/* ============================================================
   KÉPVISELŐ-TESTÜLET – teljes redesign
   ============================================================ */

.tb-page {
  background: var(--krem);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Hero ───────────────────────────────────────────────── */
.tb-hero {
  position: relative;
  background: linear-gradient(135deg, var(--zold-sote) 0%, #2e5e42 50%, #3d7a56 100%);
  padding: 110px 40px 90px;
  text-align: center;
  overflow: hidden;
}

/* Dekoratív geometria */
.tb-hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  top: -200px; right: -150px;
  pointer-events: none;
}

.tb-hero::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  bottom: -100px; left: -100px;
  pointer-events: none;
}

.tb-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 60%, rgba(184,196,173,0.08) 0%, transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.05) 0%, transparent 45%);
  pointer-events: none;
}

.tb-hero-content { position: relative; z-index: 2; }

.tb-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 1px solid rgba(184,196,173,0.3);
  border-radius: 50px;
}

.tb-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.tb-hero-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  font-weight: 300;
}

.tb-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 90px;
  z-index: 3;
}
.tb-hero-wave svg { width: 100%; height: 100%; display: block; }

/* ── Vezető kártyák ─────────────────────────────────────── */
.tb-leaders {
  padding: 60px 32px 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.tb-leaders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.tb-leader-card {
  background: var(--feher);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--arnyek-kozepes);
  border: 1px solid var(--krem-sotet);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow var(--atm-kozepes);
  /* Fontos: ne engedje összenyomni a képet */
  min-height: 0;
}

.tb-leader-card.tb-visible {
  opacity: 1;
  transform: translateY(0);
}

.tb-leader-card:hover {
  box-shadow: var(--arnyek-nagy);
  transform: translateY(-5px);
}

/* Kép rész */
.tb-leader-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 420px;
  overflow: hidden;
  background: var(--sage-halvany);
  flex-shrink: 0;
}

.tb-leader-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 0.6s ease;
}

.tb-leader-card:hover .tb-leader-img {
  transform: scale(1.04);
}

/* Gradiens átmenet kép → szöveg */
.tb-leader-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--feher));
  pointer-events: none;
}

/* Szerepkör badge */
.tb-leader-role-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--zold-sote);
  color: var(--feher);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Szöveg rész */
.tb-leader-body {
  padding: 20px 28px 28px;
  flex: 1;
}

.tb-leader-name {
  font-family: var(--font-cim);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tb-leader-divider {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--zold-vilag), var(--sage));
  border-radius: 2px;
  margin-bottom: 18px;
}

/* Kontakt lista */
.tb-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tb-contact-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--szurke);
  line-height: 1.4;
}

.tb-contact-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--sage-halvany);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zold-vilag);
}

.tb-contact-list a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--atm-gyors);
}

.tb-contact-list a:hover { color: var(--zold-sote); }

.tb-contact-reception {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--krem-sotet);
  font-style: italic;
  color: var(--szurke-halvany) !important;
  font-size: 0.82rem !important;
}

.tb-contact-reception .tb-contact-icon {
  background: transparent;
  color: var(--szurke-halvany);
}

/* ── Szekció elválasztó ─────────────────────────────────── */
.tb-section-label {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto 40px;
  padding: 0 32px;
}

.tb-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
}

.tb-section-text {
  font-family: var(--font-cim);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--szurke-halvany);
  white-space: nowrap;
}

/* ── Képviselő kártyák ──────────────────────────────────── */
.tb-members {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}

.tb-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Képviselő kártya – tiszta, overlay nélkül ── */
.tb-member-card {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--arnyek-kicsi);
  border: 1px solid var(--krem-sotet);
  background: var(--feher);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow var(--atm-kozepes);
}

.tb-member-card.tb-visible {
  opacity: 1;
  transform: translateY(0);
}

.tb-member-card:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateY(-4px);
}

/* ── Kép rész ── */
.tb-member-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sage-halvany);
  flex-shrink: 0;
}

.tb-member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 0.5s ease;
}

.tb-member-card:hover .tb-member-img {
  transform: scale(1.04);
}

.tb-member-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--feher));
  pointer-events: none;
}

/* Képviselő jelvény a képen */
.tb-member-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  color: var(--zold-sote);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.6);
}

/* ── Szöveg rész – mindig látható ── */
.tb-member-body {
  padding: 16px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--sage-halvany);
}

.tb-member-name {
  font-family: var(--font-cim);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Kontaktadatok */
.tb-member-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tb-member-contacts li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--szurke);
  line-height: 1.35;
}

.tb-member-contacts svg {
  flex-shrink: 0;
  color: var(--zold-vilag);
}

.tb-member-contacts a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--atm-gyors);
  word-break: break-all;
}

.tb-member-contacts a:hover { color: var(--zold-sote); }

.tb-member-contacts .tb-reception {
  color: var(--szurke-halvany);
  font-style: italic;
  font-size: 0.78rem;
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .tb-leaders-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .tb-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tb-leader-img-wrap { aspect-ratio: 4 / 3; max-height: 300px; }
}

@media (max-width: 600px) {
  .tb-hero { padding: 90px 20px 70px; }
  .tb-hero-title { font-size: 2.2rem; }

  .tb-leaders { padding: 40px 16px 24px; }
  .tb-members { padding: 0 16px; }

  .tb-leaders-grid { max-width: 100%; gap: 20px; }
  /* Mobilon 1 oszlop, a kártyák teljes szélességűek */
  .tb-members-grid { grid-template-columns: 1fr; }

  .tb-leader-img-wrap { aspect-ratio: 3 / 4; max-height: 360px; }
  /* Képviselőknél mobilon kicsit laposabb arány – jobb helykihasználás */
  .tb-member-img-wrap { aspect-ratio: 1 / 1; }

  .tb-leader-body { padding: 16px 20px 22px; }
  .tb-leader-name { font-size: 1.3rem; }

  .tb-section-label { padding: 0 16px; margin: 10px auto 28px; }
}

/* ============================================================
   OPENER OLDAL – teljes redesign
   ============================================================ */

.opener-page { background: var(--krem); }

/* ── Hero ───────────────────────────────────────────────── */
.op-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Videó wrapper */
.op-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--zold-sote);
}

.op-video-wrap iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 120vw; height: 120vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Gradient overlay a videón */
.op-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 40, 28, 0.35) 0%,
    rgba(20, 40, 28, 0.15) 40%,
    rgba(20, 40, 28, 0.55) 80%,
    rgba(20, 40, 28, 0.75) 100%
  );
}

#yt-mobile { display: none; }

/* Hero tartalom */
.op-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--feher);
  padding: 0 24px;
  animation: opFadeUp 1s ease 0.3s both;
}

@keyframes opFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.op-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  backdrop-filter: blur(4px);
}

.op-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 20px;
  text-shadow: 0 4px 32px rgba(0,0,0,0.3);
}

.op-hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

.op-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.op-hero-btn {
  padding: 13px 32px;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all var(--atm-gyors);
}

.op-hero-btn--primary {
  background: var(--zold-vilag);
  color: var(--feher);
  border: 2px solid var(--zold-vilag);
}

.op-hero-btn--primary:hover {
  background: var(--zold-sote);
  border-color: var(--zold-sote);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.op-hero-btn--ghost {
  background: transparent;
  color: var(--feher);
  border: 2px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
}

.op-hero-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-2px);
}

/* Scroll jelző */
.op-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.op-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%       { transform: scaleY(0.6); opacity: 1; }
}

/* ── Gyors elérés sáv ───────────────────────────────────── */
.op-quicklinks {
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--feher);
  box-shadow: var(--arnyek-kozepes);
  border-bottom: 2px solid var(--sage-halvany);
  position: relative;
  z-index: 10;
  flex-wrap: wrap;
}

.op-ql-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 28px;
  text-decoration: none;
  color: var(--szurke);
  border-right: 1px solid var(--krem-sotet);
  transition: background var(--atm-gyors), color var(--atm-gyors), transform var(--atm-gyors);
  min-width: 100px;
  opacity: 0;
  transform: translateY(8px);
}

.op-ql-item:last-child { border-right: none; }

.op-ql-item.op-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s, color 0.2s;
}

.op-ql-item:hover {
  background: var(--sage-halvany);
  color: var(--zold-sote);
  transform: translateY(-3px) !important;
}

.op-ql-icon {
  color: var(--zold-vilag);
  transition: color var(--atm-gyors);
}

.op-ql-item:hover .op-ql-icon { color: var(--zold-sote); }

.op-ql-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Szekciók alap ──────────────────────────────────────── */
.op-section {
  padding: 80px 0;
}

.op-section--alt {
  background: var(--krem-sotet);
}

.op-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}

.op-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sage-halvany);
}

.op-section-title {
  font-family: var(--font-cim);
  font-size: 2rem;
  font-weight: 700;
  color: var(--zold-sote);
  letter-spacing: -0.02em;
  margin: 0;
}

.op-section-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--zold-vilag);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color var(--atm-gyors), gap var(--atm-gyors);
  white-space: nowrap;
}

.op-section-more:hover { color: var(--zold-sote); }

/* ── Köszöntő ───────────────────────────────────────────── */
.op-greeting {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
  opacity: 0;
  transform: translateY(20px);
}

.op-greeting.op-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.op-greeting-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.op-greeting-img {
  width: 100%;
  height: auto;
  aspect-ratio: 6/;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-nagy);
  display: block;
  border-bottom: 3px solid var(--zold-vilag);
  border-left: 3px solid var(--zold-vilag);
}

.op-greeting-name-card {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-m);
  padding: 10px 16px;
  box-shadow: var(--arnyek-kozepes);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-greeting-name {
  font-family: var(--font-cim);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--zold-sote);
}

.op-greeting-role {
  font-size: 0.72rem;
  color: var(--szurke-halvany);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.op-greeting-text { padding-top: 0; }

.op-greeting-salute {
  font-weight: 600;
  color: var(--zold-sote);
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.op-greeting-text p {
  color: var(--szurke);
  line-height: 1.85;
  margin-bottom: 14px;
  font-size: 1rem;
}

.op-greeting-sign {
  margin-top: 24px;
  font-size: 0.95rem;
  color: var(--szurke);
  line-height: 1.6;
}

/* ── Események grid ─────────────────────────────────────── */
.op-events-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

.op-events-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.op-event-item {
  opacity: 0;
  transform: translateX(-14px);
}

.op-event-item.op-visible {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s, transform 0.3s;
}

/* Naptár wrapper */
.op-calendar-wrap {
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kicsi);
  border: 1px solid var(--krem-sotet);
  padding: 18px;
  position: sticky;
  top: 88px;
  overflow: hidden;   /* naptár grid ne lógjon ki */
  min-width: 0;       /* grid konténerben ne táguljon */
}

/* Naptár cellák az op-calendar-wrap-ban */
.op-calendar-wrap #calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  width: 100%;
}

.op-calendar-wrap #calendar .day,
.op-calendar-wrap #calendar .day-name {
  padding: 7px 2px;
  text-align: center;
  font-size: 0.8rem;
  border: none;
  border-radius: var(--radius-s);
}

.op-calendar-wrap #calendar .day-name {
  font-weight: 700;
  color: var(--zold-vilag);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  background: none;
}

.op-calendar-wrap #calendar .day {
  color: var(--szurke);
  cursor: default;
  transition: background var(--atm-gyors);
}

.op-calendar-wrap #calendar .day:hover {
  background: var(--sage-halvany);
}

.op-calendar-wrap #calendar .today {
  background: var(--zold);
  color: var(--feher);
  font-weight: 700;
  border-radius: 50%;
}

.op-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.op-cal-header h3 {
  font-family: var(--font-cim);
  font-size: 1rem;
  color: var(--zold-sote);
  font-weight: 600;
}

.op-cal-header button {
  background: var(--feher);
  border: 1.5px solid var(--sage);
  color: var(--zold);
  border-radius: var(--radius-s);
  padding: 4px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--atm-gyors), color var(--atm-gyors);
  font-family: var(--font-szoveg);
}

.op-cal-header button:hover {
  background: var(--zold);
  color: var(--feher);
  border-color: var(--zold);
}

/* ── Baksáról ───────────────────────────────────────────── */
.op-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
}

.op-about.op-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.op-about-img-wrap {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--arnyek-nagy);
  border-bottom: 3px solid var(--zold-vilag);
  border-right: 3px solid var(--zold-vilag);
}

.op-about-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.6s ease;
}

.op-about-img-wrap:hover .op-about-img { transform: scale(1.04); }

.op-about-text p {
  color: var(--szurke);
  line-height: 1.85;
  margin-bottom: 14px;
  font-size: 1rem;
}

.op-about-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 26px;
  background: var(--zold);
  color: var(--feher);
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
}

.op-about-btn:hover {
  background: var(--zold-sote);
  transform: translateY(-2px);
}

/* ── Opener reszponzív ──────────────────────────────────── */
@media (max-width: 1024px) {
  .op-events-grid { grid-template-columns: 1fr; }
  .op-calendar-wrap { position: static; max-width: 400px; }
  .op-greeting { grid-template-columns: 240px 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  #yt-desktop { display: none; }
  #yt-mobile  { display: block; }

  .op-hero-title { font-size: clamp(3.5rem, 18vw, 5rem); }

  .op-quicklinks { gap: 0; }
  .op-ql-item    { padding: 16px 14px; min-width: 60px; }
  .op-ql-label   { font-size: 0.68rem; }

  .op-container  { padding: 0 20px; }
  .op-section    { padding: 52px 0; }

  .op-greeting {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .op-greeting-img-wrap { max-width: 200px; margin: 0 auto; }
  .op-greeting-name-card { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }

  .op-about { grid-template-columns: 1fr; gap: 28px; }
  .op-about-img { height: 240px; }

  .op-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .op-section-title  { font-size: 1.6rem; }
}

/* ============================================================
   HIVATAL OLDAL
   ============================================================ */

.hiv-page {
  background: var(--krem);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hiv-hero {
  position: relative;
  background: linear-gradient(135deg, var(--zold-sote) 0%, #306647 55%, #3d7a56 100%);
  padding: 110px 40px 90px;
  text-align: center;
  overflow: hidden;
}

.hiv-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  top: -160px; right: -120px;
  pointer-events: none;
}

.hiv-hero::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  bottom: -80px; left: -80px;
  pointer-events: none;
}

.hiv-hero-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 60%, rgba(184,196,173,0.07) 0%, transparent 55%);
  pointer-events: none;
}

.hiv-hero-content { position: relative; z-index: 2; }

.hiv-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 1px solid rgba(184,196,173,0.3);
  border-radius: 50px;
}

.hiv-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.hiv-hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  font-weight: 300;
}

.hiv-hero-sub a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}

.hiv-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px; z-index: 3;
}
.hiv-hero-wave svg { width: 100%; height: 100%; display: block; }

/* ── Gyors info sáv ─────────────────────────────────────── */
.hiv-infobar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--feher);
  box-shadow: var(--arnyek-kozepes);
  border-bottom: 2px solid var(--sage-halvany);
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.hiv-infobar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  opacity: 0;
  transform: translateY(6px);
  flex: 1;
  min-width: 160px;
}

.hiv-infobar-item.hiv-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hiv-infobar-sep {
  width: 1px;
  background: var(--krem-sotet);
  margin: 14px 0;
  flex-shrink: 0;
}

.hiv-infobar-icon {
  width: 38px; height: 38px;
  background: var(--sage-halvany);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zold-vilag);
  flex-shrink: 0;
}

.hiv-infobar-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hiv-infobar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szurke-halvany);
}

.hiv-infobar-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--szurke);
}

.hiv-infobar-value a {
  color: var(--zold-vilag);
  text-decoration: none;
  transition: color var(--atm-gyors);
}

.hiv-infobar-value a:hover { color: var(--zold-sote); }

/* ── Szekciók ───────────────────────────────────────────── */
.hiv-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.hiv-section { padding: 56px 0; }

.hiv-section--alt {
  background: var(--krem-sotet);
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}

.hiv-section-header {
  margin-bottom: 36px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sage-halvany);
}

.hiv-section-title {
  font-family: var(--font-cim);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--zold-sote);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Dolgozó kártyák ────────────────────────────────────── */
.hiv-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Vezető kártyák (Jegyző, Aljegyző) – 1,5 szélesség */
.hiv-staff-card--lead {
  grid-column: span 1;
}

.hiv-staff-card {
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-l);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--arnyek-kicsi);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow var(--atm-kozepes);
}

.hiv-staff-card.hiv-visible {
  opacity: 1; transform: translateY(0);
}

.hiv-staff-card:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateY(-3px);
}

/* Avatar (monogram) */
.hiv-staff-avatar {
  width: 52px; height: 52px;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, var(--zold-sote), var(--zold-vilag));
  color: var(--feher);
  font-family: var(--font-cim);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(59,107,80,0.25);
}

.hiv-staff-avatar--sm {
  width: 44px; height: 44px;
  font-size: 0.85rem;
  border-radius: var(--radius-s);
}

.hiv-staff-info {
  flex: 1;
  min-width: 0;
}

.hiv-staff-name {
  font-family: var(--font-cim);
  font-size: 1rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hiv-staff-role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zold-vilag);
  margin-bottom: 10px;
  padding: 2px 8px;
  background: var(--sage-halvany);
  border-radius: 50px;
  border: 1px solid var(--sage);
}

.hiv-staff-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hiv-staff-contacts li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--szurke);
}

.hiv-staff-contacts svg { color: var(--zold-vilag); flex-shrink: 0; }

.hiv-staff-contacts a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--atm-gyors);
  word-break: break-all;
}

.hiv-staff-contacts a:hover { color: var(--zold-sote); }

.hiv-mellék {
  font-size: 0.75rem;
  color: var(--szurke-halvany);
  font-style: italic;
  margin-left: 2px;
}

/* ── Info kártyák (ügyfélfogadás, kirendeltség, e-ügyintézés) ── */
.hiv-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  gap: 24px;
  align-items: start;
}

.hiv-info-card {
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-l);
  padding: 28px 26px;
  box-shadow: var(--arnyek-kicsi);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow var(--atm-kozepes);
}

.hiv-info-card.hiv-visible {
  opacity: 1; transform: translateY(0);
}

.hiv-info-card:hover {
  box-shadow: var(--arnyek-kozepes);
}

/* Accent kártya (e-ügyintézés) */
.hiv-info-card--accent {
  background: linear-gradient(145deg, var(--zold-sote) 0%, var(--zold) 100%);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hiv-info-card-icon {
  width: 44px; height: 44px;
  background: var(--sage-halvany);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zold-vilag);
  margin-bottom: 4px;
}

.hiv-info-card-icon--light {
  background: rgba(255,255,255,0.15);
  color: var(--feher);
}

.hiv-info-card-title {
  font-family: var(--font-cim);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.hiv-info-card-title--light { color: var(--feher); margin-bottom: 8px; }

.hiv-info-card-text--light {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  flex: 1;
}

/* Ügyfélfogadás táblázat */
.hiv-schedule { display: flex; flex-direction: column; gap: 0; }

.hiv-schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--krem-sotet);
  gap: 12px;
}

.hiv-schedule-row:last-child { border-bottom: none; }

.hiv-schedule-row--closed { opacity: 0.6; }

.hiv-day {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--zold-sote);
  min-width: 76px;
  flex-shrink: 0;
}

.hiv-time {
  font-size: 0.83rem;
  color: var(--szurke);
  text-align: right;
  line-height: 1.4;
}

.hiv-time--note {
  color: var(--szurke-halvany);
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.hiv-time-sub {
  font-size: 0.72rem;
  color: var(--szurke-halvany);
  font-style: normal;
}

/* Kirendeltségek */
.hiv-branch { display: flex; flex-direction: column; gap: 0; }

.hiv-branch-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
}

.hiv-branch-divider {
  height: 1px;
  background: var(--krem-sotet);
}

.hiv-branch-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--zold-sote);
}

.hiv-branch-villages {
  font-size: 0.82rem;
  color: var(--szurke-halvany);
  font-style: italic;
}

.hiv-branch-tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--zold-vilag);
  text-decoration: none;
  transition: color var(--atm-gyors);
}

.hiv-branch-tel:hover { color: var(--zold-sote); }

/* E-ügyintézés gomb */
.hiv-eug-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  color: var(--feher);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-s);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background var(--atm-gyors), border-color var(--atm-gyors);
  backdrop-filter: blur(4px);
}

.hiv-eug-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hiv-staff-grid { grid-template-columns: repeat(2, 1fr); }
  .hiv-info-grid  { grid-template-columns: 1fr 1fr; }
  .hiv-info-card--accent { grid-column: span 2; flex-direction: row; align-items: center; }
}

@media (max-width: 768px) {
  .hiv-hero { padding: 90px 20px 70px; }
  .hiv-hero-title { font-size: 1.9rem; }

  .hiv-infobar { flex-direction: column; }
  .hiv-infobar-sep { width: 100%; height: 1px; margin: 0; }
  .hiv-infobar-item { padding: 14px 20px; }

  .hiv-body { padding: 0 16px; }
  .hiv-section--alt { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }

  .hiv-staff-grid { grid-template-columns: 1fr; }
  .hiv-staff-card--lead { grid-column: span 1; }

  .hiv-info-grid { grid-template-columns: 1fr; }
  .hiv-info-card--accent { grid-column: span 1; flex-direction: column; }

  .hiv-schedule-row { flex-direction: column; gap: 3px; align-items: flex-start; }
  .hiv-time { text-align: left; }
  .hiv-time--note { align-items: flex-start; }
}
/* ============================================================
   ROMA NEMZETISÉGI ÖNKORMÁNYZAT OLDAL
   ============================================================ */

.ro-page {
  background: var(--krem);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Hero ───────────────────────────────────────────────── */
.ro-hero {
  position: relative;
  background: linear-gradient(135deg, #2A3E32 0%, #3B6B50 55%, #4d8866 100%);
  padding: 110px 40px 90px;
  text-align: center;
  overflow: hidden;
}

.ro-hero::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  top: -140px; right: -100px;
  pointer-events: none;
}

.ro-hero::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  bottom: -80px; left: -80px;
  pointer-events: none;
}

.ro-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(184,196,173,0.07) 0%, transparent 50%);
  pointer-events: none;
}

.ro-hero-content { position: relative; z-index: 2; }

.ro-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 1px solid rgba(184,196,173,0.3);
  border-radius: 50px;
}

.ro-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}

.ro-hero-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
  letter-spacing: 0.04em;
  max-width: 520px;
  margin: 0 auto;
}

.ro-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px; z-index: 3;
}
.ro-hero-wave svg { width: 100%; height: 100%; display: block; }

/* ── Body wrapper ───────────────────────────────────────── */
.ro-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Szekciók ───────────────────────────────────────────── */
.ro-section { padding: 56px 0; }

.ro-section--alt {
  background: var(--krem-sotet);
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}

.ro-section-header {
  margin-bottom: 32px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sage-halvany);
}

.ro-section-title {
  font-family: var(--font-cim);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--zold-sote);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Képviselő kártyák ──────────────────────────────────── */
.ro-rep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ro-rep-card {
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-l);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--arnyek-kicsi);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow var(--atm-kozepes), border-color var(--atm-kozepes);
  border-left: 3px solid var(--sage);
}

.ro-rep-card.ro-visible {
  opacity: 1;
  transform: translateY(0);
}

.ro-rep-card:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateY(-3px);
  border-left-color: var(--zold-vilag);
}

/* Vezető kártya kiemelés */
.ro-rep-card--lead {
  border-left-color: var(--zold-vilag);
  background: linear-gradient(135deg, var(--feher) 0%, rgba(232,237,227,0.4) 100%);
}

/* Monogram avatar */
.ro-rep-monogram {
  width: 52px; height: 52px;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, var(--zold-sote), var(--zold-vilag));
  color: var(--feher);
  font-family: var(--font-cim);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(59,107,80,0.25);
}

.ro-rep-monogram--sm {
  width: 44px; height: 44px;
  font-size: 0.8rem;
  border-radius: var(--radius-s);
}

.ro-rep-info { flex: 1; min-width: 0; }

.ro-rep-name {
  font-family: var(--font-cim);
  font-size: 1rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ro-rep-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zold-vilag);
  margin-bottom: 10px;
  padding: 2px 8px;
  background: var(--sage-halvany);
  border-radius: 50px;
  border: 1px solid var(--sage);
}

.ro-rep-contacts {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ro-rep-contacts li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  color: var(--szurke);
}

.ro-rep-contacts svg { color: var(--zold-vilag); flex-shrink: 0; }

.ro-rep-contacts a {
  color: var(--zold-vilag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--atm-gyors);
}
.ro-rep-contacts a:hover { color: var(--zold-sote); }

/* ── Dokumentum szűrő ───────────────────────────────────── */
.ro-filter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.ro-filter-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--szurke-halvany);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ro-filter-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ro-filter-select {
  padding: 9px 14px;
  font-size: 0.92rem;
  font-family: var(--font-szoveg);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-m);
  background: var(--feher);
  color: var(--szurke);
  cursor: pointer;
  min-width: 220px;
  transition: border-color var(--atm-gyors), box-shadow var(--atm-gyors);
  outline: none;
}

.ro-filter-select:focus {
  border-color: var(--zold-vilag);
  box-shadow: 0 0 0 3px rgba(81,152,114,0.15);
}

.ro-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--zold);
  color: var(--feher);
  border: none;
  border-radius: var(--radius-m);
  font-family: var(--font-szoveg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--atm-gyors), transform var(--atm-gyors);
}

.ro-filter-btn:hover {
  background: var(--zold-sote);
  transform: translateY(-1px);
}

/* ── Dokumentum csoportok ───────────────────────────────── */
.ro-docs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ro-docs-group {
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--arnyek-kicsi);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow var(--atm-kozepes);
}

.ro-docs-group.ro-visible {
  opacity: 1;
  transform: translateY(0);
}

.ro-docs-group:hover {
  box-shadow: var(--arnyek-kozepes);
}

.ro-docs-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--sage-halvany), var(--feher));
  border-bottom: 1px solid var(--krem-sotet);
  font-family: var(--font-cim);
  font-size: 1rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0;
}

.ro-docs-group-title svg { color: var(--zold-vilag); flex-shrink: 0; }

.ro-docs-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.ro-doc-item { border-bottom: 1px solid var(--krem-sotet); }
.ro-doc-item:last-child { border-bottom: none; }

.ro-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  text-decoration: none;
  color: var(--szurke);
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

.ro-doc-link:hover {
  background: var(--sage-halvany);
  color: var(--zold-sote);
}

.ro-doc-icon {
  width: 28px; height: 28px;
  background: var(--krem-sotet);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zold-vilag);
  flex-shrink: 0;
  transition: background var(--atm-gyors), color var(--atm-gyors);
}

.ro-doc-link:hover .ro-doc-icon {
  background: var(--zold-vilag);
  color: var(--feher);
}

.ro-doc-name {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ro-doc-arrow {
  color: var(--szurke-halvany);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--atm-gyors), transform var(--atm-gyors), color var(--atm-gyors);
}

.ro-doc-link:hover .ro-doc-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--zold-vilag);
}

/* Üres állapot */
.ro-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--szurke-halvany);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ro-empty p {
  font-size: 0.95rem;
  font-style: italic;
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .ro-rep-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ro-hero { padding: 90px 20px 70px; }
  .ro-hero-title { font-size: 1.75rem; }

  .ro-body { padding: 0 16px; }
  .ro-section { padding: 40px 0; }
  .ro-section--alt {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .ro-rep-grid { grid-template-columns: 1fr; }

  .ro-filter-controls { flex-direction: column; align-items: stretch; }
  .ro-filter-select { min-width: unset; width: 100%; }
  .ro-filter-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   KITÜNTETETTJEINK OLDAL
   ============================================================ */

.hon-page {
  background: var(--krem);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hon-hero {
  position: relative;
  background: linear-gradient(150deg, #1a2e22 0%, #2a4e3a 45%, #3b6b50 80%, #4a7e60 100%);
  padding: 120px 40px 100px;
  text-align: center;
  overflow: hidden;
}

/* Dekoratív arany vonalak */
.hon-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 60px,
      rgba(184,196,173,0.03) 60px,
      rgba(184,196,173,0.03) 61px
    );
  pointer-events: none;
}

.hon-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(184,196,173,0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.hon-hero-content { position: relative; z-index: 2; }

/* Embléma kör */
.hon-hero-emblem {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(184,196,173,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--sage);
  backdrop-filter: blur(4px);
}

.hon-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184,196,173,0.7);
  margin-bottom: 12px;
}

.hon-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.hon-hero-sub {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
  font-style: italic;
}

.hon-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px; z-index: 3;
}
.hon-hero-wave svg { width: 100%; height: 100%; display: block; }

/* ── Body ───────────────────────────────────────────────── */
.hon-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Stat sáv ───────────────────────────────────────────── */
.hon-stat-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  border: 1px solid var(--krem-sotet);
  margin: 40px 0 56px;
  overflow: hidden;
}

.hon-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hon-stat.hon-visible {
  opacity: 1;
  transform: translateY(0);
}

.hon-stat-num {
  font-family: var(--font-cim);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--zold-sote);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hon-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szurke-halvany);
}

.hon-stat-sep {
  width: 1px;
  height: 40px;
  background: var(--krem-sotet);
  flex-shrink: 0;
}

/* ── Szekció ────────────────────────────────────────────── */
.hon-section { padding-bottom: 60px; }

/* ── Kártya rács ────────────────────────────────────────── */
.hon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Kártya ─────────────────────────────────────────────── */
.hon-card {
  position: relative;
  background: var(--feher);
  border-radius: var(--radius-l);
  border: 1px solid var(--krem-sotet);
  padding: 28px 24px 24px;
  box-shadow: var(--arnyek-kicsi);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow var(--atm-kozepes), border-color var(--atm-kozepes);
}

.hon-card.hon-visible {
  opacity: 1;
  transform: translateY(0);
}

.hon-card:not(.hon-card--empty):hover {
  box-shadow: var(--arnyek-nagy);
  transform: translateY(-6px);
  border-color: var(--sage);
}

/* Üres kártya */
.hon-card--empty {
  background: repeating-linear-gradient(
    -45deg,
    var(--krem),
    var(--krem) 6px,
    var(--krem-sotet) 6px,
    var(--krem-sotet) 7px
  );
  border-style: dashed;
  border-color: var(--sage);
  opacity: 0.55 !important;
  transform: none !important;
  pointer-events: none;
}

/* Sorszám */
.hon-card-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--szurke-halvany);
  font-family: var(--font-cim);
}

/* Dekoratív alap-vonal */
.hon-card-deco {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--zold-vilag), var(--sage), transparent);
  opacity: 0;
  transition: opacity var(--atm-kozepes);
}

.hon-card:not(.hon-card--empty):hover .hon-card-deco {
  opacity: 1;
}

/* Avatar wrapper */
.hon-avatar-wrap {
  position: relative;
  margin: 8px 0 18px;
}

/* Monogram avatar */
.hon-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zold-sote) 0%, var(--zold-vilag) 100%);
  color: var(--feher);
  font-family: var(--font-cim);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59,107,80,0.3);
  transition: transform var(--atm-kozepes), box-shadow var(--atm-kozepes);
  letter-spacing: 0.02em;
  border: 3px solid rgba(255,255,255,0.9);
}

.hon-card:not(.hon-card--empty):hover .hon-avatar {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(59,107,80,0.4);
}

.hon-avatar--empty {
  background: var(--krem-sotet);
  color: var(--szurke-halvany);
  box-shadow: none;
  border-color: var(--sage);
}

/* Csillag badge az avatar sarkán */
.hon-award-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #c9a227, #e8c460);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid var(--feher);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Kártya tartalom */
.hon-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.hon-name {
  font-family: var(--font-cim);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.hon-title-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a07810;
  background: linear-gradient(135deg, #fdf3d0, #fae8a0);
  border: 1px solid #e8c460;
  padding: 3px 10px;
  border-radius: 50px;
  margin: 2px 0 4px;
}

.hon-desc {
  font-size: 0.85rem;
  color: var(--szurke-halvany);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

.hon-year {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--szurke-halvany);
  margin-top: 6px;
}

.hon-empty-label {
  font-size: 0.82rem;
  color: var(--szurke-halvany);
  font-style: italic;
  margin: 8px 0 0;
}

/* ── Idézet szalag ──────────────────────────────────────── */
.hon-quote {
  text-align: center;
  padding: 48px 32px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.hon-quote-mark {
  font-family: var(--font-cim);
  font-size: 6rem;
  line-height: 0.5;
  color: var(--sage);
  display: block;
  margin-bottom: 20px;
  user-select: none;
}

.hon-quote-text {
  font-family: var(--font-cim);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--zold-sote);
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hon-hero { padding: 90px 20px 70px; }
  .hon-hero-title { font-size: 2.2rem; }
  .hon-hero-emblem { width: 60px; height: 60px; }

  .hon-body { padding: 0 16px; }

  .hon-stat-bar { flex-direction: column; border-radius: var(--radius-m); }
  .hon-stat-sep { width: 100%; height: 1px; }
  .hon-stat { padding: 16px; }
  .hon-stat-num { font-size: 1.8rem; }

  .hon-grid { grid-template-columns: 1fr; }

  .hon-quote { padding: 32px 16px; }
  .hon-quote-text { font-size: 1.05rem; }
  .hon-quote-mark { font-size: 4rem; }
}

/* ============================================================
   EGYESÜLET OLDALAK (sport + horgász)
   ============================================================ */

.club-page {
  background: var(--krem);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Hero ───────────────────────────────────────────────── */
.club-hero {
  position: relative;
  padding: 100px 40px 90px;
  text-align: center;
  overflow: hidden;
}

/* Sport hero – energikus sötétzöld */
.club-page--sport .club-hero {
  background: linear-gradient(145deg, #1a2e22 0%, #2d5c3f 50%, #3b7a55 100%);
}

/* Horgász hero – nyugodt kék-zöld */
.club-page--fish .club-hero {
  background: linear-gradient(145deg, #182a30 0%, #1e4a50 50%, #276860 100%);
}

.club-hero-overlay {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 50px,
      rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 51px);
  pointer-events: none;
}

.club-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Logó */
.club-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
  transition: transform var(--atm-kozepes);
}

.club-logo:hover { transform: scale(1.06) rotate(3deg); }

.club-hero-title {
  font-family: var(--font-cim);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--feher);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.club-hero-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.2em;
  font-weight: 300;
  text-transform: uppercase;
}

/* Facebook gomb a hero-ban */
.club-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  background: rgba(255,255,255,0.12);
  color: var(--feher);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: background var(--atm-gyors), border-color var(--atm-gyors);
}

.club-fb-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.6);
}

/* Hullám */
.club-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px; z-index: 3;
}
.club-hero-wave svg { width: 100%; height: 100%; display: block; }

/* ── Body ───────────────────────────────────────────────── */
.club-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 0;
}

/* ── Layout: tartalom + sidebar ─────────────────────────── */
.club-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

/* ── Szekciók ───────────────────────────────────────────── */
.club-section {
  margin-bottom: 40px;
}

.club-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cim);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--zold-sote);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sage-halvany);
  letter-spacing: -0.01em;
}

.club-section-title svg { color: var(--zold-vilag); flex-shrink: 0; }

/* ── Bemutatkozó szöveg ─────────────────────────────────── */
.club-intro-text p {
  color: var(--szurke);
  line-height: 1.85;
  font-size: 1rem;
  margin-bottom: 14px;
}

.club-intro-text p:last-child { margin-bottom: 0; }

/* ── Képek ──────────────────────────────────────────────── */
.club-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.club-img-slot {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--krem-sotet);
  border: 1px solid var(--krem-sotet);
  box-shadow: var(--arnyek-kicsi);
}

.club-img-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.club-img-slot:hover img { transform: scale(1.04); }

/* Üres placeholder */
.club-img-slot--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--szurke-halvany);
  font-size: 0.82rem;
  font-style: italic;
  background: repeating-linear-gradient(
    -45deg,
    var(--krem),
    var(--krem) 8px,
    var(--krem-sotet) 8px,
    var(--krem-sotet) 9px
  );
  border-style: dashed;
  border-color: var(--sage);
}

/* ── Elérhetőségek ──────────────────────────────────────── */
.club-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.club-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--feher);
  border: 1px solid var(--krem-sotet);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  box-shadow: var(--arnyek-kicsi);
  transition: box-shadow var(--atm-gyors), transform var(--atm-gyors);
}

.club-contact-item:hover {
  box-shadow: var(--arnyek-kozepes);
  transform: translateY(-2px);
}

.club-contact-icon {
  width: 38px; height: 38px;
  background: var(--sage-halvany);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zold-vilag);
  flex-shrink: 0;
}

.club-contact-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.club-contact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szurke-halvany);
}

.club-contact-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--szurke);
  word-break: break-all;
}

.club-contact-link {
  color: var(--zold-vilag);
  text-decoration: none;
  transition: color var(--atm-gyors);
}

.club-contact-link:hover { color: var(--zold-sote); }

/* ── Facebook sidebar ───────────────────────────────────── */
.club-sidebar {
  position: sticky;
  top: 88px;
}

.club-fb-wrap {
  background: var(--feher);
  border-radius: var(--radius-l);
  box-shadow: var(--arnyek-kozepes);
  border: 1px solid var(--krem-sotet);
  overflow: hidden;
  width: fit-content;       /* csak annyira széles mint a tartalom */
  max-width: 100%;
}

.club-fb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--sage-halvany);
  border-bottom: 1px solid var(--krem-sotet);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--szurke);
  width: 100%;
  box-sizing: border-box;
}

/* Facebook iframe konténer – ne legyen nagyobb mint az iframe */
.club-fb-wrap .fb-page,
.club-fb-wrap ._2p3a {
  display: block !important;
  width: auto !important;
}

/* A sidebar grid-cella is igazodjon */
.club-layout {
  display: grid;
  grid-template-columns: 1fr auto;   /* auto = tartalom szélessége */
  gap: 40px;
  align-items: start;
}
@media (max-width: 1050px) {
  .club-layout { grid-template-columns: 1fr; }
  .club-sidebar { position: static; }
  .club-fb-wrap { max-width: 500px; }
}

@media (max-width: 600px) {
  .club-hero { padding: 80px 20px 70px; }
  .club-hero-title { font-size: 1.7rem; }
  .club-logo { width: 72px; height: 72px; }
  .club-body { padding: 32px 16px 0; }
  .club-contact-grid { grid-template-columns: 1fr; }
  .club-images { grid-template-columns: 1fr; }
}