/**
 * Project (event) detail page — two-column layout.
 * Left: Register button + vertical "Table of contents" tabs.
 * Right: Event Highlights box, venue/date meta, and the active tab panel.
 * Self-contained styles (not Tailwind-compiled) so no recompile is needed.
 */

.project-detail {
    width: 100%;
    max-width: 1100px;   /* content frame width measured from the Figma dev capture */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Event Format eyebrow — free one-line text shown above the title. */
.project-format-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6d28d9; /* violet-700 */
    margin: 0;
}

/* Page title (H1) — ~64px in the design; class overrides the Tailwind size at xl. */
.project-title {
    letter-spacing: -0.01em;
}
@media (min-width: 1280px) {
    .project-title {
        font-size: 4rem;   /* ~64px */
        line-height: 1.05;
    }
}

@media (min-width: 1024px) {
    .project-detail {
        display: grid;
        /* sidebar ~320 / gap ~40 / main ~740 → 1100 (measured proportions) */
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
        padding-left: 0;     /* columns align flush to the 1100 frame edges (= the hero) */
        padding-right: 0;
    }
}

/* ---- Left column ---------------------------------------------------------- */
.project-detail__aside {
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .project-detail__aside {
        position: sticky;
        top: 7rem;                       /* clear the site's sticky header (~6.25rem) */
        align-self: start;               /* don't stretch in the grid, or there's no room to stick */
        max-height: calc(100vh - 8rem);  /* if the sidebar is taller than the viewport, */
        overflow-y: auto;                /* scroll it internally instead of clipping the tabs */
        text-align: right;               /* design right-aligns the register button + TOC */
        margin-bottom: 0;
    }
}

/* Register button */
.project-register {
    margin-bottom: 1.5rem;
}

.project-register__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #3b3a7d; /* deep navy-indigo — matches design */
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;     /* ~20px in the design */
    line-height: 1.2;
    padding: 0.9rem 1.5rem; /* ~56px tall button */
    border: none;           /* normalize the <button> variant (embed / form) */
    border-radius: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.project-register__btn:hover {
    background: #302f66; /* darker navy-indigo */
    color: #ffffff;
}

@media (min-width: 1024px) {
    .project-register {
        display: flex;
        justify-content: flex-end; /* design right-aligns the button in the sidebar */
    }
    .project-register__btn {
        width: auto;
        min-width: 240px;          /* ~260px wide in the design, not full column */
    }
}

.project-register--embed {
    /* let embedded forms/iframes size themselves */
    max-width: 100%;
}

/* Section labels (TABLE OF CONTENTS / EVENT HIGHLIGHTS / etc.) */
.project-tabs__label,
.event-highlights__label,
.event-meta__label {
    text-transform: uppercase;
    font-size: 0.8rem;       /* ~13px in the design */
    letter-spacing: 0.08em;  /* tracked uppercase label */
    font-weight: 700;
    color: #9ca3af; /* slate-400 */
    margin: 0 0 0.5rem;
}

/* Tab navigation — horizontal scroll on mobile, vertical list on desktop */
.project-tabs__nav {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid #e5e7eb; /* slate-200 */
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.project-tabs__tab {
    flex: 0 0 auto;
    appearance: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #6b7280; /* slate-500 */
    white-space: nowrap;
    border-radius: 0.375rem;
    transition: color 0.15s ease;
}

.project-tabs__tab:hover {
    color: #111827; /* slate-900 */
}

.project-tabs__tab.is-active {
    color: #111827;
}

.project-tabs__tab:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .project-tabs__nav {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        border-bottom: none;
        padding-bottom: 0;
    }
    .project-tabs__tab {
        text-align: right;       /* design right-aligns the TOC items */
        white-space: normal;
        font-size: 1.25rem;      /* ~20px in the design (sidebar tabs are large) */
        padding: 0.4rem 0;
        border-radius: 0;
    }
    .project-tabs__tab.is-active {
        font-weight: 800;
    }
}

