/* ============================================================================
   Event landing page (/events/<slug>)
   ----------------------------------------------------------------------------
   Built for a QR code scanned at a booth. Hardware photography carries the
   page. Type, buttons and stats follow the site's existing conventions rather
   than inventing parallel ones: .btn from base/buttons.css, the stat pattern
   from team.css, the statement block from the team page, and the shared
   clients marquee partial.
   ========================================================================== */

.ev {
    --ev-gap: clamp(3.5rem, 2rem + 5vw, 6rem);
    --ev-radius: 12px;
}

.ev-inner {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- Hero ---------------------------------------------------------- */

.ev-hero {
    position: relative;
    isolation: isolate;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ev-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
    display: block;
}

/* Identical to the home page hero overlay: a 90deg linear that weights the
   left where the copy sits, over an untuned `ellipse at center` radial that
   resolves to the page ground, so the photograph fades out on every edge
   instead of ending on a rectangle. */
.ev-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.45) 60%,
            rgba(0, 0, 0, 0.35) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0.6) 75%,
            var(--color-bg) 100%
        );
}

.ev-hero-inner {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 0;
    position: relative;
}

.ev-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin: 0 0 1.15rem;
}

.ev-eyebrow-mark {
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-cyan);
    flex: 0 0 auto;
}

.ev-hero h1 {
    font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 15ch;
    text-wrap: balance;
    margin: 0 0 1.1rem;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.ev-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #dfe7eb;
    /* Wide enough for the longer of the two sentences, narrow enough that the
       pair cannot sit on one line - so the lead sets as two. balance then puts
       the break on the sentence boundary, since 51/47 is less ragged than any
       earlier split. Falls back to an ordinary two-line wrap without it. */
    max-width: 52ch;
    text-wrap: balance;
    margin: 0 0 2rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}

/* AS9100D sits in the top banner, where someone scanning the page looks for
   proof before they read anything. */
.ev-hero-cert {
    position: absolute;
    top: 1.75rem;
    right: 4vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.ev-hero-cert img {
    width: 148px;
    height: auto;
    display: block;
}

.ev-hero-cert span {
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(239, 244, 246, .72);
}

/* Bottom right, clear of the left-aligned hero copy: at shorter viewports a
   bottom-left caption ran straight into the deck meta line under the buttons. */
.ev-hero-caption {
    position: absolute;
    right: 4vw;
    bottom: 1.25rem;
    text-align: right;
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(239, 244, 246, .55);
}

.ev-hero-caption span {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-cyan);
    font-weight: 700;
}

/* ---------- Buttons ------------------------------------------------------- */
/* .btn and .btn-outline-cyan carry the type, padding and radius; this only
   adds what a button with an icon inside it needs. */

.ev-actions,
.ev-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.ev-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ev-deck-meta {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: rgba(239, 244, 246, .62);
}

/* ---------- Where to find us --------------------------------------------- */
/* No labels: "DATES" and "VENUE" sat at different heights because their cells
   held different numbers of lines, which is what made the row look ragged.
   A pin and a calendar carry the same meaning without the alignment problem.
   Venue reads first, dates sit right. */

.ev-find {
    background: var(--color-bg-dark);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.ev-find-inner {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    padding: 1.35rem 0;
}

.ev-find-inner p { margin: 0; }

.ev-find-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--color-cyan);
}

.ev-find-venue {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.ev-find-venue > span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ev-find-venue strong,
.ev-find-dates strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}

.ev-find-sub {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Pushed to the far end, so the bar reads place, then when. */
.ev-find-dates {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

@media (max-width: 52rem) {
    .ev-find-inner { gap: 0.9rem 1.75rem; }
    .ev-find-dates { margin-left: 0; }
}

/* ---------- Summary ------------------------------------------------------- */
/* Mirrors .team-statement-section: raised ground, centred, 2.2rem heading over
   a muted 1.05rem paragraph capped at 850px, with the stat row beneath. */

.ev-summary {
    background: var(--color-bg-dark);
    padding: 5rem 0 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ev-summary-inner { text-align: center; }

.ev-summary h2 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    color: var(--color-text);
    text-wrap: balance;
}

.ev-summary-text {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 850px;
    margin: 0 auto 3rem;
}

/* ---------- Stats --------------------------------------------------------- */
/* The site's stat convention (.team-stat): borderless centred row, value at
   2rem/800 in cyan, small muted label. */

.ev-stat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
}

.ev-stat-grid li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ev-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-cyan);
    line-height: 1;
    white-space: nowrap;
}

.ev-stat-unit {
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: 0.25rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ev-stat-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

/* ---------- Section headings ---------------------------------------------- */

/* A real section heading, matching .team-heading (2rem/800) rather than the
   0.75rem uppercase eyebrow this used to be - which rendered the headings
   smaller than the body copy underneath them. */
/* Centred, matching .team-heading on the team page. */
.ev-section-title {
    font-size: clamp(1.65rem, 1.35rem + 1.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--color-text);
    margin: 0 0 1rem;
    text-align: center;
    text-wrap: balance;
}

.ev-section-lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 62ch;
    /* auto margins centre the measure itself, not just the text inside it. */
    margin: 0 auto 2.25rem;
    text-align: center;
}

