/* ============================================================
   AiMusica — scala tipografica pentru prima pagina (mobil)
   ------------------------------------------------------------
   Regula: fiecare text are un ROL, iar fiecare rol are o singura
   marime, aceeasi in toate sectiunile. Nu se pun marimi direct pe
   elemente; se foloseste unul dintre rolurile de mai jos.

   Rol              Marime  Greutate  Interliniere  Unde se foloseste
   display          42px    650       0.95          titlul mare de sus (H1)
   h2               30px    750       1.15          titlul fiecarei sectiuni
   h3               18px    700       1.30          titlul unui card
   title-sm         16px    600       1.35          rand de lista: stil, intrebare
   lead             16px    400       1.55          textul de sub titlul sectiunii
   body             15px    400       1.55          textul din carduri si raspunsuri
   link             15px    600       1.40          linkul din card („Vezi idei…”)
   button-lg        18px    650       1.20          butonul principal (Incepe acum)
   button           16px    600       1.20          butoanele secundare
   tab              14px    500       1.20          filtre si taburi
   small            13px    500       1.40          etichete, pasi scurti, subsol
   caption          12px    500       1.35          durate, note foarte scurte
   eyebrow          11px    600       1.40          supratitlul cu majuscule

   Pe telefoane foarte inguste (sub 360px) h2 scade la 28px si
   supratitlul are spatiere mai mica intre litere.
   Desktopul (peste 860px) nu este atins de acest fisier.

   Tehnic: fisierul se incarca dupa celelalte stiluri ale paginii si
   foloseste !important doar pentru marime, greutate, interliniere si
   spatiere, ca sa aiba ultimul cuvant peste straturile vechi (multe
   foloseau clamp() diferit in fiecare sectiune). Daca ceva trebuie
   schimbat, se schimba aici tokenul, nu elementul.
   ============================================================ */

@media (max-width: 860px) {
  :root {
    --lt-display: 2.625rem;
    --lt-h2: 1.875rem;
    --lt-h3: 1.125rem;
    --lt-title-sm: 1rem;
    --lt-lead: 1rem;
    --lt-body: 0.9375rem;
    --lt-link: 0.9375rem;
    --lt-button-lg: 1.125rem;
    --lt-button: 1rem;
    --lt-tab: 0.875rem;
    --lt-small: 0.8125rem;
    --lt-caption: 0.75rem;
    --lt-eyebrow: 0.6875rem;
    --lt-eyebrow-tracking: 0.16em;
  }

  /* ---------- display: H1 ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen #mobile-landing-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #mobile-landing-title span {
    font-size: var(--lt-display) !important;
    font-weight: 650 !important;
    line-height: 0.95 !important;
  }

  /* ---------- eyebrow: supratitluri ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-intro-pill,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-intro-pill span,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-eyebrow,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-showcase-eyebrow,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-library-eyebrow,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-eyebrow {
    font-size: var(--lt-eyebrow) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: var(--lt-eyebrow-tracking) !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  /* ---------- h2: titlurile sectiunilor ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-listen-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-how-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-use-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-pricing-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-library-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-faq-title,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-how-title span,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-library-title span,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen #landing-faq-title span {
    font-size: var(--lt-h2) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  /* Daca un titlu nu incape pe un rand, se rupe echilibrat pe doua. */
  html body.intro-page #mobile-landing-screen.mobile-landing-screen :is(#landing-listen-title, #landing-how-title, #landing-use-title, #landing-pricing-title, #landing-library-title, #landing-faq-title) {
    white-space: normal !important;
    text-wrap: balance;
  }

  /* ---------- lead: textul de sub titlul sectiunii ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-head p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-head p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-showcase-head p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-library-head p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-head p {
    font-size: var(--lt-lead) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }

  /* ---------- h3: titlurile cardurilor ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-copy h4,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-tile h4,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-library-benefit strong {
    font-size: var(--lt-h3) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
  }

  /* ---------- title-sm: randuri de lista ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-track-copy strong,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-item summary strong {
    font-size: var(--lt-title-sm) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  /* ---------- body: textul din carduri si raspunsuri ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-copy p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-tile p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-library-benefit p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-item p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-item p a {
    font-size: var(--lt-body) !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-copy p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-tile p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-library-benefit p,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-item p {
    font-weight: 400 !important;
  }

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-faq-item p a {
    font-weight: 600 !important;
  }

  /* ---------- link: linkul din card ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-tile-link:not(.use-tile-cta) {
    font-size: var(--lt-link) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  /* ---------- butoane ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen #mobile-landing-start span,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .how-create span {
    font-size: var(--lt-button-lg) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-more,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .use-tile-link.use-tile-cta {
    font-size: var(--lt-button) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  /* ---------- tab: filtre ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-tab {
    font-size: var(--lt-tab) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  /* ---------- small: etichete scurte ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-mini-step strong,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-chip,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-chip span,
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-track-meta small {
    font-size: var(--lt-small) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  /* Pasii de sub titlu primesc tot spatiul ramas dupa sageti,
     ca eticheta de 13px sa incapa pe doua randuri. */
  html body.intro-page #mobile-landing-screen.mobile-landing-screen .mobile-landing-mini-steps {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  /* ---------- caption: durate ---------- */

  html body.intro-page #mobile-landing-screen.mobile-landing-screen .landing-listen-track-meta .landing-listen-duration {
    font-size: var(--lt-caption) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* ---------- subsol ---------- */

  html body .site-footer.site-footer .site-footer-section-title,
  html body .site-footer.site-footer .site-footer-section-title span {
    font-size: var(--lt-small) !important;
    font-weight: 600 !important;
  }

  html body .site-footer.site-footer .site-footer-link-list .site-footer-legal-link,
  html body .site-footer.site-footer .site-footer-legal .site-footer-legal-link[href="/terms"] {
    font-size: var(--lt-small) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }

  /* Linkurile legale stau unul sub altul, ca cele din Exploreaza,
     in loc sa fie micsorate ca sa incapa pe un rand. */
  html body .site-footer.site-footer .site-footer-legal .site-footer-link-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: 10px !important;
    padding-top: 0 !important;
  }

  html body .site-footer.site-footer .site-footer-legal .site-footer-legal-dot {
    display: none !important;
  }

  html body .site-footer.site-footer .site-footer-security-label,
  html body .site-footer.site-footer .site-footer-security-label span,
  html body .site-footer.site-footer .site-footer-support,
  html body .site-footer.site-footer .site-footer-support span {
    font-size: var(--lt-caption) !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 359px) {
  :root {
    --lt-h2: 1.75rem;
    --lt-eyebrow-tracking: 0.1em;
  }
}