/*
 * Masuria Esport - "Kontakt" section (assets/css/sections/contact.css)
 * Markup: template-parts/sections/contact.php. Requires tokens.css, base.css, components.css
 * (.msr-container, .msr-title-bar, .msr-section-title(--xxl), .msr-eyebrow, .msr-watermark(--solid), .msr-icon, .msr-btn).
 * Design (1440 px): page-dark ground with a 5% gold radial glow (reuses --msr-gradient-process-glow, see process.css),
 * padding 120px top / 160px bottom. Two columns, 120px gap: a 500px info column (title bar, 72/90 H2, 20px lead,
 * two contact rows + a social row behind a shared 48x48 icon box, a 120px solid-white "MSR" watermark at 10% opacity)
 * and a flexible dark form panel (#1a1a1a, 1px border, 64px padding) with a faint "#CONTACT" tag top-right and the form.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.msr-contact {
  position: relative;
  overflow: hidden; /* clips the glow layer and keeps the decorative tag inside the section */
  background-color: var(--msr-bg);
}

/* Decorative glow: same radial gradient as the process section, defined once in tokens.css */
.msr-contact__glow {
  position: absolute;
  inset: 0;
  background: var(--msr-gradient-process-glow);
  pointer-events: none;
}

.msr-contact__inner {
  position: relative; /* paints above the glow */
  z-index: var(--msr-z-raised);
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr); /* Figma: 500px info column + flexible form panel */
  column-gap: 120px; /* Figma: 120px column gap, not part of the shared gap scale (max is --msr-gap-xl at 80px) */
  align-items: start;
  padding-top: 120px; /* Figma: pt-[120px], not part of the shared fluid section-padding scale (asymmetric with the bottom) */
  padding-bottom: var(--msr-space-160); /* Figma: pb-[160px] */
}

/* ==========================================================================
   Info column: heading block, contact channels, watermark
   ========================================================================== */

.msr-contact__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msr-contact__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-xs); /* 16 */
  padding-bottom: var(--msr-space-64);
}

/* The shared component centres the bar by default; this column is left-aligned (see its doc comment). */
.msr-contact__head .msr-title-bar {
  margin: 0;
}

.msr-contact__title {
  font-size: clamp(2.5rem, 6.5vw, var(--msr-fs-72)); /* ADDED: not in design - fluid below 1440, mirrors the CTA H2 treatment */
  text-wrap: balance;
}

.msr-contact__lead {
  margin: 0;
  color: var(--msr-white-50);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-28);
}

/* ---- Channels: two content rows + a social row, 32px apart ---- */

.msr-contact__channels {
  display: flex;
  flex-direction: column;
  gap: var(--msr-gap-md); /* 32 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.msr-contact__channel {
  display: flex;
  align-items: center;
  gap: var(--msr-gap-sm); /* 24 */
}

/* Icon box: 48 x 48, page surface with a hairline border (lighter than the offer/requirements gold boxes on purpose) */
.msr-contact__channel-box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
}

/* The exported SVGs carry their own intrinsic size (20x20 / 25x20): fixed height, width follows the file, never stretched */
.msr-contact__channel-icon {
  width: auto;
  height: 20px;
}

.msr-contact__channel-body {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-4);
  min-width: 0;
}

.msr-contact__channel-value {
  color: var(--msr-white);
  font-size: var(--msr-fs-18);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-28);
}

/* ADDED: not in design - the e-mail/Discord rows are real links (see contact.php); span rows (no href) are unaffected */
a.msr-contact__channel-value {
  text-decoration: none;
  transition: color var(--msr-duration) var(--msr-ease);
}

@media (hover: hover) {
  a.msr-contact__channel-value:hover {
    color: var(--msr-gold);
  }
}

/* ---- Watermark: big solid "MSR", 10% opacity (inherited from .msr-watermark) ---- */

.msr-contact__watermark {
  padding-top: 100px; /* Figma: pt-[100px], not part of the shared space scale (nearest token is --msr-space-96) */
}

/* ==========================================================================
   Form panel
   ========================================================================== */

.msr-contact__panel {
  position: relative;
  min-width: 0;
  padding: var(--msr-space-64);
  border: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
}

.msr-contact__tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--msr-z-raised);
  margin: 0;
  padding: var(--msr-space-16);
  color: var(--msr-gold);
  font-size: 2.5rem; /* 40px, not part of the shared scale (nearest token is --msr-fs-36) */
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-none);
  opacity: 0.2;
  pointer-events: none; /* ADDED: not in design - purely decorative */
}

.msr-contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--msr-gap-md); /* 32 */
}

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

.msr-contact__input {
  width: 100%;
  padding: var(--msr-space-16) var(--msr-space-20);
  border: 1px solid var(--msr-white-10);
  background-color: var(--msr-bg);
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-20);
  /* ADDED: not in design - state transition */
  transition: border-color var(--msr-duration) var(--msr-ease);
}

.msr-contact__input::placeholder {
  color: var(--msr-white-30);
}

.msr-contact__input--textarea {
  min-height: 140px;
  resize: vertical;
}

/* ADDED: not in design - hover / focus states */
@media (hover: hover) {
  .msr-contact__input:hover {
    border-color: var(--msr-white-20);
  }
}

.msr-contact__input:focus {
  outline: none;
  border-color: var(--msr-gold);
}

/* Honeypot: present in the DOM (real spam bots often skip display:none) but visually off-screen and out of tab order */
.msr-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.msr-contact__form .msr-btn {
  width: 100%;
}

/* ---- Status banner (rendered from $_GET['msr_contact'], no JS) ---- */

.msr-contact__status {
  margin: 0;
  padding: var(--msr-space-12) var(--msr-space-16);
  border-left: 2px solid var(--msr-border-strong);
  background-color: var(--msr-white-05);
  color: var(--msr-white-70);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-20);
}

.msr-contact__status--success {
  border-left-color: var(--msr-gold);
}

/* ---- Note: gold dot bullet, same technique as the CTA trust-line dots (cta.css) ---- */

.msr-contact__note {
  position: relative;
  margin: 0;
  padding-left: 20px; /* 4px dot + 16px gap */
  color: var(--msr-white-20);
  font-size: 0.6875rem; /* 11px, not part of the shared scale (nearest token is --msr-fs-12) */
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 0.1em ~= Figma's 1px @ 11px */
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

.msr-contact__note::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-white-20);
}

/* ==========================================================================
   Responsive (ADDED: not in design) - the 1440 px pixels above are unchanged
   Two columns -> stacked (<= 1000px) -> tighter panel padding (<= 480px)
   ========================================================================== */

@media (max-width: 1000px) {
  .msr-contact__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-64);
    padding-top: 56px; /* lowered 2026-09-22 (user request) from --msr-space-96; not on the shared scale, see --msr-space-48/64 */
    padding-bottom: 56px;
  }

  .msr-contact__panel {
    padding: var(--msr-space-48);
  }
}

@media (max-width: 480px) {
  /* ADDED: not in design - drop the card look at phone width (padding/border/fill), form runs edge to edge */
  .msr-contact__panel {
    padding: 0;
    border: none;
    background-color: transparent;
  }

  .msr-contact__tag {
    display: none;
  }

  .msr-contact__watermark {
    padding-top: var(--msr-space-64);
  }
}