/* Footer — Bold Agency (Minimal), tmpl-bold-agency--footer--minimal--19
   Layout: split-50-50, max-w-7xl container, 2 columns, min-height auto.
   Mobile: stack. Tablet: stack. Visual: pattern background + frosted-glass
   overlay, shadow md, radius md, decorative diagonal-lines / blob-top-right /
   confetti. Typography: 3xl heading (600 / 0.01em), left aligned, 3xl
   subheading. Motion: fade-up 500ms, 100ms stagger, no scroll effect;
   card hover = lift-shadow, link hover = fill-sweep. */

.footer {
  --footer-container: 80rem;                  /* max-w-7xl */
  --footer-heading: var(--text-3xl);          /* 3xl */
  --footer-subheading: var(--text-3xl);       /* 3xl */
  --footer-duration: 500ms;                   /* fade-up duration */
  --footer-stagger: 100ms;                    /* between elements */
  --footer-radius: var(--radius-md);          /* md */
  --footer-shadow: var(--shadow-md);          /* md */
  --footer-delay: 0ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;                           /* decoration never causes side-scroll */
  min-height: auto;
  width: 100%;
  padding-block: var(--space-section) var(--space-10);
  color: var(--color-text-on-dark);
  /* pattern background: diagonal lines over the dark brand band */
  background-color: var(--color-primary-900);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(250, 250, 249, 0.055) 0 2px,
    rgba(250, 250, 249, 0) 2px 12px
  );
}

/* decorative: blob-top-right */
.footer__blob {
  position: absolute;
  top: -22%;
  right: -14%;
  z-index: -1;
  width: min(34rem, 72%);
  aspect-ratio: 1;
  color: var(--color-primary-600);
  opacity: 0.5;
  pointer-events: none;
}

/* decorative: confetti — small scattered brand-coloured chips */
.footer__confetti {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, var(--color-accent-500) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 65%, var(--color-primary-300) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 85%, var(--color-accent-300) 0 2px, transparent 3px);
  background-size: 9rem 11rem, 13rem 8rem, 7rem 14rem;
  background-position: 1rem 2rem, 4rem 6rem, 8rem 1rem;
  background-repeat: repeat;
}

.footer__container {
  position: relative;
  width: 100%;
  max-width: var(--footer-container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* frosted-glass overlay: the whole footer body sits on a blurred panel. */
.footer__panel {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: stack */
  gap: var(--space-10);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border: 1px solid rgba(250, 250, 249, 0.16);
  border-radius: var(--footer-radius);
  background-color: rgba(23, 44, 34, 0.55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--footer-shadow);
}

/* --- Column 1 of the 50/50 split: logo + statement --- */
.footer__brand {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  text-align: left;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-on-dark);
}

.footer__logo-image {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: var(--footer-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--leading-tight);
  color: var(--color-text-on-dark);
  text-align: left;
}

.footer__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}

.footer__subheading {
  font-size: var(--footer-subheading);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  line-height: var(--leading-snug);
  color: var(--color-neutral-200);
  text-align: left;
  max-width: 24ch;
}

/* --- Column 2 of the 50/50 split: nav columns + social links --- */
.footer__directory {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.footer__columns {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: stack */
  gap: var(--space-6);
}

/* card hover: lift-shadow */
.footer__column {
  padding: var(--space-4);
  border-radius: var(--footer-radius);
  background-color: rgba(250, 250, 249, 0.04);
  box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.08);
  transition:
    transform var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}

.footer__column:hover,
.footer__column:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(250, 250, 249, 0.18);
}

.footer__column-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--color-primary-200);
  margin-bottom: var(--space-3);
}

.footer__links { list-style: none; display: grid; gap: var(--space-2); }

.footer__links-item { font-size: var(--text-sm); }

.footer__fact { color: var(--color-neutral-200); }

/* link hover: fill-sweep — the brand colour sweeps in from the left */
.footer__link {
  position: relative;
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-50);
  text-decoration: none;
  z-index: 0;
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-accent-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-out);
}

.footer__link:hover::before,
.footer__link:focus-visible::before { transform: scaleX(1); }

.footer__link:hover,
.footer__link:focus-visible { color: var(--color-neutral-50); }

/* Social / direct-contact links */
.footer__socials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(250, 250, 249, 0.28);
  color: var(--color-neutral-50);
  background-color: rgba(250, 250, 249, 0.04);
  transition:
    transform var(--duration-normal) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  transform: translateY(-4px);
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-lg);
}

.footer__social-icon { width: 1.25rem; height: 1.25rem; }

/* --- Copyright + licence credits (last in DOM order) --- */
.footer__baseline {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(250, 250, 249, 0.2);
  display: grid;
  gap: var(--space-2);
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-neutral-200);
  text-align: left;
}

.footer__credits {
  font-size: var(--text-xs);
  color: var(--color-neutral-300);
  text-align: left;
}

.footer__credits a { color: var(--color-neutral-100); }

/* Tablet: stack (the declared behaviour) — only the nav columns gain a second
   track so three short lists do not become three tall ones. */
@media (min-width: 48em) {
  .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: the declared 50/50 split. */
@media (min-width: 64em) {
  .footer__panel { grid-template-columns: 1fr 1fr; }
  .footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Entrance: fade-up, 500ms, 100ms stagger, in DOM order
   logo -> nav_columns -> social_links -> copyright.
   Without JS the static markup simply stays visible. */
.footer--animate .footer__brand,
.footer--animate .footer__column,
.footer--animate .footer__social,
.footer--animate .footer__baseline {
  opacity: 0;
}

.footer--animate.footer--shown .footer__brand,
.footer--animate.footer--shown .footer__column,
.footer--animate.footer--shown .footer__social,
.footer--animate.footer--shown .footer__baseline {
  animation: footer-fade-up var(--footer-duration) var(--ease-out) both;
  animation-delay: var(--footer-delay);
}

.footer--animate.footer--shown .footer__brand { --footer-delay: 0ms; }
.footer--animate.footer--shown .footer__baseline {
  --footer-delay: calc(var(--footer-stagger) * 6);
}

@keyframes footer-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer { --footer-duration: 0ms; --footer-stagger: 0ms; }
  .footer__column { transition: none; }
  .footer__column:hover,
  .footer__column:focus-within { transform: none; }
  .footer__social-link:hover,
  .footer__social-link:focus-visible { transform: none; }
  .footer__link::before { transition: none; }
  .footer--animate .footer__brand,
  .footer--animate .footer__column,
  .footer--animate .footer__social,
  .footer--animate .footer__baseline { opacity: 1; animation: none; }
}