/* ==========================================================================
   PRLinkUp — Layout: containers, sections, grids, section headers
   ========================================================================== */

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: calc(820px + var(--gutter) * 2);
}

/* Wide editorial container (1440px) used by the home sections and footer */
.container-wide {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

/* "(03)  WHY PRLINKUP  ———" */
.sec-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-600);
}

.sec-meta::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(26, 29, 30, 0.12);
}

.sec-meta__index {
    color: var(--violet-500);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
}

.sec-meta--light {
    color: rgba(255, 255, 255, 0.66);
}

.sec-meta--light::after {
    background: rgba(255, 255, 255, 0.14);
}

.sec-meta--light .sec-meta__index {
    color: var(--lavender);
}

/* ---------- Sections ---------- */
.section {
    position: relative;
    padding-block: var(--section-y);
}

.section--alt {
    background: var(--color-bg-alt);
}

.section--soft {
    background: var(--grad-soft);
}

.section--mist {
    background: var(--grad-mist);
}

.section--royal {
    background: var(--grad-royal);
    color: var(--white);
    overflow: hidden;
}

.section--royal h2,
.section--royal h3 {
    color: var(--white);
}

.section--tight {
    padding-block: var(--sp-12);
}

/* ---------- Section header ---------- */
.section-head {
    max-width: 680px;
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head__title {
    margin-top: var(--sp-4);
}

.section-head__lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--color-text-secondary);
}

.section--royal .section-head__lead {
    color: rgba(255, 255, 255, 0.74);
}

/* ---------- Grids ---------- */
.grid {
    display: grid;
    gap: var(--sp-6);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
}