/* ==========================================================================
   Content section: H2 + image + text + H3 structure
   ========================================================================== */

.content-section {
    display: grid;
    gap: var(--space-md);
}

.content-section__title {
    position: relative;
    padding-bottom: var(--space-2xs);
    scroll-margin-top: 6rem;
}

.content-section__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(5rem, 18vw, 9rem);
    height: 3px;
    background-image: var(--gradient-accent-line);
}

.content-section__subtitle {
    margin-top: var(--space-2xs);
    scroll-margin-top: 6rem;
}

.content-section__body {
    display: grid;
    gap: var(--space-md);
}

/* H3 -> text spacing is 16px, paragraphs keep 20px. */
.content-section__subtitle + * {
    margin-top: calc(var(--space-h3) - var(--space-md));
}

.content-section__text {
    max-width: none;
}

.content-section__link {
    color: var(--color-link);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition), text-decoration-color var(--transition);
}

.content-section__link:hover,
.content-section__link:focus-visible {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}

.content-section__list {
    display: grid;
    gap: var(--space-2xs);
    list-style: none;
}

.content-section__list-item {
    position: relative;
    padding-left: var(--space-md);
}

.content-section__list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .5rem;
    height: .5rem;
    background-color: var(--color-accent);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Images after an H2 are always shown in full - never cropped. */
.content-section__figure {
    margin: 0;
    background-color: var(--color-bg-dark);
    clip-path: var(--clip-cut);
}

.content-section__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.content-section__cta {
    justify-self: start;
    min-width: 12rem;
}

/* --- Tables ----------------------------------------------------------- */
.content-section__table-wrap {
    width: 100%;
    overflow-x: auto;
}

.content-table {
    min-width: 32rem;
    background-color: var(--color-card);
    clip-path: var(--clip-cut);
    text-align: left;
}

.content-table__th {
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-cold);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    vertical-align: top;
}

.content-table__row .content-table__th {
    background-color: var(--color-bg-dark);
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
}

.content-table__td {
    padding: var(--space-xs) var(--space-sm);
    border-top: 1px solid var(--color-divider);
    vertical-align: top;
}

.content-table__row .content-table__th {
    border-top: 1px solid var(--color-divider);
}