/*
 * Masuria Esport - "Współpraca" page: contact section (assets/css/cooperation/contact.css)
 * Markup: template-parts/cooperation/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): two columns, 120px gap. Left: title bar, 72/90 H2, 20px lead, a single e-mail row behind a
 * 48x48 icon box, then a 120px solid-white "MSR" watermark at 10% opacity. Right: a dark form panel (#1a1a1a,
 * 1px border, 48px padding) with two-column name/company and e-mail/phone rows, a radio group ("Rodzaj
 * współpracy"), a message textarea, a consent checkbox and the submit button. Mirrors the shape of the home
 * page's own contact section (assets/css/sections/contact.css) with a different, larger form.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-contact {
  position: relative;
  background-color: var(--msr-bg);
}

.msr-coop-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr); /* 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-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

/* ==========================================================================
   Info column: heading block, single e-mail channel, watermark
   ========================================================================== */

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

.msr-coop-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-coop-contact__head .msr-title-bar {
  margin: 0;
}

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

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

/* ---- Single e-mail channel row ---- */

.msr-coop-contact__channel {
  display: flex;
  align-items: center;
  gap: var(--msr-gap-sm); /* 24 */
  padding-top: var(--msr-gap-md); /* 32; ADDED: not in design - spacing between the lead and the channel row */
}

/* Icon box: 48 x 48, page surface with a hairline border (same treatment as the home contact channels) */
.msr-coop-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);
}

/* contact-email.svg is 20x20: fixed height, width follows the file, never stretched */
.msr-coop-contact__channel-icon {
  width: auto;
  height: 20px;
}

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

.msr-coop-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);
}

/* The e-mail row is a real mailto: link (see contact.php) */
a.msr-coop-contact__channel-value {
  text-decoration: none;
  transition: color var(--msr-duration) var(--msr-ease);
}

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

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

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

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

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

.msr-coop-contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-32);
}

/* Two-column rows: name/company, e-mail/phone */
.msr-coop-contact__row {
  display: flex;
  gap: var(--msr-space-24);
}

.msr-coop-contact__row .msr-coop-contact__field {
  flex: 1 1 0;
}

.msr-coop-contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0; /* resets the <fieldset> used for the radio group */
}

.msr-coop-contact__field legend {
  padding: 0;
}

.msr-coop-contact__input {
  width: 100%;
  padding: var(--msr-space-16) var(--msr-space-24); /* Figma: 24px horizontal / ~18px vertical, rounded to the shared 16px token */
  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-16);
  line-height: var(--msr-lh-24);
  /* ADDED: not in design - state transition */
  transition: border-color var(--msr-duration) var(--msr-ease);
}

.msr-coop-contact__input::placeholder {
  color: var(--msr-white-40); /* Figma: #9ca3af */
}

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

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

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

/* ---- Radio group ("Rodzaj współpracy") ---- */

.msr-coop-contact__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msr-space-12) var(--msr-space-24);
  padding-top: var(--msr-space-8);
}

.msr-coop-contact__radio {
  display: flex;
  align-items: center;
  gap: var(--msr-space-12);
  color: var(--msr-white);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-20);
  cursor: pointer;
}

/*
 * Native radios, gold-accented when checked: a pragmatic, accessible substitute for the Figma custom
 * circle (ADDED: not in design - accent-color is a normal modern-CSS technique, appropriate for this theme).
 */
.msr-coop-contact__radio input[type='radio'] {
  width: 20px;
  height: 20px;
  accent-color: var(--msr-gold);
  cursor: pointer;
}

/* ---- Message field uses .msr-coop-contact__field + .msr-coop-contact__input above ---- */

/* ---- Consent checkbox ---- */

.msr-coop-contact__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--msr-space-12);
  color: var(--msr-white-30);
  font-size: 0.625rem; /* 10px: not part of the shared scale (nearest token is --msr-fs-12) */
  line-height: 1.625; /* 16.25 / 10 */
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
  cursor: pointer;
}

.msr-coop-contact__consent input[type='checkbox'] {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  accent-color: var(--msr-gold); /* ADDED: not in design - native gold-accented control, see the radio note above */
  cursor: pointer;
}

/* Honeypot: present in the DOM but visually off-screen and out of tab order (same technique as sections/contact.css) */
.msr-coop-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

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

.msr-coop-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-coop-contact__status--success {
  border-left-color: var(--msr-gold);
}

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

@media (max-width: 1000px) {
  .msr-coop-contact__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-64);
  }

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

@media (max-width: 640px) {
  .msr-coop-contact__row {
    flex-direction: column;
    gap: var(--msr-space-24);
  }
}

@media (max-width: 480px) {
  /* ADDED: not in design - drop the card look at phone width, matches the home contact panel's own breakpoint */
  .msr-coop-contact__panel {
    padding: 0;
    border: none;
    background-color: transparent;
  }

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