/* ==========================================================================
   Footer — logo, copyright/privacy, legal small print, sparkle decoration
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background-color: var(--c-black);
  padding-top: clamp(54px, calc(54px + 3 * (100vw - 390px) / 1290), 57px);
  padding-bottom: clamp(29px, calc(29px + 28 * (100vw - 390px) / 1290), 57px);
  padding-inline: clamp(20px, calc(20px + 220 * (100vw - 390px) / 1290), 240px);
}

/* Sparkle image fill decoration, desktop only. Placement decoded from the
   Figma imageTransform matrix: rotated 90° cw (pre-rotated asset), window
   x 1512.7->1927.8 (bleeds past right edge), y -3.5->390. */
.footer::after {
  content: '';
  position: absolute;
  top: -3.5px;
  right: -247.8px;
  width: 415.1px;
  height: 393.5px;
  background: url('/wp-content/themes/ogle/assets/img/footer-sparkle-rot.webp') center / 100% 100% no-repeat;
  pointer-events: none;
  display: none;
}

.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-areas: 'logo' 'legal' 'meta';
  row-gap: 43px;
}

.footer__logo-link {
  grid-area: logo;
  display: block;
  width: 180px;
}

.footer__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #b1b1b1;
}

.footer__privacy {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease-out;
}
.footer__privacy:hover { color: var(--c-white); }

.footer__legal {
  grid-area: legal;
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.66);
}
.footer small { font-size: inherit; }
.footer__legal p + p { margin-top: 21px; }

@media (min-width: 900px) {
  .footer { background-color: #080909; }
  .footer::after { display: block; }
  .footer__inner {
    grid-template-areas:
      'logo meta'
      'legal legal';
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: end;
  }
  /* The legal row spans both grid columns, so the columns absorb all 1200px
     and space-between has no free space — right-align the meta content
     inside its column instead (design: privacy right edge flush at 1440). */
  .footer__meta { flex-direction: row; align-items: center; justify-content: flex-end; }
}