/* ============================================
   SERVICES PAGE — extends css/style.css
   Splatter / brushstroke aesthetic shared with about page
   ============================================ */

/* ============================================
   DECORATIVE SPLATTERS (behind content)
   ============================================ */
.splat {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}
.splat-hero-tr {
    background-image: url('../images/splat-big.png');
    width: 520px;
    height: 520px;
    top: 40px;            /* pushed down so the splat reads as "decorating" the section, not bleeding off the page */
    right: -120px;
    opacity: 0.55;
    transform: rotate(15deg);
}
.splat-process-br {
    /* big splatter mid-right of process section */
    background-image: url('../images/splat-big.png');
    width: 540px;
    height: 540px;
    top: 20%;
    right: -90px;
    opacity: 0.5;
    transform: rotate(40deg);
}
.splat-craft-bl {
    background-image: url('../images/splat-small.png');
    width: 220px;
    height: 130px;
    bottom: 40px;
    left: 20px;
    opacity: 0.6;
    transform: rotate(-10deg);
}

/* ============================================
   FRAMED PHOTO COMPONENT — RECT VARIANT
   Used for craft cards. Pure CSS frame (box-shadow) since
   the original frame-rect.png only had top/bottom strokes.
   ============================================ */
.framed-photo {
    position: relative;
    width: 100%;
    display: block;
    z-index: 2;
}
.framed-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.framed-photo--rect {
    aspect-ratio: 4 / 3;
    padding: 6px 8px;
    background-color: var(--bg, #0a0a0a);
    /* Layered drop shadows give the bright neon-pink edge feel */
    box-shadow:
            0 0 0 3px var(--pink, #ec1b8d),
            0 0 14px rgba(236, 27, 141, 0.45),
            0 6px 20px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    transition: transform 0.4s ease;
}
/* Hide the legacy PNG frame overlay since we draw the frame in CSS */
.framed-photo--rect .frame-img {
    display: none;
}
.framed-photo--rect img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cards sit straight; hover gives a clean lift */
.craft-card:hover .framed-photo--rect {
    transform: translateY(-3px);
}

/* ============================================
   BRUSHSTROKE UNDERLINE
   ============================================ */
.script.underlined {
    position: relative;
    display: inline-block;
    padding-bottom: 0;
}
.script.underlined::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -2px;
    height: 22px;
    background-image: url('../images/brush-underline.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* ============================================
   SERVICES FIRST SECTION
   The opening section needs extra top padding to clear the
   fixed nav, plus eyebrow styling above the section heading.
   ============================================ */
.services-first .eyebrow {
    text-align: center;
    color: var(--pink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ============================================
   SECTION SHARED
   ============================================ */
.services-section {
    position: relative;
    background: var(--bg);
    padding: 70px 40px 80px;
    overflow: hidden;
}
/* Opening section padding-top matches gallery-first's 130px so "What I create"
   aligns vertically with the gallery page's "My work" heading. Must live AFTER
   .services-section because that selector's `padding` shorthand would otherwise
   reset padding-top (same specificity, later wins in CSS source order). */
.services-first {
    padding-top: 130px;
}
.services-section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.section-h {
    font-family: var(--display);
    font-weight: 400;
    font-size: 46px;
    line-height: 1;
    color: #fff;
    margin-bottom: 28px;
}
.section-h .script {
    font-family: var(--script);
    color: var(--pink);
    font-size: 72px;
    font-weight: 700;
    margin-left: 6px;
}
.section-h.centered {
    text-align: center;
    margin-bottom: 16px;
}
.centered-lede {
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
    max-width: 600px;
    margin: 0 auto 50px;
}

/* ============================================
   CRAFT GRID — rect-framed photos
   ============================================ */
.craft-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 44px;
    margin-top: 28px;
}
.craft-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
    align-items: center;
    scroll-margin-top: 100px;   /* anchor offset for nav clicks */
    /* Reset default link styling when .craft-card is used on an <a> tag */
    text-decoration: none;
    color: inherit;
}
.craft-card:hover,
.craft-card:focus-visible {
    text-decoration: none;
}
.craft-card:focus-visible {
    outline: 2px solid var(--pink, #ec1b8d);
    outline-offset: 6px;
    border-radius: 4px;
}
/* If there's an odd number of cards, the last card sits alone on its row.
   Span it across both columns and cap its inner width so it stays centered
   and doesn't stretch awkwardly across the full grid width. */
.craft-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 22px);
    margin: 0 auto;
}
.craft-card .framed-photo {
    margin: 0;
}
.craft-card-body { padding: 0; }
.craft-card-title {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.craft-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   PROCESS STEPS — vertical splatter chain on left
   The chain image is rendered as a ::before, given an explicit
   min-height so it stretches down beside all 4 steps regardless
   of content. Each step is forced into one of 4 equal-height rows.
   ============================================ */
.services-process .services-section-inner {
    max-width: 880px;
}
.process-steps {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 50px 36px;
    z-index: 2;
}
/* Vertical pink drip line connecting the splat badges down the left column */
.process-steps::before {
    content: '';
    position: absolute;
    left: 70px;
    top: 70px;
    bottom: 70px;
    width: 5px;
    transform: translateX(-50%);
    background: linear-gradient(
            to bottom,
            rgba(236, 27, 141, 0.85) 0%,
            rgba(236, 27, 141, 0.65) 50%,
            rgba(236, 27, 141, 0.25) 100%
    );
    border-radius: 4px;
    filter: drop-shadow(0 0 8px rgba(236, 27, 141, 0.5));
    z-index: 0;
}
.process-step {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 36px;
    grid-column: 1 / -1;
    align-items: center;
    padding: 0;
    position: relative;
}
/* Each step gets a numbered splat badge in the left column */
.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 120px;
    position: relative;
    z-index: 1;
    background-image: url('../images/splat-small.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 4px 14px rgba(236, 27, 141, 0.55));
    font-family: var(--script);
    font-weight: 700;
    font-size: 44px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
/* Slight rotation alternation for a hand-placed feel */
.process-step:nth-child(1) .step-num { transform: rotate(-3deg); }
.process-step:nth-child(2) .step-num { transform: rotate(2deg); }
.process-step:nth-child(3) .step-num { transform: rotate(-2deg); }
.process-step:nth-child(4) .step-num { transform: rotate(3deg); }

.step-body h3 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.step-body p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .services-section { padding: 50px 20px; }
    .services-first {
        padding-top: 175px;
    }

    .section-h { font-size: 34px; }
    .section-h .script { font-size: 52px; }

    /* Splatters: scale down + lower opacity on mobile */
    .splat-hero-tr { width: 320px; height: 320px; top: 30px; right: -90px; opacity: 0.4; }
    .splat-process-br { width: 320px; height: 320px; right: -80px; opacity: 0.3; }
    .splat-craft-bl { width: 160px; height: 90px; }

    /* Craft grid stacks */
    .craft-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .craft-card {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    /* Reset the centered-lone-card rule since mobile is single column anyway */
    .craft-card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }
    .craft-card-title { font-size: 20px; }
    .craft-card p { max-width: 460px; margin: 0 auto; }
    .craft-card .framed-photo--rect {
        max-width: 420px;
        margin: 0 auto;
    }

    /* Process steps on mobile: same badge + drip line pattern as desktop,
       just at smaller dimensions. */
    .process-steps {
        grid-template-columns: 88px 1fr;
        gap: 32px 18px;
        align-items: start;
    }
    .process-steps::before {
        left: 44px;
        top: 38px;
        bottom: 38px;
        width: 4px;
    }
    .process-step {
        grid-template-columns: 88px 1fr;
        gap: 18px;
        align-items: start;
    }
    .step-num {
        width: 88px;
        height: 78px;
        font-size: 28px;
    }
    .process-step:nth-child(1) .step-num { transform: rotate(-3deg); }
    .process-step:nth-child(2) .step-num { transform: rotate(2deg); }
    .process-step:nth-child(3) .step-num { transform: rotate(-2deg); }
    .process-step:nth-child(4) .step-num { transform: rotate(3deg); }
    .step-body { padding-top: 12px; }
    .step-body h3 { font-size: 20px; }
}

@media (max-width: 480px) {
    .section-h { font-size: 28px; }
    .section-h .script { font-size: 42px; }
    .process-steps {
        grid-template-columns: 72px 1fr;
        gap: 28px 14px;
    }
    .process-steps::before {
        left: 36px;
        top: 32px;
        bottom: 32px;
        width: 3px;
    }
    .process-step {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }
    .step-num {
        width: 72px;
        height: 64px;
        font-size: 24px;
    }
    .step-body { padding-top: 8px; }
    .step-body h3 { font-size: 19px; }
}