/* ============================================================
   Community page — "Start your energy community"
   Reuses the base design tokens (Ubuntu + coral). Page-only
   sections live here; shared primitives stay in base.css.
   ============================================================ */

/* ---------- Shared image placeholder ----------
   Stands in for the supervisor's AI-generated artwork until the
   real assets are dropped in. Honours the paper/coral palette so
   the layout reads correctly before the images arrive. */
.ph {
    position: relative;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--paper-2),
            var(--paper-2) 10px,
            var(--paper) 10px,
            var(--paper) 20px);
    border: 1px dashed var(--paper-rule);
    border-radius: var(--radius);
    color: var(--ink-faint);
    overflow: hidden;
}
.ph__label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
}

/* Real card icon — large, borderless and centered, matching the mockup. */
.card__icon {
    flex: 0 0 auto;
    display: inline-flex;
}
.card__icon img {
    width: clamp(3.5rem, 2.8rem + 2.6vw, 5.5rem);
    height: clamp(3.5rem, 2.8rem + 2.6vw, 5.5rem);
    object-fit: contain;
}

/* Small square icon placeholder used inside cards */
.ph-icon {
    width: clamp(3.5rem, 2.8rem + 2.6vw, 5.5rem);
    height: clamp(3.5rem, 2.8rem + 2.6vw, 5.5rem);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    color: var(--accent-deep);
}
.ph-icon svg { width: 45%; height: 45%; }

/* ============================================================
   HERO
   ============================================================ */
.chero {
    position: relative;
    padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3rem, 4vw, 4.5rem);
    background: var(--paper-2);
    border-bottom: 1px solid var(--paper-line);
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;   /* lets the bleed measure real content width (no scrollbar) */
}
.chero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 32rem at 110% -10%, var(--accent-glow), transparent 60%),
        radial-gradient(40rem 22rem at -10% 120%, rgba(33, 37, 41, 0.05), transparent 60%);
    z-index: -1;
}
.chero__inner {
    width: var(--container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);   /* guaranteed space between text and image */
}
.chero__copy {
    flex: 0 1 36rem;     /* stable text width — the image growing never re-wraps it */
    max-width: 40rem;
}
.chero__eyebrow { margin-bottom: 1.2rem; }
.chero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-h1);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 1.2rem;
}
.chero__title em { font-style: italic; color: var(--accent); font-weight: 700; }
.chero__lede {
    font-size: var(--t-lede);
    line-height: 1.55;
    color: var(--ink-soft);
    font-weight: 300;
    max-width: 52ch;
    margin: 0 0 1rem;
}
.chero__lede:last-of-type { margin-bottom: 2rem; }
.chero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
/* Full-height illustration on the right. It lives in its own flex column, so
   it can never overlap the copy, and stays inside the container so the right
   edge is always visible. */
/* Image fills from the text to the RIGHT EDGE OF THE SCREEN (the negative
   margin eats the page gutter, so there's no dead space to its right) and
   keeps its natural ratio, so it is never cropped. Being the taller column,
   the image — not the text — drives the hero height. */
.chero__visual {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    margin-right: calc((100% - 100cqw) / 2);   /* bleed to the right content edge (scrollbar-safe) */
}
.chero__visual img {
    display: block;
    width: 100%;
    height: auto;                     /* full image, never cropped */
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

@media (max-width: 860px) {
    .chero__inner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .chero__copy { flex: none; max-width: none; }
    .chero__visual {
        order: -1;
        flex: none;
        width: 100%;
        max-width: 30rem;
        margin: 0 auto 1.5rem;    /* resets the desktop right-edge bleed */
    }
    .chero__visual img {
        height: auto;
        border-radius: var(--radius-lg);
    }
}

/* ============================================================
   GENERIC SECTION + CARD GRID
   ============================================================ */
.section {
    padding: clamp(3rem, 5vw, 5.5rem) 0;
    scroll-margin-top: var(--header-h);
}
.section--alt { background: var(--paper-2); }
.section__inner {
    width: var(--container);
    margin-inline: auto;
}
.section__sub {
    font-size: var(--t-lede);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 300;
    margin: -0.4rem 0 0;
    max-width: 56ch;
}

.cards {
    list-style: none;
    margin: clamp(2rem, 1rem + 4vw, 3.5rem) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 1.4vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Steps: a single flex row of cards with standalone arrow connectors
   sitting in between. The arrows are their own elements (not pseudo-
   elements of a card), so card-hover never moves them, and the flex gap
   gives real breathing room on both sides. Collapses to a stack — arrows
   hidden — once it no longer fits one line. */
.cards--steps {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: clamp(1.25rem, 2vw, 2rem);
}
.cards--steps .card {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 1080px) {
    .cards--steps { flex-wrap: wrap; }
    .cards--steps .card { flex: 1 1 220px; }
}
@media (max-width: 540px) {
    .cards--steps .card { flex-basis: 100%; }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: clamp(1.6rem, 2.4vw, 2.2rem);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--paper-rule);
}
.card__num {
    position: absolute;
    top: clamp(1rem, 1.4vw, 1.4rem);
    right: clamp(1rem, 1.4vw, 1.4rem);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
}
.card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}
.card__text {
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 300;
    margin: 0;
}
.card__text:last-child { margin-bottom: 0; }

/* Card variant that links somewhere (resources) */
.card--link {
    text-decoration: none;
    color: inherit;
}
.card--link .card__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-transform: uppercase;
}
.card--link .arrow { transition: transform 0.25s var(--ease); }
.card--link:hover .arrow { transform: translateX(3px); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
    background: var(--paper);
}
.cta-band__inner {
    width: var(--container);
    margin-inline: auto;
}
.cta-band__panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    background: var(--paper-2);
}
.cta-band__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(50rem 28rem at 50% -40%, var(--accent-glow), transparent 60%);
}
.cta-band__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0.8rem 0 0.8rem;
}
.cta-band__lede {
    font-size: var(--t-lede);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 300;
    margin: 0 auto 1.8rem;
    max-width: 50ch;
}
.cta-band__panel .eyebrow { justify-content: center; }

/* ============================================================
   STEP SEQUENCE (.howto)
   One panel holding a horizontal sequence of steps, each with a
   figure and a corner number badge, separated by arrow connectors.
   Shared by the Tools "How to use this page" and the Results
   "From pilots to replication" sections.
   ============================================================ */
.howto {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
}
.howto__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1.4rem);
}
.howto__step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 0 clamp(0.25rem, 1vw, 1rem);
}
/* Figure wrapper anchors the number badge to the image corner. */
.howto__figure {
    position: relative;
    display: inline-flex;
}
.howto__num {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(45%, -35%);   /* sits just outside the top-right corner */
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--paper);     /* clean separation from the icon */
}
.howto__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}
.howto__text {
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 300;
    margin: 0;
}

/* Coral connector arrow, vertically aligned with the figure row */
.howto__arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: clamp(1.75rem, 1.4rem + 1.3vw, 2.75rem);
    color: var(--accent);
    font-size: 1.6rem;
    line-height: 1;
}

/* Stack vertically on narrow screens; rotate the arrows to point down. */
@media (max-width: 760px) {
    .howto__steps { flex-direction: column; align-items: stretch; }
    .howto__step { padding: 0.4rem 0; }
    .howto__arrow {
        align-self: center;
        margin-top: 0;
        transform: rotate(90deg);
    }
}