/*
 * SH Digital Labs — page compositions.
 * Built on the tokens and components in main.css.
 */

/* ==========================================================================
   Hero — Editorial Signal Stage
   design.md section 16. The stage carries a CSS-built Signal Structure: a set
   of planes cut on the brand's 20deg angle, lit from the upper right. Live copy
   sits across the quiet lower edge. Swap in hero-signal-structure.png later by
   adding it as the stage background; nothing else changes.
   ========================================================================== */

.hero {
    padding: 12px 12px 0;
    background: var(--night-950);
}

.hero-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 1500px;
    min-height: max(650px, min(760px, 96svh));
    margin-inline: auto;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 34%, rgba(1, 88, 248, 0.36) 0%, rgba(1, 88, 248, 0.12) 28%, rgba(5, 7, 11, 0) 62%),
        var(--night-950);
    border: 1px solid rgba(169, 199, 255, 0.15);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-high);
    color: var(--white);
}

/* The Signal Structure. Four planes and one dominant slash, all on 20deg. */
.signal-structure {
    position: absolute;
    top: 9%;
    left: 50%;
    width: min(42%, 560px);
    aspect-ratio: 1 / 0.78;
    transform: translateX(-38%);
    pointer-events: none;
}

.signal-structure span {
    position: absolute;
    display: block;
    transform: skewX(calc(var(--cut) * -1));
}

/* Rear plane: smoked glass. */
.signal-structure .ss-plane-a {
    top: 6%;
    left: 4%;
    width: 46%;
    height: 34%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 60%);
    border: 1px solid rgba(190, 216, 255, 0.14);
}

