/* Purpose: Layout primitives — container, section skins, section heading block, two-column split and media frame. */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* Sections */
.sec { padding: var(--sec) 0; }
.sec-white { background: var(--color-bg); }
.sec-mist { background: var(--color-bg-alt); }
.sec-dark { background: var(--color-primary-dark); color: var(--color-ivory); position: relative; overflow: hidden; }
.sec-dark .lede, .sec-dark .muted { color: var(--color-ivory-soft); }
.sec-white h2, .sec-mist h2 { color: var(--color-primary); }

/* Section head (identical everywhere) */
.head { margin-bottom: var(--head-gap); }
.head h2 { max-width: 18em; }
.head .lede { margin-top: var(--space-4); }
.head.center { text-align: center; }
.head.center h2, .head.center .lede { margin-left: auto; margin-right: auto; }
.head.center h2 { max-width: 20em; }
.split .head { margin-bottom: var(--space-8); }

/* Split — one grid for every two-column section (mobile: stacked, media first) */
.split { display: grid; grid-template-columns: 1fr; gap: var(--col-gap); align-items: center; }
.sec-dark .split { position: relative; }

.media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-secondary); }
.media > img:not(.seal) { width: 100%; height: 100%; object-fit: cover; }
.media::after { content: ""; position: absolute; inset: var(--space-4); border: 1px solid var(--color-accent-line); pointer-events: none; }
.split > .media { order: -1; aspect-ratio: 4 / 3; }

.actions { margin-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.actions .btn { width: 100%; align-self: stretch; }

/* md */
@media (min-width: 641px) {
  .actions .btn { width: auto; align-self: auto; }
}

/* lg */
@media (min-width: 901px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split > .media { order: 0; aspect-ratio: 4 / 5; }
}