/*
 * .c-footer: the designed close of the page: the claim returns large, then plain link columns.
 * Deep green field. The logo is not recolored: it sits on a white plate if it appears here.
 *
 *   <footer class="c-footer" data-surface="dark">
 *     <div class="c-container">
 *       <p class="c-footer__claim">Medallo.pro conecta lo que Medellín ya tiene.</p>
 *       <div class="c-footer__cols">
 *         <nav class="c-footer__col" aria-labelledby="f-explora"><h2 class="c-footer__title" id="f-explora">Explora</h2>
 *           <ul><li><a class="c-footer__link" href="/vitrina/">Vitrina</a></li>...</ul></nav>
 *         ...
 *       </div>
 *       <p class="c-footer__legal">Medallo.pro es una plataforma de ... </p>
 *     </div>
 *   </footer>
 */
.c-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--md-space-8) var(--md-space-6);
  background: var(--md-color-primary);
  color: var(--md-color-on-primary);
}

.c-footer .c-container {
  position: relative;
  z-index: 1;
}

.c-footer__claim {
  max-inline-size: 22ch;
  font-family: var(--md-font-display);
  /* Phones: 8vw keeps the claim on two lines from 360 px (measured: 360 to 430 px wide, two lines);
     the earlier 36 px floor wrapped it to three at 390 px. */
  font-size: clamp(var(--md-font-size-xl), 8vw, var(--md-font-size-2xl));
  font-weight: var(--md-weight-black);
  line-height: var(--md-leading-tight);
  letter-spacing: var(--md-tracking-tight);
  text-wrap: balance;
}

@media (min-width: 48em) {
  .c-footer__claim {
    max-inline-size: 18ch;
    font-size: clamp(var(--md-font-size-2xl), 1rem + 6vw, 4.5rem);
  }
}

.c-footer__cols {
  display: grid;
  gap: var(--md-space-6) var(--md-space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: var(--md-space-7) var(--md-space-6);
}

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

.c-footer__title {
  margin-block-end: var(--md-space-2);
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-base);
  font-weight: var(--md-weight-bold);
  letter-spacing: 0;
  line-height: var(--md-leading-snug);
  color: var(--md-color-action);
}

.c-footer__link {
  display: flex;
  align-items: center;
  min-block-size: var(--md-target);
  color: var(--md-color-on-primary);
  text-decoration: none;
}

@media (hover: hover) {
  .c-footer__link:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.25em;
  }
}

.c-footer__legal {
  max-inline-size: var(--md-measure);
  font-size: var(--md-font-size-base);
  color: var(--md-color-on-primary);
}

.c-footer__logo {
  display: inline-flex;
  padding: var(--md-space-2) var(--md-space-4);
  border-radius: var(--md-radius-full);
  background: var(--md-color-surface);
}