/* ===========================================================================
 * STRIP FOOTER
 *
 * The last .accordion-strip is the footer, carrying the copyright line +
 * social links when collapsed and the contact form when expanded. Its
 * header has a different internal structure than the normal image+text
 * strips (no image, two stacked text blocks: .footer-collapsed up top,
 * .footer-meta below), so it gets its own rules here.
 *
 * Does NOT own:
 *   - the contact form's input/button styling (css/contact-form.css)
 *   - form focus indicators (css/a11y.css)
 * ===========================================================================
 */

.strip-footer .strip-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.strip-footer .footer-collapsed {
  padding: 4rem 0 4rem;
}

.strip-footer .footer-meta {
  padding-top: 2rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.footer-links span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(240, 240, 240, 0.6);
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.4);
  cursor: pointer;
}

.footer-links span:hover {
  color: rgba(240, 240, 240, 0.7);
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(240, 240, 240, 0.45);
  letter-spacing: 0.05em;
}

/* The contact form lives inside the footer's expandable content. Pad
   differently from other strips' content bodies — the form wants a bit
   more vertical breathing room. */
.strip-footer .strip-content-inner .content-body {
  padding: 2rem var(--page-pad) 3rem;
}

/* --- Tablet (768+) --- */
@media (min-width: 768px) {
  .strip-footer .strip-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .strip-footer .footer-collapsed {
    padding-bottom: 2rem;
  }
  .strip-footer .footer-meta {
    padding-top: 2rem;
    text-align: right;
  }
  .footer-links {
    justify-content: flex-end;
  }
}