/* Hợp tác — see design-specs/partners.md */

.partners-breadcrumb { padding: 40px 240px 0; display: flex; gap: 4px; font: 500 16px/20px var(--font-body); color: #1C1C1C; }
.partners-breadcrumb a { color: inherit; text-decoration: none; }
.partners-breadcrumb__current { color: var(--color-grey-500); }

.partners-pride { padding: 80px 240px 120px; display: flex; flex-direction: column; gap: 64px; }
/* Heading sits on the left gutter; the three figures below it are centred as a group but
   each one is left-aligned within itself (node 800:27764). */
.partners-stats { text-align: left; }
.partners-stats__heading { font: 600 24px/32px var(--font-body); color: #000; margin: 0; }
.partners-stats__grid {
  display: flex; justify-content: center; gap: 80px; flex-wrap: wrap;
  padding: 40px 0;
}
.partners-stats__item { display: flex; flex-direction: column; align-items: flex-start; }
/* The figures are the display serif at 100px — they carry the whole section (node 800:28234).
   They were set at 56px with a 20px line-height, which squashed them into a single line of
   body-sized text. */
.partners-stats__number {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 163px;
  color: var(--color-brand-red);
}
.partners-stats__label { font: 600 24px/32px var(--font-body); color: #000; max-width: none; }

/* Figma runs this band wider than the page gutter (x=160, 1600px) with 40px between rows —
   it was sitting inside the 1440px column with the rows almost touching (node 800:29089). */
.partners-logos {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 40px 20px;
  margin: 0 -80px;
}
.partners-logos__tile {
  height: 96px;
  border-bottom: 1.5px solid var(--color-grey-300);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.partners-logos__tile img { max-width: 100%; max-height: 64px; object-fit: contain; }

/* 707px photo, 120px gutter, 613px form — not two equal halves (node 800:29682). */
.wholesale { padding: 120px 240px; }
.wholesale__heading { font: 500 32px/40px var(--font-body); color: #000; margin: 0 0 64px; }
.wholesale__panel { display: flex; gap: 120px; align-items: flex-start; }
.wholesale__image { flex: 0 0 707px; height: 527px; border-radius: 8px; overflow: hidden; background: var(--color-grey-300); }
.wholesale__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wholesale__form { flex: 0 0 613px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }

.wholesale__success { background: var(--color-brand-red-tint); color: var(--color-brand-red-deep); padding: 12px 16px; border-radius: 8px; font: 500 16px/20px var(--font-body); margin: 0 0 8px; }
.wholesale__row { display: flex; gap: 8px; }
/* min-width:0 — without it the inputs refuse to shrink and the row overflows on mobile. */
.wholesale__row .simple-field { flex: 1 1 0; min-width: 0; }

.simple-field { display: flex; flex-direction: column; min-width: 0; }
.simple-field input, .simple-field textarea { width: 100%; box-sizing: border-box; }
.simple-field label { font: 400 13px/16px var(--font-body); color: var(--color-grey-600); padding: 8px 16px 0; background: var(--color-grey-50); border-radius: 4px 4px 0 0; }
.simple-field input, .simple-field textarea {
  border: none; background: var(--color-grey-50); border-radius: 0 0 4px 4px; padding: 4px 16px 12px;
  font: 500 16px/20px var(--font-body); color: #0F0F0F; outline: none; resize: vertical;
}

/* Figma stacks the two options vertically under the label (node 800:29679). */
.wholesale__request-type { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }
.wholesale__request-type > label:first-child { font: 500 16px/20px var(--font-body); color: #000; margin-bottom: 4px; }
.wholesale__radio { display: flex; align-items: center; gap: 8px; font: 500 16px/20px var(--font-body); color: #0F0F0F; cursor: pointer; }
/* Figma draws these as square tick-boxes even though only one may be chosen, so the
   radio keeps its semantics and takes the design's shape (node 800:28963). */
.wholesale__radio input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--color-grey-500); border-radius: 2px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.wholesale__radio input[type="radio"]:checked {
  border-color: var(--color-brand-red); background: var(--color-brand-red);
}
.wholesale__radio input[type="radio"]:checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.wholesale__submit {
  align-self: flex-start; height: 44px; padding: 10px 24px; border: none; border-radius: 4px;
  background: var(--color-brand-red-deep); color: #fff; font: 500 16px/20px var(--font-body); cursor: pointer;
}

@media (max-width: 767.98px) {
  .partners-breadcrumb { padding: 16px 16px 0; font: 400 13px/16px var(--font-body); }
  .partners-pride, .wholesale { padding: 40px 16px; gap: 24px; }
  .partners-logos { margin: 0; gap: 8px; }
  .partners-stats { text-align: left; }
  .partners-stats__heading { font-size: 20px; line-height: 24px; margin-bottom: 16px; }

  /* Three columns side by side, left-aligned (node 1068:39192) — not stacked. */
  .partners-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex-wrap: nowrap; padding: 0; }
  .partners-stats__item { align-items: flex-start; gap: 4px; }
  .partners-stats__number { font-size: 28px; line-height: 36px; }
  .partners-stats__label { font: 400 13px/16px var(--font-body); max-width: none; }
  /* The two-line break is a desktop typographic choice; at 13px the label already fits. */
  .partners-stats__label br { display: none; }

  .wholesale__panel { flex-direction: column; gap: 16px; }
  .wholesale__image, .wholesale__form { flex: none; width: 100%; }
  .wholesale__heading { margin-bottom: 16px; }

  .partners-logos { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .partners-logos__tile { height: 48px; padding: 4px; }
  .partners-logos__tile img { max-height: 32px; }

  /* Figma stacks the form above the photo on mobile, and right-aligns Gửi. */
  .wholesale__heading { font-size: 20px; }
  .wholesale__panel { flex-direction: column; }
  .wholesale__image { order: 2; width: 100%; height: 240px; }
  .wholesale__form { order: 1; }
  .wholesale__submit { align-self: flex-end; }
}