/* =================================================================== SHARED COMPONENTS global css
   Reusable pieces used by more than one page. Each has a demo in global.html.
   =================================================================== */

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
    position: relative;
    padding-block: var(--sp100);
    background: var(--blue-50);
    overflow: hidden;

    &::before {
        position: absolute; top: -140px; right: -120px;
        width: 520px; height: 520px;
        background: var(--blue-100);
        border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
        opacity: .7;
        content: "";
    }

    & .container { position: relative; z-index: 1; }

    & .page-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp60);
    }

    & .page-hero__inner--single { grid-template-columns: minmax(0, 860px); }

    & .page-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        margin-bottom: var(--sp25);
        font-size: var(--f14);
        font-weight: 500;
        color: var(--muted);

        & a { color: var(--ink); transition: var(--transition); }
        & a:hover { color: var(--primary); }
        & li { display: flex; align-items: center; gap: var(--sp8); }
        & li + li::before {
            width: 6px; height: 6px;
            border-top: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
            transform: rotate(45deg);
            content: "";
        }
    }

    & .page-hero__eyebrow { margin-bottom: var(--sp15); }

    & .page-hero__desc {
        max-width: 640px;
        margin-top: var(--sp25);
        font-size: var(--f18);
    }

    & .page-hero__actions { margin-top: var(--sp40); }

    & .page-hero__media {
        position: relative;
        display: flex; justify-content: center;

        & img { position: relative; z-index: 1; border-radius: var(--r-md); }
    }

}

/* ---------- CHECK LIST ---------- */
.check-list {
    display: grid;
    gap: var(--sp15);

    & li {
        position: relative;
        padding-left: 36px;
        font-size: var(--f16);
        line-height: 1.55;
        color: var(--body);

        &::before {
            position: absolute; top: 0; left: 0;
            width: 24px; height: 24px;
            background: var(--primary) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 12.5l3 3 7-7" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 16px no-repeat;
            border-radius: var(--r-full);
            content: "";
        }
    }

    & strong { color: var(--ink); }

    &.check-list--light li { color: rgba(255, 255, 255, .8); }
    &.check-list--light strong { color: var(--white); }
}

/* ---------- STAT ---------- */
.stat {
    display: flex; flex-direction: column;
    gap: var(--sp10);

    & .stat__num {
        font-family: var(--font-display);
        font-size: var(--f96);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -.04em;
        color: var(--primary);
    }

    & .stat__num sup { font-size: .45em; vertical-align: top; position: relative; top: .25em; }

    & .stat__label { font-size: var(--f16); line-height: 1.5; color: var(--body); }
}

/* ---------- LOGO WALL ---------- */
.logo-wall {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;

    & .logo-wall__item {
        display: grid; place-items: center;
        min-height: 120px;
        padding: var(--sp25);
        margin: -1px 0 0 -1px;   /* each cell draws its left/top line over its neighbour, edges stay single */
        background: var(--white);
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
        transition: var(--transition);

        & img {
            width: auto; max-width: min(150px, 100%); max-height: 56px;
            object-fit: contain;
            filter: grayscale(1);
            opacity: .75;
            transition: var(--transition);
        }

        &:hover { background: var(--blue-50); }
        &:hover img { filter: none; opacity: 1; }
    }
}

