/* Canonical <Footer/> grid rules for legacy (styles.css) pages.
   Audit C3 (2026-07-11): contact and destinations still load the legacy
   public/styles.css, not styles-recolor.css/recolor-overrides.css, so they
   never picked up the "FOOTER, redesigned 2026-06-18" grid rules that make
   src/app/(home)/_components/Footer.tsx lay out as columns (those rules live
   only in public/recolor-overrides.css, which recolors header/buttons/cards
   too and is out of scope here). This file duplicates just that block
   (verbatim, no CSS custom properties, so it is color-neutral on legacy
   pages) so the canonical Footer renders correctly without pulling in the
   full recolor skin. Load only on pages still on styles.css that render
   <Footer/>. Keep in sync with the FOOTER block in recolor-overrides.css. */

/* The footer's own skin. Without this, legacy styles.css wins with its old
   .footer { background: rgba(133,187,250,.12) } and the canonical Footer
   renders with the retired blue band. Literal values mirror the recolor block
   (--surface-soft #fafbfc / --border rgba(20,23,28,.11)); this file loads
   after styles.css, so no !important is needed. */
.footer {
  background: #fafbfc;
  border-top: 1px solid rgba(20, 23, 28, 0.11);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr auto auto 1.3fr;
  grid-template-areas: "brand explore company news";
  gap: 48px;
  align-items: start;
}
.footer__brand        { grid-area: brand; }
.footer__col--explore { grid-area: explore; }
.footer__col--company { grid-area: company; }
.footer__news         { grid-area: news; display: flex; flex-direction: column; gap: 14px; }

.footer__brand-logo { display: inline-block; }
.footer__brand-logo img { width: 95px; height: auto; display: block; }
.footer__tagline {
  margin: 16px 0 20px;
  font-size: 14px;
  color: #5f636b;
  line-height: 1.5;
  max-width: 260px;
}
.footer__socials { display: flex; gap: 10px; }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(20, 23, 28, 0.12); color: #14171c;
  transition: background .15s, border-color .15s;
}
.footer__social:hover { background: rgba(20, 23, 28, 0.05); border-color: rgba(20, 23, 28, 0.22); }
.footer__social svg { width: 18px; height: 18px; display: block; }

/* Every footer link stays on ONE line. */
.footer__links a, .footer__legal a { white-space: nowrap; }

/* Newsletter fills its column (override the base fixed 320px width). */
.footer__news .footer__form,
.footer__news .footer__input,
.footer__news .footer__subscribe { width: 100%; }

.footer__divider { height: 1px; background: rgba(20, 23, 28, 0.10); margin-top: 40px; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 20px 0 24px;
}
.footer__bottom .footer__copyright { text-align: left; padding: 0; margin: 0; }
.footer__legal { display: flex; gap: 32px; }
.footer__legal a { font-size: 13px; color: #5f636b; transition: color .15s; }
.footer__legal a:hover { color: #14171c; }

/* Tablet: Explore | Company on top, brand | newsletter below. */
@media (max-width: 949px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "explore company"
      "brand   news";
    gap: 40px 48px;
  }
}

/* Mobile: stack (Explore, Company, newsletter, brand). */
@media (max-width: 743px) {
  .footer__top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "explore"
      "company"
      "news"
      "brand";
    gap: 32px;
  }
  .footer__bottom { padding: 16px 0 20px; }
}