/* ============================================================
   Creative Agency X — Homepage Section 12: Perth Service Area
   ============================================================

   Approved direction:
   Perth-first / Western-Australia-friendly / local market network.

   No images. No JS. Existing global typography remains authoritative.
   ============================================================ */

.cax-perth-area {
    --cax-perth-red: #F30101;
    --cax-perth-black: #000000;
    --cax-perth-white: #FFFFFF;

    width: 100%;
    background: var(--cax-perth-white);
    color: var(--cax-perth-black);
}

.cax-perth-area,
.cax-perth-area *,
.cax-perth-area *::before,
.cax-perth-area *::after {
    box-sizing: border-box;
}

.cax-perth-area__inner {
    width: min(
        var(--site-width, 1600px),
        calc(100% - (var(--site-gutter, 24px) * 2))
    );
    min-height: clamp(600px, 80svh, 760px);
    margin-inline: auto;
    padding:
        clamp(20px, 1.8vw, 30px)
        clamp(24px, 2.2vw, 36px)
        clamp(18px, 1.7vw, 28px);
    border: 1px solid var(--cax-perth-black);
    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1.75fr)
        minmax(0, .78fr)
        auto
        auto;
    gap: clamp(12px, 1.1vw, 18px);
}

/* ------------------------------------------------------------
   Meta
   ------------------------------------------------------------ */

.cax-perth-area__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cax-perth-area__label,
.cax-perth-area__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Epic Pro", Arial, Helvetica, sans-serif;
    font-size: var(--type-ui);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.cax-perth-area__section-number,
.cax-perth-area__slash {
    color: var(--cax-perth-red);
}

/* ------------------------------------------------------------
   Heading / intro + network
   ------------------------------------------------------------ */

.cax-perth-area__top {
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, .92fr);
    gap: clamp(34px, 4vw, 70px);
    align-items: center;
}

.cax-perth-area__intro {
    min-width: 0;
}

