/* site-responsive.css — mobile layer for the redesign.
 * The prototype ships no breakpoints; this adds them. Because the design uses
 * inline styles, overrides target the exact inline patterns and use !important.
 * Headings use clamp() with the desktop px as the max, so desktop is unchanged.
 * Injected into every page by scripts/dc-to-html.mjs. */

/* ---- Fluid type (applies at all widths; clamps to the design px on desktop) ---- */
[style*="font-size:56px"] { font-size:clamp(31px, 8.5vw, 56px) !important; }
[style*="font-size:44px"] { font-size:clamp(27px, 6vw, 44px) !important; }
[style*="font-size:42px"] { font-size:clamp(26px, 6vw, 42px) !important; }
[style*="font-size:38px"] { font-size:clamp(25px, 5.5vw, 38px) !important; }
[style*="font-size:64px"] { font-size:clamp(40px, 9vw, 64px) !important; }
[style*="font-size:54px"] { font-size:clamp(30px, 8vw, 54px) !important; }
[style*="font-size:52px"] { font-size:clamp(29px, 7.5vw, 52px) !important; }
[style*="font-size:46px"] { font-size:clamp(27px, 6.5vw, 46px) !important; }
[style*="font-size:32px"] { font-size:clamp(24px, 6vw, 32px) !important; }

/* ---- Tablet / mobile: collapse layout grids ---- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns:0.55fr 1.45fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:440px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* collapsed grids: don't let an intrinsically-wide child (Turnstile iframe,
   * nbsp-joined text, inputs) blow the 1fr track past the container */
  [style*="grid-template-columns:repeat(3,1fr)"] > *,
  [style*="grid-template-columns:1fr 1fr"] > *,
  [style*="grid-template-columns:1.15fr 1fr"] > *,
  [style*="grid-template-columns:1.1fr 0.9fr"] > *,
  [style*="grid-template-columns:1.05fr 0.95fr"] > *,
  [style*="grid-template-columns:0.85fr 1.15fr"] > *,
  [style*="grid-template-columns:0.9fr 1.1fr"] > *,
  [style*="grid-template-columns:0.55fr 1.45fr"] > *,
  [style*="grid-template-columns:1.2fr 1fr"] > *,
  [style*="grid-template-columns:440px 1fr"] > * { min-width: 0; }
  /* about team photos: 4-up doesn't fit 375px — go 2×2 */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* a single long word (RO "confidențialitate") may exceed a 375px line —
   * "anywhere" (unlike break-word) also shrinks flex/grid min-content */
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
  /* flex items pinned with flex-shrink:0 (case-study tech-stack header) must
   * still cap at the container so their text can wrap */
  [style*="flex-shrink:0"] { max-width: 100%; }
  /* maintain-retainer band (home): 1fr auto isn't in the collapse list; chained
   * with its padding so the nav language pill (also 1fr auto) stays two-column */
  [style*="grid-template-columns:1fr auto"][style*="padding:32px 38px"] {
    grid-template-columns: 1fr !important;
  }
  /* bottom CTA (home): the fixed-width Turnstile iframe sets the min-content of
   * the collapsed 1fr track and drags both columns wider than the card — let the
   * grid items shrink below min-content and cap the widget itself */
  .cf-turnstile, .cf-turnstile iframe { max-width: 100%; }
  /* tighten oversized panel padding (2-value rules BEFORE 3-value so the
   * longer patterns, matched by both, take the later rule) */
  [style*="padding:64px 52px"]      { padding: 40px 22px !important; }
  [style*="padding:64px 56px"]      { padding: 40px 22px !important; }
  [style*="padding:52px 56px"]      { padding: 36px 22px !important; }
  [style*="padding:56px 52px"]      { padding: 36px 22px !important; }
  [style*="padding:0 44px 56px"]    { padding: 0 22px 40px !important; }
  [style*="padding:32px 44px 56px"] { padding: 28px 22px 40px !important; }
  [style*="padding:70px 56px"]      { padding: 40px 22px !important; }
  [style*="padding:64px 52px 100px"]{ padding: 40px 22px 64px !important; }
  [style*="padding:64px 52px 56px"] { padding: 40px 22px 40px !important; }
  [style*="padding:56px 48px"]      { padding: 36px 22px !important; }
  [style*="padding:40px 36px"]      { padding: 30px 20px !important; }
  [style*="padding:0 44px 72px"]    { padding: 0 22px 48px !important; }
  /* nav padding + hero breathing room */
  [style*="padding:24px 44px"]      { padding: 18px 20px !important; }
}

/* ---- Mobile nav (burger). Elements are tagged by scripts/site-mobile.js ----
 * Breakpoint is 1180px, not 900: the desktop nav (6 links + centre logo + the
 * "Get your free automation audit" CTA) only fits unwrapped from ~1190px up. */
.rt-burger { display: none; }
.rt-mnav   { display: none; }   /* hidden on desktop at all times */
@media (max-width: 1180px) {
  .rt-nav { position: relative; grid-template-columns: auto 1fr auto !important; }
  .rt-nav-center, .rt-nav-cta { display: none !important; }
  .rt-burger {
    display: inline-flex; flex-direction: column; gap: 5px; justify-self: end;
    background: rgba(244,242,238,0.06); border: 1px solid rgba(244,242,238,0.22);
    border-radius: 11px; padding: 12px 11px; cursor: pointer;
  }
  .rt-burger span { width: 22px; height: 2px; background: #F4F2EE; display: block; transition: transform .25s ease, opacity .2s ease; }
  .rt-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rt-burger.open span:nth-child(2) { opacity: 0; }
  .rt-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .rt-mnav {
    display: none; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    background: #160F1A; border: 1px solid rgba(244,242,238,0.14); border-radius: 18px;
    padding: 12px; z-index: 60; box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  }
  .rt-mnav.open { display: block; }
  .rt-mnav .rt-nav-center {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 10px;
  }
  .rt-mnav .rt-nav-center > span { display: none !important; } /* hide inline R logo in the dropdown */
  .rt-mnav .rt-nav-center > a { padding: 12px 14px !important; border-radius: 10px; font-size: 15px !important; }
  .rt-mnav .rt-nav-cta { display: flex !important; justify-content: center; }
  .rt-mnav .btnNavCta { width: 100%; justify-content: center; padding: 13px 18px; }
}