/* =================================================================================================
   LFD footer

   Ink ground, paper type, hairline rules. Tokens only - it has to read as the same site as the
   header, and the only way to guarantee that is to use the same values the header uses rather
   than a second set that looks close today.

   THE GRID COLLAPSES BY CONTENT, NOT BY COUNT. Four columns at desktop, two at 834, one at 390 -
   but `auto-fit` with a minimum, so a footer with only two of its four regions filled does not
   leave two empty tracks. A region that has nothing to say is not rendered at all, and the grid
   has to cope with that rather than reserve space for it.
   ================================================================================================= */

.lfd-footer {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  padding-block: var(--lfd-space-section-lg) var(--lfd-space-xl);
  background: var(--lfd-color-ink-deep);
  color: var(--lfd-color-paper);
  box-sizing: border-box;
}

.lfd-footer * {
  box-sizing: border-box;
}

.lfd-footer__inner {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
}

/* --- the columns ------------------------------------------------------------------------------ */

.lfd-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: var(--lfd-space-gap-lg);
  padding-block-end: var(--lfd-space-2xl);
}

/* The brand column is one track like the others, capped at 26rem so the description keeps a
   readable measure when the grid has fewer columns and its track is wider; at 834 and below it
   spans the whole row. It is not given a wider track than the other columns. */
.lfd-footer__brand {
  grid-column: span 1;
  max-inline-size: 26rem;
}

.lfd-footer__wordmark {
  margin-block-end: var(--lfd-space-md);
}

/* The text wordmark, recoloured for the ink ground. A custom logo IMAGE is only sized down, not
   recoloured or inverted: a dark logo made for the paper header shows dark on this ground. What
   the footer should show when a custom logo is set is an open owner decision. */
.lfd-footer__wordmark .lfd-wordmark {
  color: var(--lfd-color-paper);
}

.lfd-footer__wordmark .lfd-wordmark__line {
  font-size: var(--lfd-size-label-lg, 0.875rem);
}

.lfd-footer__wordmark img {
  display: block;
  max-inline-size: 11rem;
  block-size: auto;
}

.lfd-footer__description {
  margin: 0 0 var(--lfd-space-lg);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body);
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

/* --- headings and lists ------------------------------------------------------------------------ */

.lfd-footer__heading {
  margin: 0 0 var(--lfd-space-md);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label-xl);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

.lfd-footer__list,
.lfd-footer__legal-list,
.lfd-footer__social-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-footer__item {
  margin-block-end: var(--lfd-space-xs);
}

.lfd-footer__link {
  display: inline-block;
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-medium);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lfd-color-paper);
  border-block-end: var(--lfd-border-hairline) solid transparent;
  /* 24px minimum touch target: a 13px uppercase link is 16px tall, and a footer is where a
     thumb has the least room. WCAG 2.2 SC 2.5.8 asks for 24x24. */
  min-block-size: 1.5rem;
  line-height: 1.5rem;
}

/* The hover is the underline, and the colour stays paper. Manon's `a:hover, p a:hover`
   (#666666, specificity 0,1,2) outranked .lfd-footer__link (0,1,0) and dimmed every footer link
   to 3.55:1 on the ink ground - 1.03:1 where Manon's modules.css `a:hover { color: #000 }` applies
   instead. Measured in Chromium: rgb(102, 102, 102) on hover before this rule. */
.lfd-footer .lfd-footer__link:hover,
.lfd-footer .lfd-footer__link:focus-visible {
  color: var(--lfd-color-paper);
  border-block-end-color: currentcolor;
}

/* --- contact ----------------------------------------------------------------------------------- */

.lfd-footer__contact-line {
  margin: 0 0 var(--lfd-space-xs);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body);
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

/* --- social ------------------------------------------------------------------------------------ */

.lfd-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-md);
}

.lfd-footer__social .lfd-footer__item {
  margin-block-end: 0;
}

/* --- the bottom line ---------------------------------------------------------------------------- */

.lfd-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-md) var(--lfd-space-lg);
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--lfd-space-lg);
  border-block-start: var(--lfd-border-on-dark);
}

.lfd-footer__copyright {
  margin: 0;
  font-size: var(--lfd-size-label-sm, 0.75rem);
  letter-spacing: var(--lfd-tracking-label-sm);
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

.lfd-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-md);
}

.lfd-footer__legal .lfd-footer__item {
  margin-block-end: 0;
}

.lfd-footer__legal .lfd-footer__link {
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

.lfd-footer__legal .lfd-footer__link:hover,
.lfd-footer__legal .lfd-footer__link:focus-visible {
  color: var(--lfd-color-paper);
}

/* --- breakpoints --------------------------------------------------------------------------------- */

@media (max-width: 1180px) {

  .lfd-footer__columns {
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  }
}

@media (max-width: 834px) {

  .lfd-footer {
    padding-block-start: var(--lfd-space-2xl);
  }

  .lfd-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lfd-space-xl) var(--lfd-space-lg);
  }

  .lfd-footer__brand {
    grid-column: 1 / -1;
    max-inline-size: none;
  }
}

/* 520, the design-system step the Gallery and Designers grids use, not an invented 480: the
   columns go to one at the same width across surfaces. Unchanged at every canonical width. */
@media (max-width: 520px) {

  .lfd-footer__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-footer__base {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lfd-footer__link {
    transition: none;
  }
}