/* ============================================================
   WEB DESIGN BRISBANE — Section 6: Process (Two Phases)
   Cream background, greyish dashed lines. Intro + Phases 1-2 + What
   produces. Sticky title/icon columns + reveals are Phase 2/3.
   ============================================================ */
.wdb-process {
    position: relative;
    background: var(--color-white);
    color: var(--color-black2);
    padding: calc(var(--wdb-pad) * 2) 0;
}
.wdb-process__rail {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none; z-index: 2;
}
.wdb-process__rail--left  { left:  var(--pad-x); }
.wdb-process__rail--right { right: var(--pad-x); }

/* Intro */
.wdb-process__intro {
    padding: var(--wdb-pad) calc(var(--wdb-pad) * 2) calc(var(--wdb-pad) * 2);
    max-width: var(--container-default);
    margin: 0 auto;
    text-align: center;          /* all intro items horizontally centred */
}
.wdb-process__title {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
    font-size: var(--wdb-fs-section); color: var(--color-black2);
    margin: 0 0 var(--space-9);
}
.wdb-process__group { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; max-width: 60ch; margin: 0 auto; }
.wdb-process__group p { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed); color: var(--color-black2); margin: 0; }
.wdb-process__boxes { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; }
.wdb-process__box {
    min-width: 220px; text-align: center;
    padding: 25px 75px;
    /* dashed greyish stroke, square corners */
    border: var(--guide-width) var(--guide-style) var(--color-greyish); border-radius: 0;
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); font-size: var(--wdb-fs-sub); color: var(--color-black2);
}
/* boxes sit flush — drop the 2nd box's left border so the seam is a single
   shared dashed line (not two overlapping ones). */
.wdb-process__box + .wdb-process__box { border-left: none; }

/* Phases 1-2 */
.wdb-process__phases { position: relative; margin-top: var(--space-10); padding: 0 var(--pad-x); }
.wdb-phase {
    position: relative;
    /* icons column hugs the 60px icons with a symmetric pad on each side,
       so the seam line + right rail sit equidistant and close to the icons */
    --wdb-icons-col: calc(60px + var(--wdb-pad) * 2);
    display: grid;
    grid-template-columns: 370px 1fr var(--wdb-icons-col);   /* title | body | icons (hug) */
}
.wdb-phase__col { padding: var(--wdb-pad); }
.wdb-phase__title-col { max-width: 370px; }
.wdb-phase__eyebrow {
    display: block; font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); font-size: var(--wdb-fs-eyebrow);
    color: var(--color-greyish); margin-bottom: var(--space-3);
}
.wdb-phase__heading {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
    font-size: var(--wdb-fs-title); color: var(--color-black2); margin: 0;
}
.wdb-phase__body p { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed); color: var(--color-black2); margin: 0; }
.wdb-phase__body p + p { margin-top: 1.1em; }
.wdb-phase__icons { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.wdb-phase__icons img { display: block; width: 60px; height: 60px; }

/* greyish dashed lines for the phases rows */
.wdb-phase__hline { position: absolute; left: 0; width: 100%; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-greyish); pointer-events: none; }
.wdb-phase__hline--top { top: 0; }
.wdb-phase__hline--bottom { bottom: 0; }
.wdb-phase__vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--guide-width) var(--guide-style) var(--color-greyish); pointer-events: none; }
.wdb-phase__vline--1 { left: 370px; }       /* title | body seam */
.wdb-phase__vline--2 { right: var(--wdb-icons-col); }   /* body | icons seam (hugs icons) */

/* What produces */
.wdb-process__produces {
    max-width: 1000px; margin: var(--space-10) auto 0;
    display: grid; grid-template-columns: 390px 1fr; gap: 40px;
    padding: 0 calc(var(--wdb-pad) * 2);
}
.wdb-process__produces-title {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
    font-size: var(--wdb-fs-section); color: var(--color-black2); margin: 0;
}
.wdb-process__produces-body p { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed); color: var(--color-black2); margin: 0; }
.wdb-process__produces-body p + p { margin-top: 1.1em; }

/* Sticky columns (desktop only): the phase title + platform icons hold
   in place while the long body column scrolls past. Pure CSS sticky —
   align-self:start stops the grid item stretching to the row height
   (a stretched item can't stick). Offset clears the fixed nav. */
@media (min-width: 1024px) {
    .wdb-phase__title-col,
    .wdb-phase__icons {
        position: sticky;
        top: var(--pad-top-nav);
        align-self: start;
    }
    /* icons hug centre of their column → equal visual gap to the dashed
       lines on both sides (was flex-start, leaving dead space on the right) */
    .wdb-phase__icons { align-items: center; }
    /* double the inner padding on the title + body columns */
    .wdb-phase__title-col,
    .wdb-phase__body { padding: calc(var(--wdb-pad) * 2); }
}