.cax-perth-area__heading {
    margin: 0;
    max-width: 780px;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.cax-perth-area__heading > span {
    display: block;
}

.cax-perth-area__terminal {
    display: inline-block;
    width: .20em;
    aspect-ratio: 1;
    margin-left: .11em;
    background: var(--cax-perth-red);
    vertical-align: .1em;
}

.cax-perth-area__intro-copy {
    max-width: 620px;
    margin: clamp(18px, 1.7vw, 26px) 0 0;
}

/* ------------------------------------------------------------
   Perth network
   ------------------------------------------------------------ */

.cax-perth-area__network {
    position: relative;
    width: min(100%, 660px);
    height: clamp(190px, 22svh, 250px);
    justify-self: end;
}

.cax-perth-area__network-line {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/*
 * Connect RED NODE → RED NODE only.
 * The earlier version extended beneath labels and the diagonal
 * overshot Cannington.
 */
.cax-perth-area__network-line--horizontal {
    top: 50%;
    left: 17%;
    width: 62%;
    height: 1px;
    background: var(--cax-perth-black);
    transform: translateY(-50%);
}

.cax-perth-area__network-line--vertical {
    top: 13%;
    left: 50%;
    width: 1px;
    height: 75%;
    background: var(--cax-perth-black);
    transform: translateX(-50%);
}

/*
 * A responsive diagonal drawn inside the exact centre → south-east
 * rectangle. This avoids angle/length overshoot caused by rotate().
 */
.cax-perth-area__network-line--diagonal {
    top: 50%;
    left: 50%;
    width: 29%;
    height: 39%;
    background:
        linear-gradient(
            to bottom right,
            transparent calc(50% - .55px),
            var(--cax-perth-black) calc(50% - .55px),
            var(--cax-perth-black) calc(50% + .55px),
            transparent calc(50% + .55px)
        );
}

.cax-perth-area__node {
    position: absolute;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.cax-perth-area__node-dot {
    position: relative;
    z-index: 5;
    display: block;
    width: 18px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cax-perth-red);
}

.cax-perth-area__node-label {
    position: relative;
    z-index: 4;
    padding: 2px 5px;
    background: var(--cax-perth-white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--type-ui);
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
    text-transform: uppercase;
}

.cax-perth-area__node--centre {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cax-perth-area__node--centre .cax-perth-area__node-dot {
    width: 34px;
}

.cax-perth-area__node--centre .cax-perth-area__node-label {
    order: 2;
}

.cax-perth-area__node--north {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.cax-perth-area__node--north .cax-perth-area__node-label {
    order: -1;
}

.cax-perth-area__node--west {
    top: 50%;
    left: 11%;
    transform: translate(-50%, -50%);
    grid-template-columns: auto auto;
    align-items: center;
}

.cax-perth-area__node--west .cax-perth-area__node-label {
    order: -1;
}

.cax-perth-area__node--east {
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
    grid-template-columns: auto auto;
    align-items: center;
}

.cax-perth-area__node--south_east {
    right: 6%;
    bottom: 12%;
    grid-template-columns: auto auto;
    align-items: center;
}

.cax-perth-area__node--south {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* ------------------------------------------------------------
   Six market groups
   ------------------------------------------------------------ */

.cax-perth-area__areas {
    min-height: 0;
    display: grid;
    grid-template-columns:
        repeat(var(--cax-perth-area-count, 6), minmax(0, 1fr));
    border-top: 1px solid var(--cax-perth-black);
    border-bottom: 1px solid var(--cax-perth-black);
}

.cax-perth-area__area {
    min-width: 0;
    padding:
        clamp(10px, .9vw, 14px)
        clamp(12px, 1.1vw, 18px);
    border-right: 1px solid rgba(0, 0, 0, .58);
}

.cax-perth-area__area:first-child {
    padding-left: 0;
}

.cax-perth-area__area:last-child {
    padding-right: 0;
    border-right: 0;
}

.cax-perth-area__area-number {
    display: block;
    color: var(--cax-perth-red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--type-ui-lg);
    font-weight: 700;
    line-height: 1;
}

.cax-perth-area__area-title {
    margin-top: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--type-h6);
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
}

.cax-perth-area__area-focus {
    margin: 8px 0 0;
    font-size: var(--type-ui-lg) !important;
    line-height: 1.32 !important;
}

/* ------------------------------------------------------------
   Suburb strip
   ------------------------------------------------------------ */

.cax-perth-area__suburbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--type-ui);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}

.cax-perth-area__suburbs i {
    color: var(--cax-perth-red);
    font-style: normal;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Closing
   ------------------------------------------------------------ */

.cax-perth-area__closing {
    border-top: 1px solid var(--cax-perth-black);
    padding-top: clamp(10px, 1vw, 15px);
}

.cax-perth-area__closing-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .28em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--type-h4);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.cax-perth-area__closing-title strong {
    color: var(--cax-perth-red);
    font: inherit;
}

.cax-perth-area__closing-copy {
    margin: 7px 0 0;
    font-size: var(--type-ui-lg) !important;
    line-height: 1.3 !important;
}

/* ------------------------------------------------------------
   Short laptops:
   preserve theme fonts, compress only spacing.
   ------------------------------------------------------------ */

@media (max-height: 820px) and (min-width: 1101px) {
    .cax-perth-area__inner {
        min-height: clamp(560px, 80svh, 620px);
        padding-block: 14px 12px;
        gap: 8px;
    }

    .cax-perth-area__top {
        gap: 36px;
    }

    .cax-perth-area__intro-copy {
        margin-top: 12px;
    }

    .cax-perth-area__network {
        height: clamp(170px, 21svh, 190px);
    }

    .cax-perth-area__area {
        padding-block: 8px;
    }

    .cax-perth-area__area-title {
        margin-top: 4px;
    }

    .cax-perth-area__area-focus {
        margin-top: 5px;
    }

    .cax-perth-area__closing {
        padding-top: 8px;
    }

    .cax-perth-area__closing-copy {
        margin-top: 4px;
    }
}

/* ------------------------------------------------------------
   Tablet / narrower laptop
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .cax-perth-area__inner {
        min-height: 0;
        height: auto;
    }

    .cax-perth-area__top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .cax-perth-area__network {
        width: 100%;
        height: 220px;
    }

    .cax-perth-area__areas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cax-perth-area__area {
        min-height: 118px;
        border-bottom: 1px solid rgba(0,0,0,.45);
    }

    .cax-perth-area__area:nth-child(3n) {
        border-right: 0;
    }

    .cax-perth-area__area:nth-last-child(-n + 3) {
        border-bottom: 0;
    }

    .cax-perth-area__area:first-child,
    .cax-perth-area__area:last-child {
        padding-inline: clamp(12px, 1.1vw, 18px);
    }
}

/* ------------------------------------------------------------
   Tablet portrait / mobile:
   intro then network, 2-column cards, natural height.
   ------------------------------------------------------------ */

@media (max-width: 800px) {
    .cax-perth-area__inner {
        padding: 28px 24px 32px;
        gap: 24px;
    }

    .cax-perth-area__top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cax-perth-area__network {
        justify-self: center;
        height: 245px;
    }

    .cax-perth-area__areas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cax-perth-area__area,
    .cax-perth-area__area:nth-child(3n) {
        min-height: 126px;
        border-right: 1px solid rgba(0,0,0,.45);
        border-bottom: 1px solid rgba(0,0,0,.45);
    }

    .cax-perth-area__area:nth-child(2n) {
        border-right: 0;
    }

    .cax-perth-area__area:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .cax-perth-area__suburbs {
        gap: 7px 12px;
    }
}

@media (max-width: 600px) {
    .cax-perth-area__inner {
        width: min(
            100% - 36px,
            var(--site-width, 1600px)
        );
        padding: 24px 18px 28px;
    }

    .cax-perth-area__meta {
        align-items: flex-start;
    }

    .cax-perth-area__location {
        gap: 5px;
    }

    .cax-perth-area__network {
        height: 230px;
    }

    .cax-perth-area__node-label {
        white-space: normal;
        max-width: 92px;
        text-align: center;
    }

    .cax-perth-area__node--west {
        left: 13%;
    }

    .cax-perth-area__node--east {
        right: 0;
    }

    .cax-perth-area__node--south_east {
        right: 0;
    }

    .cax-perth-area__network-line--horizontal {
        left: 17%;
        width: 63%;
    }

    .cax-perth-area__network-line--diagonal {
        width: 32%;
        height: 39%;
    }

    .cax-perth-area__areas {
        grid-template-columns: 1fr;
    }

    .cax-perth-area__area,
    .cax-perth-area__area:nth-child(2n),
    .cax-perth-area__area:nth-child(3n),
    .cax-perth-area__area:nth-last-child(-n + 2),
    .cax-perth-area__area:nth-last-child(-n + 3) {
        min-height: 0;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.45);
    }

    .cax-perth-area__area:last-child {
        border-bottom: 0;
    }

    .cax-perth-area__suburbs {
        gap: 8px 10px;
    }

    .cax-perth-area__closing-title {
        line-height: 1.08;
    }
}