/* =========================================================================
   Softera — mobiilioptimoinnit (ladataan viimeisenä joka sivulla)
   Kattaa: navigaation hampurilaisvalikon (molemmat header-tyypit),
   layout-romahdukset kapeille näytöille ja typografian skaalauksen.
   ========================================================================= */

/* ---------- Vaakaylivuodon turvaverkko (estää sivuttaisskrollin puhelimessa) ---------- */
html, body { overflow-x: hidden; max-width: 100%; }

/* =========================================================================
   Otsikoiden sanankatkaisu — pitkät suomalaiset yhdyssanat eivät saa
   leikkautua eivätkä venyttää grid-saraketta näyttöä leveämmäksi.
   ========================================================================= */
@media (max-width: 760px) {
  h1, h2, h3,
  .hero__h, .page-hero__h, .sft-hero__h, .cta-banner__h, .story-hero__title,
  .section__title, .sft-section__title, .section-block__h, .focus__h,
  .y-cta__title, .story-cta__h, .feature-row__h, .problem-band__h,
  .section-cta__h, .aja-body__h, .aj-hero__h, .aja-hero__h, .y-hero__sub,
  .product-card__name, .sft-product__name, .y-card__h, .y-value__title {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* grid-lapset saavat kutistua min-content-leveyden alle */
  .section-block__head > *, .feature-row > *, .y-twocol > *,
  .sft-hero__inner > *, .cta-banner__inner > *, .section-cta__inner > *,
  .story-cta__inner > *, .y-cta__inner > *, .y-work__grid > *,
  .problem-band__inner > *, .sft-story__inner > * { min-width: 0; }

  /* Tietosuoja: sisällysluettelo ei saa venyttää saraketta yli näytön */
  .ts-toc, .ts-content { min-width: 0; max-width: 100%; }
  /* Tietosuoja: evästekorttien pitkät URL-osoitteet katkeavat */
  .ts-cookie, .ts-cookie__desc, .ts-cookie__name { min-width: 0; overflow-wrap: break-word; }
  .ts-cookie__optout { width: auto !important; max-width: 100%; overflow-wrap: anywhere; }
  /* Referenssi: meta-tietorivi kahteen sarakkeeseen */
  .ref-meta-strip__inner { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 460px) {
  .ref-meta-strip__inner { grid-template-columns: 1fr !important; }
}

/* ---------- Hampurilaispainike (piilossa työpöydällä) ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  padding: 0; margin-left: 8px; flex-shrink: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; display: block;
  width: 24px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform 220ms ease, opacity 160ms ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after  { position: absolute; top: 7px;  left: 0; }
.nav-toggle.is-open .nav-toggle__bars { background: transparent; }
.nav-toggle.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }
/* tumma palkki vaalealla (is-light) headerilla */
.site-header.is-light .nav-toggle__bars,
.site-header.is-light .nav-toggle__bars::before,
.site-header.is-light .nav-toggle__bars::after { background: var(--ink); }

/* Valikon sisäinen demo-CTA — näkyvissä vain mobiilissa (työpöydällä palkin nappi) */
.site-header__navcta, .sft-header__navcta { display: none; }

/* =========================================================================
   ≤ 900px — navigaatio muuttuu dropdown-valikoksi
   ========================================================================= */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-header, .sft-header { padding: 16px 20px; }

  .site-header__nav,
  .sft-header__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--softera-deep);
    padding: 4px 20px 14px;
    box-shadow: 0 20px 44px rgba(0,0,0,0.32);
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .site-header__nav.is-open,
  .sft-header__nav.is-open { display: flex; }

  .site-header__link,
  .sft-header__link {
    padding: 15px 2px; font-size: 16px; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .site-header__link:last-child,
  .sft-header__link:last-child { border-bottom: 0; }
  .sft-header__link.is-active::after { display: none; }

  /* vaalea header: vaalea valikko */
  .site-header.is-light .site-header__nav { background: #fff; border-top: 1px solid var(--line); }
  .site-header.is-light .site-header__link { color: var(--ink); border-bottom-color: var(--line); }

  /* mobiilissa palkissa vain logo + hampurilainen; demo-nappi siirtyy valikkoon */
  .site-header__cta .btn,
  .sft-header__cta .sft-btn { display: none; }
  .sft-header__cta { gap: 8px; }

  .site-header__navcta, .sft-header__navcta {
    display: inline-flex !important;
    justify-content: center; align-items: center; gap: 8px;
    margin-top: 14px;
    background: var(--softera-mint);
    color: var(--softera-deep) !important;
    border-bottom: 0 !important;
    border-radius: 999px;
    padding: 15px 20px !important;
    font-weight: 600; font-size: 15px;
  }
}

/* =========================================================================
   Jaetut komponentit kaikilla sivuilla — CTA-/yhteydenottolaatikko.
   Romahdutetaan yksisarakkeiseksi myös alasivuilla (Etusivu hoiti jo 1100px).
   ========================================================================= */
@media (max-width: 900px) {
  .cta-banner { padding: 64px 20px; }
  .cta-banner__inner { grid-template-columns: 1fr !important; gap: 30px; padding: 40px 28px; }
  .cta-banner__h { font-size: 32px; }
  .cta-banner__sub { max-width: none; }
}
@media (max-width: 600px) {
  .cta-banner { padding: 52px 16px; }
  .cta-banner__inner { padding: 30px 20px; border-radius: 18px; }
  .cta-banner__h { font-size: 27px; }
  .cta-banner__sub { font-size: 15px; }
  .cta-banner__form { padding: 20px 18px; }
}

/* =========================================================================
   ≤ 900px — Yritys / tarina -perheen layoutit (ui/styles.css + yritys.css)
   Näillä sivuilla ei ollut aiempaa responsiivisuutta.
   ========================================================================= */
@media (max-width: 900px) {
  .sft-hero { padding: 130px 24px 72px; min-height: 0; }
  .sft-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .sft-hero__stage { display: none; }            /* työpöytä-UI-kortti pois mobiilissa */
  .sft-section { padding: 72px 24px; }

  .sft-whyus__grid { grid-template-columns: 1fr 1fr; }
  .sft-products__grid { grid-template-columns: 1fr; }
  .sft-industries__grid { grid-template-columns: repeat(2, 1fr); }
  .sft-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .sft-story__stats { border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 28px 40px; }
  .sft-team__row { grid-template-columns: repeat(3, 1fr); }

  .sft-footer { padding: 64px 24px 28px; }
  .sft-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .sft-footer__inner--slim { flex-direction: column; gap: 28px; }
  .sft-footer__side { align-items: flex-start; }
  .sft-footer__cols { grid-template-columns: repeat(2, 1fr); }

  /* Yritys */
  .y-hero { padding: 130px 24px 64px; }
  .y-hero .sft-hero__h { font-size: 44px; }
  .y-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 44px; }
  .y-twocol { grid-template-columns: 1fr; gap: 36px; }
  .y-values__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .y-work__grid { grid-template-columns: 1fr; gap: 36px; }
  .y-videos { grid-template-columns: 1fr 1fr; }
  .y-written__grid { grid-template-columns: 1fr; }
  .y-offices__grid { grid-template-columns: 1fr; }
  .y-contacts__grid { grid-template-columns: 1fr 1fr; }
  .y-billing { padding: 30px 26px; }
  .y-billing__grid { grid-template-columns: 1fr; gap: 28px; }
  .y-cta__inner { grid-template-columns: 1fr; gap: 36px; }
  .y-cta__title { font-size: 44px; }

  /* Story (uratarina) */
  .story-hero { padding: 130px 24px 64px; }
  .story-hero__title { font-size: 44px; }
  .story-body { padding: 64px 24px 72px; }
  .story-facts { grid-template-columns: repeat(3, 1fr); }
  .story-more { padding: 64px 24px; }
  .story-more__grid { grid-template-columns: 1fr; }
  .story-cta { padding: 64px 24px; }
  .story-cta__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================================
   ≤ 600px — puhelimet: yhden sarakkeen layout + pienennetty typografia
   ========================================================================= */
@media (max-width: 600px) {
  .sft-section { padding: 56px 20px; }
  .sft-hero { padding: 116px 20px 56px; }
  .sft-section__title { font-size: 28px; }
  .sft-hero__h { font-size: 36px; }
  .sft-hero__sub { font-size: 16px; }

  .sft-whyus__grid { grid-template-columns: 1fr; }
  .sft-industries__grid { grid-template-columns: 1fr; }
  .sft-team__row { grid-template-columns: repeat(2, 1fr); }
  .sft-story__quote { font-size: 22px; }

  .sft-footer { padding: 52px 20px 24px; }
  .sft-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .sft-footer__bottom { grid-template-columns: 1fr; gap: 12px; text-align: left; margin-top: 44px; }
  .sft-footer__copy, .sft-footer__spacer { justify-self: start; }
  .sft-footer__inner--slim { gap: 24px; }

  /* Yritys */
  .y-hero { padding: 116px 20px 56px; }
  .y-hero .sft-hero__h { font-size: 36px; }
  .y-hero__stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .y-stat__val { font-size: 30px; }
  .y-values__grid { grid-template-columns: 1fr; }
  .y-videos { grid-template-columns: 1fr; }
  .y-contacts__grid { grid-template-columns: 1fr; }
  .y-billing { padding: 26px 20px; }
  .y-billing__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .y-billing__row:first-of-type { padding-top: 0; }
  .y-cta__title { font-size: 34px; }
  .y-cta__panel { padding: 26px 22px; }

  /* Story */
  .story-hero { padding: 116px 20px 52px; }
  .story-hero__title { font-size: 34px; }
  .story-body { padding: 52px 20px 64px; }
  .story-body p { font-size: 17px; }
  .story-body__lead { font-size: 20px; }
  .story-facts { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .story-more, .story-cta { padding: 52px 20px; }
  .story-cta__h { font-size: 32px; }
  .story-more__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* hero CTA-napit täysleveiksi puhelimessa */
  .sft-hero__ctas { flex-direction: column; align-items: stretch; }
  .sft-hero__ctas .sft-btn { justify-content: center; }
}

/* =========================================================================
   ≤ 600px — device-width-sivujen (site.css / subpages.css) hienosäätö.
   Perusromahdukset hoituvat jo 1100px-kyselyissä; tässä vain pienin koko.
   ========================================================================= */
@media (max-width: 600px) {
  .hero { padding: 116px 20px 48px !important; }
  .hero__h { font-size: 38px !important; }
  .hero__stage, .glass-stack, .t360-stack { display: none !important; }
  .hero__stage-frame { display: none !important; }
  .hero__ctas, .hero__cta-row { flex-wrap: wrap; }
  .focus__grid { grid-template-columns: 1fr !important; }
  .story__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-hero { padding: 116px 20px 52px !important; }
  .page-hero__h { font-size: 36px !important; }
  .page-hero__ctas { flex-direction: column; align-items: stretch; }
  .page-hero__ctas .btn { justify-content: center; }
  .stat-strip__inner { grid-template-columns: 1fr !important; gap: 20px; }
  .section-cta__ctas { align-items: stretch; }
  .site-footer { padding: 52px 20px 24px !important; }
}