/* ==========================================================================
   CertsPoint homepage — section 4 "Turn Your Study Time Into Exam Readiness"
   Loaded only by frontend/certspoint/pages/home.blade.php. Selectors: cpx-steps-*.
   The card grid, numbers, borders and spacing keep their existing cph-journey rules
   in home.css; this file only styles the new centred header and the decorations.
   ========================================================================== */

.cpx-steps {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.cpx-steps .cph-journey__inner {
    position: relative;
    z-index: 1;
}

/* ── Centred header (replaces the old two-column header row) ───────────── */
.cpx-steps__header {
    margin: 0 auto 80px;
    position: relative;
    text-align: center;
}

.cpx-steps__title {
    color: #0a0a0a;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0;
}

.cpx-steps__intro {
    color: #1c1c1e;
    font-size: clamp(16px, 1.5vw, 26px);
    line-height: 1.5;
    margin: 18px auto 0;
    max-width: 46em;
}

/* Reference line break ("…practicing the / skills, …") on wide screens; balanced wrapping below. */
.cpx-steps__br { display: none; }
@media (min-width: 1024px) { .cpx-steps__br { display: inline; } }
@media (max-width: 1023px) { .cpx-steps__intro { text-wrap: balance; } }

/* ── Decorations (aria-hidden SVG, behind the content, never interactive) ── */
.cpx-steps__decor {
    color: #d3d8df;
    display: block;
    height: auto;
    pointer-events: none;
    position: absolute;
    user-select: none;
    z-index: 0;
}

.cpx-steps__decor--circuit-tl {
    left: 0;
    top: 0;
    width: clamp(120px, 10vw, 210px);
}

.cpx-steps__decor--circuit-br {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
    width: clamp(120px, 10vw, 210px);
}

.cpx-steps__decor--cloud-tr {
    right: -18px;
    top: clamp(40px, 4.2vw, 84px);
    width: clamp(96px, 7.4vw, 150px);
}

/* smaller cloud on the right, between the intro and the card panel */
.cpx-steps__decor--cloud-rm {
    bottom: -56px;
    right: -40px;
    width: clamp(92px, 7.2vw, 140px);
}

/* ── Header spacing follows the section's existing breakpoints ─────────── */
@media (max-width: 1100px) {
    .cpx-steps__header { margin-bottom: 60px; }
    .cpx-steps__decor--cloud-rm { bottom: -48px; right: -20px; }
}

@media (max-width: 1023px) {
    .cpx-steps__header { margin-bottom: 48px; }
    .cpx-steps__decor--cloud-rm { display: none; }
    .cpx-steps__decor--cloud-tr { top: 18px; width: 84px; }
    .cpx-steps__decor--circuit-tl,
    .cpx-steps__decor--circuit-br { width: 104px; }
}

@media (max-width: 767px) {
    .cpx-steps__header { margin-bottom: 40px; }
    .cpx-steps__intro { margin-top: 14px; }
    .cpx-steps__decor--circuit-tl,
    .cpx-steps__decor--circuit-br { width: 72px; }
    .cpx-steps__decor--cloud-tr { right: -14px; top: 6px; width: 62px; }
}