/* ==========================================================================
   Sky Ceylon — Split Sections

   The copy-beside-pictures layout and the three lists that fill the copy
   column: numbered reasons, a table of details, and the aside stack.

   The two-column layout itself (.skyc-split) and the picture arrangements
   (.skyc-collage, .skyc-figure-stack, .skyc-framed) live in Shared
   Components, because the card and gallery sections reuse them.

   FluentSnippets group: Split Sections | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COPY COLUMN
   -------------------------------------------------------------------------- */
.skyc-split__copy > * + * { margin-top: var(--wp--preset--spacing--32); }
.skyc-split__copy > .skyc-head + * { margin-top: var(--wp--preset--spacing--32); }

.skyc-split--single .skyc-split__copy { max-width: var(--wp--custom--container-narrow); }

.skyc-split__link { margin: var(--wp--preset--spacing--24) 0 0; }

/* The media column is decoration on these sections — the copy carries the
   message — so it is allowed to sit below the fold on a phone rather than
   pushing the buttons down. */
.skyc-split__media > * + * { margin-top: var(--wp--preset--spacing--24); }

/* --------------------------------------------------------------------------
   2. NUMBERED REASONS
   -------------------------------------------------------------------------- */
.skyc-reasons {
  display: grid;
  gap: var(--wp--preset--spacing--24);
  counter-reset: none;
}

.skyc-reasons__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wp--preset--spacing--16);
  align-items: start;
}

.skyc-reasons__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--wp--custom--radius-circle);
  background: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wide);
}

.skyc-reasons__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}

.skyc-reasons__text {
  margin: var(--wp--preset--spacing--8) 0 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}

/* On the plum wash the magenta disc disappears, so it becomes a glass chip. */
.skyc-section--plum .skyc-reasons__num {
  background: rgba(255, 255, 255, 0.10);
  color: var(--wp--preset--color--accent);
}
.skyc-section--gold .skyc-reasons__num {
  background: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   3. TABLE OF DETAILS
   -------------------------------------------------------------------------- */
.skyc-specs {
  margin: 0;
  border-top: 1px solid var(--skyc-line, var(--wp--preset--color--line));
}

.skyc-specs__row {
  display: grid;
  gap: var(--wp--preset--spacing--4);
  padding: var(--wp--preset--spacing--16) 0;
  border-bottom: 1px solid var(--skyc-line, var(--wp--preset--color--line));
}

.skyc-specs__label {
  margin: 0;
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}

.skyc-specs__value {
  margin: 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}

@media (min-width: 560px) {
  .skyc-specs__row {
    grid-template-columns: minmax(9rem, 34%) 1fr;
    gap: var(--wp--preset--spacing--20);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   4. ASIDE STACK
   A framed photograph, a customer quote and a panel, in that order — any of
   the three may be missing, so the spacing is owned by the gap.
   -------------------------------------------------------------------------- */
.skyc-aside {
  display: grid;
  gap: var(--wp--preset--spacing--24);
  align-content: start;
}

/* --------------------------------------------------------------------------
   5. EDITOR
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-split__copy > * + * {
  margin-top: var(--wp--preset--spacing--24);
}