/* Where a heading stands alone, it carries the space the lead would have. */
.ev-section-title:last-child { margin-bottom: 2rem; }

/* ---------- Equipment ----------------------------------------------------- */

.ev-equip { padding: var(--ev-gap) 0 0; }

.ev-equip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem;
}

/* Same pop-out as .loop-card on the home page: lift, cyan border, soft cyan
   glow, and the image scales inside its frame. */
.ev-equip-item {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--ev-radius);
    overflow: hidden;
    background: var(--color-bg-dark);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative;
}

.ev-equip-item:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 0 24px rgba(0, 168, 232, 0.12);
    transform: translateY(-3px) scale(1.012);
    z-index: 2;
}

.ev-equip-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}

.ev-equip-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.ev-equip-item:hover .ev-equip-media img { transform: scale(1.06); }

.ev-equip-item figcaption {
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ev-equip-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.ev-equip-spec {
    font-size: 0.82rem;
    color: var(--color-cyan);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

/* ---------- What we make -------------------------------------------------- */

.ev-make { padding: var(--ev-gap) 0 0; }

.ev-make-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem;
}

.ev-make-item {
    margin: 0;
    position: relative;
    border-radius: var(--ev-radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    aspect-ratio: 3 / 2;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.ev-make-item:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 0 24px rgba(0, 168, 232, 0.12);
    transform: translateY(-3px) scale(1.012);
    z-index: 2;
}

.ev-make-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.ev-make-item:hover img { transform: scale(1.06); }

.ev-make-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to top, rgba(11, 14, 16, .92), transparent);
}

/* ---------- Capability spectrum ------------------------------------------- */
/* Modelled on the deck's capability table: a solid header band per column, then
   the entries grouped and separated by hairline rules rather than run together
   as one list. Built in HTML rather than shipped as the picture, so it reflows
   on a phone and the capability names stay real, searchable text. */

.ev-spectrum { padding: var(--ev-gap) 0 0; }

.ev-spectrum-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--ev-radius);
    overflow: hidden;
}

.ev-spectrum-col {
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

/* The band the image gets its structure from. */
.ev-spectrum-col h3 {
    margin: 0;
    padding: 0.85rem 0.9rem;
    background: var(--color-cyan-dark);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}

/* The grid already gives every column the same height, so the shorter columns
   were leaving dead space at the bottom. Filling the column and distributing
   the groups spreads the dividers evenly instead. */
.ev-spectrum-body {
    padding: 0.35rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
}

.ev-spectrum-body ul {
    list-style: none;
    margin: 0;
    padding: 1.05rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Hairlines between groups, not around them, so the column reads as one run. */
.ev-spectrum-body ul + ul { border-top: 1px solid var(--color-border); }

.ev-spectrum-body li {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--color-text-body);
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 68rem) {
    .ev-spectrum-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 44rem) {
    .ev-spectrum-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30rem) {
    .ev-spectrum-grid { grid-template-columns: 1fr; }
}

/* ---------- Selected programs --------------------------------------------- */

.ev-work { padding: var(--ev-gap) 0 0; }

/* Six programs in two rows of three. auto-fit left a ragged tail at four; a
   fixed three-column track fills the row and lets each card run larger. */
.ev-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.ev-work-card {
    border: 1px solid var(--color-border);
    border-radius: var(--ev-radius);
    overflow: hidden;
    background: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative;
}

.ev-work-card:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 0 24px rgba(0, 168, 232, 0.12);
    transform: translateY(-3px) scale(1.012);
    z-index: 2;
}

.ev-work-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg);
}

.ev-work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.ev-work-card:hover .ev-work-media img { transform: scale(1.06); }

.ev-work-copy {
    padding: 1.5rem 1.6rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ev-work-client {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin: 0;
}

.ev-work-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--color-text);
    text-wrap: balance;
}

.ev-work-body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text-body);
    margin: 0.2rem 0 0;
}

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

.ev-cta { padding: var(--ev-gap) 0 clamp(4rem, 3rem + 4vw, 6.5rem); }

.ev-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(0, 168, 232, .18), transparent 60%),
        var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.4rem 2.2rem;
}

.ev-cta h2 {
    font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    text-wrap: balance;
}

.ev-cta p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 46ch;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 68rem) {
    .ev-work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
    .ev-work-grid { grid-template-columns: 1fr; }
    .ev-hero { min-height: 0; }
    .ev-hero-inner { padding: 5.5rem 0 2.5rem; }
    .ev-hero-cert { top: 1.1rem; right: 4vw; }
    .ev-hero-cert img { width: 104px; }
    .ev-hero-cert span { display: none; }
    .ev-hero-caption { display: none; }

    .ev-actions .btn,
    .ev-cta-actions .btn { flex: 1 1 100%; }

    .ev-summary { padding: 3.5rem 0 3rem; }
    .ev-stat-grid { gap: 1.75rem 2.25rem; }
    .ev-make-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .ev-cta-inner { padding: 1.8rem 1.4rem; }
}