/* =========================================================
   KRILIX TECH & LABS — RESPONSIVE SYSTEM V12
   Final override layer for desktop / ultrawide / laptop /
   tablet / mobile / landscape mobile.
   ========================================================= */

:root {
  --kr-r-gutter: clamp(16px, 3.2vw, 56px);
  --kr-r-content: 1480px;
  --kr-r-content-wide: 1580px;
  --kr-r-radius: clamp(12px, 1.25vw, 18px);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 280px;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

main, header, footer, nav, section, article, aside, form,
.wrap, .inner-title-wrap, .inner-lead-box, .project, .project-copy,
.project-visual, .services-container, .service-card, .contact-layout,
.contact-heading-side, .contact-form-box, .statement-row, .pillars-grid,
.legal-grid, .legal-content-wrap, .footer-top, .footer-bottom {
  min-width: 0;
}

img, picture, video, canvas {
  max-width: 100%;
  height: auto;
}

svg, iframe { max-width: 100%; }

button, input, textarea, select { max-width: 100%; }

/* Fixed SVG background must never create horizontal overflow. */
.circuit-background,
body.inner-page .circuit-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* =========================================================
   HOMEPAGE — fluid hero + safe controls
   ========================================================= */
body.home-page {
  min-height: 100svh !important;
}

body.home-page main {
  width: 100% !important;
  min-height: 100svh !important;
  padding:
    max(18px, env(safe-area-inset-top))
    var(--kr-r-gutter)
    max(84px, calc(68px + env(safe-area-inset-bottom))) !important;
}

body.home-page .home-only {
  width: min(100%, 1500px) !important;
  max-width: 1500px !important;
}

body.home-page .home-brand,
body.home-page .home-brand-word,
body.home-page .home-brand-script {
  max-width: 100% !important;
}

body.home-page .home-brand-word {
  font-size: clamp(64px, 13vw, 220px) !important;
  line-height: .94 !important;
  letter-spacing: clamp(.018em, .18vw, .04em) !important;
}

body.home-page .home-brand-script {
  font-size: clamp(18px, 2.45vw, 42px) !important;
  margin-top: clamp(4px, .5vw, 10px) !important;
}

body.home-page .home-only-menu {
  min-height: 44px !important;
  padding: .72rem clamp(1.55rem, 3vw, 2.6rem) !important;
}

body.home-page .bottom-controls {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
}

body.home-page .menu-overlay,
body.inner-page .menu-overlay {
  min-height: 100svh !important;
  height: 100dvh !important;
  max-width: 100% !important;
}

body.home-page .menu-top,
body.home-page .overlay-nav,
body.home-page .menu-bottom,
body.inner-page .menu-top,
body.inner-page .overlay-nav,
body.inner-page .menu-bottom {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
}

/* =========================================================
   INNER PAGES — shared fluid container
   ========================================================= */
body.inner-page .wrap,
body.inner-page .inner-title-wrap {
  width: min(calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)), var(--kr-r-content)) !important;
  max-width: var(--kr-r-content) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.inner-page .inner-lead-box {
  width: min(calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)), 980px) !important;
  max-width: 980px !important;
  padding-inline: 0 !important;
}

body.inner-page .inner-top {
  width: 100% !important;
  min-width: 0 !important;
  padding-left: max(24px, env(safe-area-inset-left)) !important;
  padding-right: max(24px, env(safe-area-inset-right)) !important;
}

body.inner-page .inner-brand {
  max-width: min(48vw, 520px);
  white-space: nowrap;
}

body.inner-page .inner-actions {
  max-width: calc(100% - 48px) !important;
}

body.inner-page .inner-title-wrap h1 {
  max-width: 100% !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal;
}

body.inner-page .inner-lead-box p,
body.inner-page .contact-heading-side p,
body.inner-page .contact-form-box p,
body.inner-page .statement-row p,
body.inner-page .pillar-card p,
body.inner-page .legal-block p,
body.inner-page .legal-block li {
  text-wrap: pretty;
}

body.inner-page .footer-brand {
  max-width: 100%;
}

/* =========================================================
   ULTRAWIDE / 2K / 4K
   Keep content comfortably sized instead of stretching.
   ========================================================= */
