/* =====================================================================
   MBA 2026 — GrowthZone compatibility layer
   Loaded ONLY on the /growthzone-template route (see inc/growthzone.php).

   GrowthZone injects markup we do not control and ships no stylesheet of
   its own. Its content uses:
     - its own `mn-*` classes (unstyled even on the old site: the old
       app.css contained zero mn- rules), and
     - Foundation grid classes (row / column / columns / column-block /
       small-N / medium-N), which the old site styled by loading Foundation.
   The new theme has no Foundation, so this file provides a small shim plus
   sane typography for uncontrolled HTML.

   EVERYTHING IS SCOPED UNDER .gz-content. Class names like .row and .column
   are far too generic to let loose on a page that also carries our header
   and footer.

   Built only on the design tokens in styles.css. Keep it a shim, not a
   design system.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Foundation grid shim
   No max-width on .row: per the 2026-08-17 decision the injected content
   uses the full standard container (the old site capped rows at 62.5rem).
   --------------------------------------------------------------------- */
.gz-content .row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.gz-content .row .row { margin-left: -10px; margin-right: -10px; }
.gz-content .column,
.gz-content .columns { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.gz-content .column-block { margin-bottom: var(--space-6); }

/* Foundation's 12-column widths. Small = all widths, medium = 640px up. */
.gz-content .small-1  { flex: 0 0 auto; width: 8.3333%; }
.gz-content .small-2  { flex: 0 0 auto; width: 16.6667%; }
.gz-content .small-3  { flex: 0 0 auto; width: 25%; }
.gz-content .small-4  { flex: 0 0 auto; width: 33.3333%; }
.gz-content .small-5  { flex: 0 0 auto; width: 41.6667%; }
.gz-content .small-6  { flex: 0 0 auto; width: 50%; }
.gz-content .small-7  { flex: 0 0 auto; width: 58.3333%; }
.gz-content .small-8  { flex: 0 0 auto; width: 66.6667%; }
.gz-content .small-9  { flex: 0 0 auto; width: 75%; }
.gz-content .small-10 { flex: 0 0 auto; width: 83.3333%; }
.gz-content .small-11 { flex: 0 0 auto; width: 91.6667%; }
.gz-content .small-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 640px) {
  .gz-content .medium-1  { flex: 0 0 auto; width: 8.3333%; }
  .gz-content .medium-2  { flex: 0 0 auto; width: 16.6667%; }
  .gz-content .medium-3  { flex: 0 0 auto; width: 25%; }
  .gz-content .medium-4  { flex: 0 0 auto; width: 33.3333%; }
  .gz-content .medium-5  { flex: 0 0 auto; width: 41.6667%; }
  .gz-content .medium-6  { flex: 0 0 auto; width: 50%; }
  .gz-content .medium-7  { flex: 0 0 auto; width: 58.3333%; }
  .gz-content .medium-8  { flex: 0 0 auto; width: 66.6667%; }
  .gz-content .medium-9  { flex: 0 0 auto; width: 75%; }
  .gz-content .medium-10 { flex: 0 0 auto; width: 83.3333%; }
  .gz-content .medium-11 { flex: 0 0 auto; width: 91.6667%; }
  .gz-content .medium-12 { flex: 0 0 auto; width: 100%; }
}

/* Below Foundation's medium breakpoint, small-N columns that would be
   uselessly narrow stack instead. */
