/* ==========================================================================
   platforms.css — Platforms Landing page (Atlassian + IFS practice hub)
   Figma: IiXADCvnTkuTba3XXaw2PW node 2321:5706 ("Platforms Landing - 1512px x 3587px").
   Extends yardos.css + osrs.css. Reuses .ox-osrs-section, .ox-osrs-stroke,
   .ox-yardos-form, .ox-yardos-hero__h1, etc. Light-header override at bottom.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO — two-column: text left, illustration right
   Figma 2321:5725 hero-text 563×377 at (181, 224);
   image 2321:5727 — 563×539 at (768, 143) — overlaps hero baseline.
   ────────────────────────────────────────────────────────────────────────── */
.ox-platforms-hero {
  background: #FAF4E5;
  padding: 0 178px;
  box-sizing: border-box;
  display: flow-root;
}
.ox-platforms-hero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 96px 0 64px;
}
.ox-platforms-hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 563px;
  max-width: 563px;
}
.ox-platforms-hero__media {
  flex: 1 1 563px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 539px;
}
.ox-platforms-hero__image {
  display: block;
  width: 100%;
  max-width: 566px;
  height: auto;
  object-fit: contain;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. PARTNERSHIPS — header card + platform-callout rows
   Figma 2321:5712 — vertical stack, each child has -1px margin-bottom so
   shared 1px borders collapse into a single seam.

   Header card (2321:5713): #FAF4E5 bg, 1px #717C7F border, padding 24px 32px,
     gap 12px, height 194px.
   Callout row  (2321:5714/5715): horizontal stack of text panel + logo box,
     -1px margin-right on text panel so its border merges with the logo box.
   ────────────────────────────────────────────────────────────────────────── */
.ox-platforms-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.ox-platforms-stack > * + * { margin-top: -1px; }

.ox-platforms-blurb {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 32px;
  background: #FAF4E5;
  border: 1px solid #717C7F;
  box-sizing: border-box;
  width: 100%;
}

.ox-platforms-callout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 257px;
}
.ox-platforms-callout__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding: 24px;
  background: #FAF4E5;
  border: 1px solid #717C7F;
  margin-right: -1px;
  box-sizing: border-box;
}
.ox-platforms-callout__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.ox-platforms-callout__title {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  color: #13252A;
  margin: 0;
}
.ox-platforms-callout__copy {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #13252A;
  margin: 0;
}

/* CTA button — matches Figma "button" (FAE6CE bg, 1px FF6600 border) */
.ox-platforms-callout__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 12px 16px;
  background: #FAE6CE;
  border: 1px solid #FF6600;
  text-decoration: none;
  transition: background .2s ease;
}
.ox-platforms-callout__cta:hover { background: #F5D5B0; }
.ox-platforms-callout__cta-label {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #13252A;
}

/* Logo panel — fixed 319.88px wide in Figma; clamp on narrow viewports */
.ox-platforms-callout__logo {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #FAF4E5;
  border: 1px solid #717C7F;
  box-sizing: border-box;
}
.ox-platforms-callout__logo img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  height: auto;
  width: auto;
  object-fit: contain;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. FORM — uses .ox-yardos-form / .ox-ifs-form__header from existing CSS
   (Nothing platform-specific to add.)
   ────────────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ox-platforms-hero          { padding: 0 48px; }
  .ox-platforms-hero__inner   { flex-direction: column; align-items: flex-start; gap: 32px; padding: 64px 0 32px; }
  .ox-platforms-hero__lockup,
  .ox-platforms-hero__media   { flex: none; width: 100%; max-width: 100%; }
  .ox-platforms-hero__media   { min-height: auto; }
  .ox-platforms-callout       { flex-direction: column; }
  .ox-platforms-callout__body { margin-right: 0; margin-bottom: -1px; }
  .ox-platforms-callout__logo { flex: none; width: 100%; min-height: 200px; }
}
@media (max-width: 768px) {
  .ox-platforms-hero          { padding: 0 24px; }
  .ox-platforms-callout__title { font-size: 26px; }
  .ox-platforms-callout__cta  { width: 100%; justify-content: center; }
}


/* ──────────────────────────────────────────────────────────────────────────
   LIGHT HEADER OVERRIDE — mirrors page-osrs.php / page-ifs.php pattern
   ────────────────────────────────────────────────────────────────────────── */
.page-template-page-platforms-php body { background: #FAF4E5; }
.page-template-page-platforms-php .ox-header {
  background: #FAF4E5;
  border-top-color: #FAF4E5;
}
.page-template-page-platforms-php .ox-nav__link {
  background: #FAEDDA;
  color: #13252A;
}
.page-template-page-platforms-php .ox-nav__link:hover { background: #F5E0C0; }
.page-template-page-platforms-php .ox-header__divider { background: #D4C9B8; }
.page-template-page-platforms-php .ox-header__logo    { background: #FAF4E5; }
.page-template-page-platforms-php .ox-logo__text      { color: #13252A; }
.page-template-page-platforms-php .ox-nav__list       { background: #FAF4E5; }
.page-template-page-platforms-php .ox-nav__dropdown   { background: #FAF4E5; }
.page-template-page-platforms-php .ox-nav__dropdown a { color: #13252A; }
.page-template-page-platforms-php .ox-nav__dropdown a:hover { background: #F0E8D5; }
.page-template-page-platforms-php .ox-logo .ox-logo__svg path,
.page-template-page-platforms-php .ox-logo .ox-logo__svg circle { fill: #13252A; }
.page-template-page-platforms-php .ox-nav__chevron path { stroke: #FF6600; }