/* ==========================================================================
   Light Zone Photography - footer
   --------------------------------------------------------------------------
   Four columns hung from a single hairline, so the logo, every heading and
   every list share one top edge. Nothing is nudged into place by hand.

   The brand column carries its own type scale (--footer-brand-size) and the
   logo is measured in `em` against it, so if that text size changes the logo
   changes with it and the column stays in proportion.

   Loaded by: every page
   ========================================================================== */

.footer {
  position: relative;
  z-index: 1;
  background: var(--ink-950);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
}

/* --- The four columns ---------------------------------------------------- */

.footer__top {
  display: grid;
  /* The brand column is wider; the three link columns are identical. */
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Every column is a grid with the same starting edge and the same rhythm,
   which is what keeps the four of them optically level. */
.footer__col {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  align-content: start;
  min-width: 0;
}

/* --- Brand column -------------------------------------------------------- */

.footer__col--brand {
  --footer-brand-size: clamp(0.94rem, 1.05vw, 1.02rem);
  --brand-gap: clamp(1.35rem, 2.4vw, 1.9rem);
  font-size: var(--footer-brand-size);
  gap: var(--brand-gap);
}

/* The icons sit 10% closer to the copy above them than the column's standard
   rhythm, which reads as one brand block rather than three stacked items. */
.footer__col--brand .social { margin-top: calc(var(--brand-gap) * -0.1); }

.brand--footer {
  display: block;
  /* No baseline offset, so the logo's top edge sits exactly where the
     neighbouring column headings begin. */
  line-height: 0;
}

/* Measured in `em`, so the logo tracks this column's text size.

   logo.svg carries transparent padding inside its own viewBox - measured at
   19.6% top, 30.2% bottom and 9.2% left. Without compensating, the mark sits
   visibly lower and further right than the headings beside it even though the
   boxes are perfectly aligned. These offsets pull the *ink* flush with the
   column edge. Replace logo.svg with a tightly cropped file and set all three
   to 0. */
.brand--footer .brand__logo {
  --art-top: 1.56em;      /* 19.6% of the 7.96em tall box */
  --art-left: 1.56em;     /*  9.2% of the 17em wide box   */
  --art-bottom: 2.4em;    /* 30.2% of the 7.96em tall box */

  width: min(100%, 17em);
  height: auto;
  max-width: none;
  margin: calc(var(--art-top) * -1) 0
          calc(var(--art-bottom) * -1) calc(var(--art-left) * -1);
}

.footer__blurb {
  margin: 0;
  max-width: 34ch;
  font-size: 1em;
  line-height: 1.75;
  color: var(--text-dim);
}

/* --- Headings and lists -------------------------------------------------- */

.footer__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  /* Matches the logo's optical top in the brand column. */
  line-height: 1.2;
}

.footer__list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__list li { min-width: 0; }

.footer__list a,
.footer__list address,
.footer__list span {
  display: inline-block;
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.55;
  color: var(--text-dim);
}

/* A quiet underline that draws itself on hover, matching the rest of the site */
.footer__list a {
  position: relative;
  transition: color 0.35s var(--ease-out);
}
.footer__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.footer__list a:hover,
.footer__list a:focus-visible { color: var(--text); }
.footer__list a:hover::after,
.footer__list a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The contact column reads as a block of details rather than a link list */
.footer__list--contact { gap: 1rem; }
.footer__list--contact address { color: var(--text-dim); }
.footer__hours {
  color: var(--accent) !important;
  letter-spacing: 0.02em;
}

/* --- Social icons -------------------------------------------------------- */
/* Icons only, in a single row that cannot wrap. Each link carries an
   aria-label, so dropping the visible text costs nothing for screen readers. */

.social {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social li { display: flex; }

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              background-color 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.social__link svg { width: 45%; height: 45%; display: block; }

.social__link:hover,
.social__link:focus-visible {
  color: var(--ink-950);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* --- The wordmark -------------------------------------------------------- */

.footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 15vw, 13rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  text-align: center;
  padding-block: clamp(0.5rem, 2vw, 1rem) 0;
  user-select: none;
  overflow: hidden;
}

/* --- Copyright ----------------------------------------------------------- */

.footer__bottom {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.footer__bottom p {
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* --- Responsive ---------------------------------------------------------- */

/* Three columns of links plus a wide brand column stops fitting well before
   the tablet breakpoint, so the brand takes the full width and the links
   share the row beneath it. */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col--brand {
    grid-column: 1 / -1;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--line-soft);
  }
  .footer__blurb { max-width: 52ch; }
}

@media (max-width: 680px) {
  .footer__top { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.75rem); }
  .footer__col--brand { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .footer__col:not(.footer__col--brand) {
    padding-top: clamp(1.5rem, 5vw, 2rem);
    border-top: 1px solid var(--line-soft);
  }
  .brand--footer .brand__logo { width: min(100%, 15em); }
}