/* ==========================================================================
   Flexopack — Site Footer (editorial)
   --------------------------------------------------------------------------
   Asymmetric brand block + nav/contact stack, certifications + legal bar.
   ========================================================================== */

@layer components {

  .site-footer {
    container-type: inline-size;
    container-name: site-footer;
    padding-block: var(--space-4xl) var(--space-2xl);
    background: var(--bg-body);
    border-top: 1px solid var(--border-primary);
  }

  /* ---------- Top: brand + right block ---------- */
  .site-footer__top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-4xl);
    padding-bottom: var(--space-3xl);
  }

  /* ---------- Brand ---------- */
  .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .site-footer__logo-img {
    height: 7rem;
    width: auto;
    display: block;
  }

  .site-footer__accent {
    display: block;
    width: 4rem;
    height: 3px;
    background: var(--primary);
    border-radius: var(--radius-full);
  }

  .site-footer__desc {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    opacity: 0.7;
    max-width: 44ch;
  }

  /* ---------- Right block (nav + contact) ---------- */
  .site-footer__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .site-footer__label {
    display: block;
    margin-bottom: var(--space-m);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-title);
  }

  /* ---------- Nav ---------- */
  .site-footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-footer__nav-link {
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.7;
    transition: color var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }

  .site-footer__nav-link:hover {
    color: var(--primary-d-1);
    opacity: 1;
  }

  /* ---------- Contact ---------- */
  .site-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .site-footer__contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.7;
    transition: color var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }

  a.site-footer__contact-item:hover {
    color: var(--primary-d-1);
    opacity: 1;
  }

  .site-footer__contact-icon {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary-d-1);
    flex-shrink: 0;
  }

  /* ---------- Bottom bar ---------- */
  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding-top: var(--space-l);
    border-top: 1px solid var(--border-primary);
  }

  .site-footer__certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-l);
  }

  .site-footer__cert {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    opacity: 0.6;
  }

  a.site-footer__cert {
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  a.site-footer__cert:hover,
  a.site-footer__cert:focus-visible {
    opacity: 1;
    color: var(--success);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .site-footer__cert-icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--success);
  }

  .site-footer__legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .site-footer__copy {
    font-size: var(--text-xs);
    color: var(--text-body);
    opacity: 0.5;
  }

  .site-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-m);
  }

  .site-footer__legal-link {
    font-size: var(--text-xs);
    color: var(--text-body);
    opacity: 0.5;
    transition: color var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }

  .site-footer__legal-link:hover {
    color: var(--primary-d-1);
    opacity: 1;
  }

  /* ---------- Responsive ---------- */
  @container site-footer (max-width: 968px) {
    .site-footer__top {
      gap: var(--space-2xl);
    }
  }

  @container site-footer (max-width: 768px) {
    .site-footer__top {
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
    }

    .site-footer__logo-img {
      height: 5.6rem;
    }
  }

  @container site-footer (max-width: 480px) {
    .site-footer__right {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }

    .site-footer__certs {
      gap: var(--space-s) var(--space-m);
    }

    .site-footer__legal-row {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-s);
    }

    .site-footer__legal {
      flex-wrap: wrap;
      gap: var(--space-s) var(--space-m);
    }
  }
}