/* ---------- CTA BAND (closing call to action, light) ---------- */
.cta-band {
    position: relative;
    padding-block: var(--sp100);
    background: var(--surface-1);
    border-top: 1px solid var(--line);
    overflow: hidden;
    text-align: center;

    &::before, &::after {
        position: absolute;
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        content: "";
    }
    &::before { top: -180px; left: -120px; width: 420px; height: 420px; }
    &::after { right: -140px; bottom: -220px; width: 520px; height: 520px; }

    & .container { position: relative; z-index: 1; }

    & .cta-band__inner {
        display: flex; flex-direction: column; align-items: center;
        gap: var(--sp20);
        max-width: 760px;
        margin-inline: auto;
    }

    & .cta-band__text { font-size: var(--f18); }

    & .btn-group { justify-content: center; margin-top: var(--sp15); }

    & .cta-band__note {
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* Blue variant — partner pages and /partners/, where it replaces the pre-footer
       .site-cta band, so it carries that band's gradient and white text. */
    &.cta-band--blue {
        background: var(--gradient1);
        border-top: 0;

        &::before, &::after { border-color: rgba(255, 255, 255, .2); }

        & h2 { color: var(--white); }
        & .cta-band__kicker { color: rgba(255, 255, 255, .85); }
        & .cta-band__text { color: rgba(255, 255, 255, .85); }
        & .cta-band__note { color: rgba(255, 255, 255, .7); }

        & .btn-outline-light {
            background: transparent;
            border-color: rgba(255, 255, 255, .4);
            color: var(--white);
        }
    }
}

/* ---------- ICON BOX ---------- */
.icon-box {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    background: var(--blue-50);
    border-radius: var(--r-md);
    color: var(--primary);

    & img, & svg { width: 34px; height: 34px; }
}

/* ---------- POST CARD (blog listing + related posts) ---------- */
.post-card {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--transition);

    &:hover { border-color: var(--blue-100); transform: translateY(-4px); }

    & .post-card__media {
        display: block;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--surface-1);

        & img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    }
    &:hover .post-card__media img { transform: scale(1.05); }

    & .post-card__body {
        display: flex; flex-direction: column; flex: 1;
        gap: var(--sp15);
        padding: var(--sp30);
    }

    & .post-card__meta {
        display: flex; align-items: center;
        gap: var(--sp8);
        font-size: var(--f14);
        color: var(--muted);
        & svg { width: 16px; height: 16px; }
    }

    & .post-card__title {
        font-size: var(--f20);
        line-height: 1.35;
        letter-spacing: -.01em;
        & a { transition: var(--transition); }
        & a:hover { color: var(--primary); }
    }

    & .post-card__excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--f15);
    }

    & .btn-link { margin-top: auto; padding-top: var(--sp10); }
}

/* ---------- WEBINAR CARD ---------- */
.webinar-card {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--transition);

    &:hover { border-color: transparent; box-shadow: var(--shadow-sm); transform: translateY(-4px); }

    & .webinar-card__media {
        position: relative;
        display: block;
        aspect-ratio: 16 / 9;
        background: var(--surface-1);
        overflow: hidden;

        & img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    }
    &:hover .webinar-card__media img { transform: scale(1.05); }

    & .webinar-card__play {
        position: absolute; right: var(--sp15); bottom: var(--sp15);

        & span {
            display: grid; place-items: center;
            width: 46px; height: 46px;
            background: var(--white);
            border-radius: var(--r-full);
            color: var(--primary);
            box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), var(--shadow-sm);
            transition: var(--transition);
        }
        & svg { width: 16px; height: 16px; margin-left: 2px; }
    }
    &:hover .webinar-card__play span { background: var(--primary); color: var(--white); }

    & .webinar-card__body {
        display: flex; flex-direction: column; flex: 1;
        gap: var(--sp12);
        padding: var(--sp30);
    }

    & .webinar-card__date {
        width: max-content;
        padding: var(--sp4) var(--sp12);
        background: var(--blue-50);
        border-radius: var(--r-sm);
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--primary);
    }

    & .webinar-card__title { font-size: var(--f20); line-height: 1.35; letter-spacing: -.01em; }
    & .webinar-card__title a:hover { color: var(--primary); }

    & .webinar-card__text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--f15);
    }

    & .btn-link { margin-top: auto; padding-top: var(--sp10); }
}

/* ---------- PERSON (host / founder) ---------- */
.person {
    display: flex; align-items: center;
    gap: var(--sp20);

    & .person__photo {
        flex: 0 0 auto;
        width: 84px; height: 84px;
        border-radius: var(--r-full);
        object-fit: cover;
        box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line);
    }

    & .person__name { font-size: var(--f20); letter-spacing: -.01em; }
    & .person__role { font-size: var(--f14); font-weight: 600; color: var(--primary); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .page-hero {
        & .page-hero__inner { grid-template-columns: 1fr; }
        & .page-hero__media { max-width: 520px; }
    }
}

@media (max-width: 767.98px) {
    .page-hero {
        &::before { width: 320px; height: 320px; top: -120px; right: -140px; }
    }
    .logo-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        & .logo-wall__item { min-height: 96px; padding: var(--sp15); }
    }
    .post-card .post-card__body, .webinar-card .webinar-card__body { padding: var(--sp25) var(--sp20); }
}

@media (max-width: 575.98px) {
    .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}