/* Footer component */

/* Index grid */

.footer-index {
  display: grid;
  /* Studio track min stepped two tokens down (--space-13 260px → --space-11):
     below the 1.4fr share, so on desktop the proportional width now governs. */
  grid-template-columns:
    minmax(var(--space-11), 1.4fr)
    repeat(4, minmax(0, 1fr));

  gap: clamp(var(--space-5), 4vw, var(--space-8));

  margin-top: clamp(var(--space-8), 8vw, var(--space-9));
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* Match --space-3. The ≤820 / mobile blocks keep the same. */
  gap: var(--space-3);
}

.footer-column h3 {
  margin:
    0
    0
    var(--space-5);

  font-size: var(--text-base);
  line-height: var(--leading-tight);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);

  text-transform: none;
}

.footer-column a {
  position: relative;

  width: fit-content;

  color: inherit;
  text-decoration: none;

  font-size: var(--text-base-plus);
  line-height: var(--leading-base);

  opacity: 1;
}

.footer-column a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.05em;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform var(--transition-base);
}

.footer-column a:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .footer-column a:hover::after {
    transform: scaleX(1);
  }
}

.footer-column a:focus-visible {
  outline: none;
}

/* Engagement marks — the same three symbols the engagements page carries on its
   eyebrows (.engagement-eyebrow-icon), scaled to the label. Inverse at 50% so
   they sit quieter than the labels on the blue band. */
.footer-column a:has(.footer-link-icon) {
  --footer-link-icon-size: 1em;
  --footer-link-icon-optical: 1;
  --footer-link-icon-optical-max: 1.25;

  display: inline-flex;
  align-items: center;
}

/* Diamond reads smaller than the square in the same box; ring a shade less. */
.footer-column a:has(.footer-link-icon svg[viewBox="0 0 57 54"]) {
  --footer-link-icon-optical: var(--footer-link-icon-optical-max);
}

.footer-column a:has(.footer-link-icon svg[viewBox="0 0 48 48"]) {
  --footer-link-icon-optical: 1.08;
}

.footer-link-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  /* Shared slot = largest mark, so the three centres stack on one axis. */
  width: calc(var(--footer-link-icon-size) * var(--footer-link-icon-optical-max));
  height: calc(var(--footer-link-icon-size) * var(--footer-link-icon-optical-max));

  margin-right: var(--space-2);

  color: color-mix(in srgb, currentColor 50%, transparent);
}

/* Keep engagement marks on-brand when the footer itself is a light surface. */
.section--footer[data-theme="surface"] .footer-link-icon {
  color: var(--accent-primary);
}

.footer-link-icon svg {
  display: block;

  width: calc(var(--footer-link-icon-size) * var(--footer-link-icon-optical));
  height: calc(var(--footer-link-icon-size) * var(--footer-link-icon-optical));
}

/* Underline sweeps the label only — the mark is not part of the word. */
.footer-column a:has(.footer-link-icon)::after {
  left: calc(
    var(--footer-link-icon-size) * var(--footer-link-icon-optical-max) +
      var(--space-2)
  );
  width: calc(
    100% - var(--footer-link-icon-size) * var(--footer-link-icon-optical-max) -
      var(--space-2)
  );
}

/* Focus */

.footer-logo:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.footer-logo:focus-visible::after {
  transform: scaleX(0);
}

/* Studio column */

.footer-logo {
  display: inline-flex;

  margin-bottom: var(--space-4);
  color: currentColor;
}

.footer-logo .logo-mark {
  display: block;
  width: var(--space-5);
  height: var(--space-5);
  overflow: visible;
  color: currentColor;
}

.footer-logo .logo-part {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-base);
}

.footer-logo:focus-visible .logo-part-1 {
  transform: translate(2px, 2px);
}

.footer-logo:focus-visible .logo-part-2 {
  transform: translate(-2px, 2px);
}

.footer-logo:focus-visible .logo-part-3 {
  transform: translate(-2px, -2px);
}

