/* =====================================================================
   OSE · Footer (night surface)
   ---------------------------------------------------------------------
   Cream OSE lockup, address (Google Maps link), opening date, three link
   columns — Khoá học / Trung tâm / Liên hệ — with 44px link rows and the
   copyright line. The lockup already carries the 8-planet signature, so
   the footer adds no second planet row (brand: at most once per screen).
   .footer__bottom is a wrapping flex row if an accent is ever added there.

   Markup
     <footer class="footer" data-surface="night">
       <div class="footer__inner">
         <div class="footer__main">
           <div class="footer__brand">
             <a class="footer__logo-link" href="/"><img class="footer__logo"
                src="/brand/logo/OSE_lockup_cream.svg" alt="OSE – Outer Space Education"
                width="994" height="672"></a>
             <address class="footer__address"><a class="footer__link" href="https://www.google.com/maps/search/?api=1&amp;query=…">465A Chợ Hàng, Lê Chân, Hải Phòng</a></address>
             <p class="footer__meta">Khai giảng 03/11/2026</p>
           </div>
           <nav class="footer__nav" aria-label="Chân trang">
             <div class="footer__col">
               <h2 class="footer__heading">Khoá học</h2>
               <ul class="footer__links" role="list">
                 <li><a class="footer__link" href="/khoa-hoc/#tieng-anh-tre-em">Tiếng Anh trẻ em</a></li> …
               </ul>
             </div> …
           </nav>
         </div>
         <div class="footer__bottom">
           <p class="footer__fine">© 2026 OSE – Outer Space Education</p>
         </div>
       </div>
     </footer>

   Type     column headings are mono labels in capitals (the eyebrow role,
            like section labels); links and address in the body family.
   Layout   stacked on phones · 3 link columns from 48em · brand column +
            3 link columns in one row from 64em.
   States   link :hover (mint underline) :focus-visible :active
            [aria-current="page"] (mint underline stays)
   JS       none.
   ===================================================================== */

@layer components {
  .footer {
    padding-block: var(--footer-padding-block);
    background-color: var(--footer-bg);
    color: var(--footer-text);
  }

  .footer__inner {
    display: grid;
    gap: var(--footer-gap);
    inline-size: min(var(--footer-max-width), 100% - var(--footer-padding-inline) - var(--footer-padding-inline));
    margin-inline: auto;
  }

  .footer__main {
    display: grid;
    gap: var(--footer-gap) var(--footer-column-gap);
  }

  /* ---- Brand column ------------------------------------------------- */
  .footer__brand {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--footer-brand-gap);
  }

  .footer__logo-link {
    display: inline-block;
    margin-block-end: var(--footer-brand-gap);
    border-radius: var(--footer-link-radius);
  }

  .footer__logo-link:focus-visible {
    box-shadow: var(--footer-focus-ring);
  }

  .footer__logo {
    inline-size: var(--footer-logo-width);
    block-size: auto;
  }

  .footer__address {
    font-style: normal;
  }

  .footer__meta {
    color: var(--footer-text-muted);
  }

  /* ---- Link columns --------------------------------------------------- */
  .footer__nav {
    display: grid;
    gap: var(--footer-gap) var(--footer-column-gap);
  }

  .footer__col {
    min-inline-size: 0;
  }

  .footer__heading {
    margin-block-end: var(--footer-heading-gap);
    color: var(--footer-heading-color);
    font: var(--footer-heading-font);
    letter-spacing: var(--footer-heading-tracking);
    text-transform: var(--footer-heading-case);
  }

  .footer__links {
    padding: 0;
    list-style: none;
  }

  .footer__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--footer-link-min-height);
    border-radius: var(--footer-link-radius);
    color: var(--footer-link);
    text-decoration-line: underline;
    text-decoration-color: var(--footer-link-underline);
    text-decoration-thickness: var(--footer-link-underline-thickness);
    text-underline-offset: var(--footer-link-underline-offset);
    transition:
      color var(--footer-duration) var(--footer-ease),
      text-decoration-color var(--footer-duration) var(--footer-ease);
  }

  @media (hover: hover) {
    .footer__link:hover {
      color: var(--footer-link-hover);
      text-decoration-color: var(--footer-link-underline-hover);
    }
  }

  .footer__link:focus-visible {
    box-shadow: var(--footer-focus-ring);
  }

  .footer__link:active {
    color: var(--footer-link-active);
  }

  .footer__link[aria-current="page"] {
    text-decoration-color: var(--footer-link-underline-hover);
  }

  /* ---- Bottom line ---------------------------------------------------- */
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--footer-bottom-gap);
    padding-block-start: var(--footer-bottom-gap);
    border-block-start: var(--footer-border-width) solid var(--footer-border);
  }

  .footer__fine {
    color: var(--footer-text-muted);
    font-size: var(--footer-fine-font-size);
  }

  /* ---- Responsive ------------------------------------------------------ */
  @media (min-width: 48em) {
    .footer__nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64em) {
    .footer__main {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .footer__nav {
      grid-column: span 3;
    }
  }
}