/* Mobile hardening for every static page (all six languages). Loaded after the page
   CSS by i18n/build.py; the Astro CSS it corrects is a prebuilt export, so fixes live here.
   !important is used only where the export's own rules are !important or carry
   [data-astro-cid] attribute specificity. */

@media (max-width: 640px) {
  /* Headlines: no automatic hyphenation ("l'Al-gérie"); a word too long for the
     screen still breaks instead of running off it. */
  h1, h2, h3 {
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    overflow-wrap: break-word;
  }

  /* Centred flex heroes (B2B, About…): the inner column may shrink to the screen
     instead of overflowing both sides. */
  .hero-inner {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero {
    flex-direction: column !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* A photo block placed inside a hero (About) sits beside the text on desktop;
     on a phone it goes full width under it. */
  .hero > section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 36px 0 0 !important;
    padding: 0 !important;
  }
  .hero h1 {
    font-size: clamp(28px, 8.4vw, 40px) !important;
  }

  /* Hero key-figure strips: three equal columns that fit, labels may wrap. */
  .hero-stats {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-stats > :not([class*="sep"]) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .hero-stats [class*="label"],
  .hero-stats [class*="lbl"] {
    letter-spacing: 0.03em !important;
    text-align: center;
    /* long single words ("ABASTECIMENTO") hyphenate in the page's language */
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Home hero pillars: icon beside the title, the description under the title
     at full width (three side-by-side columns left it one word wide). */
  .hero-pillar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: center;
  }
  .hero-pillar .pillar-icon-wrap {
    grid-row: 1 / span 2;
  }
  .hero-pillar .pillar-label,
  .hero-pillar .pillar-sub {
    grid-column: 2;
  }
  .h1-sub {
    line-height: 1.4 !important;
  }

  /* Long call-to-action labels wrap inside the button instead of leaving the screen. */
  .btn-cta,
  .btn-cta-lg,
  .btn-ghost {
    white-space: normal !important;
    max-width: 100% !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* "Europe — Algérie — Afrique" route: fits the column (lines shrink first). */
  .network-visual {
    flex-shrink: 1 !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .network-line {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 12px;
  }
  .network-node {
    gap: 7px !important;
  }
  .network-node span {
    font-size: 14px !important;
  }

  /* Cards never wider than their column. */
  .why-card,
  .why-cards > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Touch screens at any width (phones in landscape, tablets): finger-sized targets
   and no focus zoom. */
@media (max-width: 640px), (pointer: coarse) {
  /* Form fields at 16px: iOS Safari zooms the page on focus below that. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Footer: finger-sized link rows. */
  #site-footer .footer-col a {
    display: block;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    line-height: 1.35 !important;
  }
  .contact-link {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  #site-footer .footer-email-cta {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }
}

/* Mobile menu: the last link's own border already separates it from the language
   switcher; the extra divider drew a second line. */
.mobile-nav-inner .mobile-divider {
  display: none;
}