/* WeDoPixels theme overrides — tracked in git (unlike assets/wdp/brand.css, which is a
   synced build artifact). Loaded last, after rise-style + brand.css. Keep this minimal:
   only rebrand/localisation fixes that must survive an assets re-sync. */

/* Hero headline: keep arch's original .title-a4 size (.9rem desktop / .38rem mobile) so
   it matches arch.agency. The long Hungarian words could overflow the GSAP split-line
   mask (overflow:hidden per line) and get clipped mid-letter, so keep the safety props
   (max-width + break long words) — they only kick in when a word can't fit. */
.two-cards-button-section .big-card .title.title-a4{
  font-size: .9rem;
  line-height: .8em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
@media screen and (max-width:768px) and (orientation:portrait){
  .two-cards-button-section .big-card .title.title-a4{
    font-size: .38rem;
  }
}

/* Case-study Share/Next column too narrow — the fix is at the pin, not the content.
   arch sizes the right column as `.inner:last-child { width: 4.6rem }` (a rem that scales
   with the root font-size, so it tracks the viewport). But GSAP ScrollTrigger captured
   the pinned `.sticky`/pin-spacer width ONCE, before the responsive root font-size had
   settled (at a ~1280px state → 4.6rem ≈ 409px), and froze it inline. So on any wider
   viewport the column grows to 4.6rem (e.g. 613px @1920) while the pinned card stays a
   stale 409px — leaving the right third of the column empty and squeezing the share icons
   until they clip. Re-assert the intended width in rem: unlike `100%`, a rem resolves the
   same whether the card is in normal flow or `position:fixed` during the pin, so the card
   fills the column and stays within it in both states, at every viewport. This supersedes
   the earlier stacking + content-freeze workarounds (which fought the symptom). */
.content-blocks-section .inner.track .pin-spacer,
.content-blocks-section .inner.track .sticky{
  width: 4.6rem !important;
  max-width: 4.6rem !important;
}
/* At arch's mobile breakpoint (≤768px portrait) the section stacks to one full-width
   column and the pin is disabled (the card is static), so `4.6rem` would be far too
   narrow there — fill the column instead. width:100% is safe here precisely because the
   card is static (not position:fixed) at this breakpoint. */
@media screen and (max-width:768px) and (orientation:portrait){
  .content-blocks-section .inner.track .pin-spacer,
  .content-blocks-section .inner.track .sticky{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hero "Play video" modal (#videoModal). The captured markup hid it with an inline
   style="opacity:0;display:none", and the compiled JS only toggles a `.open` class on
   the element (it never re-writes those inline styles), so with the inline style present
   the modal could never actually show. Drive open/closed from the class instead, with a
   fade; visibility:hidden (not display:none) keeps the closed modal non-interactive
   without blocking the page, and lets the opacity transition run. */
.video-modal{ opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.video-modal.open{ opacity:1; visibility:visible; }

/* Kapcsolat form: arch's contact CSS only styles input[type=text|email] and select — its
   original form had no phone or message field. Our Gravity Form adds a `tel` input and a
   `textarea`, which arch's rule doesn't match, so they fell back to unstyled browser boxes.
   Re-apply arch's exact pill styling to those two field types (values copied verbatim from
   `.contact_form … form input[type=email]`), so all four fields look identical. The textarea
   also gets a multi-line height and resize handle. */
.contact_form .wrapper .form .form-wrap form input[type=tel],
.contact_form .wrapper .form .form-wrap form textarea{
  all:unset; flex-grow:1; font-family:inherit; display:block;
  padding:.21rem .3rem .2rem; border-radius:.4rem;
  border:.03rem solid rgba(53,98,255,.2); width:100%; box-sizing:border-box;
  font-size:.18rem; line-height:.162rem; letter-spacing:-.02em; font-weight:700;
  text-transform:uppercase; color:var(--dark-blue);
}
.contact_form .wrapper .form .form-wrap form input[type=tel]::placeholder,
.contact_form .wrapper .form .form-wrap form textarea::placeholder{ color:var(--dark-blue); }
.contact_form .wrapper .form .form-wrap form textarea{
  min-height:1.6rem; line-height:1.2em; resize:vertical;
}

/* Home featured card stat row. Two departures from arch's stock design:
   (1) arch hides the 3rd .l-inner on the home slider (…l-inner:last-child{display:none});
       we re-reveal it so all our stats show.
   (2) arch's big line is `title-a1` (.32rem) — sized for short numbers like "550". Ours are
       word labels ("MOBIL APP", "ÜGYVITELI"), which overflowed/wrapped at that size. Shrink
       the big line and force both lines onto a single row (nowrap). All sizes are rem, so the
       ratio to the (rem-based) column width holds at every viewport. Equal-width columns keep
       the three pairs evenly spaced. */
.case-study-cards-section .card .cnt .layout.has-statok{
  align-items:flex-start; gap:.12rem; width:100%;
}
.case-study-cards-section .card .cnt .layout.has-statok .l-inner{
  flex:1 1 0; min-width:0; display:block;
}
.case-study-cards-section .card .cnt .layout.has-statok .l-inner .num{
  font-size:.18rem; line-height:.9em; letter-spacing:-.03em;
  white-space:nowrap; margin-bottom:.04rem;
}
.case-study-cards-section .card .cnt .layout.has-statok .l-inner .text{
  font-size:.1rem; line-height:1em; white-space:nowrap;
}

/* Ügyfeleink logo grid: square (1:1) cells instead of arch's landscape strip
   (arch capped each logo at max-width:2.08rem with auto height, giving uneven,
   small logos). Each logo now fills its 1fr column as a contained square, so
   every cell is identical regardless of the logo's own aspect ratio. The inset
   padding keeps logos off the cell edges. */
.clients-section .logo-cards .media{
  width:100%;
  max-width:none;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:contain;
  padding:.14rem;
  box-sizing:border-box;
}

/* "Minden platformot szeretünk" is inverted (media cube left, text right). With the text
   column now on the right, right-align its content so it reads toward the right edge.
   Desktop only — on mobile the section stacks full-width, where left-aligned is correct. */
@media screen and (min-width:769px){
  .arch-layout-section.invert .layout.content-layout{ text-align:right; }
}