/* griffon.bio - mobile.css - responzivni popravci (v60)
   Ucitava se nakon inline stilova svake stranice. Mijenja samo prikaz <= 900 px,
   osim gdje je izricito navedeno. Vrijednosti: Carlito body, Cormorant naslovi. */

/* -- 1. Mrezni redovi (slika + tekst) ne smiju biti siri od ekrana -- */
@media (max-width: 900px) {
  .mag-row, .mag-row--reverse, .mag-problem, .mag-solution, .mag-hero, .mag-split, .mag-two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mag-row > *, .mag-row--reverse > *, .mag-problem > *, .mag-solution > *, .mag-hero > *,
  [class*="__grid"] > *, [class*="__cards"] > *, [class*="__stats"] > *, [class*="__kpis"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .mag-row__image, .mag-problem__image, .mag-solution__image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: 240px;
    width: 100%;
  }
  .mag-hero__content, .mag-row__content, .mag-problem__content, .mag-solution__content, .mag-pagehero__inner {
    width: 100%;
    box-sizing: border-box;
  }

  /* -- 2. Naslovi: bez prisilnih prijeloma, prirodno lomljenje, velicine za 375 px -- */
  /* prisilne <br> prijelome u naslovima uklanja mobile.js (zamjena razmakom); CSS samo osigurava lomljenje */
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
    line-height: 1.12;
  }
  .mag-hero__h1, .mag-pagehero__h1 { font-size: clamp(30px, 8.6vw, 38px) !important; }
  .mag-row__h2, .mag-band__h2, .mag-grid__h2, .mag-cta-final__h2, .mag-form-section__h2,
  .mag-spec-table__h2, .mag-problem__h2, .mag-solution__h2, .mag-process__h2 { font-size: clamp(26px, 7.2vw, 32px) !important; }
  .mag-spec-table__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mag-spec-table__cell { overflow-wrap: anywhere; }
  .mag-card__title { font-size: 24px !important; }
  .mag-bignum { font-size: clamp(56px, 18vw, 88px) !important; }
  .mag-bignum--sm { font-size: clamp(40px, 13vw, 64px) !important; }

  /* -- 3. Tekst: jedan razmak redaka za sav tekuci tekst, citljiv minimum -- */
  p, li, blockquote, .mag-row__lead, .mag-pagehero__sub, .mag-band__lead, .mag-card__text {
    line-height: 1.65 !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  p, li, .mag-row__lead, .mag-pagehero__sub, .mag-band__lead, .mag-card__text { font-size: 16px !important; }
  article p, article li { font-size: 17px !important; line-height: 1.7 !important; }
  /* velika slova s razmakom (trake, oznake, brendovi) se NE rastavljaju */
  .mag-trust__text, .mag-trust__text *, [class*="eyebrow"], [class*="crumb"], .footer__credibility-item, [style*="uppercase"], [style*="letter-spacing"] { hyphens: manual !important; -webkit-hyphens: manual !important; }
  /* oznake/eyebrow ne ispod 12 px */
  .mag-hero__eyebrow, .mag-row__eyebrow, .mag-pagehero__eyebrow, .mag-grid__eyebrow,
  .mag-band__eyebrow, .mag-pagehero__crumb, .mag-problem__eyebrow { font-size: 12px !important; letter-spacing: 0.16em !important; line-height: 1.5 !important; }

  /* -- 4. Linkovi i gumbi: dodirne povrsine i dugacke rijeci (podnozje, e-mail) -- */
  .footer__link, .footer__legal-link, .navmenu a { min-height: 36px; display: inline-flex; align-items: center; }
  .footer a, .footer__link, .footer__legal-link, a[href^="mailto:"], .mag-solution__line { overflow-wrap: anywhere; }
  .mag-btn { width: 100%; justify-content: center; box-sizing: border-box; }
  .mag-btn-row { flex-direction: column; gap: 12px; }

  /* -- 4b. Stariji header (FAQ i sl.): na telefonu samo logo + izbornik -- */
  .top nav > a { display: none !important; }
  .top nav { flex-wrap: wrap; justify-content: flex-end; }

  /* -- 5. Tablica usporedbe: vidljiv nagovjestaj da se moze pomicati -- */
  .mag-comparison-table { position: relative; }
  .mag-comparison-table__grid { min-width: 720px !important; }
}

/* -- 6. Vrijedi i na desktopu: dugacke rijeci i e-mail adrese nikad ne smiju izaci iz svog stupca -- */
.footer a, a[href^="mailto:"] { overflow-wrap: anywhere; }