.footer-logo:focus-visible .logo-part-4 {
  transform: translate(2px, -2px);
}

@media (hover: hover) and (pointer: fine) {
  .footer-logo:hover .logo-part-1 {
    transform: translate(2px, 2px);
  }

  .footer-logo:hover .logo-part-2 {
    transform: translate(-2px, 2px);
  }

  .footer-logo:hover .logo-part-3 {
    transform: translate(-2px, -2px);
  }

  .footer-logo:hover .logo-part-4 {
    transform: translate(2px, -2px);
  }
}

.footer-studio-note {
  max-width: 24ch;

  margin: 0;

  font-size: var(--text-base);
  line-height: var(--leading-base);

  text-wrap: pretty;
}

/* Legal bar — copyright left, social flush right. */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);

  width: 100%;

  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
}

.site-footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  order: 1;
  margin-left: auto;
}

.footer-social {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: var(--space-9-0);
  height: var(--space-9-0);

  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);

  color: color-mix(in srgb, currentColor 50%, transparent);
  text-decoration: none;

  transition:
    color var(--transition-base),
    border-color var(--transition-base);
}

.footer-social svg {
  display: block;

  width: var(--space-4);
  height: var(--space-4);
}

.footer-social:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
  color: currentColor;
  border-color: color-mix(in srgb, currentColor 50%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social:hover {
    color: currentColor;
    border-color: color-mix(in srgb, currentColor 50%, transparent);
  }
}

.site-footer-meta {
  font-size: var(--text-sm);
  line-height: var(--leading-base);

  opacity: 0.7;
}

/* iPad Pro / larger tablet (981–1024) */

@media (min-width: 981px) and (max-width: 1024px) {

  .footer-index {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(var(--space-3), 4vw, var(--space-6));
  }

}

/* Tablet */

@media (max-width: 980px) {

  .footer-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Narrow tablet */

@media (min-width: 761px) and (max-width: 820px) {

  .footer-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7) var(--space-4);
  }

  .footer-column--studio {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-3);
  }

  .footer-logo {
    margin-bottom: var(--space-4);
  }

  .footer-studio-note {
    max-width: 24ch;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .footer-column:not(.footer-column--studio) {
    gap: var(--space-3);
  }

  .footer-column h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
  }

  .footer-column a {
    font-size: var(--text-base);
    line-height: 1.35;
  }

}

/* Mobile */

@media (max-width: 760px) {

  .footer-index {
    grid-template-columns: 1fr;

    gap: var(--space-5);

    margin-top: var(--space-8);
  }

  .footer-column {
    gap: var(--space-3);
  }

  .footer-column--studio {
    display: flex;

    margin-bottom: var(--space-3);
  }

  .footer-column:not(.footer-column--studio) {
    display: grid;
    grid-template-columns: auto minmax(var(--space-5), 1.5fr) minmax(0, 1.25fr);

    column-gap: var(--space-4);
    row-gap: var(--space-3);

    align-items: center;
  }

  .footer-column:not(.footer-column--studio) h3 {
    margin: 0;

    font-size: var(--text-base);

    grid-column: 1 / 3;
    grid-row: 1;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
  }

  .footer-column:not(.footer-column--studio) h3::after {
    content: "";
    display: block;
    height: 1px;
    background: currentColor;
    opacity: 0.32;
  }

  .footer-column:not(.footer-column--studio) a {
    grid-column: 3;

    font-size: var(--text-base);
    line-height: 1.35;
  }

  .footer-column:not(.footer-column--studio) a:first-of-type {
    grid-row: 1;
  }

  .footer-studio-note {
    max-width: 24ch;

    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .site-footer {
    margin-top: var(--space-7);

    flex-wrap: wrap;
    align-items: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  .footer-column a::after {
    transition-duration: 0.01ms !important;
  }

  .footer-social {
    transition: none;
  }

  .footer-logo .logo-part {
    transition: none;
  }

  .footer-logo:focus-visible .logo-part {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .footer-logo:hover .logo-part {
    transform: none;
  }
}