/* =====================================================================
   Partner Cards Module — Figma "D - Partner Cards Module" 6343:44149
   (matching mobile "M -" variant). A pale-blue band: a content block
   (H2 Axiforma Medium 32/45 + body Axiforma Regular 18/25 + optional CTA)
   above a row of partner logo cards (200x100 tiles, radius-4, gray-7
   placeholder behind each logo). 80px block padding, 40px block gap,
   20px gaps inside.

   Variants (content flags -> root modifier classes):
     default                       -> content + logo row, full width (Figma "None")
     .partner-cards--has-image     -> two-column row: content + feature image (RIGHT)
     .partner-cards--image-left    -> feature image sits on the LEFT

   Content locked to the 1240 area via .container. Tokens only — no raw hex
   where a token exists; fixed tile sizes in px are intentional.
   ===================================================================== */

.partner-cards {
  background: var(--pale-blue);
  padding-block: var(--home-sec-pad-y); /* 80px */
}

.partner-cards__inner {
  display: flex;
  align-items: center;
  gap: var(--home-hero-gap); /* 80px between content + image columns */
}
/* Standalone (no image): the content block is the whole row. */
.partner-cards:not(.partner-cards--has-image) .partner-cards__inner {
  display: block;
}

/* ---- Main column: content block + logo row + optional CTA ---- */
.partner-cards__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cb-block-gap); /* 40px */
}
.partner-cards--has-image .partner-cards__main {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Content block (H2 + body) ---- */
.partner-cards__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
}

/* Heading — OG Desktop H2 (Axiforma Medium 32/45) */
.partner-cards__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45); /* 45px */
  color: var(--gray-8);
  word-break: break-word;
}

/* Body — OG Desktop Large Body (Axiforma Regular 18/25) */
.partner-cards__body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25); /* 25px */
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Partner logo cards: row of 200x100 tiles, wrap as needed ---- */
.partner-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
}

/* Each tile: clean white logo panel (standard logo-wall treatment). */
.partner-cards__card {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  padding: 18px 24px;
  background: var(--gray-0);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.partner-cards__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Logo image fills the tile, contained so it never crops the mark. */
.partner-cards__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- CTA — reuses .btn / .btn--primary; layout only. ---- */
.partner-cards__cta {
  flex: none;
}

/* ---- Adjacent feature image (Image=Left / Right) ---- */
.partner-cards__media {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-cards__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-8);
  object-fit: cover;
}

/* Image on the LEFT: render media before the content column. */
.partner-cards--image-left .partner-cards__inner {
  flex-direction: row-reverse;
}

/* ---- Tablet (768–1023): image-split stacks; logo tiles 3-per-row ---- */
@media (max-width: 1023.98px) {
  /* Image-split variant: stack to single column */
  .partner-cards--has-image .partner-cards__inner,
  .partner-cards--image-left .partner-cards__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
  }

  .partner-cards--has-image .partner-cards__main {
    flex: none;
  }

  /* Image moves above the content when stacked */
  .partner-cards--has-image .partner-cards__media {
    order: -1;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
  }

  /* Logo tiles: force 3-per-row on tablet */
  .partner-cards__card {
    flex: 1 1 calc(33.333% - var(--home-stack-gap));
    min-width: 120px;
  }
}

/* ---- Large-mobile / foldable (≤767): logo tiles 2-per-row ---- */
@media (max-width: 767.98px) {
  .partner-cards {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  .partner-cards__inner,
  .partner-cards--image-left .partner-cards__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
  }

  .partner-cards__main {
    gap: var(--home-stack-gap); /* 20px */
  }

  /* Heading — OG Mobile H2. */
  .partner-cards__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36); /* 36px */
  }

  /* Body — OG Mobile Normal Body. */
  .partner-cards__body {
    font-size: var(--fs-16);
    line-height: normal;
  }

  /* Logo tiles: 2-per-row at large-mobile and phone */
  .partner-cards__card {
    flex: 1 1 calc(50% - var(--home-stack-gap)); /* two-up, 20px gutter */
    min-width: 120px;
  }

  /* Image stacks above the content. */
  .partner-cards--has-image .partner-cards__media {
    order: -1;
    width: 100%;
    max-height: none;
    overflow: visible;
  }
}