/* Upper bracket: satin graphite. */
.signal-structure .ss-plane-b {
    top: 0;
    right: 6%;
    width: 38%;
    height: 22%;
    background: linear-gradient(160deg, #1d2a3d, #0b111b);
    border-top: 1px solid rgba(140, 215, 255, 0.4);
}

/* Lower bracket: satin graphite. */
.signal-structure .ss-plane-c {
    bottom: 4%;
    left: 10%;
    width: 40%;
    height: 22%;
    background: linear-gradient(20deg, #0b111b, #1a2638);
    border-bottom: 1px solid rgba(140, 215, 255, 0.2);
}

/* Front plane: blue metal. */
.signal-structure .ss-plane-d {
    right: 8%;
    bottom: 12%;
    width: 34%;
    height: 34%;
    background: linear-gradient(150deg, #2476ff, #0645c9 55%, #062a78);
    box-shadow: inset 0 1px 0 rgba(217, 242, 255, 0.5);
}

/* The dominant slash with its Ice rim light. */
.signal-structure .ss-slash {
    top: -4%;
    left: 44%;
    width: 11%;
    height: 108%;
    background: linear-gradient(180deg, #8cd7ff 0%, #2476ff 34%, #0645c9 72%, rgba(6, 69, 201, 0.2) 100%);
    box-shadow: 0 0 60px rgba(1, 88, 248, 0.45);
}

.signal-structure .ss-slash::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, rgba(217, 242, 255, 0.95), rgba(140, 215, 255, 0) 80%);
}

/* Decorative vertical coordinate, top right. Hidden from assistive tech. */
.hero-coordinate {
    position: absolute;
    top: 96px;
    right: 28px;
    color: rgba(199, 215, 242, 0.54);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.09em;
    writing-mode: vertical-rl;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7.4fr) minmax(320px, 4.6fr);
    gap: 72px;
    align-items: end;
    width: 100%;
    padding: 0 52px 46px;
}

.hero-content .eyebrow {
    margin-bottom: 20px;
    color: var(--ice-300);
}

.hero-title {
    margin: 0;
    font-size: var(--text-hero);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

/* The emphasised phrase carries Ice Blue. Mark it in the editor by italicising
   the words that should lift; the theme removes the italic and colours them. */
.hero-title em,
.hero-title i,
.hero-title mark {
    background: none;
    color: var(--ice-300);
    font-style: normal;
    font-weight: inherit;
}

.hero-intro {
    max-width: 440px;
    margin: 0;
    color: var(--mist-300);
    font-size: clamp(16px, 1.3vw, 18.9px);
    line-height: 1.6;
}

.hero .button-group {
    gap: 22px;
    margin-top: 28px;
}

.hero .btn--quiet { color: var(--white); }
.hero .btn--quiet:hover { color: var(--ice-300); }

/* ==========================================================================
   Capability rail — one line under the hero
   ========================================================================== */

.capability-rail {
    padding-block: var(--space-8);
    background: var(--night-950);
    border-bottom: 1px solid rgba(174, 184, 200, 0.12);
}

.capability-rail ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--mist-300);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.capability-rail li {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.capability-rail li::before {
    width: 10px;
    height: 2px;
    content: "";
    background: var(--signal-500);
    transform: skewX(calc(var(--cut) * -1));
}

/* ==========================================================================
   Page openings
   The header floats over the top of every page, so each page opens on a dark
   chapter with room for it. The home page opens on the hero instead.
   ========================================================================== */

.page-intro {
    --bg: var(--night-950);
    --surface: var(--slate-850);
    --text: var(--white);
    --text-muted: var(--mist-300);
    --border: rgba(169, 199, 255, 0.14);
    --border-strong: rgba(179, 208, 255, 0.28);
    --rule: rgba(174, 184, 200, 0.18);
    --accent-text: var(--signal-500);
    padding-top: 180px;
    padding-bottom: var(--space-12);
    background:
        radial-gradient(circle at 82% 10%, rgba(1, 88, 248, 0.18) 0%, rgba(1, 88, 248, 0) 42%),
        var(--night-950);
    overflow: hidden;
}

/* One restrained Signal Cut crossing the far right of every page intro. */
.page-intro::after {
    position: absolute;
    top: -10%;
    right: 12%;
    width: 72px;
    height: 130%;
    content: "";
    background: linear-gradient(180deg, rgba(140, 215, 255, 0.12), rgba(1, 88, 248, 0.04) 60%, transparent);
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

.page-intro h1 {
    max-width: 18ch;
    margin-bottom: var(--space-5);
    font-size: var(--text-display-1);
}

.page-intro .section-description,
.page-intro .entry-content > p:first-child {
    max-width: var(--lead);
    color: var(--mist-300);
    font-size: var(--text-body-xl);
    line-height: 1.55;
}

.page-intro .entry-content { max-width: var(--lead); }
.page-intro .entry-content p { color: var(--mist-300); }

/* ==========================================================================
   Home sections
   ========================================================================== */

/* Archive links sit bottom-right after a collection. */
.section-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);
}

/* ==========================================================================
   Project inquiry — dark conversion chapter
   ========================================================================== */

.project-inquiry {
    --bg: var(--ink-900);
    --surface: var(--slate-850);
    --text: var(--white);
    --text-muted: var(--mist-300);
    --border: rgba(169, 199, 255, 0.14);
    --border-strong: rgba(179, 208, 255, 0.28);
    --rule: rgba(174, 184, 200, 0.18);
    --accent-text: var(--signal-500);
    background: var(--ink-900);
    color: var(--white);
}

.project-inquiry-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: start;
}

.project-inquiry-content h2 {
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
}

.project-inquiry-lede { color: var(--mist-300); font-size: var(--text-body-l); }

.project-inquiry-card {
    padding: var(--space-7);
    background: var(--slate-850);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Inner-page openings
   Archive intros, pillar heroes and single heroes share the dark page intro.
   ========================================================================== */

.archive-intro,
.pillar-hero,
.work-pillar-hero,
.single-service-hero,
.single-product-hero,
.single-work-hero,
.single-post-hero,
.page-hero,
.about-content,
.contact-content,
.careers-content,
.blog-intro {
    --bg: var(--night-950);
    --surface: var(--slate-850);
    --text: var(--white);
    --text-muted: var(--mist-300);
    --border: rgba(169, 199, 255, 0.14);
    --border-strong: rgba(179, 208, 255, 0.28);
    --rule: rgba(174, 184, 200, 0.18);
    --accent-text: var(--signal-500);
    padding-top: 180px;
    padding-bottom: var(--space-12);
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 10%, rgba(1, 88, 248, 0.18) 0%, rgba(1, 88, 248, 0) 42%),
        var(--night-950);
}

