/* zffassaden.lu only — linked by Base.astro when PUBLIC_SITE=lu, copied by
   scripts/lu-public.mjs. Kept out of the Tailwind build on purpose: new
   utilities there would change the FR stylesheet, which must stay identical.
   The LU header carries a language switch, a wider logo and longer German
   labels. To keep real spacing between items (every gap ≥ 1rem) the phone
   shows its icon only on desktop — the number stays in the footer, on
   /contact/ and in the tel: link — and the menu runs at 14px. */
@media (min-width: 64rem) {
  #site-header .site-header-inner { gap: 1.5rem; }
  #site-header nav.lg\:flex { gap: 1.25rem; }
  #site-header nav.lg\:flex a { font-size: 14px; }
  #site-header .site-header-inner > div { gap: 1rem; }
  #site-header a[href^="tel:"] > span:last-child { display: none; }
  #site-header .site-header-inner > div > a.btn-navy { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  #site-header .site-header-inner > div > nav { gap: 0.5rem; }
}
/* 1024–1279px: the German menu needs the last 40px — tighter, never under 1rem. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  #site-header .site-header-inner { gap: 1rem; }
  #site-header nav.lg\:flex { gap: 1rem; }
  #site-header .site-logo { height: 3rem; }
  #site-header .site-header-inner > div > a.btn-navy { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* Phones: the LU logo is wider than the FR one (3.5:1 vs 2.6:1) and the
   German button label longer — scale the logo to the FR logo's width. */
@media (max-width: 39.99rem) {
  #site-header .site-logo { height: 2.6rem; }
  #site-header .site-header-inner > div > a.btn-navy { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
  #site-header .site-header-inner > div { gap: 0.6rem; }
}

/* Below desktop the language switch lives in the mobile drawer only. */
@media (max-width: 63.99rem) {
  #site-header .site-header-inner > div > nav { display: none; }
}
/* Under 384 px the quote button does not fit beside the logo: it stays in
   the drawer and in the hero. */
@media (max-width: 23.99rem) {
  #site-header .site-header-inner > div > a.btn-navy { display: none; }
}

/* German compounds (« Dienstleistungen », « Fassadenrenovierung ») do not fit
   the display sizes on tablets and phones: hyphenate (lang="de-LU"), and
   break as a last resort instead of overflowing the page sideways. */
h1, h2, h3, .h-display, [role="list"] p {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Contact page, below desktop: the map box is aspect-[4/3] with a 320px
   min-height, and aspect-ratio turns that into a 427px min-width — wider than
   a phone. Same bug on the FR site: reported, not fixed there (FR is frozen
   in this lane). */
@media (max-width: 63.99rem) {
  main .min-h-\[320px\].aspect-\[4\/3\] { aspect-ratio: auto; height: 320px; }
}

/* « Nos partenaires » : 3 logos on LU in the FR 4-column grid sat left of
   centre, and their very different shapes (Sto 4.8:1, Knauf 1.6:1) came out
   78 / 50 / 96px tall. One centred row, one visual size: same height, wide
   logos capped by width. (FR has 4 logos of one shape: not affected.) */
main .grid.md\:grid-cols-4.justify-items-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 4rem;
}
main .grid.md\:grid-cols-4.justify-items-center > a { display: flex; align-items: center; justify-content: center; }
main .grid.md\:grid-cols-4.justify-items-center img {
  height: 4.5rem;
  width: auto;
  max-width: 12.5rem;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 39.99rem) {
  main .grid.md\:grid-cols-4.justify-items-center { gap: 2rem 2.5rem; }
  main .grid.md\:grid-cols-4.justify-items-center img { height: 3.5rem; max-width: 9rem; }
}

/* L'entreprise › « Proximité » (follow-up 3): WordPress puts the map on the
   LEFT and the text on the RIGHT on desktop; the FR layout has them the other
   way round. Swap the columns from 768px, mirror the text column's padding
   (FR: md:pl-10 lg:pl-20 md:pr-6), and let each column slide in from its own
   side. Phones keep text above map, as before. Only this grid has an iframe
   in an md:grid-cols-2 (the contact page's map grid is lg:grid-cols-2). */
@media (min-width: 48rem) {
  main .grid.md\:grid-cols-2:has(> div > iframe) > div:first-child {
    order: 2;
    padding-left: 1.5rem;
    padding-right: 2.5rem;
  }
  main .grid.md\:grid-cols-2:has(> div > iframe) > div[data-reveal="left"]:not(.reveal-in) { transform: translateX(24px); }
  main .grid.md\:grid-cols-2:has(> div > iframe) > div[data-reveal="right"]:not(.reveal-in) { transform: translateX(-24px); }
}
@media (min-width: 64rem) {
  main .grid.md\:grid-cols-2:has(> div > iframe) > div:first-child { padding-right: 5rem; }
}