/**
 * @file
 * Paragraph: p_advantages / p_advantage — zigzag list of illustrated points.
 *
 * Replaces the advertising_opportunities + our_advertising_services Views
 * blocks (markup ported from the dead `.view-advertising-opportunities` /
 * `.view-our-advertising-services` rules in views-blocks.css). Each row is a
 * 2-col grid (image | text); the image sits on a var(--grayMoreLight) rounded panel and
 * alternates side per row. Own library `bootstrap_subtheme/p-advantages`,
 * auto-attached in bootstrap_subtheme_preprocess_paragraph__p_advantages() —
 * NOT @imported into style.css.
 */

.p-advantages {
    position: relative;
    max-width: var(--content-max);
    margin-inline: auto;
    /* Generic full-section padding (matches card-grid / brand-grid). */
    padding-block: 180px;
    color: var(--black);
}
.p-advantages__inner {
    position: relative;
    z-index: 1;
}

/* "Dark background" toggle — full-bleed light-gray (--grayMoreLight) shaded band
   behind the section (same UX/pattern as p_rich_text--dark, p_data_chart's band).
   Scrollbar-safe full-bleed (same trick as .p-brand-grid--dark). Text stays black. */
/* On the gray band the image panels turn white so they read as cards instead of
   blending into the band (panels default to the same #F7F7F9). */

/* Optional section title — centered, matches the old header block. */
.p-advantages__title {
    color: var(--black);
    text-align: center;
    max-width: 840px;
    margin: 0 auto 80px;
}

/* Optional subtitle — centered black intro copy under the title (Figma
   15156:101836: Body L, black, 36px below the title). When present it absorbs
   the header gap, so collapse the title's bottom margin to the 36px Figma gap. */
.p-advantages__title:has(+ .p-advantages__subtitle) {
    margin-bottom: 36px;
}
.p-advantages__subtitle {
    color: var(--black);
    text-align: center;
    max-width: 840px;
    margin: 0 auto 80px;
}
.p-advantages__subtitle :where(p):last-child {
    margin-bottom: 0;
}

.p-advantages__list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Neutralise the Drupal field wrappers so each .field__item (one row) is a
   direct flex child of the list and :nth-child zigzag works. */
.p-advantages__list > .field,
.p-advantages__list > .field > .field__items {
    display: contents;
}

/* ===== Row ===== */
.p-advantage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: center;
}

/* Image on a light-gray rounded panel. */
.p-advantage__media {
    background-color: var(--grayMoreLight);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.p-advantage__media :is(img, picture) {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* Even rows flip the image to the right (grid `order` reorders auto-placement).
   Both selectors so it works whether or not the theme wraps rows in
   .field__item. */
.p-advantages__list > .field__item:nth-child(even) .p-advantage__media,
.p-advantages__list > .field > .field__item:nth-child(even) .p-advantage__media,
.p-advantages__list > .p-advantage:nth-child(even) .p-advantage__media {
    order: 2;
}

/* Text column — heading + body vertically centered against the image. */
.p-advantage__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding-inline: 24px;
}
.p-advantage__title {
    color: var(--black);
    margin: 0;
}
.p-advantage__text {
    font-family: var(--font);
    font-weight: var(--fw-medium);
    font-size: var(--BodyM);
    line-height: var(--lh-body);
    color: var(--black);
}
.p-advantage__text p {
    margin: 24px 0;
}
.p-advantage__text p:first-child {
    margin-top: 0;
}
.p-advantage__text p:last-child {
    margin-bottom: 0;
}
.p-advantage__text ul,
.p-advantage__text ol {
    margin: 0;
    padding-inline-start: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .p-advantages {
        padding-block: 120px;
    }
    .p-advantages__title {
        margin-bottom: 48px;
    }
    /* Stack: image always on top, text below — cancel the even-row flip. */
    .p-advantage {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .p-advantages__list > .field__item:nth-child(even) .p-advantage__media,
    .p-advantages__list > .field > .field__item:nth-child(even) .p-advantage__media,
    .p-advantages__list > .p-advantage:nth-child(even) .p-advantage__media {
        order: 0;
    }
    .p-advantage__body {
        padding-inline: 0;
        gap: 12px;
    }
    .p-advantage__text p {
        margin: 12px 0;
    }
}

@media (max-width: 767px) {
    .p-advantages {
        padding-block: 80px;
    }
    .p-advantages__list {
        gap: 40px;
    }
}