/* Dark Editorial Card
   All colors/radii/padding that can be editor-controlled are applied
   as utility classes on the markup. This file only provides layout,
   typography, and derived accents — none of it shadows those utilities.

   Theme-wiring contract:
     - `.dec` and `.dec__card` never set background-color or border-radius.
     - `.dec__card` never sets `color` directly; the text-* utility wins.
     - Accents (quote border, link underline) use var(--clr-tertiary) so
       they track the theme's coral palette.
*/

.dec__section {
  padding-top:    var(--dec-section-pt, var(--space-3xl));
  padding-bottom: var(--dec-section-pb, var(--space-3xl));
}

.dec__card {
  padding: var(--space-xl);
}
@media (min-width: 768px) {
  .dec__card { padding: var(--space-2xl); }
}
@media (min-width: 1024px) {
  .dec__card { padding: var(--space-4xl) var(--space-3xl); }
}

.dec__heading,
.dec__heading > * {
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 400;
  text-wrap: balance;
  color: inherit;
}
.dec__heading {
  margin: 0 0 var(--space-2xl) 0;
}
.dec__heading > * {
  margin: 0;
}
@media (min-width: 1024px) {
  .dec__heading { margin-bottom: var(--space-3xl); }
}

.dec__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 1024px) {
  .dec__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-4xl);
    align-items: center;
  }
}

.dec__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.dec__body {
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-lg), 1.5vw, var(--font-size-xl));
  line-height: 1.6;
  color: inherit;
  opacity: 0.82;
  max-width: none;
}
.dec__body p { margin: 0; }
.dec__body p + p { margin-top: var(--space-md); }
.dec__body > :first-child { margin-top: 0; }
.dec__body > :last-child  { margin-bottom: 0; }

.dec__link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: inherit;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--clr-tertiary);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.dec__link:hover {
  color: var(--clr-tertiary);
}

.dec__quote {
  border-left: 3px solid var(--clr-tertiary);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  margin: 0;
}
.dec__quote p {
  font-family: var(--font-handwritten);
  font-style: italic;
  font-size: clamp(var(--font-size-2xl), 2.6vw, var(--font-size-4xl));
  line-height: 1.25;
  color: inherit;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}