@import url("../../public/css/amm-image-focal.css");
@import url("../../public/css/amm-body-text.css");
@import url("../../public/css/amm-section-intro.css");
@import url("../../public/css/amm-section-background.css");

/* ==========================================================================
   amm/split – two-column split (editor + frontend)
   Layouts: .amm-split--statement (image + statement box beside cards: Feature Split,
   Image & Stats) and .amm-split--text (story heading + body beside one card: Story Split).
   Horizontal inset and max width come from `.site-main > *` in the theme; vertical rhythm
   comes from the shared block spacing controls.
   ========================================================================== */

.wp-block-amm-split,
.amm-split {
  --amm-split-gap: 24px;
  --amm-split-media-ratio: 638 / 702;
  --amm-split-statement-width: 400px;
  --amm-split-card-width: 425px;

  /* Cards on the card side (amm/grid sets its own copies). */
  --amm-card-bg: var(--amm-palette-primary-3, #ffffff);
  --amm-card-border: 1px solid var(--amm-text-tertiary-color, #f3f3f3);
  --amm-card-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  --amm-grid-link-color: var(--amm-palette-primary-1, #005762);
  --amm-grid-link-border-color: transparent;
  --amm-grid-link-background: transparent;
  --amm-grid-link-align: flex-start;

  /* Story body copy in primary text colour (shared body-text renderer reads this). */
  --amm-body-text-color: var(--amm-palette-text-primary, #1e1e1e);

  box-sizing: border-box;
  width: 100%;
}

.amm-split--text {
  --amm-split-gap: 40px;
}

/* --- Shared skeleton -------------------------------------------------- */

.amm-split__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.amm-split__fixed,
.amm-split__cards {
  min-width: 0;
}

.amm-split__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.amm-split__cards > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* A nested grid already sits inside the theme inset; drop its own padding. */
.amm-split__cards > .wp-block-amm-grid {
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text-link CTAs on the cards by default (cards can switch to filled / outline buttons). */
.amm-split__cards .amm-card__cta {
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* --- Statement layout: image + statement box --------------------------- */

.amm-split__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--amm-split-media-ratio);
  padding: var(--amm-split-gap);
  overflow: hidden;
  border-radius: 2px;
  background: var(--amm-palette-primary-1, #005762);
  box-sizing: border-box;
}

.amm-split--no-image .amm-split__media {
  aspect-ratio: auto;
}

.amm-split__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  /* object-fit / position / zoom come from .amm-image-focal (amm-image-focal.css). */
}

.amm-split__statement {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: var(--amm-split-statement-width);
  min-height: 240px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--amm-palette-primary-1-90, #1a6872);
  font-family: var(--amm-heading-font, var(--amm-font-sans));
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.amm-split__statement .amm-split__eyebrow,
.amm-split__statement .amm-split__statement-heading {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.amm-split__statement .amm-split__eyebrow {
  font-size: calc(18px * var(--amm-type-scale-mobile, 1));
  color: var(--amm-palette-secondary-2, #e6edaa);
}

.amm-split__statement .amm-split__statement-heading {
  font-size: calc(22px * var(--amm-type-scale-mobile, 1));
  color: var(--amm-split-statement-text-color, var(--amm-palette-primary-3, #ffffff));
}

/*
 * Gradient square statement: a 400 x 400 see-through panel (grows if the copy is longer), copy
 * block centred inside it. Colours, opacity and direction are set per block; defaults are a
 * darker shade of the brand colour to the brand colour at 80%.
 */
.amm-split--statement-gradient .amm-split__statement {
  --amm-split-statement-c1: var(
    --amm-split-statement-color-1,
    color-mix(in srgb, var(--amm-palette-primary-1, #005762) 75%, #000000)
  );
  --amm-split-statement-c2: var(
    --amm-split-statement-color-2,
    color-mix(in srgb, var(--amm-palette-primary-1-90, #1a6872) 90%, #000000)
  );

  gap: 8px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 64px 67px;
  border-radius: 4px;
  background: linear-gradient(
    var(--amm-split-statement-angle, 90deg),
    color-mix(in srgb, var(--amm-split-statement-c1) var(--amm-split-statement-opacity, 80%), transparent),
    color-mix(in srgb, var(--amm-split-statement-c2) var(--amm-split-statement-opacity, 80%), transparent)
  );
}

/*
 * Picked fill (shared colour / gradient picker). The box takes it as is; the square paints it on a
 * layer behind the copy so the opacity setting fades the fill without fading the text.
 */
.amm-split--statement-fill .amm-split__statement {
  background: var(--amm-split-statement-fill);
}

.amm-split--statement-fill.amm-split--statement-gradient .amm-split__statement {
  isolation: isolate;
  background: transparent;
}

.amm-split--statement-fill.amm-split--statement-gradient .amm-split__statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--amm-split-statement-fill);
  opacity: var(--amm-split-statement-opacity, 80%);
  pointer-events: none;
}

/* Standard cards beside the image: wide, short hero (600 × 217 in the design). */
.amm-split--statement .amm-split__cards .amm-card--layout-standard .amm-card__image {
  aspect-ratio: 600 / 217;
}

/* --- Intro + stats side (Image & Stats) -------------------------------- */

.amm-split__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.amm-split__panel .amm-section-intro {
  margin-bottom: 0;
}

.amm-split__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-split__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  background: var(--amm-palette-primary-3, #ffffff);
  border: 1px solid var(--amm-text-tertiary-color, #f3f3f3);
  border-radius: 12px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

.amm-split__stat-icon {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.amm-split__stat-label {
  color: var(--amm-split-stat-label-color, var(--amm-palette-text-primary, #1e1e1e));
  font-family: var(--amm-body-font, var(--amm-font-sans));
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.amm-split__stat-number {
  color: var(--amm-split-stat-number-color, var(--amm-palette-primary-1, #005762));
  font-family: var(--amm-heading-font, var(--amm-font-sans));
  font-size: calc(22px * var(--amm-type-scale-mobile, 1));
  font-weight: 700;
  line-height: 1.4;
}

/* Plain stats: number above label, no card (the Image & Stats "Plain" style). */
.amm-split--stats-plain .amm-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 40px);
}

.amm-split--stats-plain .amm-split__stat {
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}

.amm-split--stats-plain .amm-split__stat-icon {
  order: -2;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.amm-split--stats-plain .amm-split__stat-number {
  order: -1;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
}

.amm-split--stats-plain .amm-split__stat-label {
  max-width: 9rem;
  color: var(--amm-split-stat-label-color, var(--amm-palette-text-secondary, #757575));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

/* Stat alignment (Default: cards centred, plain left). */
.amm-split--stat-align-left .amm-split__stat {
  align-items: flex-start;
  text-align: left;
}

.amm-split--stat-align-center .amm-split__stat {
  align-items: center;
  text-align: center;
}

.amm-split--stat-align-right .amm-split__stat {
  align-items: flex-end;
  text-align: right;
}

.amm-split--stats-plain.amm-split--stat-align-center .amm-split__stats {
  justify-content: center;
}

.amm-split--stats-plain.amm-split--stat-align-right .amm-split__stats {
  justify-content: flex-end;
}

/* Intro alignment (eyebrow, heading, description); set on each part so theme heading rules can't win. */
.amm-split--content-align-center .amm-split__panel .amm-section-intro,
.amm-split--content-align-center .amm-split__panel .amm-section-intro__eyebrow,
.amm-split--content-align-center .amm-split__panel .amm-section-intro__heading,
.amm-split--content-align-center .amm-split__panel .amm-section-intro__description {
  text-align: center;
}

.amm-split--content-align-right .amm-split__panel .amm-section-intro,
.amm-split--content-align-right .amm-split__panel .amm-section-intro__eyebrow,
.amm-split--content-align-right .amm-split__panel .amm-section-intro__heading,
.amm-split--content-align-right .amm-split__panel .amm-section-intro__description {
  text-align: right;
}

/* Section background: room around the content (variables from amm-section-background.css). */
.amm-split.has-section-bg > .amm-split__inner {
  padding: var(--amm-section-bg-pad-block) var(--amm-section-bg-pad-inline);
}

/*
 * Section background (shared, public/css/amm-section-background.css). "Light text" turns the split's own
 * text white for dark backgrounds; colours picked on the block still win (they are inline variables).
 */
.amm-split.has-section-bg-light-text .amm-split__heading {
  color: var(--amm-split-heading-color, #ffffff);
}

.amm-split.has-section-bg-light-text .amm-split__body,
.amm-split.has-section-bg-light-text .amm-split__body * {
  color: #ffffff;
}

.amm-split.has-section-bg-light-text .amm-split__panel .amm-section-intro {
  --amm-section-intro-heading-color: #ffffff;
  --amm-section-intro-accent-color: #ffffff;
  --amm-section-intro-eyebrow-color: var(--amm-palette-secondary-2, #e6edaa);
  --amm-section-intro-description-color: #ffffff;
}

.amm-split.has-section-bg-light-text.amm-split--stats-plain .amm-split__stat-number {
  color: var(--amm-split-stat-number-color, #ffffff);
}

.amm-split.has-section-bg-light-text.amm-split--stats-plain .amm-split__stat-label {
  color: var(--amm-split-stat-label-color, rgba(255, 255, 255, 0.85));
}

/* Button: DXP Component / Button sizes (44px), text / filled / outline, left / centre / right. */
.amm-split__cta {
  display: flex;
  justify-content: flex-end;
}

.amm-split--cta-align-left .amm-split__cta {
  justify-content: flex-start;
}

.amm-split--cta-align-center .amm-split__cta {
  justify-content: center;
}

.amm-split__cta .amm-split__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--amm-split-cta-color, var(--amm-palette-primary-1, #005762));
  font-family: var(--amm-body-font, var(--amm-font-sans));
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.amm-split--cta-filled .amm-split__cta .amm-split__cta-btn,
.amm-split--cta-outline .amm-split__cta .amm-split__cta-btn {
  gap: 12px;
  padding: 11px 19px;
  border: 1px solid var(--amm-split-cta-color, var(--amm-palette-primary-1, #005762));
  border-radius: var(--amm-radius-button, 16px);
}

.amm-split--cta-filled .amm-split__cta .amm-split__cta-btn {
  background: var(--amm-split-cta-color, var(--amm-palette-primary-1, #005762));
  color: var(--amm-split-cta-text-color, var(--amm-palette-primary-3, #ffffff));
}

.amm-split--cta-outline .amm-split__cta .amm-split__cta-btn {
  color: var(--amm-split-cta-text-color, var(--amm-split-cta-color, var(--amm-palette-primary-1, #005762)));
}

.amm-split__cta .amm-split__cta-btn:hover,
.amm-split__cta .amm-split__cta-btn:focus-visible {
  text-decoration: none;
  opacity: 0.85;
}

.amm-split__cta .amm-split__cta-icon {
  font-size: 18px;
  line-height: 1;
}

/* --- Text layout: story heading + body --------------------------------- */

/* Mobile: the story reads first, the card follows. */
.amm-split--text .amm-split__text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.amm-split--text .amm-split__cards {
  order: 2;
}

.amm-split--text .amm-split__cards .amm-card {
  height: auto;
}

.amm-split__heading {
  margin: 0;
  color: var(--amm-split-heading-color, var(--amm-palette-primary-1, #005762));
  font-family: var(--amm-heading-font, var(--amm-font-sans));
  font-size: calc(22px * var(--amm-type-scale-mobile, 1));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.amm-split__body {
  margin: 0;
}

.amm-split__body p {
  margin: 0;
}

.amm-split__body p + p {
  margin-top: 1em;
}

.amm-split--text .amm-card.amm-card--layout-icon {
  --amm-card-icon-stack-gap: 8px;
}

.amm-split--text .amm-split__eyebrow {
  margin: 0;
  color: var(--amm-split-heading-color, var(--amm-palette-primary-1, #005762));
  font-family: var(--amm-body-font, var(--amm-font-sans));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.amm-split--text .amm-split__cta .amm-split__cta-btn {
  border-radius: var(--amm-radius-button, 4px);
}

/* --- Breakpoints ------------------------------------------------------ */

@media (max-width: 599px) {
  .amm-split__media {
    --amm-split-media-ratio: 4 / 5;
    padding: 16px;
  }

  .amm-split__statement {
    min-height: 0;
    padding: 24px;
  }

  .amm-split--statement-gradient .amm-split__statement {
    aspect-ratio: auto;
    padding: 32px 24px;
  }
}

@media (min-width: 768px) {
  .amm-split__statement .amm-split__eyebrow {
    font-size: calc(20px * var(--amm-type-scale-tablet, 1));
  }

  .amm-split__statement .amm-split__statement-heading,
  .amm-split__heading {
    font-size: calc(24px * var(--amm-type-scale-tablet, 1));
  }
}

/* Text layout goes side by side from 900px: 425px card + flexible story. */
@media (min-width: 900px) {
  .amm-split--text .amm-split__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--amm-split-gap);
  }

  .amm-split--text.is-align-center .amm-split__inner {
    align-items: center;
  }

  .amm-split--text .amm-split__cards {
    order: 0;
    flex: 0 0 var(--amm-split-card-width);
    width: var(--amm-split-card-width);
  }

  .amm-split--text .amm-split__text {
    order: 1;
    flex: 1 1 0;
  }

  .amm-split--text.is-reversed .amm-split__cards {
    order: 2;
  }
}

/* Statement layout goes side by side from 1024px: 638 / 634 columns. */
@media (min-width: 1024px) {
  .amm-split--statement .amm-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 638fr) minmax(0, 634fr);
    gap: var(--amm-split-gap);
    align-items: start;
  }

  .amm-split--statement.is-align-center .amm-split__inner {
    align-items: center;
  }

  .amm-split--statement.is-reversed .amm-split__inner {
    grid-template-columns: minmax(0, 634fr) minmax(0, 638fr);
  }

  .amm-split--statement.is-reversed .amm-split__media {
    order: 2;
  }

  /*
   * The image column matches the height of the card column instead of a fixed ratio.
   * The floor keeps room for the statement box (solid 240px, gradient square 400px) plus padding.
   */
  .amm-split__media {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: calc(240px + 2 * var(--amm-split-gap));
  }

  .amm-split--statement-gradient .amm-split__media {
    min-height: calc(400px + 2 * var(--amm-split-gap));
  }

  /* Intro + stats: the image keeps the design's 638 x 600 shape instead of stretching. */
  .amm-split--stats .amm-split__media {
    aspect-ratio: 638 / 600;
    align-self: center;
    min-height: 0;
  }

  .amm-split__stat-number {
    font-size: calc(28px * var(--amm-type-scale-desktop, 1));
  }

  .amm-split__statement .amm-split__eyebrow {
    font-size: calc(20px * var(--amm-type-scale-desktop, 1));
  }

  .amm-split__statement .amm-split__statement-heading,
  .amm-split__heading {
    font-size: calc(28px * var(--amm-type-scale-desktop, 1));
  }
}