.archive-intro::after,
.pillar-hero::after,
.work-pillar-hero::after,
.single-service-hero::after,
.single-product-hero::after,
.single-work-hero::after,
.single-post-hero::after,
.page-hero::after,
.about-content::after,
.contact-content::after,
.careers-content::after,
.blog-intro::after {
    position: absolute;
    top: -10%;
    right: 12%;
    width: 72px;
    height: 130%;
    content: "";
    background: linear-gradient(180deg, rgba(140, 215, 255, 0.12), rgba(1, 88, 248, 0.04) 60%, transparent);
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

.archive-intro h1,
.pillar-hero h1,
.work-pillar-hero h1,
.single-service-hero h1,
.single-product-hero h1,
.single-work-hero h1,
.single-post-hero h1,
.page-hero h1,
.about-content h1,
.contact-content h1,
.careers-content h1,
.blog-intro h1 {
    max-width: 18ch;
    margin-bottom: var(--space-5);
    font-size: var(--text-display-1);
}

.archive-intro .entry-content,
.pillar-hero .entry-content,
.pillar-description,
.about-content .entry-content,
.contact-content .entry-content,
.careers-content .entry-content,
.blog-intro .entry-content { max-width: var(--lead); }

.archive-intro .entry-content p,
.pillar-description p,
.blog-intro .entry-content p,
[class*="-hero"] .section-description {
    color: var(--mist-300);
    font-size: var(--text-body-xl);
    line-height: 1.55;
}

.about-content .entry-content,
.contact-content .entry-content,
.careers-content .entry-content { color: var(--mist-300); }

.about-content .entry-content h2,
.contact-content .entry-content h2,
.careers-content .entry-content h2 { color: var(--white); }

/* Sections after an intro default to the light proof field. */
.site-main > .section:not([class*="mode-"]):not(.project-inquiry):not([class*="-hero"]):not(.archive-intro):not(.about-content):not(.contact-content):not(.careers-content):not(.blog-intro) {
    --bg: var(--night-950);
    background: var(--night-950);
}

/* ==========================================================================
   Pillar, archive and single pages
   ========================================================================== */

.services-pillar-group .section-header { margin-bottom: var(--space-8); }

.single-service-content .entry-content,
.single-product-content .entry-content,
.single-work-content .entry-content,
.single-post-content-section .entry-content,
.page-content .entry-content { max-width: var(--article); }

.single-service-content .entry-content > h2 { font-size: var(--text-h2); }

/* A service's included list becomes a two-column checklist. */
.single-service-content .entry-content > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gutter);
    max-width: none;
    padding: 0;
    list-style: none;
}

.single-service-content .entry-content > ul li {
    position: relative;
    margin: 0;
    padding: var(--space-4) 0 var(--space-4) 26px;
    border-top: 1px solid var(--rule);
}

.single-service-content .entry-content > ul li::before {
    position: absolute;
    top: 1.45em;
    left: 0;
    width: 12px;
    height: 2px;
    content: "";
    background: var(--signal-600);
    transform: skewX(calc(var(--cut) * -1));
}

.single-service-content .wp-block-buttons { margin-top: var(--space-6); }

.single-service-hero .service-icon { width: 64px; height: 64px; margin-bottom: var(--space-6); }
.single-service-hero .service-icon .icon { width: 30px; height: 30px; }

.single-product-info-strip,
.single-work-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-9);
    margin: var(--space-6) 0;
    padding: var(--space-5) 0;
    border-block: 1px solid var(--rule);
}

.single-product-info-item,
.single-work-detail-item { display: grid; gap: var(--space-1); }

.single-media img { display: block; width: 100%; border-radius: var(--radius-md); }

.product-filter-menu,
.work-pillar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.work-pillar-nav-link.is-active { color: var(--accent-text); }

/* ==========================================================================
   Blog, pagination
   ========================================================================== */

.single-post-meta {
    color: var(--mist-300);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-links,
.post-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-9);
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-mono-data);
    text-decoration: none;
}

.page-numbers.current { background: var(--signal-600); border-color: var(--signal-600); color: var(--white); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
    .hero-content { grid-template-columns: 1fr; gap: var(--space-6); padding: 0 32px 40px; }
    .signal-structure { width: min(64%, 460px); top: 12%; }
    .project-inquiry-inner { grid-template-columns: 1fr; gap: var(--space-8); }

    .home-work .archive-grid > *,
    .home-work .archive-grid > *:first-child { grid-column: span 12; grid-row: auto; }

    .home-products .product-grid > *,
    .home-products .product-grid > *:first-child { grid-column: span 12; grid-row: auto; min-height: 280px; }
}

