@charset "utf-8";

/* ============================================
   FOOTER — CI / BI / AGE RATING + LEGAL LINKS
   Ours, not the design's. Re-apply the HTML
   fragments after every re-mirror (CLAUDE.md, Delta 3):
   the .rating-wrap block (the CI/BI/rating logo row,
   the copyright + policy-links line), this file's
   <link>, and the consent-links.js / footer-rating.js
   <script>s.
   Layout follows the "261106_Footer" design (#81):
   one row of CI (left) / BI (centre) / age rating
   (right), then copyright + Privacy Policy | Terms of
   Use | Cookie Notice on one line. Same structure as
   the main site's .footer (resources/front/css/style.css
   and resources/front/mobile/css/style.css) — never
   change one side alone.
   ============================================ */
#footer .rating-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  font-family: Arial, 'Helvetica Neue', sans-serif;
}

/* The two outer columns are equal (1fr), so the BI stays centred whichever
   rating logo is showing and however wide it is. */
#footer .footer-logos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 24px;
  column-gap: 24px;
  width: 100%;
}

#footer .footer-logos a { display: block; }
#footer .footer-ci { justify-self: start; }
#footer .footer-bi { justify-self: center; }
#footer .footer-logos img { display: block; max-width: 100%; height: auto; }
#footer .footer-ci img,
#footer .footer-bi img { width: 200px; }

/* Age rating: four logos, one shown — /ns2/assets/js/footer-rating.js picks it
   by country, the markup ships the page language's. Fixed height + width:auto,
   so switching logos never changes the footer's height; each <img>'s
   width/height attributes give it its ratio before it decodes. */
#footer .rating {
  justify-self: end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 90px;
}

#footer .rating a { display: block; }

/* Load-bearing: the author `display: block` above beats the UA stylesheet's
   [hidden] rule, so without this all four logos would show — the same cascade
   trap as Delta 4's .sec-gallery[hidden] (#37). */
#footer .rating a[hidden] { display: none; }

#footer .rating img { width: auto; height: 90px; max-width: none; }

#footer .footer-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

/* "Cookie Notice" re-opens the Cookiebot dialog through
   /ns2/assets/js/consent-links.js (data-consent-renew); its href is the privacy
   policy, which is also where the click lands when uc.js is blocked. */
#footer .legal-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 6px;
}

#footer .legal-links a {
  color: var(--color-text);
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

#footer .legal-links a:hover { color: var(--color-text-sub); }

/* The separator is a border, not generated content: a ::before on the anchor
   would sit inside it, joining its accessible name ("| Privacy Policy") and its
   click target, and would pick up the link's underline. */
#footer .legal-links a + a {
  border-left: 1px solid var(--color-text);
  padding-left: 6px;
}

#footer .copyright { color: var(--color-text); }

@media (max-width: 1024px) {
  #footer .footer-ci img,
  #footer .footer-bi img { width: 170px; }
  #footer .rating { height: 76px; }
  #footer .rating img { height: 76px; }
}

@media (max-width: 768px) {
  #footer .rating-wrap { gap: 20px; }
  #footer .footer-logos { -webkit-column-gap: 16px; column-gap: 16px; }
  #footer .footer-ci img,
  #footer .footer-bi img { width: 140px; }
  #footer .rating { height: 64px; }
  #footer .rating img { height: 64px; }
}

/* Phones: the row stays one row (as in the design) and scales with the
   viewport, so CI + BI + the widest logo (GRAC) still fit at 320px. */
@media (max-width: 480px) {
  #footer .footer-logos { -webkit-column-gap: 10px; column-gap: 10px; }
  #footer .footer-ci img { width: 22vw; }
  #footer .footer-bi img { width: 24vw; }
  #footer .rating { height: 10vw; }
  #footer .rating img { height: 10vw; }
  #footer .footer-bottom { font-size: 11px; }
}