/* ═══════════════════════════════════════════════════════════
   Knovit · IT mobile optimisation layer
   Loaded LAST and only on the /it/ page, so it never affects the
   English or French pages. Identical rules to the FR layer (the
   responsive tweaks are language-agnostic). Targets phones
   (≤767 / ≤600 px): tighter vertical rhythm, real tap targets, a
   clean stacked Use-Cases card, and a readable Integrations list.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1 · Tighter vertical rhythm on phones ---------- */
@media (max-width: 600px) {
  .kn-hero4      { padding: 88px 0 52px !important; }
  .kn-problem    { padding: 64px 0 64px !important; }
  .kn-sol        { padding: 60px 0 60px !important; }
  .kn-integrations-v2 { padding: 64px 0 64px !important; }
  .kn-voice4     { padding: 60px 0 56px !important; }   /* was 140/120 */
  .kn-briefing4  { padding: 60px 0 64px !important; }
  .kn-act4       { padding: 64px 0 64px !important; }
  .kn-ucp        { padding: 56px 0 24px !important; }
  .kn-privacy    { padding: 64px 0 64px !important; }
  .kn-cta4       { padding: 76px 0 64px !important; }

  /* trim oversized inner gaps */
  .kn-problem__divider { margin: 44px 0 32px !important; }
  .kn-problem__quote   { margin-top: 52px !important; padding-top: 32px !important; }
  .kn-voice4__quote    { margin-bottom: 26px !important; }
  .kn-act4__head       { margin-bottom: 8px !important; }
}

/* ---------- 2 · Nav CTA — proper 44px tap target ---------- */
@media (max-width: 767px) {
  .kn-nav4__cta {
    min-height: 44px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    align-items: center;
  }
}

/* ---------- 3 · Fixed-width phone mockups fit small screens ----------
   The hero phone is responsive (JS). The Briefing lockscreen is a fixed
   320px mockup that also drifts + rotates (a desktop parallax flourish)
   which pushes it off the edges on a phone. Center it, drop the drift,
   and scale it so it always fits with margins. */
@media (max-width: 767px) {
  .kn-briefing4__phone { transform: none !important; margin: 0 auto; }
  .kn-briefing4__phone-wrap { display: flex; justify-content: center; align-items: center; min-height: 0 !important; }
  .kn-briefing4__halo { display: none !important; }
  .kn-ls3 { zoom: 0.9; }
}
@media (max-width: 360px) {
  .kn-ls3 { zoom: 0.8; }
}

/* ---------- 4 · Integrations "before": neat readable stack ----------
   The desktop "pile" of 6 rotated, overlapping app cards is illegible
   on a phone. Flatten it into a tidy vertical list. */