/* TABLET — phase = [title | icons] on a row, body below. Double padding,
   no sticky (sticky is min-width:1024 only). */
@media (min-width: 768px) and (max-width: 1023px) {
    .wdb-phase {
        grid-template-columns: 1fr auto;
        grid-template-areas: "title icons" "body body";
        column-gap: var(--space-6);
    }
    .wdb-phase__vline { display: none; }
    .wdb-phase__title-col { grid-area: title; max-width: none; }
    .wdb-phase__icons { grid-area: icons; flex-direction: row; align-items: flex-start; gap: var(--space-5); }
    .wdb-phase__body { grid-area: body; }
    .wdb-phase__title-col,
    .wdb-phase__body,
    .wdb-phase__icons { padding: calc(var(--wdb-pad) * 2); }
    .wdb-process__produces { grid-template-columns: 1fr; }
}
/* MOBILE — stack, left-aligned: eyebrow+title, then icons row, then body. */
@media (max-width: 767px) {
    .wdb-process__rail { display: none; }
    /* consistent section rhythm (drop the intro's extra top so it isn't doubled) */
    .wdb-process { padding-top: var(--wdb-sec-y); padding-bottom: var(--wdb-sec-y); }
    .wdb-process__intro { padding-top: 0; }
    /* phases run full width so the phase h-lines reach the page edges */
    .wdb-process__phases { padding-left: 0; padding-right: 0; }
    .wdb-phase { display: flex; flex-direction: column; align-items: flex-start; }
    .wdb-phase__vline { display: none; }
    /* content inset by the page padding only */
    .wdb-phase__col { padding-left: var(--pad-x); padding-right: var(--pad-x); }
    .wdb-phase__title-col { order: 1; max-width: none; }
    .wdb-phase__icons { order: 2; flex-direction: row; gap: var(--space-5); }
    .wdb-phase__icons img { width: 44px; height: 44px; }   /* smaller icons on mobile */
    .wdb-phase__body { order: 3; margin-top: var(--space-4); }  /* more space between icons + body */
    .wdb-process__intro,
    .wdb-process__produces { padding-left: var(--wdb-pad); padding-right: var(--wdb-pad); }
    .wdb-process__produces { grid-template-columns: 1fr; }
    /* boxes fill the full page width; drop the OUTER vertical dashed lines
       (keep the shared middle seam + the top/bottom lines). The group is a
       centering flex column, so a 100vw width centres to full-bleed. */
    .wdb-process__boxes { width: 100vw; max-width: 100vw; }
    .wdb-process__box { padding: 20px 32px; min-width: 0; flex: 1; }
    .wdb-process__box:first-child { border-left: none; }
    .wdb-process__box:last-child  { border-right: none; }
}

/* ============================================================
   "Who Beinc's web design Brisbane services are for"
   Built to match wdb-process__produces, INVERSED: content on the
   LEFT, title on the RIGHT. Centred max-width grid — no internal
   dashed line, no sticky. Shares the white block's greyish side rails.
   ============================================================ */
.wdb-forwho { position: relative; background: var(--color-white); color: var(--color-black2); padding: calc(var(--wdb-pad) * 2) var(--pad-x); }
.wdb-forwho__rail { position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--guide-width) var(--guide-style) var(--color-greyish); pointer-events: none; z-index: 2; }
.wdb-forwho__rail--left  { left:  var(--pad-x); }
.wdb-forwho__rail--right { right: var(--pad-x); }

.wdb-forwho__grid {
    max-width: 1000px; margin: 0 auto;
    display: grid; grid-template-columns: 390px 1fr; gap: 40px;
    padding: 0 calc(var(--wdb-pad) * 2);
}
.wdb-forwho__title-col { order: -1; }   /* title column on the LEFT, body on the right */
.wdb-forwho__body p { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed); color: var(--color-black2); margin: 0; }
.wdb-forwho__body p + p { margin-top: 1.1em; }
.wdb-forwho__heading { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--wdb-fs-title); color: var(--color-black2); margin: 0; }

@media (max-width: 1023px) {
    .wdb-forwho__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .wdb-forwho__rail { display: none; }
    /* consistent section rhythm; content at the page padding only */
    .wdb-forwho { padding-top: var(--wdb-sec-y); padding-bottom: var(--wdb-sec-y); }
    .wdb-forwho__grid { padding-left: 0; padding-right: 0; }
}