/* ==========================================================================
   Methods Section
   Two-column layout: text on the left, 4 method items stacked on the right.
   Each item has an icon connected by a vertical timeline line.
   ========================================================================== */

.methods {
    background-color: var(--color-light-blue);
    padding-block: var(--section-padding);
}

/* Two-column grid */
.methods__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Left column */
.methods__left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.methods__heading {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--color-navy);
    line-height: 1.2;
}

.methods__description {
    font-size: var(--font-size-body);
    color: var(--color-text-light);
    line-height: 1.75;
}

.methods__description p {
    margin: 0 0 var(--space-sm);
}

.methods__description p:last-child {
    margin-bottom: 0;
}

/* Right column: stacked method items with icon timeline */
.methods__right {
    display: flex;
    flex-direction: column;
}

/* Each method item: icon-col + body side by side */
.method-item {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
    border: none;
}

/* Icon column: icon + vertical line below */
.method-item__icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
}

.method-item__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-item__icon img {
    width: 36px;
    height: 36px;
    display: block;
}

/* Vertical timeline line connecting icons */
.method-item__line {
    width: 2px;
    flex: 1;
    background-color: var(--color-blue);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 2rem;
}

/* Body: title + description */
.method-item__body {
    padding-bottom: 2.5rem;
}

.method-item:last-child .method-item__body {
    padding-bottom: 0;
}

.method-item__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 0.25rem;
}

.method-item__description {
    font-size: var(--font-size-body-small);
    color: var(--color-text-light);
    line-height: 1.65;
}

.method-item__description p {
    margin: 0 0 var(--space-sm);
}

.method-item__description p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Timeline Entry Animation
   Sequential: icon pop -> text fade -> line draw -> next item.
   .has-reveal scopes everything so no-JS users see content immediately.
   ========================================================================== */

/* Initial hidden states */
.has-reveal .method-item__icon {
    transform: scale(0);
    opacity: 0;
}

.has-reveal .method-item__body {
    opacity: 0;
    transform: translateY(6px);
}

.has-reveal .method-item__line {
    transform: scaleY(0);
    transform-origin: top center;
}

/* Icon pop - scale with elastic overshoot */
.has-reveal .method-item__icon.is-animated {
    animation: methodIconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes methodIconPop {
    0%   { transform: scale(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Text fade-in */
.has-reveal .method-item__body.is-animated {
    animation: methodTextIn 0.35s ease forwards;
}

@keyframes methodTextIn {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Line draw downward */
.has-reveal .method-item__line.is-animated {
    animation: methodLineDraw 0.4s ease forwards;
}

@keyframes methodLineDraw {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

/* Reduced motion - show everything immediately */
@media ( prefers-reduced-motion: reduce ) {
    .has-reveal .method-item__icon,
    .has-reveal .method-item__body,
    .has-reveal .method-item__line {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---- Desktop: 40/60 split ---- */
@media ( min-width: 1024px ) {
    .methods__grid {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
    }

    .methods__left {
        flex: 0 0 52%;
        max-width: 52%;
    }

    .methods__right {
        flex: 1;
    }

    .method-item__title {
        font-size: 1.125rem;
    }
}