/* ---- Mobile / tablet: sub-bar scrolls away, pill tab-bar takes over sticky ---- */
@media (max-width: 1023px) {
    /* Let the sub-bar (parent + status + social) scroll up out of view instead of
       staying pinned, so the tab bar can take over the top edge. */
    .project-subbar {
        position: static;
    }

    .project-tabs__label {
        display: none;              /* the pill bar is self-explanatory on mobile */
    }

    .project-tabs__nav {
        background: #ffffff;
        margin: 0 -1rem 1.25rem;    /* full-bleed within the .project-detail padding */
        padding: 0.6rem 1rem;
        gap: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
        scrollbar-width: none;      /* hide the scrollbar on the horizontal pill row */
    }
    .project-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    /* Pinned to the top of the viewport (toggled by project-tabs.js once the bar
       scrolls up to the top edge). Fixed — so it stays put across the whole page,
       above the folding site header. A placeholder preserves the layout height. */
    .project-tabs__nav.is-pinned {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        z-index: 60;
        box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.3);
    }
    .project-tabs__nav-placeholder {
        display: none;
    }

    /* While the tab bar is pinned, keep the social/icons sub-bar hidden so it
       can't reappear below the pinned tabs when scrolling back up. */
    .project-subbar.is-hidden-by-tabs {
        display: none;
    }

    /* Rounded pill buttons; the row scrolls horizontally when they overflow. */
    .project-tabs__tab {
        background: #f1f5f9;        /* slate-100 */
        color: #334155;            /* slate-700 */
        border-radius: 9999px;
        padding: 0.45rem 0.95rem;
        font-size: 0.9rem;
    }
    .project-tabs__tab:hover {
        color: #111827;
        background: #e7ecf3;
    }
    .project-tabs__tab.is-active {
        background: #3b3a7d;        /* navy pill — matches the Register button */
        color: #ffffff;
    }
}

/* ---- Right column --------------------------------------------------------- */

/* Event Highlights box (special background) — holds, in order:
   date · highlights list · venue · address · additional info. */
.event-highlights {
    background: #f5f4fb;            /* light lavender */
    border: 1px solid #e9e7f7;
    border-radius: 0.75rem;
    padding: 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* Date — no label; heavier weight + deeper tone that still sits in the lavender. */
.event-highlights__date {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #3b3a7d;                /* deep navy-indigo — reads on the lavender bg */
}

.event-highlights__list {
    margin: 0;
    padding-left: 1.1rem;
    color: #2b2a45;
}

.event-highlights__list li {
    margin: 0.3rem 0;
}

/* Divider + spacing before the venue/address block when a list precedes it. */
.event-highlights__list + .event-highlights__row {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e4e1f3;
}

.event-highlights__row {
    margin-top: 0.75rem;
}

.event-highlights__label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #7c7a99;
    margin: 0 0 0.15rem;
}

.event-highlights__value {
    margin: 0;
    color: #1e293b;
    font-weight: 600;
}

.event-highlights__address {
    font-weight: 500;
    color: #475569;
}

/* Additional info (WYSIWYG) — no label, closes out the box. */
.event-highlights__info {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e4e1f3;
    color: #3f3e57;
    font-size: 0.95rem;
}

.event-highlights__info :first-child { margin-top: 0; }
.event-highlights__info :last-child  { margin-bottom: 0; }

.event-highlights .prose {
    max-width: none;
}

/* Venue / date meta */
.event-meta {
    margin-bottom: 2rem;
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .event-meta {
        grid-template-columns: 1fr 1fr;
    }
}

.event-meta__value {
    margin: 0;
    color: #1e293b; /* slate-800 */
    font-weight: 600;
}

/* Streaming links (auto-detected platform icons) */
.event-stream {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.event-stream__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #475569; /* slate-600 */
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.event-stream__link:hover {
    color: #111827;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.event-stream__link svg {
    width: 1rem;
    height: 1rem;
}

.event-stream__link--youtube:hover  { color: #ff0000; border-color: #ffd6d6; }
.event-stream__link--x:hover        { color: #000000; }
.event-stream__link--linkedin:hover { color: #0a66c2; border-color: #cfe0f3; }

/* Panels */
.project-detail .prose {
    max-width: none;
}

.project-tabs__panel[hidden] {
    display: none;
}

.project-tabs__panel {
    animation: project-tabs-fade 0.18s ease-in;
}

@keyframes project-tabs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Series / parent-project page + Projects archive ---------------------- */
.project-series {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 0;
}

.project-series__head {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.project-series__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    color: #9ca3af;
    margin: 0 0 0.75rem;
}

.project-series__title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #0b0b0f;
    margin: 0 0 1rem;
}

@media (min-width: 1280px) {
    .project-series__title { font-size: 3.5rem; }
}

.project-series__desc {
    color: #475569;
    font-size: 1.05rem;
}

.project-series__desc.prose {
    max-width: none;
}

.project-series__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start; /* natural card height — keeps the date under the title */
}

@media (min-width: 640px) {
    .project-series__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .project-series__grid { grid-template-columns: repeat(3, 1fr); }
}

.project-series__pagination {
    margin-top: 2.5rem;
}

/* ---- Partners section ----------------------------------------------------- */
/* Match the width & alignment of the description / content column (the main
   column of the two-column layout: sidebar 320 + gap 40 = 360 offset). */
.project-partners__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1rem 0;
}

@media (min-width: 1024px) {
    .project-partners__inner {
        padding-left: 360px; /* aligns the section under the content column */
        padding-right: 0;
    }
}

.project-partners__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 640px)  { .project-partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .project-partners__grid { grid-template-columns: repeat(3, 1fr); } }