@media (max-width: 639.98px) {
  .gz-content .column,
  .gz-content .columns { flex: 0 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------------
   2. GrowthZone mn-* blocks
   --------------------------------------------------------------------- */
.gz-content .mn-block { margin-bottom: var(--space-8); }
.gz-content .mn-block:last-child { margin-bottom: 0; }
/* Observed nesting (verified against a live composed page, 2026-08-17):
   .mn-row > .mn-col-1 > div > .mn-row > .mn-col-1 > .mn-row-inner
   > (.mn-col-1-5 + .mn-col-4-5). The 1-5/4-5 split lives under
   .mn-row-inner, so THAT is the flex container, not .mn-row. */
.gz-content .mn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.gz-content .mn-col-1 { flex: 1 1 100%; min-width: 0; }
/* One .mn-row-inner == one listing (verified: 10 of them for 10 job posts),
   so the hairline is a record separator, not decoration: without it a
   listing's buttons visually attach to the next listing's logo. */
.gz-content .mn-row-inner {
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start;
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--border);
}
/* Logo/thumbnail column: proportional but capped, so wildly different member
   logos all sit in a consistent gutter. */
.gz-content .mn-col-1-5 { flex: 0 0 auto; width: 18%; max-width: 160px; }
.gz-content .mn-col-4-5 { flex: 1 1 0; min-width: 0; }
@media (max-width: 639.98px) {
  /* Stack, but keep the logo a thumbnail rather than letting it fill the
     column and outweigh the listing title. */
  .gz-content .mn-col-1-5 { flex: 0 0 auto; width: auto; max-width: 140px; }
  .gz-content .mn-col-4-5 { flex: 0 0 auto; width: 100%; max-width: none; }
}

.gz-content .mn-image img,
.gz-content .mn-img-responsive { max-width: 100%; height: auto; display: block; }

.gz-content .mn-main-heading {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 var(--space-4);
}
.gz-content .mn-listing-title {
  font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2);
}
.gz-content .mn-text { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.gz-content .mn-action { margin-top: var(--space-4); }

/* GrowthZone calls to action read as MBA buttons, in the SECONDARY blue
   treatment (.btn--secondary), never orange. A listing page injects dozens of
   these ("Learn More", "Visit Contact", "Submit"); orange is the site's single
   primary action signal and must stay a precision instrument, per the locked
   design rule of at most one orange action per section. */
.gz-content .mn-button,
.gz-content a.mn-button {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--mba-blue-deep);
  border: 1.6px solid var(--mba-blue-deep); border-radius: var(--radius-button);
  padding: 11px 22px; font-size: .9375rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.gz-content .mn-button:hover {
  background: var(--mba-blue-hover); border-color: var(--mba-blue-hover);
  color: #fff; transform: scale(1.015);
}
.gz-content .mn-button:active { transform: scale(0.985); }

.gz-content .social-icon { display: inline-block; margin-right: var(--space-3); color: var(--mba-blue-deep); }
.gz-content .upcoming-event { margin-bottom: var(--space-6); }
.gz-content .upcoming-event-date { font-weight: 700; color: var(--mba-blue-deep); }

/* ---------------------------------------------------------------------
   3. Typography for uncontrolled HTML
   .std-prose covers h2/h3/p/ul/ol/a/img on our own pages. Everything below
   fills the gaps that injected third-party markup will hit.
   --------------------------------------------------------------------- */
.gz-content { color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.gz-content > * + * { margin-top: var(--space-6); }

.gz-content h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.2; margin: var(--space-8) 0 var(--space-4); }
.gz-content h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); }
.gz-content h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: var(--space-6) 0 var(--space-2); }
.gz-content h5 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin: var(--space-4) 0 var(--space-2); }
.gz-content h6 { font-size: .9375rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.gz-content h2:first-child, .gz-content h3:first-child, .gz-content h4:first-child { margin-top: 0; }

.gz-content p { margin: 0 0 var(--space-4); }
.gz-content ul, .gz-content ol { margin: 0 0 var(--space-4); padding-left: 22px; }
.gz-content ul { list-style: disc; }
.gz-content ol { list-style: decimal; }
.gz-content li + li { margin-top: var(--space-2); }
.gz-content a:not(.mn-button) { color: var(--mba-blue-deep); font-weight: 600; text-decoration: none; }
.gz-content a:not(.mn-button):hover { text-decoration: underline; }
.gz-content img { max-width: 100%; height: auto; }
.gz-content hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

.gz-content blockquote {
  margin: var(--space-6) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--mba-orange); color: var(--text-slate);
}
.gz-content dl { margin: 0 0 var(--space-4); }
.gz-content dt { font-weight: 700; margin-top: var(--space-3); }
.gz-content dd { margin: 0 0 var(--space-2); color: var(--text-slate); }
.gz-content pre, .gz-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9375rem;
  background: var(--bg-muted); border-radius: 6px;
}
.gz-content code { padding: .1em .35em; }
.gz-content pre { padding: var(--space-4); overflow-x: auto; }

/* Tables: the theme has no table styling at all, and GrowthZone's directory
   and event views lean on them. */
.gz-content table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 0 0 var(--space-6); }
.gz-content th, .gz-content td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.gz-content thead th { border-bottom: 2px solid var(--border-strong); font-weight: 600; }
.gz-content caption { caption-side: top; text-align: left; font-weight: 600; padding-bottom: var(--space-2); color: var(--text-muted); }
@media (max-width: 639.98px) {
  /* Wide tables scroll inside their own box instead of blowing out the page. */
  .gz-content table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Form controls (GrowthZone login, search, and registration forms), matching
   the pattern already used by search.php. */
.gz-content input[type="text"], .gz-content input[type="email"], .gz-content input[type="tel"],
.gz-content input[type="url"], .gz-content input[type="number"], .gz-content input[type="password"],
.gz-content input[type="search"], .gz-content input[type="date"], .gz-content select, .gz-content textarea {
  font: inherit; color: var(--text); background: #fff;
  padding: 12px 14px; width: 100%; max-width: 460px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-button);
}
.gz-content textarea { min-height: 140px; }
.gz-content label { display: inline-block; font-weight: 600; margin-bottom: var(--space-2); }
.gz-content fieldset { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); margin: 0 0 var(--space-6); }
.gz-content legend { font-weight: 700; padding: 0 var(--space-2); }
/* Submit controls follow the same rule as .mn-button: blue, not orange. */
.gz-content input[type="submit"], .gz-content button[type="submit"] {
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--mba-blue-deep);
  border: 1.6px solid var(--mba-blue-deep); border-radius: var(--radius-button);
  padding: 11px 22px; width: auto;
}
.gz-content input[type="submit"]:hover, .gz-content button[type="submit"]:hover {
  background: var(--mba-blue-hover); border-color: var(--mba-blue-hover); color: #fff;
}