/*
 * Masuria Esport - site footer (footer.css)
 * Design (1440px): #1a1a1a block, 1px top hairline, 96px padding. Four 252px columns with 80px gaps (x = 0 / 332 / 664 / 996 in the 1248px content):
 * brand + description + 4 social squares | heading + menu | heading + menu | right-aligned credits + copyright.
 * Requires tokens.css and base.css (.msr-container, .msr-icon come from base.css / components.css).
 *
 * Everything the design does not show is marked "ADDED: not in design": hover / focus states, the 2- and 1-column layouts,
 * bigger tap targets on touch layouts.
 */

/* ==========================================================================
   Shell + grid
   ========================================================================== */

.msr-footer {
  border-top: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
  padding-block: var(--msr-section-py-sm-fluid); /* 96px at >= 1440px */
}

.msr-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(var(--msr-space-32), 5.5556vw, var(--msr-space-80)); /* 80px at 1440px; ADDED: not in design - narrower below */
}

/* ==========================================================================
   Column 1: brand
   ========================================================================== */

.msr-footer__col--brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-space-32); /* design: 31.1px between the three blocks; same column height (231px) */
}

.msr-footer__brand {
  display: flex;
  align-items: flex-end;
  gap: var(--msr-space-8);
}

/* The default mark is 37.5 x 30 (its own SVG size); a custom logo is scaled down to fit a 48px box. */
.msr-footer__mark {
  display: flex;
  align-items: center;
  min-height: 36px; /* 30px mark + 2.75px + 3.25px */
}

.msr-footer__logo {
  display: block;
  width: auto;
  max-width: 48px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}

.msr-footer__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.msr-footer__tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.msr-footer__tagline-primary {
  color: var(--msr-white);
  font-family: var(--msr-font-brand);
  font-size: var(--msr-fs-16);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-wider);
  white-space: nowrap;
}

.msr-footer__tagline-secondary {
  color: var(--msr-white);
  font-family: var(--msr-font-brand);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-widest);
  white-space: nowrap;
}

.msr-footer__description {
  color: var(--msr-white-30);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-relaxed); /* 22.75px */
}

.msr-footer__socials {
  display: flex;
  gap: var(--msr-space-16);
}

.msr-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--msr-border);
  transition: border-color var(--msr-duration) var(--msr-ease); /* ADDED: not in design */
}

/* All four icons are 16px tall; their widths follow the SVGs (16, 10, 14, 16). The files bake in the white fill. */
.msr-footer__social-icon {
  width: auto;
  height: 16px;
}

/* ADDED: not in design - hover: the hairline turns gold */
@media (hover: hover) {
  .msr-footer__social:hover {
    border-color: var(--msr-border-gold);
  }
}

/* ==========================================================================
   Columns 2 + 3: heading + menu
   ========================================================================== */

.msr-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-space-32);
}

.msr-footer__heading {
  color: var(--msr-gold);
  font-family: var(--msr-font-heading);
  font-size: var(--msr-fs-16);
  font-style: italic;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-24);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

.msr-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-16);
}

.msr-footer__menu a {
  display: block;
  color: var(--msr-white-40);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-20);
  transition: color var(--msr-duration-fast) var(--msr-ease); /* ADDED: not in design */
}

/* ADDED: not in design - hover: the link brightens to full white */
@media (hover: hover) {
  .msr-footer__menu a:hover {
    color: var(--msr-white);
  }
}

/* ==========================================================================
   Column 4: credits + copyright
   The 130px credit block hugs its widest line and sits at the column's right edge.
   ADDED: not in design - the ClanArea logo is centred under "STWORZONE Z" (the Figma
   reference has the label flush right and the logo/name flush left instead), on the
   user's explicit request.
   ========================================================================== */

.msr-footer__col--credits {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.msr-footer__credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-space-16);
  width: max-content;
  min-width: 130.12px; /* design: the block is 130.12px wide, whatever its text needs; a longer developer name makes it wider */
  max-width: 100%;
}

.msr-footer__credit-label {
  align-self: stretch;
  color: var(--msr-white-20);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-credit);
  text-align: center; /* ADDED: not in design - was right; centred to sit above the logo, see note above */
  text-transform: uppercase;
}

.msr-footer__developer {
  display: flex;
  align-self: center; /* ADDED: not in design - was flex-start (inherited); centres the logo under the label */
  align-items: center;
  gap: var(--msr-space-8);
  color: var(--msr-white);
  font-size: var(--msr-fs-18);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-28);
  letter-spacing: var(--msr-ls-tighter);
  white-space: nowrap;
  transition: color var(--msr-duration-fast) var(--msr-ease); /* ADDED: not in design */
}

/* ADDED: not in design - the ClanArea logo (square mark + wordmark, transparent) replacing the plain-text
   developer name; 96px (2x the site's own logo mark box) on the user's explicit request */
.msr-footer__developer-logo {
  display: block;
  width: auto;
  height: 96px;
  opacity: 0.4; /* ADDED: not in design - dimmed until hover, see below; undone on touch devices, see (hover: none) */
  transition: opacity var(--msr-duration-fast) var(--msr-ease), transform var(--msr-duration-fast) var(--msr-ease); /* ADDED: not in design - hover fade + scale below */
}

/* ADDED: not in design - hover: the developer name turns gold, like the dot; the logo fades in and scales up slightly */
@media (hover: hover) {
  .msr-footer__developer:hover {
    color: var(--msr-gold);
  }

  .msr-footer__developer:hover .msr-footer__developer-logo {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* ADDED: not in design - touch devices can't hover to reveal the dimmed logo, so skip the dimming */
@media (hover: none) {
  .msr-footer__developer-logo {
    opacity: 1;
  }
}

.msr-footer__copyright {
  align-self: stretch;
  margin-top: var(--msr-space-80);
  padding-right: 28.19px; /* design: 223.81px text box in the 252px column; wraps after "RIGHTS" */
  color: var(--msr-white-10);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider);
}

/* ==========================================================================
   Tablet (<= 1024px): 2 columns - ADDED: not in design
   ========================================================================== */

@media (max-width: 1024px) {
  .msr-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--msr-space-48);
    column-gap: var(--msr-space-48);
  }

  /* the right-hand credits block left-aligns (it is no longer at the far right of the page) */
  .msr-footer__col--credits {
    align-items: flex-start;
  }

  .msr-footer__credit-label {
    text-align: left;
  }

  .msr-footer__copyright {
    margin-top: var(--msr-space-32);
    padding-right: 0;
  }

  /* tap targets >= 44px */
  .msr-footer__menu {
    gap: 0;
    margin-block: calc(-1 * var(--msr-space-12)); /* the links' own padding replaces the 32px heading gap and the list end */
  }

  .msr-footer__menu a {
    padding-block: var(--msr-space-12);
  }

  .msr-footer__social {
    width: 44px;
    height: 44px;
  }

  .msr-footer__developer {
    min-height: 44px;
  }

  /* QA: the brand link is 36px high; 44px hit area, the negative margin keeps the layout unchanged */
  .msr-footer__brand {
    min-height: 44px;
    margin-block: -4px;
  }
}

/* ==========================================================================
   Mobile (<= 640px): 1 column - ADDED: not in design
   ========================================================================== */

@media (max-width: 640px) {
  .msr-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-40);
  }

  /* ADDED: not in design - the credits block (ClanArea logo) sits 20px below the nav above it, tighter than the 40px row-gap used elsewhere */
  .msr-footer__col--credits {
    margin-top: calc(var(--msr-space-20) - var(--msr-space-40));
  }
}