/**
 * Onkoloogika - Colored Surfaces & Cards Grid
 *
 * Reusable block styles for:
 * - Colored surface blocks (Group block with background)
 * - Flexible cards grid (Columns block)
 */

/* ==========================================================================
   Base Surface Style
   ========================================================================== */

/* Base surface style – shared by all colored blocks */
.wp-block-group.is-style-onk-surface,
.wp-block-group.is-style-onk-surface-lilac,
.wp-block-group.is-style-onk-surface-peach,
.wp-block-group.is-style-onk-surface-blue,
.wp-block-group.is-style-onk-surface-mint {
  --onk-surface-bg: #f7f7f9;
  --onk-surface-border: transparent;
  --onk-surface-accent: #7c3aed;

  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  margin-block: 1.5rem;
  background: var(--onk-surface-bg);
  border: 1px solid var(--onk-surface-border);
}

/* Larger H2 inside surfaces */
.wp-block-group.is-style-onk-surface h2,
.wp-block-group.is-style-onk-surface-lilac h2,
.wp-block-group.is-style-onk-surface-peach h2,
.wp-block-group.is-style-onk-surface-blue h2,
.wp-block-group.is-style-onk-surface-mint h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
}

/* ==========================================================================
   Typography Inside Surfaces
   ========================================================================== */

.wp-block-group.is-style-onk-surface h3,
.wp-block-group.is-style-onk-surface-lilac h3,
.wp-block-group.is-style-onk-surface-peach h3,
.wp-block-group.is-style-onk-surface-blue h3,
.wp-block-group.is-style-onk-surface-mint h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.wp-block-group.is-style-onk-surface h4,
.wp-block-group.is-style-onk-surface-lilac h4,
.wp-block-group.is-style-onk-surface-peach h4,
.wp-block-group.is-style-onk-surface-blue h4,
.wp-block-group.is-style-onk-surface-mint h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.wp-block-group.is-style-onk-surface p:last-child,
.wp-block-group.is-style-onk-surface-lilac p:last-child,
.wp-block-group.is-style-onk-surface-peach p:last-child,
.wp-block-group.is-style-onk-surface-blue p:last-child,
.wp-block-group.is-style-onk-surface-mint p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Lists Inside Surfaces
   ========================================================================== */

.wp-block-group.is-style-onk-surface ul,
.wp-block-group.is-style-onk-surface-lilac ul,
.wp-block-group.is-style-onk-surface-peach ul,
.wp-block-group.is-style-onk-surface-blue ul,
.wp-block-group.is-style-onk-surface-mint ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.wp-block-group.is-style-onk-surface ol,
.wp-block-group.is-style-onk-surface-lilac ol,
.wp-block-group.is-style-onk-surface-peach ol,
.wp-block-group.is-style-onk-surface-blue ol,
.wp-block-group.is-style-onk-surface-mint ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}

.wp-block-group.is-style-onk-surface li,
.wp-block-group.is-style-onk-surface-lilac li,
.wp-block-group.is-style-onk-surface-peach li,
.wp-block-group.is-style-onk-surface-blue li,
.wp-block-group.is-style-onk-surface-mint li {
  margin-bottom: 0.75rem;
}

.wp-block-group.is-style-onk-surface li:last-child,
.wp-block-group.is-style-onk-surface-lilac li:last-child,
.wp-block-group.is-style-onk-surface-peach li:last-child,
.wp-block-group.is-style-onk-surface-blue li:last-child,
.wp-block-group.is-style-onk-surface-mint li:last-child {
  margin-bottom: 0;
}

/* Colored list markers */
.wp-block-group.is-style-onk-surface li::marker,
.wp-block-group.is-style-onk-surface-lilac li::marker,
.wp-block-group.is-style-onk-surface-peach li::marker,
.wp-block-group.is-style-onk-surface-blue li::marker,
.wp-block-group.is-style-onk-surface-mint li::marker {
  color: var(--onk-surface-accent);
}

/* ==========================================================================
   Color Variants
   ========================================================================== */

/* Lilac / Purple */
.wp-block-group.is-style-onk-surface-lilac {
  --onk-surface-bg: #f6f0ff;
  --onk-surface-border: #e5d4ff;
  --onk-surface-accent: #9c45ff;
}

/* Peach / Orange */
.wp-block-group.is-style-onk-surface-peach {
  --onk-surface-bg: #fff3e7;
  --onk-surface-border: #ffd9b5;
  --onk-surface-accent: #ff8b3d;
}

/* Blue */
.wp-block-group.is-style-onk-surface-blue {
  --onk-surface-bg: #edf6ff;
  --onk-surface-border: #c7e0ff;
  --onk-surface-accent: #2c7be5;
}

/* Mint / Green */
.wp-block-group.is-style-onk-surface-mint {
  --onk-surface-bg: #e8fbf2;
  --onk-surface-border: #bcf0d7;
  --onk-surface-accent: #18a566;
}

/* ==========================================================================
   Cards Grid (Columns Block)
   ========================================================================== */

/* Cards grid container */
.wp-block-columns.is-style-onk-cards-grid {
  row-gap: 1.5rem;
  column-gap: 1.5rem;
  align-items: stretch;
}

/* Ensure each column stretches */
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column {
  display: flex;
}

/* Surface inside a grid column should fill height */
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column > .wp-block-group.is-style-onk-surface,
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column > .wp-block-group.is-style-onk-surface-lilac,
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column > .wp-block-group.is-style-onk-surface-peach,
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column > .wp-block-group.is-style-onk-surface-blue,
.wp-block-columns.is-style-onk-cards-grid > .wp-block-column > .wp-block-group.is-style-onk-surface-mint {
  width: 100%;
  height: 100%;
  margin-block: 0; /* Remove vertical margin when inside grid */
}

/* Responsive behavior */
@media (max-width: 782px) {
  .wp-block-columns.is-style-onk-cards-grid {
    flex-wrap: wrap;
  }

  .wp-block-columns.is-style-onk-cards-grid > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ==========================================================================
   First/Last Child Margin Reset (works in both frontend and editor)
   ========================================================================== */

/* Frontend: direct children */
.wp-block-group[class*="is-style-onk-surface"] > *:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.wp-block-group[class*="is-style-onk-surface"] > *:last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* Editor: nested inside block-list wrappers */
.wp-block-group[class*="is-style-onk-surface"] .block-editor-block-list__layout > .wp-block:first-child,
.wp-block-group[class*="is-style-onk-surface"] .block-editor-block-list__layout > [data-block]:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.wp-block-group[class*="is-style-onk-surface"] .block-editor-block-list__layout > .wp-block:last-child,
.wp-block-group[class*="is-style-onk-surface"] .block-editor-block-list__layout > [data-block]:last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}