@media (min-width: 1800px) {
  :root {
    --kr-r-gutter: clamp(48px, 4vw, 92px);
    --kr-r-content: 1580px;
  }

  body.home-page .home-only { max-width: 1640px !important; }
  body.home-page .home-brand-word { font-size: clamp(180px, 10vw, 240px) !important; }
  body.home-page .home-brand-script { font-size: clamp(34px, 2vw, 48px) !important; }

  body.inner-page .inner-title-wrap { padding-top: 96px !important; padding-bottom: 68px !important; }
  body.inner-page .inner-title-wrap h1 { font-size: clamp(110px, 7vw, 158px) !important; }
  body.page-szolgaltatasok .inner-title-wrap h1 { font-size: clamp(92px, 6.2vw, 132px) !important; }
  body.page-adatvedelem .inner-title-wrap h1 { font-size: clamp(92px, 6.5vw, 136px) !important; }

  body.page-munkaink .project-list {
    width: min(calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)), var(--kr-r-content-wide)) !important;
    max-width: var(--kr-r-content-wide) !important;
  }

  body.page-munkaink .project {
    grid-template-columns: minmax(300px,.62fr) minmax(720px,1.38fr) !important;
  }
  body.page-munkaink .project:nth-child(even) {
    grid-template-columns: minmax(720px,1.38fr) minmax(300px,.62fr) !important;
  }
}

/* =========================================================
   LAPTOP / SMALL DESKTOP (1024–1279)
   ========================================================= */
