/* mobile-fix.css - load AFTER main.css
   Same scaling in Safari (iOS), Chrome and Brave on phones.
   Replaces the <style> block that had been pasted into main.css. */

/* 1. Stop phones from auto-inflating text differently per browser */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2. Nothing may make the page wider than the screen.
   "clip" (not "hidden") keeps the sticky header working. */
body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* 3. Header logos (new markup): one flex row that always fits */
.header-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.header-logos a { display: block; min-width: 0; }
.header-logos img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
}
.header-logos .hl-eu      { flex: 5 1 0; }
.header-logos .hl-gov     { flex: 3 1 0; }
.header-logos .hl-pocidif { flex: 3 1 0; }
@media (max-width: 575.98px) {
  .header-logos img { max-height: 36px; }
}

/* 3b. Header logos (old .row markup still used on other pages).
   Scoped to ".row" so the flag icons in the menu are not stretched. */
@media (max-width: 767.98px) {
  #header .row { margin-left: 0; margin-right: 0; }
  #header .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  #header .row > .col-7,
  #header .row > .col-6,
  #header .row > .col-1 { width: 33.333333%; flex: 0 0 33.333333%; }
  #header .row img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
  }
}
@media (max-width: 575.98px) {
  #header .row > [class*="col-"] { padding-left: 3px; padding-right: 3px; }
  #header .row img { max-height: 55px; }
}

/* 4. Long words / e-mails wrap instead of overflowing */
p, li, h1, h2, h3, h4, a, span { overflow-wrap: anywhere; }

/* 5. Video / portfolio pages */
.portfolio video {
  display: block;
  width: 100% !important;
  max-width: 1280px;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}
.portfolio, .page-title, .footer { max-width: 100%; }
@media (max-width: 767.98px) {
  .page-title h1 { font-size: 1.65rem; }
  .portfolio.section { padding-top: 30px; padding-bottom: 30px; }
  .portfolio h3 { font-size: 1.25rem; line-height: 1.35; }
  .portfolio h4 { font-size: 1rem; line-height: 1.45; }
}
@media (max-width: 575.98px) {
  .page-title h1 { font-size: 1.4rem; }
  .breadcrumbs { font-size: .9rem; }
  .portfolio h3 { font-size: 1.15rem; }
  .portfolio h4 { font-size: .9rem; }
}

/* 6. Hero: main.css sizes it with 100vh and absolute positioning, and
   .hero p is 25px on phones. vh differs between browsers (collapsing
   address bar), so the long text got cut differently. Below the menu
   breakpoint the slide now grows with its text. */
@media (max-width: 1199.98px) {
  .hero .carousel {
    min-height: 0;
    overflow: hidden;
  }
  .hero .carousel::after { content: ""; display: table; clear: both; }
  .hero .carousel-item {
    position: relative;
    inset: auto;
    min-height: 420px;
  }
  .hero .carousel-container {
    position: relative;
    inset: auto;
    padding: 70px 56px 60px;
  }
  .hero p {
    font-size: 1rem;
    text-align: left !important;
  }
}
@media (max-width: 575.98px) {
  .hero .carousel-container { padding: 50px 44px 56px; }
  .hero h2 { font-size: 1.4rem; }
}