/* KreateMind homepage section layouts. Front page only. */

/* Astra pads the page article (`.ast-single-post.ast-page-builder-template .site-main > article`,
   20px sides, 2em top); bands must run edge to edge and the hero sets its own top space. */
body.ast-single-post.ast-page-builder-template .site-main > article { padding-top: 0; padding-left: 0; padding-right: 0; }

.km-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .km-split { grid-template-columns: 1fr 1fr; } }

/* ---- 1 Hero ---- */
.km-hero { padding-top: var(--space-7); }
@media (min-width: 900px) { .km-hero .km-split { grid-template-columns: 1.05fr 1fr; } }
body .km-hero .km-hero__title { margin: var(--space-4) 0 0; }
.km-hero__sub { max-width: 440px; margin: var(--space-5) 0 0; font-size: var(--text-md); }
@media (max-width: 767px) { .km-hero { padding-top: var(--space-5); } }

/* ---- 3 What will they create: the one asymmetric moment ---- */
.km-mosaic { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.km-mosaic > :first-child { grid-column: span 2; }
.km-mosaic__text {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--km-violet-soft);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-heading);
}
/* Phones: the 2-up tiles are ~170px wide. A 4:3 tile is too short for the placeholder copy and the caption
   pill together (they overlapped), so small tiles go square with the copy at the top, pill at the bottom. */
@media (max-width: 899px) {
  .km-mosaic { gap: var(--space-3); }
  .km-mosaic > .km-media-tile:not(:first-child) { aspect-ratio: 1 / 1; }
  .km-mosaic > .km-media-tile:not(:first-child) .km-media-tile__placeholder {
    justify-content: flex-start;
    padding: var(--space-4) var(--space-3) 0;
    font-size: 0.75rem;
  }
  .km-mosaic > .km-media-tile:not(:first-child) .km-media-tile__caption { left: var(--space-3); bottom: var(--space-3); padding: 7px 12px; font-size: 0.875rem; }
  .km-mosaic__text { align-self: stretch; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); font-size: 1.125rem; }
  .km-mosaic__text .km-character { --km-character-h: 64px; align-self: flex-end; margin: 0; }
}
@media (min-width: 900px) {
  .km-mosaic { grid-template-columns: repeat(3, 1fr); }
  .km-mosaic > :first-child { grid-row: span 2; aspect-ratio: auto; min-height: 0; }
  .km-mosaic__text { grid-column: 1 / -1; justify-content: center; gap: var(--space-7); }
  .km-mosaic__text .km-character { --km-character-h: 120px; margin: 0; }
}

/* ---- 4 Open-ended play ---- */
.km-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--km-amber);
}

/* ---- Violet bands: ghost buttons read amber ---- */
.km-on-brand .km-btn--ghost { color: var(--km-amber); }
.km-on-brand .km-btn--ghost:hover { background: color-mix(in srgb, var(--km-violet), var(--text-on-brand) 12%); color: var(--km-amber); }

.km-kicker { margin: var(--space-5) 0 0; font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-lg); text-transform: uppercase; color: var(--text-heading); }

.km-grid--4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .km-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Pattern pages ---- */
.km-split--top { align-items: start; }
.km-policy { max-width: 760px; }
body .km-policy h2 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-lg); text-transform: none; }
.km-faq { max-width: 760px; }