@media (max-width: 1279px) {
  :root { --kr-r-gutter: clamp(22px, 3vw, 38px); }

  body.inner-page .inner-top {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.inner-page .inner-brand { font-size: 1.48rem !important; }
  body.inner-page .inner-actions { right: 24px !important; gap: 8px !important; }

  body.page-kapcsolat .contact-layout { gap: clamp(28px, 4vw, 46px) !important; }
  body.page-adatvedelem .legal-grid { gap: clamp(28px, 4vw, 42px) !important; }
}

/* =========================================================
   TABLET / COMPACT LAPTOP (769–1024)
   ========================================================= */
@media (max-width: 1024px) {
  :root { --kr-r-gutter: clamp(20px, 3.2vw, 32px); }

  body.home-page .home-brand-word { font-size: clamp(72px, 17vw, 150px) !important; }
  body.home-page .home-brand-script { font-size: clamp(19px, 4.3vw, 34px) !important; }

  body.inner-page .inner-top {
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body.inner-page .inner-brand {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  body.inner-page .inner-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body.inner-page .inner-title-wrap {
    padding-top: clamp(42px, 7vw, 64px) !important;
    padding-bottom: clamp(32px, 5vw, 48px) !important;
  }

  body.inner-page .inner-title-wrap h1 {
    font-size: clamp(52px, 10.6vw, 96px) !important;
    line-height: .98 !important;
  }

  body.page-szolgaltatasok .inner-title-wrap h1 {
    font-size: clamp(42px, 8.5vw, 78px) !important;
  }

  body.page-adatvedelem .inner-title-wrap h1 {
    font-size: clamp(42px, 8.7vw, 82px) !important;
  }

  body.inner-page .inner-lead-box { margin-bottom: 48px !important; }

  body.page-munkaink .project-list {
    width: min(calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)), 920px) !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 0 !important;
  }

  body.page-munkaink .project .project-copy { order: 1 !important; }
  body.page-munkaink .project .project-visual { order: 2 !important; }
  body.page-munkaink .project-copy h3 { font-size: clamp(34px, 6vw, 52px) !important; }

  body.page-szolgaltatasok .service-card,
  body.page-szolgaltatasok .service-card:nth-child(odd),
  body.page-szolgaltatasok .service-card:nth-child(even) {
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: minmax(190px,.72fr) minmax(0,1.28fr) !important;
    gap: clamp(24px, 4vw, 38px) !important;
  }

  body.page-kapcsolat .contact-layout,
  body.page-rolunk .statement-row,
  body.page-adatvedelem .legal-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-rolunk .pillars-grid { grid-template-columns: 1fr !important; }

  body.page-adatvedelem .legal-sidebar {
    position: static !important;
    max-width: 100%;
  }

  body.inner-page .footer-top { grid-template-columns: 1fr 1fr !important; }
  body.inner-page .footer-top > :first-child { grid-column: 1 / -1 !important; }
}

/* =========================================================
   PHONE / PORTRAIT TABLET (<=768)
   ========================================================= */
@media (max-width: 768px) {
  :root { --kr-r-gutter: clamp(14px, 4.2vw, 24px); }

  body.home-page main {
    padding-left: var(--kr-r-gutter) !important;
    padding-right: var(--kr-r-gutter) !important;
    padding-bottom: max(88px, calc(72px + env(safe-area-inset-bottom))) !important;
  }

  body.home-page .home-only { transform: translateY(-2vh) !important; }
  body.home-page .home-brand-word {
    font-size: clamp(56px, 18.8vw, 108px) !important;
    line-height: .95 !important;
  }
  body.home-page .home-brand-script { font-size: clamp(17px, 5.2vw, 29px) !important; }

  body.home-page .bottom-controls {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    gap: 7px !important;
  }

  body.home-page .ctrl-box button {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  body.home-page .menu-overlay,
  body.inner-page .menu-overlay {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding:
      max(18px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left)) !important;
  }

  body.home-page .overlay-nav,
  body.inner-page .overlay-nav {
    flex: 1 0 auto !important;
    justify-content: center !important;
    gap: clamp(9px, 2.4vh, 14px) !important;
    padding: 24px 0 !important;
  }

  body.home-page .overlay-nav a,
  body.inner-page .overlay-nav a { gap: 10px !important; }

  body.home-page .overlay-nav .nav-index,
  body.inner-page .overlay-nav .nav-index {
    width: 30px !important;
    flex: 0 0 30px !important;
    font-size: .86rem !important;
  }

  body.home-page .overlay-nav strong,
  body.inner-page .overlay-nav strong {
    font-size: clamp(1.8rem, 8.7vw, 3rem) !important;
    line-height: 1 !important;
    padding-left: 13px !important;
    border-left-width: 4px !important;
  }

  body.home-page .menu-bottom,
  body.inner-page .menu-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    font-size: .72rem !important;
  }

  body.inner-page .inner-top {
    padding:
      max(14px, env(safe-area-inset-top))
      var(--kr-r-gutter)
      14px !important;
  }

  body.inner-page .inner-brand { font-size: clamp(1.25rem, 5vw, 1.45rem) !important; }

  body.inner-page .inner-actions {
    display: grid !important;
    grid-template-columns: auto auto minmax(132px, 1fr) !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: min(100%, 470px) !important;
    gap: 8px !important;
  }

  body.inner-page .theme-control,
  body.inner-page .ctrl-pill,
  body.inner-page .lang {
    min-height: 42px !important;
    justify-content: center !important;
  }

  body.inner-page .theme-btn,
  body.inner-page .ctrl-pill button,
  body.inner-page .lang button {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  body.inner-page .inner-menu-btn {
    min-height: 42px !important;
    width: 100% !important;
    padding-inline: 14px !important;
  }

  body.inner-page .inner-title-wrap {
    gap: 12px !important;
    padding-top: 38px !important;
    padding-bottom: 30px !important;
  }

  body.inner-page .inner-title-wrap h1 {
    font-size: clamp(42px, 12.8vw, 72px) !important;
    letter-spacing: .018em !important;
  }

  body.page-szolgaltatasok .inner-title-wrap h1,
  body.page-adatvedelem .inner-title-wrap h1 {
    font-size: clamp(32px, 9.6vw, 54px) !important;
    letter-spacing: .02em !important;
  }

  body.inner-page .inner-lead-box {
    margin-top: 0 !important;
    margin-bottom: 36px !important;
  }

  body.inner-page .inner-lead-box p {
    font-size: clamp(.98rem, 3.9vw, 1.08rem) !important;
    line-height: 1.62 !important;
  }

  body.page-munkaink .projects { padding-bottom: 76px !important; }
  body.page-munkaink .project-list { width: calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)) !important; }
  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) { padding: 38px 0 !important; gap: 18px !important; }
  body.page-munkaink .project-copy h3 { font-size: clamp(28px, 8vw, 44px) !important; }
  body.page-munkaink .project-visual {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: var(--kr-r-radius) !important;
  }
  body.page-munkaink .browser-frame { min-width: 0 !important; }
  body.page-munkaink .browser-url {
    min-width: 0 !important;
    max-width: min(72%, 330px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-szolgaltatasok .services { padding-top: 34px !important; padding-bottom: 76px !important; }
  body.page-szolgaltatasok .services-container { gap: 18px !important; }
  body.page-szolgaltatasok .service-card,
  body.page-szolgaltatasok .service-card:nth-child(odd),
  body.page-szolgaltatasok .service-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 26px 22px !important;
    border-left-width: 3px !important;
  }
  body.page-szolgaltatasok .service-text {
    padding: 16px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  body.page-kapcsolat .contact-section,
  body.page-rolunk .about-section { padding-bottom: 72px !important; }

  body.page-kapcsolat .contact-layout { gap: 22px !important; padding-top: 30px !important; }
  body.page-kapcsolat .contact-heading-side,
  body.page-kapcsolat .contact-form-box {
    padding: 26px 21px !important;
    border-radius: var(--kr-r-radius) !important;
  }
  body.page-kapcsolat .contact-entry {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }
  body.page-kapcsolat .contact-entry a,
  body.page-kapcsolat .contact-entry strong {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body.page-kapcsolat .form-row-dual { grid-template-columns: 1fr !important; }
  body.page-kapcsolat .direct-form input,
  body.page-kapcsolat .direct-form textarea { font-size: 16px !important; }
  body.page-kapcsolat .submit-msg-btn { width: 100% !important; min-height: 46px; }

  body.page-rolunk .statement-row {
    padding: 28px 22px !important;
    gap: 14px !important;
    border-radius: var(--kr-r-radius) !important;
  }
  body.page-rolunk .pillar-card { padding: 28px 22px !important; }

  body.page-adatvedelem .legal-tab-wrap {
    width: calc(100% - var(--kr-r-gutter) - var(--kr-r-gutter)) !important;
    max-width: 820px !important;
    flex-wrap: wrap !important;
  }
  body.page-adatvedelem .legal-tab-btn { flex: 1 1 260px !important; min-width: 0 !important; }
  body.page-adatvedelem .legal-section { padding-top: 34px !important; padding-bottom: 72px !important; }
  body.page-adatvedelem .legal-sidebar { gap: 7px !important; }
  body.page-adatvedelem .legal-notice-box,
  body.page-adatvedelem .contact-summary-card { padding: 19px 17px !important; }
  body.page-adatvedelem .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.inner-page .footer { padding-top: 44px !important; padding-bottom: max(22px, env(safe-area-inset-bottom)) !important; }
  body.inner-page .footer-top { grid-template-columns: 1fr !important; gap: 26px !important; }
  body.inner-page .footer-top > :first-child { grid-column: auto !important; }
  body.inner-page .footer-brand { font-size: clamp(2.6rem, 14.5vw, 5rem) !important; }
  body.inner-page .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }
}

/* =========================================================
   SMALL PHONE (<=520)
   ========================================================= */
@media (max-width: 520px) {
  :root { --kr-r-gutter: max(14px, 4vw); }

  body.home-page .home-brand-word { font-size: clamp(50px, 18.5vw, 88px) !important; }
  body.home-page .home-brand-script { font-size: clamp(16px, 5vw, 24px) !important; }
  body.home-page .home-only-menu {
    min-height: 42px !important;
    padding: .62rem 1.4rem !important;
    font-size: .72rem !important;
  }

  body.home-page .bottom-controls {
    transform: translateX(-50%) scale(.94) !important;
    transform-origin: bottom center;
  }

  body.home-page .menu-top .brand,
  body.inner-page .menu-top .brand {
    max-width: calc(100% - 52px);
    font-size: 1rem !important;
  }

  body.home-page .menu-top .brand span,
  body.inner-page .menu-top .brand span { font-size: .78rem !important; }

  body.home-page .overlay-nav .nav-index,
  body.inner-page .overlay-nav .nav-index {
    width: 26px !important;
    flex-basis: 26px !important;
    font-size: .76rem !important;
  }

  body.home-page .overlay-nav strong,
  body.inner-page .overlay-nav strong {
    font-size: clamp(1.55rem, 8.5vw, 2.35rem) !important;
    padding-left: 10px !important;
  }

  body.inner-page .inner-actions {
    grid-template-columns: auto auto !important;
    width: min(100%, 350px) !important;
  }

  body.inner-page .inner-menu-btn {
    grid-column: 1 / -1 !important;
  }

  body.inner-page .inner-title-wrap h1 {
    font-size: clamp(38px, 13.5vw, 60px) !important;
  }

  body.page-szolgaltatasok .inner-title-wrap h1,
  body.page-adatvedelem .inner-title-wrap h1 {
    font-size: clamp(28px, 8.9vw, 46px) !important;
  }

  body.page-munkaink .hero-meta {
    width: 100%;
    flex-direction: column !important;
  }
  body.page-munkaink .hero-counter,
  body.page-munkaink .hero-scroll { width: min(100%, 280px); }
  body.page-munkaink .project-copy h3 { font-size: clamp(26px, 8.5vw, 40px) !important; }
  body.page-munkaink .browser-url { max-width: 64% !important; }

  body.page-szolgaltatasok .service-card,
  body.page-szolgaltatasok .service-card:nth-child(odd),
  body.page-szolgaltatasok .service-card:nth-child(even),
  body.page-kapcsolat .contact-heading-side,
  body.page-kapcsolat .contact-form-box,
  body.page-rolunk .statement-row,
  body.page-rolunk .pillar-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.page-adatvedelem .legal-tab-btn { flex-basis: 100% !important; }
  body.page-adatvedelem .legal-table { min-width: 540px !important; }
}

/* =========================================================
   VERY NARROW PHONE (<=360)
   ========================================================= */
@media (max-width: 360px) {
  :root { --kr-r-gutter: 12px; }

  body.home-page .home-brand-word { font-size: clamp(46px, 18vw, 64px) !important; }
  body.home-page .bottom-controls {
    gap: 4px !important;
    transform: translateX(-50%) scale(.88) !important;
  }

  body.inner-page .inner-actions { width: 100% !important; }
  body.inner-page .theme-control,
  body.inner-page .ctrl-pill,
  body.inner-page .lang { min-width: 0 !important; }
  body.inner-page .theme-btn,
  body.inner-page .ctrl-pill button,
  body.inner-page .lang button { padding-inline: 8px !important; }

  body.inner-page .inner-title-wrap h1 { font-size: clamp(35px, 13vw, 48px) !important; }
  body.page-szolgaltatasok .inner-title-wrap h1,
  body.page-adatvedelem .inner-title-wrap h1 { font-size: clamp(26px, 8.4vw, 38px) !important; }

  body.home-page .overlay-nav strong,
  body.inner-page .overlay-nav strong { font-size: clamp(1.45rem, 8.2vw, 2rem) !important; }
}

/* =========================================================
   LANDSCAPE PHONE / SHORT VIEWPORT
   ========================================================= */
@media (max-height: 680px) and (max-width: 1024px) {
  body.home-page main {
    min-height: 100svh !important;
    padding-top: 12px !important;
    padding-bottom: 64px !important;
  }

  body.home-page .home-only { transform: none !important; }
  body.home-page .home-brand-word { font-size: clamp(48px, 15vh, 96px) !important; }
  body.home-page .home-brand-script { font-size: clamp(15px, 4.5vh, 25px) !important; }
  body.home-page .home-only-menu { margin-top: 8px !important; }

  body.home-page .menu-overlay,
  body.inner-page .menu-overlay { justify-content: flex-start !important; }

  body.home-page .overlay-nav,
  body.inner-page .overlay-nav {
    justify-content: flex-start !important;
    padding: 14px 0 !important;
    gap: 6px !important;
  }

  body.home-page .overlay-nav strong,
  body.inner-page .overlay-nav strong { font-size: clamp(1.4rem, 6.4vh, 2.25rem) !important; }

  body.home-page .menu-bottom,
  body.inner-page .menu-bottom { margin-top: auto !important; }

  body.inner-page .inner-title-wrap {
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
}

/* =========================================================
   TOUCH DEVICES — avoid sticky hover / excessive motion
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  body.home-page .home-only-menu:hover,
  body.inner-page .inner-menu-btn:hover,
  body.page-munkaink .project:hover .project-visual,
  body.page-rolunk .statement-row:hover,
  body.page-kapcsolat .contact-entry:hover {
    transform: none !important;
  }

  body.page-munkaink .project:hover .project-copy h3 {
    text-shadow: none !important;
    -webkit-text-stroke-width: 0 !important;
  }
}

/* Keep all focusable controls usable with keyboard at every size. */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* =========================================================
   RESPONSIVE SYSTEM V11 — portfolio previews + services title
   Static previews are intentionally used on every viewport so
   Netlify never depends on third-party iframe/frame policies.
   ========================================================= */

/* ---------- Services hero title: always one clean line ---------- */
body.page-szolgaltatasok .inner-title-wrap {
  width: min(calc(100% - (var(--kr-r-gutter) * 2)), var(--kr-r-content)) !important;
  max-width: var(--kr-r-content) !important;
  overflow: visible !important;
}

body.page-szolgaltatasok .inner-title-wrap h1,
body.page-szolgaltatasok .inner-title-wrap h1 span {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

body.page-szolgaltatasok .inner-title-wrap h1 {
  font-size: clamp(28px, 7.15vw, 108px) !important;
  line-height: .94 !important;
  letter-spacing: .006em !important;
}

/* ---------- Portfolio: screenshot viewport follows the real 16:9 capture ---------- */
body.page-munkaink .project-visual {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body.page-munkaink .browser-frame {
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: 38px auto !important;
}

body.page-munkaink .browser-viewport {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  contain: layout paint !important;
}

body.page-munkaink .preview-static-shot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: #08090c !important;
}

body.page-munkaink.light-theme .preview-static-shot {
  background: #eef2f7 !important;
}

/* Desktop: keep text readable and give the preview the majority of the row. */
@media (min-width: 1181px) {
  body.page-munkaink .project-list {
    width: min(calc(100% - (var(--kr-r-gutter) * 2)), 1480px) !important;
    max-width: 1480px !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    grid-template-columns: minmax(260px, .58fr) minmax(620px, 1.42fr) !important;
    gap: clamp(42px, 5vw, 82px) !important;
  }

  body.page-munkaink .project:nth-child(even) {
    grid-template-columns: minmax(620px, 1.42fr) minmax(260px, .58fr) !important;
  }

  body.page-munkaink .project-copy h3 {
    font-size: clamp(34px, 3.4vw, 56px) !important;
  }
}

/* Laptop / tablet: one-column portfolio is much more stable than squeezing an iframe. */
@media (max-width: 1180px) {
  body.page-munkaink .project-list {
    width: min(calc(100% - (var(--kr-r-gutter) * 2)), 940px) !important;
    max-width: 940px !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(20px, 3vw, 30px) !important;
    padding: clamp(42px, 6vw, 62px) 0 !important;
  }

  body.page-munkaink .project .project-copy { order: 1 !important; }
  body.page-munkaink .project .project-visual { order: 2 !important; }
  body.page-munkaink .project-copy { width: 100% !important; }
  body.page-munkaink .project-copy h3 { font-size: clamp(32px, 5.6vw, 50px) !important; }

  body.page-szolgaltatasok .service-card,
  body.page-szolgaltatasok .service-card:nth-child(odd),
  body.page-szolgaltatasok .service-card:nth-child(even) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: clamp(28px, 4vw, 38px) clamp(24px, 4vw, 34px) !important;
  }

  body.page-szolgaltatasok .service-text {
    padding: 18px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
}

@media (max-width: 768px) {
  body.page-szolgaltatasok .inner-title-wrap {
    width: calc(100% - (var(--kr-r-gutter) * 2)) !important;
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }

  body.page-szolgaltatasok .inner-title-wrap h1 {
    font-size: clamp(25px, 7.05vw, 54px) !important;
    letter-spacing: 0 !important;
  }

  body.page-munkaink .project-list {
    width: calc(100% - (var(--kr-r-gutter) * 2)) !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    gap: 16px !important;
    padding: 34px 0 !important;
  }

  body.page-munkaink .project-index { margin-bottom: 10px !important; }
  body.page-munkaink .project-copy h3 {
    font-size: clamp(27px, 8.1vw, 40px) !important;
    line-height: 1 !important;
  }

  body.page-munkaink .browser-frame {
    grid-template-rows: 32px auto !important;
  }

  body.page-munkaink .browser-bar {
    gap: 8px !important;
    padding: 0 10px !important;
  }

  body.page-munkaink .browser-dots { gap: 4px !important; }
  body.page-munkaink .browser-dots i { width: 6px !important; height: 6px !important; }
  body.page-munkaink .browser-url {
    max-width: 76% !important;
    padding: 3px 9px !important;
    font-size: 8.5px !important;
  }

  body.page-munkaink .project-open {
    right: 10px !important;
    bottom: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  body.page-szolgaltatasok .services-container {
    width: 100% !important;
    gap: 14px !important;
  }

  body.page-szolgaltatasok .service-card,
  body.page-szolgaltatasok .service-card:nth-child(odd),
  body.page-szolgaltatasok .service-card:nth-child(even) {
    padding: 24px 18px !important;
    gap: 14px !important;
    border-radius: 12px !important;
  }

  body.page-szolgaltatasok .service-card h3 {
    font-size: clamp(20px, 5.8vw, 28px) !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
  }

  body.page-szolgaltatasok .service-text {
    padding-top: 14px !important;
    font-size: clamp(.96rem, 3.8vw, 1.06rem) !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 390px) {
  body.page-szolgaltatasok .inner-title-wrap h1 {
    font-size: clamp(24px, 6.85vw, 28px) !important;
  }

  body.page-munkaink .project-copy h3 {
    font-size: clamp(25px, 7.7vw, 32px) !important;
  }
}

/* =========================================================
   RESPONSIVE SYSTEM V12 — REAL PORTFOLIO PREVIEWS
   No generated/replacement thumbnails. Live projects render
   their real responsive pages; Balaton + Zöld Tara use real
   captured site screenshots where cross-origin frames are unstable.
   ========================================================= */

body.page-munkaink .browser-viewport {
  overflow: hidden !important;
  isolation: isolate !important;
}

body.page-munkaink .preview-live-frame {
  top: 0 !important;
  left: 0 !important;
  transform-origin: 0 0 !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none !important;
}

body.page-munkaink .browser-viewport--static .preview-static-shot,
body.page-munkaink .preview-static-shot {
  object-fit: contain !important;
  object-position: center top !important;
}

@media (max-width: 1180px) {
  body.page-munkaink .browser-viewport {
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 520px) {
  body.page-munkaink .browser-viewport {
    aspect-ratio: 16 / 10 !important;
  }

  body.page-munkaink .project-visual {
    border-radius: 12px !important;
  }
}


/* =========================================================
   RESPONSIVE SYSTEM V14 — iPhone/mobile portfolio + homepage polish
   Erős, végső felülírások a Netlifyon is stabil mobil/tablet nézetért.
   ========================================================= */

@media (max-width: 820px) {
  body.page-munkaink .project-list {
    width: min(calc(100% - 32px), 100%) !important;
    max-width: 100% !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 32px 0 !important;
  }

  body.page-munkaink .project .project-copy,
  body.page-munkaink .project:nth-child(even) .project-copy,
  body.page-munkaink .project .project-visual,
  body.page-munkaink .project:nth-child(even) .project-visual {
    order: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.page-munkaink .project-copy {
    gap: 6px !important;
  }

  body.page-munkaink .project-index {
    margin-bottom: 6px !important;
    font-size: .8rem !important;
  }

  body.page-munkaink .project-copy h3 {
    font-size: clamp(24px, 9.6vw, 38px) !important;
    line-height: .97 !important;
    letter-spacing: .012em !important;
    max-width: 100% !important;
  }

  body.page-munkaink .project-visual {
    aspect-ratio: auto !important;
    border-radius: 14px !important;
  }

  body.page-munkaink .browser-frame {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-rows: 34px auto !important;
    border-radius: 14px !important;
  }

  body.page-munkaink .browser-viewport {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  body.page-munkaink .browser-url {
    max-width: calc(100% - 54px) !important;
    font-size: 9px !important;
  }

  body.page-munkaink .project-open {
    width: 36px !important;
    height: 36px !important;
    right: 10px !important;
    bottom: 10px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 520px) {
  body.home-page main {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: max(112px, calc(92px + env(safe-area-inset-bottom))) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home-page .home-only {
    width: min(100%, 420px) !important;
    gap: 12px !important;
  }

  body.home-page .home-brand-word {
    font-size: clamp(56px, 16vw, 86px) !important;
    line-height: .92 !important;
  }

  body.home-page .home-brand-script {
    font-size: clamp(15px, 5.6vw, 24px) !important;
    margin-top: 4px !important;
  }

  body.home-page .home-only-menu {
    margin-top: 10px !important;
    min-height: 44px !important;
    padding: .78rem 1.4rem !important;
    font-size: .84rem !important;
  }

  body.home-page .bottom-controls {
    left: 50% !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 20px), 410px) !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  body.home-page .ctrl-box {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.home-page .ctrl-box button {
    width: 100% !important;
    justify-content: center !important;
  }

  body.page-munkaink .project-list {
    width: calc(100% - 24px) !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    padding: 26px 0 !important;
    gap: 14px !important;
  }

  body.page-munkaink .project-copy h3 {
    font-size: clamp(22px, 10vw, 32px) !important;
  }

  body.page-munkaink .browser-bar {
    padding: 0 9px !important;
    gap: 8px !important;
  }

  body.page-munkaink .browser-dots i {
    width: 6px !important;
    height: 6px !important;
  }

  body.page-munkaink .browser-url {
    padding: 3px 8px !important;
    max-width: calc(100% - 48px) !important;
  }

  body.page-szolgaltatasok .inner-title-wrap h1 {
    font-size: clamp(24px, 8.2vw, 30px) !important;
    white-space: normal !important;
    line-height: 1.02 !important;
  }
}

@media (min-width: 521px) and (max-width: 1024px) {
  body.page-munkaink .project-list {
    width: min(calc(100% - 48px), 860px) !important;
  }

  body.page-munkaink .project,
  body.page-munkaink .project:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  body.page-munkaink .project-copy h3 {
    font-size: clamp(30px, 5vw, 42px) !important;
  }

  body.page-szolgaltatasok .services-container {
    gap: 20px !important;
  }
}


/* =========================================================
   RESPONSIVE SYSTEM V15 — mobile homepage redesign
   A desktop kompozíció érintetlen; telefonon külön, kompakt hero.
   ========================================================= */
@media (max-width: 520px) {
  html,
  body.home-page {
    min-height: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  body.home-page {
    min-height: 100svh !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.home-page main {
    position: relative !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: 100svh !important;
    display: grid !important;
    place-items: center !important;
    padding:
      max(58px, calc(env(safe-area-inset-top) + 48px))
      18px
      max(34px, calc(env(safe-area-inset-bottom) + 22px)) !important;
  }

  body.home-page .circuit-background {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    object-fit: cover;
  }

  body.home-page .home-only {
    position: relative !important;
    z-index: 3 !important;
    width: min(88vw, 340px) !important;
    max-width: 340px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateY(-1.5svh) !important;
  }

  body.home-page .home-brand {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  body.home-page .home-brand-word {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(56px, 18.2vw, 76px) !important;
    line-height: .88 !important;
    letter-spacing: .018em !important;
    -webkit-text-stroke-width: 1.5px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  body.home-page .home-brand-script {
    margin: 12px 0 0 !important;
    font-size: clamp(20px, 6.4vw, 27px) !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    -webkit-text-stroke-width: .55px !important;
    white-space: nowrap !important;
  }

  body.home-page .home-only-menu {
    width: min(78vw, 224px) !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 24px auto 0 !important;
    padding: .78rem 1rem !important;
    border-width: 1.5px !important;
    font-size: .72rem !important;
    letter-spacing: .13em !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }

  /* Mobilon ne az alsó Safari / Netlify UI mögé kerüljön. */
  body.home-page .bottom-controls {
    position: fixed !important;
    top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    transform: none !important;
    transform-origin: center !important;
    z-index: 160 !important;
  }

  body.home-page .ctrl-box {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 2px !important;
    gap: 1px !important;
    border-width: 1px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  body.home-page .ctrl-box button {
    width: auto !important;
    min-width: 32px !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    letter-spacing: .025em !important;
  }

  body.home-page .theme-toggle-btn {
    min-width: 34px !important;
    width: 34px !important;
    padding: 6px !important;
    gap: 0 !important;
  }

  body.home-page #themeIcon {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body.home-page #themeLabel {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.home-page .home-only {
    width: min(90vw, 310px) !important;
  }

  body.home-page .home-brand-word {
    font-size: clamp(50px, 18.3vw, 68px) !important;
  }

  body.home-page .home-brand-script {
    font-size: clamp(18px, 6.3vw, 23px) !important;
  }

  body.home-page .home-only-menu {
    width: min(78vw, 205px) !important;
    min-height: 44px !important;
    margin-top: 20px !important;
  }

  body.home-page .bottom-controls {
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    gap: 4px !important;
  }

  body.home-page .ctrl-box button {
    min-width: 29px !important;
    padding-inline: 7px !important;
  }
}

@media (max-width: 520px) and (max-height: 720px) {
  body.home-page .home-only {
    transform: translateY(1svh) !important;
  }

  body.home-page .home-brand-word {
    font-size: clamp(52px, 16vw, 68px) !important;
  }

  body.home-page .home-brand-script {
    margin-top: 8px !important;
    font-size: clamp(18px, 5.4vw, 23px) !important;
  }

  body.home-page .home-only-menu {
    margin-top: 18px !important;
    min-height: 42px !important;
  }
}


/* =========================================================
   RESPONSIVE SYSTEM V16 — iOS portrait scroll fix
   A mobil főoldal nem lehet fixen 100svh magas, különben Safari
   nem kap görgethető tartományt és az alsó/felső böngésző UI sem
   tud természetesen összecsukódni.
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait) {
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.home-page {
    height: auto !important;
    min-height: calc(100svh + 110px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  body.home-page main {
    height: auto !important;
    min-height: calc(100svh + 110px) !important;
    overflow: visible !important;
    place-items: center !important;
    padding-top: max(72px, calc(env(safe-area-inset-top) + 58px)) !important;
    padding-bottom: max(120px, calc(env(safe-area-inset-bottom) + 96px)) !important;
  }

  body.home-page .circuit-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.home-page .home-only {
    margin-block: auto !important;
  }
}

/* Kis iPhone-oknál is maradjon kényelmes scroll tartalék. */
@media (max-width: 430px) and (orientation: portrait) {
  body.home-page,
  body.home-page main {
    min-height: calc(100svh + 130px) !important;
  }
}


/* =========================================================
   RESPONSIVE SYSTEM V17 — mobile menu close-button fix
   Nyitott menünél a háttér-vezérlők nem takarhatják az X-et.
   ========================================================= */

/* A menü minden vezérlő fölött legyen. */
body.home-page .menu-overlay,
body.inner-page .menu-overlay {
  z-index: 900 !important;
}

body.home-page .menu-overlay .menu-top,
body.inner-page .menu-overlay .menu-top {
  position: relative !important;
  z-index: 920 !important;
}

body.home-page .menu-overlay .close-menu,
body.inner-page .menu-overlay .close-menu {
  position: relative !important;
  z-index: 950 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* A főoldali floating vezérlők nyitott menünél teljesen eltűnnek. */
body.home-page .menu-overlay.active ~ .bottom-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

@media (max-width: 820px) {
  body.home-page .menu-overlay,
  body.inner-page .menu-overlay {
    padding-top: max(16px, calc(env(safe-area-inset-top) + 10px)) !important;
    padding-right: max(16px, calc(env(safe-area-inset-right) + 12px)) !important;
    padding-left: max(16px, calc(env(safe-area-inset-left) + 12px)) !important;
  }

  body.home-page .menu-overlay .menu-top,
  body.inner-page .menu-overlay .menu-top {
    min-height: 52px !important;
    align-items: center !important;
  }

  body.home-page .menu-overlay .close-menu,
  body.inner-page .menu-overlay .close-menu {
    position: fixed !important;
    top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
    right: max(14px, calc(env(safe-area-inset-right) + 10px)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    border-width: 1.5px !important;
    background: rgba(8, 10, 14, .94) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.32) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.home-page .menu-overlay .close-menu::before,
  body.home-page .menu-overlay .close-menu::after,
  body.inner-page .menu-overlay .close-menu::before,
  body.inner-page .menu-overlay .close-menu::after {
    width: 20px !important;
    height: 2px !important;
  }

  /* Maradjon hely az X számára a fejléc jobb oldalán. */
  body.home-page .menu-overlay .menu-top,
  body.inner-page .menu-overlay .menu-top {
    padding-right: 62px !important;
  }
}