/**
 * MooseU Layout Builder section styles.
 *
 * These back the theme-provided layouts in mooseu.layouts.yml. A content
 * editor adds a section in Layout Builder and picks one of the "MooseU"
 * layouts — each carries a reusable brand treatment (whiteboard,
 * chalkboard, ribbon, card-band, feature-split) without anyone touching
 * CSS or needing the layout_builder_styles contrib module.
 *
 * The whiteboard/chalkboard/ribbon surfaces reuse the exact gradient
 * language captured from live (see mooseu-blocks.css) so sections and the
 * inline header/divider blocks read as one family.
 */

/* ── Base band ───────────────────────────────────────────────────── */
.mu-section {
  position: relative;
  padding: var(--mu-space-6) var(--mu-space-6);
  margin: var(--mu-space-5) 0;
  border-radius: var(--mu-radius-xl);
  overflow: hidden;
}

.mu-section > .mu-section__inner {
  max-width: var(--mu-container-max);
  margin-inline: auto;
}

/* ── Whiteboard ──────────────────────────────────────────────────── */
.mu-section--whiteboard {
  background:
    radial-gradient(120px 50px at 12% 70%, rgba(0, 165, 255, 0.08), transparent 60%),
    radial-gradient(150px 60px at 32% 35%, rgba(255, 0, 153, 0.06), transparent 65%),
    radial-gradient(180px 70px at 76% 45%, rgba(255, 214, 0, 0.10), transparent 60%),
    radial-gradient(140px 60px at 88% 80%, rgba(58, 138, 142, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow:
    inset 0 0 0 2px rgba(30, 58, 95, 0.18),
    inset 0 0 24px 8px rgba(30, 58, 95, 0.08),
    var(--mu-shadow-card);
}
.mu-section--whiteboard :is(h1, h2, h3, h4) { color: var(--mu-navy); }

/* ── Chalkboard ──────────────────────────────────────────────────── */
.mu-section--chalkboard {
  background:
    radial-gradient(200px 80px at 18% 30%, rgba(242, 193, 78, 0.18), transparent 60%),
    radial-gradient(240px 90px at 70% 65%, rgba(233, 138, 21, 0.14), transparent 65%),
    radial-gradient(220px 90px at 88% 25%, rgba(58, 138, 142, 0.16), transparent 70%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%),
    repeating-linear-gradient(10deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 8px),
    #1b2a29;
  border: 10px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 0 40px 12px rgba(255, 255, 255, 0.09),
    var(--mu-shadow-deep);
  color: #f6f7f8;
}
.mu-section--chalkboard :is(h1, h2, h3, h4, p, li, a) { color: #fff; }
.mu-section--chalkboard a { text-decoration: underline dotted; }

/* ── Ribbon (gold banner) ────────────────────────────────────────── */
.mu-section--ribbon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    linear-gradient(90deg, rgba(30, 58, 95, 0.12), rgba(30, 58, 95, 0) 18%, rgba(30, 58, 95, 0.12) 82%, rgba(30, 58, 95, 0)),
    linear-gradient(180deg, #ffe089, #ffd15a 40%, #ffb347);
  border: 6px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--mu-radius-lg);
}
.mu-section--ribbon :is(h1, h2, h3, h4) { color: var(--mu-navy); }

/* ── Card band (soft paper panel, good for grouped content) ──────── */
.mu-section--card-band {
  background:
    radial-gradient(circle at 50% 0%, rgba(246, 194, 68, 0.10) 0, transparent 40%),
    var(--mu-bg-paper);
  border: 1px solid var(--mu-bg-divider);
  box-shadow: var(--mu-shadow-card);
}

/* ── Card grid: children of the region flow into an auto-fit grid ──── */
.mu-section--card-grid > .mu-section__inner,
.layout--mu-card-grid > .mu-section__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mu-space-5);
  align-items: stretch;
}

/* Promote each direct block in a card-grid region to a lifted card. */
.mu-section--card-grid .mu-section__inner > * {
  background: var(--mu-bg-paper);
  border: 1px solid var(--mu-bg-divider);
  border-radius: var(--mu-radius-lg);
  padding: var(--mu-space-5);
  box-shadow: var(--mu-shadow-card);
  transition: transform var(--mu-duration-mid) var(--mu-easing),
              box-shadow var(--mu-duration-mid) var(--mu-easing);
}
.mu-section--card-grid .mu-section__inner > *:hover {
  transform: translateY(-3px);
  box-shadow: var(--mu-shadow-lift);
}

/* ── Feature split: image/intro emphasis (1fr | 2fr) ─────────────── */
.mu-section--feature {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--mu-space-6);
  align-items: center;
}
.mu-section--feature .layout__region--first img {
  width: 100%;
  height: auto;
  border-radius: var(--mu-radius-lg);
  box-shadow: var(--mu-shadow-lift);
}

/* ── Width + alignment helpers shared by the layouts ─────────────── */
.mu-section--center { text-align: center; }
.mu-section--center .mu-section__inner { max-width: 760px; }

@media (max-width: 768px) {
  .mu-section { padding: var(--mu-space-5) var(--mu-space-4); }
  .mu-section--feature { grid-template-columns: 1fr; }
}