/* Mobile fixes (Elemér's mobile audit 2026-11-03, Nasus 8578 / 8603): readable text, a 44 px menu button and a call to
   action on the first screen of a phone.

   Readable text on phones and tablets (Elemér's mobile audit 2026-11-03, Nasus 8578): 50-70 elements were 6-11 px. Everything
   meant to be read is at least 12 px up to 1024 px wide (so landscape phones too). Loaded after every other stylesheet; the
   !important is deliberate, the original sizes come from rules of mixed specificity inside media queries. Desktop is unchanged. */
@media (max-width: 1024px) {
  .eyebrow,
  .section-label,
  .header-note,
  .hero-bottom,
  .hero-bottom span,
  .hero-aside,
  .hero-aside p,
  .hero-aside .text-link,
  .service-tags,
  .service-image figcaption,
  .film-caption,
  .film-label,
  .contact-detail,
  .scene-topline,
  .scene-progress button,
  .scene-progress button span,
  .sw-card__eyebrow,
  .al-eyebrow,
  .annotation-note,
  .pm-pill,
  .pm-brand,
  .project-filters button,
  .project-filters sup,
  .card figcaption .eyebrow,
  .reference-index-label > span,
  .gallery-more p,
  .gallery-more .outline-button,
  .tf-toolbar button,
  .tf-kicker,
  .footer-row,
  .footer-row .footer-link,
  .footer-brand > span,
  .journey-top > p span {
    font-size: 12px !important;
  }
  /* the long caps rows keep their line with a little less tracking at 12 px */
  .hero-bottom,
  .scene-topline,
  .contact-detail {
    letter-spacing: 0.04em !important;
  }
  .hero-bottom,
  .scene-topline {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}
/* the circle link's label is hidden on purpose below 761 px (font-size 0 there); where it shows, it is readable */
@media (min-width: 761px) and (max-width: 1024px) {
  .circle-link span {
    font-size: 12px !important;
  }
}

/* arrow icons: inline SVG instead of the arrow characters (iOS drew them as emoji boxes); they take the text colour and size */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
}

/* touch target: "Munkáink" in the nav pill is a 44 px tall link on one line */
@media (max-width: 1024px) {
  .pm-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* touch target: the menu button is 32 px on phones and 36 px on landscape phones; 44 px up to 1024 px */
@media (max-width: 1024px) {
  .pm-burger {
    width: 44px !important;
    height: 44px !important;
  }
}

/* the first-screen call to action, phones only (the desktop header has "Kapcsolat"): in the site's tone, the ink pill of
   the navigation, under the hero text */
.hero-cta {
  display: none;
}
@media (max-width: 760px) {
  .hero-aside {
    flex-wrap: wrap;
  }
  /* the call to action first (Nasus 8603/8618): text, then the button, then "Fedezze fel" */
  .hero-aside .text-link {
    order: 2;
  }
  .hero-cta {
    order: 1;
    display: inline-flex;
    flex-basis: 100%;
    max-width: 360px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    margin-top: 6px;
    padding: 0 20px;
    border-radius: 40px;
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .hero-cta .ico {
    font-size: 18px;
    color: #e8b08f;
  }
  .hero-cta:active {
    transform: translateY(1px);
  }
}

/* the narrowest phones (< 360 px): the 43 px headline floor ran ~10 px past the content edge ("elképzeléseinek." clipped at
   320 px) and the nav pill covered the end of the logo; a slightly smaller headline and logo there */
@media (max-width: 359px) {
  h1 {
    font-size: 40px;
  }
  .brand {
    width: 136px;
  }
}

/* Stable heights for the tall scroll blocks (Janos 2026-11-04, iPhone Messenger: ~100 px jump near the services when the
   toolbar moved; the same as SAU #35 and TerraCode #217). --app-vh comes from the inline script in <head> (1 % of the viewport
   height in px, changed only by a width change); the CSS falls back to svh. Same media conditions as the original rules.
   Sticky stages, dialogs and absolutely placed layers keep their viewport units: they do not move the page. */
.scene-track {
  height: calc(var(--app-vh, 1svh) * 340);
}
.tf-gallery {
  height: calc(var(--app-vh, 1svh) * 440);
}
html.section-motion-ready .about {
  min-height: calc(var(--app-vh, 1svh) * 185);
}
.connected-grid {
  padding-bottom: calc(var(--app-vh, 1svh) * 5);
}
@media (max-width: 847px) {
  .tf-gallery {
    height: calc(var(--app-vh, 1svh) * 380);
  }
}
@media (max-width: 760px) {
  .scene-track {
    height: calc(var(--app-vh, 1svh) * 300);
  }
  .hero-media {
    height: calc(var(--app-vh, 1svh) * 65);
  }
  html.section-motion-ready .about {
    min-height: calc(var(--app-vh, 1svh) * 160);
  }
}
@media (max-height: 650px) and (min-width: 761px) {
  html.section-motion-ready .about {
    min-height: calc(var(--app-vh, 1svh) * 150);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sw-scene {
    height: calc(var(--app-vh, 1svh) * 90);
  }
}

/* Stable pinned journey stage on touch screens (Nasus 8648, Elemer 8646: inside the pinned scenes the card and the
   wordmark moved -81/-39 px when the toolbar moved). The stage is at least the large viewport (100lvh, the height with
   the toolbar hidden), so no empty strip opens below it when the toolbar goes away. Everything inside is placed from the
   top against --stage-vis: the load-time height (--app-vh, changed only by a width change), or the current height if
   that is smaller, so nothing inside moves when the toolbar hides and nothing falls under it when it comes back.
   Desktop keeps 100svh: there is no toolbar there, and a height-only window resize must still fit the stage. */
@media (hover: none) and (pointer: coarse) {
  .sw-stage {
    --stage-vis: min(calc(var(--app-vh, 1svh) * 100), 100dvh);
    height: calc(var(--app-vh, 1svh) * 100);
    height: max(calc(var(--app-vh, 1svh) * 100), 100lvh);
    --card-bottom: calc(100% - var(--stage-vis) * 0.85);
  }
  .sw-wordmark {
    bottom: auto;
    height: var(--stage-vis);
    padding-bottom: calc(var(--stage-vis) * 0.09);
  }
  .scene-progress {
    bottom: calc(100% - var(--stage-vis) + 38px);
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
  .sw-stage {
    --card-bottom: calc(100% - var(--stage-vis) + 100px);
  }
  .sw-wordmark {
    padding-top: calc(var(--stage-vis) * 0.24);
    padding-bottom: 0;
  }
  .scene-progress {
    bottom: calc(100% - var(--stage-vis) + 28px);
  }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .sw-stage {
    height: auto;
    --card-bottom: 35px;
  }
  .sw-wordmark {
    bottom: 0;
    height: auto;
  }
}