/* ========== SECTION HEADER ========== */
.section-header {
    text-align: center;
    padding: clamp(4rem, 8vw, 6.25rem) clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
    max-width: 50rem;
    margin: 0 auto;
}

.section-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 500;
    color: var(--grey-dark, hsl(0 0% 20%));
    margin-bottom: 0.4em;
    line-height: var(--lh-tight, 1.15);
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    color: var(--punchline-warm-muted, hsl(30 15% 50%));
    max-width: 35rem;
    margin: 0 auto;
    line-height: var(--lh-relaxed, 1.7);
}

/* ========== PROCESS BLOCKS CONTAINER ========== */
.process-blocks {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 6.25rem);
}

/* ========== INDIVIDUAL PROCESS BLOCK ========== */
.process-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

/* Alternating layouts */
.process-block:nth-child(even) {
    direction: rtl;
}

.process-block:nth-child(even) > * {
    direction: ltr;
}

/* Image container */
.process-image {
    position: relative;
}

.process-image-main {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow:
        0 0.25rem 0.375rem hsl(0 0% 0% / 0.02),
        0 1.5rem 3.75rem hsl(0 0% 0% / 0.12);
}

.process-image-main img {
    width: 100%;
    height: clamp(18.75rem, 40vw, 30rem);
    object-fit: cover;
    display: block;
}

/* Floating accent image */
.process-image-accent {
    position: absolute;
    width: clamp(7.5rem, 15vw, 11.25rem);
    height: clamp(7.5rem, 15vw, 11.25rem);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow:
        0 0.25rem 0.375rem hsl(0 0% 0% / 0.02),
        0 1rem 2.5rem hsl(0 0% 0% / 0.15);
    border: 2px solid var(--punchline-warm-light, hsl(30 30% 90%));
}

.process-block:nth-child(odd) .process-image-accent {
    bottom: -2.5rem;
    right: -2.5rem;
}

.process-block:nth-child(even) .process-image-accent {
    bottom: -2.5rem;
    left: -2.5rem;
}

.process-image-accent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.process-content {
    padding: 1.25rem 0;
}

/* Step badge */
.process-badge {
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: var(--punchline-terracotta);
    color: var(--white);
    font-size: .57em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.125rem 0.75rem hsl(0 0% 0% / 0.06);
}

.process-badge svg {
    width: 0.55em;
    height: auto;
    fill: currentColor;
}

/* Title */
.process-block .process-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 500;
    margin-bottom: 0.4em;
    line-height: var(--lh-tight, 1.2);
    text-align: left;
}

.process-tagline {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--punchline-warm-muted, hsl(30 15% 50%));
    margin-bottom: 2em;
    line-height: var(--lh-relaxed, 1.7);
    max-width: 27.5rem;
}

/* Step list */
.step-list {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    margin-bottom: 2.25em;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    padding: 1.25em 1.5em;
    background: white;
    border-radius: 1em;
    box-shadow: 0 0.125rem 0.5rem hsl(0 0% 0% / 0.04);
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateX(0.5rem);
    box-shadow: 0 0.25rem 1.25rem hsl(0 0% 0% / 0.08);
}

.step-icon {
    width: 3em;
    height: 3em;
    background: linear-gradient(135deg, hsl(45 100% 95%) 0%, hsl(45 100% 91%) 100%);
    border-radius: 0.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-icon svg {
    width: 1.5em;
    height: 1.5em;
    color: var(--punchline-gold, hsl(45 80% 50%));
}

.step-text {
    flex: 1;
}

.step-text h4 {
    font-size: 1em;
    font-weight: var(--fw-semibold, 600);
    color: var(--grey-dark, hsl(0 0% 20%));
    margin-bottom: 0.25em;
}

.step-text p {
    font-size: 0.875em;
    color: var(--punchline-warm-muted, hsl(30 15% 50%));
    line-height: var(--lh-normal, 1.5);
    margin: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 56.25rem) {
    .process-block {
        grid-template-columns: 1fr;
    }

    .process-block:nth-child(even) {
        direction: ltr;
    }

    .process-image-accent {
        bottom: -1.5rem;
        right: -1rem !important;
        left: auto !important;
        pointer-events: none; /* Prevent touch interception on iOS */
    }

    .process-decoration {
        display: none;
    }

    .process-content {
        position: relative; /* Establish stacking context */
        z-index: 1; /* Ensure content (including buttons) is above accent image */
        padding: 0;
    }
}

@media (max-width: 37.5rem) {
    .step-item {
        padding: 1em;
    }

    .step-item:hover {
        transform: none;
    }
}