@media (max-width: 767px) {
    .hero { padding: 8px 8px 0; }
    .hero-stage { min-height: 640px; }
    .hero-content { padding: 0 20px 32px; }
    .signal-structure { width: 84%; top: 14%; transform: translateX(-50%); }
    .hero-coordinate { display: none; }

    .archive-intro,
    [class*="-hero"],
    .about-content,
    .contact-content,
    .careers-content,
    .blog-intro { padding-top: 140px; padding-bottom: var(--space-10); }

    .single-service-content .entry-content > ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Fixes from the first visual review
   ========================================================================== */

/* A related-content section directly after an article shares its light field,
   so it must not add a second full section of top padding. */
article + .single-service-related,
article + .single-post-related,
.single-service-related,
.single-post-related { padding-top: 0; }

/* Featured work card without an image: anchor the copy low, enlarge the title,
   and let one faint 20deg plane carry the space instead of leaving it blank. */
.home-work .archive-grid > .work-card:first-child .card-body {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    padding: var(--space-8);
}

.home-work .archive-grid > .work-card:first-child .card-title { font-size: var(--text-h2); letter-spacing: -0.02em; }

.home-work .archive-grid > .work-card:first-child:not(:has(.work-card-image))::before {
    position: absolute;
    top: -12%;
    right: 16%;
    width: 110px;
    height: 124%;
    content: "";
    background: linear-gradient(180deg, rgba(1, 88, 248, 0.16), rgba(1, 88, 248, 0));
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

/* The pillar name is already the section heading; repeating it per item is noise. */
.services-pillar-group .card-kicker,
.pillar-services .card-kicker,
.single-service-related .card-kicker { display: none; }

.services-pillar-group .ledger,
.pillar-services .ledger { margin-top: 0; }

/* Light proof sections stacked back to back share one field. Only the first
   takes top padding, so consecutive sections read as one chapter. */
:is(.contact-details-section, .contact-locations, .contact-socials, .about-founders, .about-core-team, .careers-open-roles, .services-pillar-group, .pillar-services, .pillar-pricing-section, .pillar-work, .single-service-related)
+ :is(.contact-details-section, .contact-locations, .contact-socials, .about-founders, .about-core-team, .careers-open-roles, .services-pillar-group, .pillar-services, .pillar-pricing-section, .pillar-work, .single-service-related) {
    padding-top: 0;
}

/* Archive links end a collection at the bottom right. */
.pillar-work .container > p:last-child {
    display: flex;
    justify-content: flex-end;
    max-width: none;
    margin: var(--space-8) 0 0;
}

/* Pillar hero actions sit a little further from the intro. */
.pillar-hero .button-group { margin-top: var(--space-7); }

/* Product glass cards sit on light archive fields; their links must read on
   the dark glass, not inherit the light section's text colour. */
.product-card .text-link,
.product-card a { color: var(--white); }
.product-card .text-link:hover { color: var(--ice-300); }
.product-card .card-title { color: var(--white); }

.product-card img {
    display: block;
    width: 100%;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Product "What it does": the same checklist treatment as a service. */
.product-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gutter);
    max-width: var(--article);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.product-feature-list li {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) 26px;
    border-top: 1px solid var(--rule);
}

.product-feature-list li::before {
    position: absolute;
    top: 1.45em;
    left: 0;
    width: 12px;
    height: 2px;
    content: "";
    background: var(--signal-600);
    transform: skewX(calc(var(--cut) * -1));
}

/* Portal login: a compact form on the dark page intro. */
.portal-login .portal-login-form {
    max-width: 520px;
    margin-top: var(--space-8);
}

.portal-login .portal-login-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    font-weight: 400;
}

.portal-login .portal-login-form .btn { width: 100%; }

@media (max-width: 767px) {
    .product-feature-list { grid-template-columns: 1fr; }
}

/* Concept case studies open with a clear, honest notice. */
.entry-content .concept-note {
    max-width: var(--article);
    margin-bottom: var(--space-8);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-body-s);
}

/* The capabilities list follows the editor body; give it the same chapter gap
   as an editor H2 so it never runs into the paragraph above. */
.single-product-content .product-capabilities-title {
    margin-top: var(--space-11);
    font-size: var(--text-h2);
}