@media (max-width: 767px) {
  .kn-integrations-v2__pile {
    position: static !important;
    min-height: 0 !important;
    perspective: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .kn-integrations-v2__pile-card {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    z-index: auto !important;
  }
  .kn-integrations-v2__pile-card:hover { transform: none !important; }
  .kn-integrations-v2__before { margin-bottom: 4px; }
}

/* ---------- 5 · Use Cases — clean stacked persona cards ----------
   Per persona on mobile: a photo banner (tag + name overlaid),
   then the headline + body, then the app screen in a comfortably
   sized phone (no longer cramped at 248 px). */
@media (max-width: 767px) {
  .kn-ucp__intro { margin-bottom: 26px !important; }

  .kn-ucp__seg {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    width: auto !important;
    padding: 16px 16px 22px !important;
    margin: 0 auto 18px !important;
    max-width: min(460px, calc(100vw - 32px)) !important;
    border-radius: 26px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--seg-accent, #4D1499) 26%, transparent) !important;
    box-shadow: 0 24px 48px -32px rgba(15, 18, 38, 0.30) !important;
  }

  /* order: photo → text → phone */
  .kn-ucp__seg-persona {
    order: 1;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .kn-ucp__seg-persona .kn-ucp__persona-card {
    aspect-ratio: 1 / 1 !important;   /* square: shows head + shoulders, label lands on the chest */
    border-radius: 18px !important;
    animation: none !important;
  }
  .kn-ucp__seg-persona .kn-ucp__persona-media img { object-position: 50% 20%; }

  .kn-ucp__seg-inner { order: 2; width: 100% !important; margin: 0 !important; }
  /* the photo banner already carries the persona tag + name */
  .kn-ucp__seg-tag { display: none !important; }
  .kn-ucp__seg-headline {
    font-size: clamp(25px, 6.8vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 0 0 10px !important;
  }
  .kn-ucp__seg-body { font-size: 16px !important; line-height: 1.6 !important; }

  .kn-ucp__seg-phone {
    order: 3;
    display: flex !important;
    justify-content: center;
    padding-top: 2px;
  }

  /* remove the old per-accent tint + any leftover sticky travel */
  .kn-ucp__tail { display: none !important; }
}

/* ---------- 6 · Text blocks: kill forced line breaks on phones ----------
   Hard <br/> breaks were tuned for desktop column widths; on a phone they
   create ragged, unbalanced lines. Let these wrap naturally + balanced. */
@media (max-width: 600px) {
  /* "With Knovit" video subtitle */
  .kn-sol__sub br { display: none !important; }
  .kn-sol__sub {
    max-width: 30ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: balance;
  }
  /* video caption — align the coral dot to the first line, not the middle */
  .kn-sol__caption {
    align-items: flex-start !important;
    max-width: 32ch;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left;
    line-height: 1.45;
  }
  .kn-sol__caption-dot {
    margin-top: 7px !important;
    flex-shrink: 0;
  }

  /* Integrations headline */
  .kn-integrations-v2__headline br { display: none !important; }
  .kn-integrations-v2__headline {
    text-wrap: balance;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 7 · Briefing — tidy headline + spacing on phones ----------
   The 3 hard breaks fracture awkwardly at phone width; let the line wrap
   naturally (balanced), same font/colour, and tighten the gap before the
   questions so the block reads as one calm unit. */
@media (max-width: 600px) {
  .kn-briefing4__headline br { display: none !important; }
  .kn-briefing4__headline {
    text-wrap: balance;
    line-height: 1.07 !important;
    margin-bottom: 28px !important;
  }
  .kn-briefing4__qs { margin-bottom: 30px !important; }
}

/* ---------- 8 · Use-case persona banner — glassy label ----------
   The full-width dark gradient + meta bar darkened the face and cut
   across the mouth. Replace it with a soft scrim + a compact frosted
   glass chip tucked in the corner, so the portrait stays clean. */
@media (max-width: 767px) {
  .kn-ucp__seg-persona .kn-ucp__persona-scrim {
    background: linear-gradient(180deg, transparent 46%, rgba(8,6,14,0.38) 100%) !important;
  }
  .kn-ucp__seg-persona .kn-ucp__persona-meta {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 13px 9px !important;
    background: rgba(20,17,30,0.30);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 13px;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,0.45);
  }
  .kn-ucp__seg-persona .kn-ucp__persona-name { color: #fff !important; }
  .kn-ucp__seg-persona .kn-ucp__persona-tag  { color: rgba(255,255,255,0.92) !important; }
}

/* ---------- 9 · Phone status-bar battery (FR, all sizes) ----------
   The bespoke app screens drew the battery as an empty outline (looked
   broken / "svirgolata"). Give it a real charge fill + positive terminal. */
.kn-uc-scr__statusbar-icons i.bat {
  position: relative;
  overflow: visible;
}
.kn-uc-scr__statusbar-icons i.bat::before {
  content: '';
  position: absolute;
  top: 1.5px; left: 1.5px; bottom: 1.5px;
  width: 13px;
  border-radius: 1px;
  background: currentColor;
}
.kn-uc-scr__statusbar-icons i.bat::after {
  content: '';
  position: absolute;
  top: 50%; right: -2.5px;
  transform: translateY(-50%);
  width: 1.5px; height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
  opacity: 0.55;
}
/* Wifi — was a solid black rounded rectangle; make it a real wifi glyph */
.kn-uc-scr__statusbar-icons i.wifi {
  width: 15px !important;
  height: 11px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M1%209l2%202c4.97-4.97%2013.03-4.97%2018%200l2-2C16.93%202.93%207.08%202.93%201%209zm8%208l3%203%203-3c-1.65-1.66-4.34-1.66-6%200zm-4-4l2%202c2.76-2.76%207.24-2.76%2010%200l2-2C15.14%209.14%208.87%209.14%205%2013z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M1%209l2%202c4.97-4.97%2013.03-4.97%2018%200l2-2C16.93%202.93%207.08%202.93%201%209zm8%208l3%203%203-3c-1.65-1.66-4.34-1.66-6%200zm-4-4l2%202c2.76-2.76%207.24-2.76%2010%200l2-2C15.14%209.14%208.87%209.14%205%2013z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Signal — was a lone 4px dot; make it proper ascending bars */
.kn-uc-scr__statusbar-icons i:not(.wifi):not(.bat) {
  width: 16px !important;
  height: 11px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Crect%20x='0'%20y='11'%20width='4'%20height='5'%20rx='1'/%3E%3Crect%20x='6'%20y='8'%20width='4'%20height='8'%20rx='1'/%3E%3Crect%20x='12'%20y='4'%20width='4'%20height='12'%20rx='1'/%3E%3Crect%20x='18'%20y='0'%20width='4'%20height='16'%20rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Crect%20x='0'%20y='11'%20width='4'%20height='5'%20rx='1'/%3E%3Crect%20x='6'%20y='8'%20width='4'%20height='8'%20rx='1'/%3E%3Crect%20x='12'%20y='4'%20width='4'%20height='12'%20rx='1'/%3E%3Crect%20x='18'%20y='0'%20width='4'%20height='16'%20rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 10 · Privacy section — drop the odd decorative blob on phones ----------
   The injected ambient "sphere" reads as a strange smudge on a narrow
   screen. Hide it on phones (desktop keeps it). */
@media (max-width: 767px) {
  .kn-privacy .kn-v5__sphere { display: none !important; }
}

/* ---------- 11 · Type consistency pass (phones) ----------
   Align the few outliers to the established mobile scale:
   • Use-Cases intro title 40 → 35px (the section-title tier)
   • eyebrows → uniform 11.5px / 0.16em tracking
   • Problème pull-quote weight 500 → 400 (matches the other quotes) */
@media (max-width: 600px) {
  .kn-ucp__title {
    font-size: 35px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  .kn-problem__eyebrow,
  .kn-sol__eyebrow {
    font-size: 11.5px !important;
    letter-spacing: 0.16em !important;
  }
  .kn-problem__quote p { font-weight: 400 !important; }
}