/* ==========================================================================
   Impactful Speaking — V8 · UTILITIES (layout helpers, grids, text) · after base.css
   ========================================================================== */

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Section themes */
.s-dark    { background: var(--dark);     color: var(--text); }
.s-navy    { background: var(--dark2);    color: var(--text); }
.s-light   { background: var(--light);    color: var(--text-dark); }
.s-white   { background: var(--white);    color: var(--text-dark); }
.s-dpurple { background: var(--dpurp-bg); color: var(--text); }

/* Section padding */
.s-padding {
  padding-block: var(--section-pad);
}

.s-padding--blob-tr {
  position: relative;
  overflow: hidden;
}

.s-padding--blob-tr::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(20, 224, 251, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.s-padding--blob-bl {
  position: relative;
  overflow: hidden;
}

.s-padding--blob-bl::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(187, 75, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mt-10 { margin-top: 5rem; }

.float-right, .flush-right {
  float: inline-end;
}
.float-left, .flush-left {
  float: inline-start;
}


/* ==========================================================================
   5b. CONVICTIONS LIST (about page)
   ========================================================================== */

.convictions-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin-inline: auto;
}

.convictions-list__item {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border-light);
  align-items: flex-start;
}

.convictions-list__item:last-child { border-bottom: none; }

.convictions-list__num {
  font-family: var(--ff-heading);
  font-size: 2rem;
  font-weight: 700;
  background: var(--grad-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 0.2rem;
}

.convictions-list__body {
  flex: 1;
}

.convictions-list__title {
  font-family: var(--ff-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.convictions-list__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim-dark);
}