.project-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #1e293b;
    text-decoration: none;
}

.project-partner__logo {
    display: block;
    width: 100%;
}

.project-partner__logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.project-partner__name {
    font-weight: 700;
    font-size: 0.95rem;
}

.project-partner__rel {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6d28d9; /* violet-700 */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Full-width News & Updates section ------------------------------------ */
.project-news {
    width: 100%;
    scroll-margin-top: 7rem; /* land below the sticky header when scrolled to */
}

.project-news__inner {
    max-width: 1100px;       /* full content width = the hero image width */
    margin: 0 auto;
    padding: 3rem 1rem 0;
}

.project-news__title {
    font-size: 2rem;         /* ~32px */
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0b0b0f;
    margin: 0 0 1.5rem;
}

.project-news__intro {
    margin-bottom: 1.5rem;
}

.project-news__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    /* Don't stretch cards to equal height — the theme card pins its date to the
       bottom of a full-height cell (flex:1), which leaves a gap and makes the
       date "snap" down once images load. Natural height keeps the date under
       the title, as in the design. */
    align-items: start;
}

@media (min-width: 640px) {
    .project-news__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .project-news__grid { grid-template-columns: repeat(3, 1fr); }
}

.project-news__card[hidden] {
    display: none;
}

/* Keep every news card's image area the same fixed size (real image OR the
   no-image placeholder), and give the card natural height so the grid never
   reflows / snaps as images load. Overrides the theme card's height:100% + flex
   stretch (which is meant for equal-height sliders, not this grid). */
.project-news__card .card-component .img-parent img,
.project-news__card .card-component .card-img-fallback {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 162 / 96;
    object-fit: cover;
}

.project-news__card .card-component .vertical,
.project-news__card .card-component .vertical .content {
    height: auto;
}

.project-news__card .card-component .vertical .content {
    flex: 0 0 auto;
}

.project-news__more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.project-news__more-btn {
    appearance: none;
    cursor: pointer;
    background: none;
    border: none;
    color: #3b3a7d;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.project-news__more-btn:hover {
    text-decoration: underline;
}

/* ---- Sub-header bar (parent + status + social share) ---------------------- */
.project-subbar {
    background: #f5f6f8;
    border-bottom: 1px solid #e5e7eb;
    /* Sticks just below the site header; navigation.js drops `top` to 0 when the
       header folds away on scroll-down, so the bar takes over the top edge. */
    position: sticky;
    top: var(--od-subbar-top, 6.25rem);
    z-index: 40;
    transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-subbar__inner {
    width: 100%;
    max-width: 1472px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-subbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.project-subbar__parent {
    color: #6d28d9; /* violet-700 */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-subbar__parent:hover {
    text-decoration: underline;
}

/* Status badge */
.project-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.project-status--upcoming {
    background: #e6edff;
    color: #2849c7;
}

.project-status--in_progress {
    background: #e6f7ec;
    color: #15803d;
}

.project-status--passed {
    background: #eef0f3;
    color: #64748b;
}

/* Event-format badge (Virtual / On site) — sits next to the status */
.project-format {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.project-format--virtual {
    background: #ede9fe; /* violet-100 */
    color: #6d28d9;      /* violet-700 */
}

.project-format--onsite {
    background: #e6f7ec;
    color: #15803d;
}

/* Social share icons */
.project-subbar__share {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.project-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #475569; /* slate-600 */
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.project-share:hover {
    color: #111827;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.project-share svg {
    width: 1rem;
    height: 1rem;
}