/* ============================================================================
 * prism-modern.css
 *
 * Shared design system for the modernised Prism Linguistics UK pages
 * (home, about, contact, our-clients, services, quote).
 *
 * SCOPING: Every rule is nested under .prism-page so it only applies to pages
 * that opt in by adding class="...-page prism-page" to their top-level wrapper.
 * This guarantees the legacy /css/style.css and the standalone /pages/*.html
 * templates are untouched.
 *
 * NAMING: Uses the same class names the existing pages already use
 * (.section-title, .faq-item, .howto-step, .compare-wrap, .def-grid, .stat).
 * Adding `prism-page` to a wrapper is enough to activate this stylesheet —
 * no HTML rename needed.
 *
 * WHAT'S NOT IN HERE (still inline per page, because each page varies):
 *   - Heroes (home is full-bleed photographic; internal pages are navy gradient
 *     with subtly different paddings/text-alignments)
 *   - Stat containers (.home-stats, .about-stats etc — same pattern, different
 *     class names per page; inner .stat is shared, see below)
 *   - CTA sections (.home-cta, .about-cta etc — almost identical, different
 *     class names; not yet renamed)
 *   - Page-bespoke layouts (.contact-grid, .team-grid, .offices-grid, etc.)
 *
 * Last updated: 2026-05-21
 * ============================================================================ */


/* ============================================================================
 * 1. DESIGN TOKENS — CSS custom properties exposed on every .prism-page
 * ============================================================================ */
.prism-page {
    /* Brand */
    --prism-navy: #0a2540;
    --prism-navy-mid: #15446b;
    --prism-blue: #0a78d6;
    --prism-blue-dark: #0962b3;
    --prism-blue-tint: #eaf3fc;
    --prism-blue-deep: #cfe1f5;

    /* Neutrals */
    --prism-page-bg: #f8fafb;
    --prism-card-bg: #ffffff;
    --prism-border: #eef1f4;
    --prism-border-strong: #d4dce4;
    --prism-text: #0a2540;
    --prism-text-muted: #4a5868;
    --prism-text-faint: #6c7a89;
    --prism-text-disabled: #94a3b3;

    /* Semantic accent */
    --prism-success: #28a745;
    --prism-success-tint: #e8f7ec;
    --prism-error: #d62828;

    /* Shadows */
    --prism-shadow-card: 0 4px 16px rgba(10,37,64,0.06);
    --prism-shadow-card-hover: 0 12px 28px rgba(10,37,64,0.10);
    --prism-shadow-overlap: 0 8px 32px rgba(10,37,64,0.10);

    /* Radii */
    --prism-radius-card: 14px;
    --prism-radius-button: 8px;
    --prism-radius-pill: 24px;

    background: var(--prism-page-bg);
}


/* ============================================================================
 * 2. PAGE RHYTHM
 * ============================================================================ */
.prism-page section { padding: 64px 0; }
@media (max-width: 720px) { .prism-page section { padding: 44px 0; } }


/* ============================================================================
 * 3. SECTION TITLE (eyebrow + h2 + lede) — used on every modernised page
 * ============================================================================ */
.prism-page .section-title {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
}
.prism-page .section-title .eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--prism-blue);
    font-weight: 700;
    margin-bottom: 10px;
}
.prism-page .section-title h2 {
    font-size: 32px;
    font-weight: 600;
    color: var(--prism-text);
    text-transform: none;
    margin: 0 0 12px;
    line-height: 1.25;
}
.prism-page .section-title p {
    font-size: 16px;
    color: var(--prism-text-muted);
    line-height: 1.6;
    margin: 0;
}


/* ============================================================================
 * 4. STAT CONTENT (number / label / sub triple)
 *    The CONTAINER (.home-stats, .about-stats etc.) stays inline because
 *    each page positions it slightly differently. The inner .stat is shared.
 * ============================================================================ */
.prism-page .stat { text-align: center; padding: 8px 4px; }
.prism-page .stat .num {
    font-size: 36px;
    font-weight: 700;
    color: var(--prism-blue);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.prism-page .stat .label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--prism-text-faint);
    margin-top: 6px;
    font-weight: 600;
}
.prism-page .stat .sub {
    font-size: 13px;
    color: var(--prism-text-disabled);
    margin-top: 4px;
}
/* Vertical dividers between stats; collapse responsively. */
.prism-page .stat + .stat { border-left: 1px solid var(--prism-border); }
@media (max-width: 820px) {
    .prism-page .stat + .stat { border-left: none; }
    .prism-page .stat:nth-child(odd) { border-right: 1px solid var(--prism-border); }
}
@media (max-width: 480px) {
    .prism-page .stat:nth-child(odd) { border-right: none; }
    .prism-page .stat + .stat { border-top: 1px solid var(--prism-border); padding-top: 18px; }
}


/* ============================================================================
 * 5. ANSWER-FIRST CARD (GEO pattern — Last reviewed + dense definitional para)
 *    Used on home + services. Adding .answer-card class is enough.
 * ============================================================================ */
.prism-page .answer-card {
    max-width: 980px;
    margin: 0 auto;
    background: var(--prism-card-bg);
    border-radius: var(--prism-radius-card);
    padding: 36px 40px;
    box-shadow: var(--prism-shadow-card);
    border-left: 4px solid var(--prism-blue);
}
@media (max-width: 600px) {
    .prism-page .answer-card { padding: 24px 20px; }
}
.prism-page .answer-card .meta {
    font-size: 12px;
    color: var(--prism-text-faint);
    margin-bottom: 14px;
}
.prism-page .answer-card .meta time {
    color: var(--prism-text);
    font-weight: 600;
}
.prism-page .answer-card p.lede {
    font-size: 17px;
    color: var(--prism-text);
    line-height: 1.6;
    margin: 0 0 14px;
}
.prism-page .answer-card p {
    font-size: 15px;
    color: var(--prism-text-muted);
    line-height: 1.7;
    margin: 0 0 10px;
}


/* ============================================================================
 * 6. DEFINITION LIST (GEO glossary, used on home + services)
 * ============================================================================ */
.prism-page .def-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 36px;
}
@media (max-width: 820px) {
    .prism-page .def-grid { grid-template-columns: 1fr; }
}
.prism-page .def-grid dl { margin: 0; padding: 0; }
.prism-page .def-grid dt {
    font-size: 16px;
    font-weight: 700;
    color: var(--prism-text);
    margin: 0 0 6px;
}
.prism-page .def-grid dd {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--prism-text-muted);
    line-height: 1.65;
}


/* ============================================================================
 * 7. HOWTO STEPS (used on home + services)
 * ============================================================================ */
.prism-page .howto-steps {
    max-width: 900px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.prism-page .howto-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--prism-border);
}
.prism-page .howto-step:first-child { border-top: none; }
.prism-page .howto-step .num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--prism-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}
.prism-page .howto-step .body h3 {
    font-size: 18px;
    margin: 6px 0 6px;
    color: var(--prism-text);
}
.prism-page .howto-step .body p {
    margin: 0;
    font-size: 15px;
    color: var(--prism-text-muted);
    line-height: 1.6;
}


/* ============================================================================
 * 8. COMPARISON TABLE (used on home + services)
 * ============================================================================ */
.prism-page .compare-wrap {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--prism-card-bg);
    border-radius: var(--prism-radius-card);
    box-shadow: var(--prism-shadow-card);
    overflow: hidden;
}
.prism-page .compare-wrap table { width: 100%; border-collapse: collapse; }
.prism-page .compare-wrap caption {
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--prism-text);
    font-size: 15px;
    background: var(--prism-page-bg);
    border-bottom: 1px solid var(--prism-border);
}
.prism-page .compare-wrap th,
.prism-page .compare-wrap td {
    padding: 14px 18px;
    text-align: left;
    font-size: 15px;
    border-bottom: 1px solid var(--prism-border);
    vertical-align: top;
}
.prism-page .compare-wrap th {
    background: var(--prism-navy);
    color: #fff;
    font-weight: 600;
}
.prism-page .compare-wrap th.col-prism { background: var(--prism-blue); }
.prism-page .compare-wrap tr:last-child td { border-bottom: none; }
.prism-page .compare-wrap td.feature,
.prism-page .compare-wrap td.q {
    font-weight: 500;
    color: var(--prism-text);
}
.prism-page .compare-wrap td.tick { color: var(--prism-success); font-size: 18px; }
.prism-page .compare-wrap td.cross { color: var(--prism-error); font-size: 18px; }
.prism-page .compare-wrap td.note { color: var(--prism-text-faint); }
.prism-page .compare-wrap td a {
    color: var(--prism-blue);
    font-weight: 600;
    text-decoration: none;
}
.prism-page .compare-wrap td a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .prism-page .compare-wrap th,
    .prism-page .compare-wrap td { padding: 10px 12px; font-size: 13px; }
}


/* ============================================================================
 * 9. FAQ (<details>/<summary> accordion, matches FAQPage schema)
 *    Used on home, services, contact (and any future page with FAQs).
 * ============================================================================ */
.prism-page .faq-list { max-width: 880px; margin: 0 auto; }
.prism-page .faq-item {
    background: var(--prism-card-bg);
    border: 1px solid var(--prism-border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}
.prism-page .faq-item summary {
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--prism-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.prism-page .faq-item summary::-webkit-details-marker { display: none; }
.prism-page .faq-item summary::after {
    content: "+";
    font-size: 22px;
    color: var(--prism-blue);
    font-weight: 400;
    transition: transform .15s;
    line-height: 1;
}
.prism-page .faq-item[open] summary::after { transform: rotate(45deg); }
.prism-page .faq-item summary:hover { background: var(--prism-page-bg); }
.prism-page .faq-item .answer {
    padding: 0 22px 20px;
    font-size: 15px;
    color: var(--prism-text-muted);
    line-height: 1.7;
}


/* ============================================================================
 * 10. BREADCRUMB inside hero (navy text on dark gradient)
 *     Each page's hero wrapper supplies its own padding/colour overrides
 *     where needed; this is the base.
 * ============================================================================ */
.prism-page .prism-hero-breadcrumb {
    margin-top: 22px;
    font-size: 13px;
    color: #b5c6d7;
}
.prism-page .prism-hero-breadcrumb a {
    color: #cfdce8;
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 220, 232, .3);
}
.prism-page .prism-hero-breadcrumb a:hover { color: #fff; }


/* ============================================================================
 * 11. DIAGONAL SPLIT HERO (LanguageLine-inspired)
 *     Navy text panel on the left, photographic panel on the right with a
 *     diagonal seam and a Prism-blue accent stripe along the diagonal.
 *     Reusable across all internal pages (services, about, our-clients, sectors).
 *
 *     HTML shape:
 *     <header class="prism-hero-split">
 *       <div class="hero-photo-wrap"><div class="hero-photo"
 *            style="background-image:url('/images/x.jpg')"></div></div>
 *       <div class="shell">
 *         <div class="hero-text">
 *           <p class="hero-eyebrow">EYEBROW</p>
 *           <h1>Heading</h1>
 *           <p class="hero-lead">Supporting sentence.</p>
 *           <div class="hero-ctas">
 *             <a class="btn-hero-primary" href="/quote">Get a free quote</a>
 *             <a class="btn-hero-secondary" href="/contact-us">Contact us</a>
 *           </div>
 *           <nav class="hero-breadcrumb" aria-label="Breadcrumb">...</nav>
 *         </div>
 *       </div>
 *     </header>
 * ============================================================================ */
.prism-page .prism-hero-split {
    position: relative;
    background: var(--prism-navy);
    color: #fff;
    overflow: hidden;
}
/* Subtle diagonal hatch motif, bottom-left — ties to the LanguageLine reference. */
.prism-page .prism-hero-split::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 240px;
    height: 240px;
    background-image: repeating-linear-gradient(135deg,
        rgba(10,120,214,0.22) 0, rgba(10,120,214,0.22) 2px,
        transparent 2px, transparent 13px);
    pointer-events: none;
    z-index: 0;
}
/* Right-hand photo panel — bleeds to the viewport edge, diagonal left edge. */
.prism-page .prism-hero-split .hero-photo-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    background: var(--prism-blue);              /* shows as the accent stripe */
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 1;
}
.prism-page .prism-hero-split .hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 8px;                                  /* reveals 8px of accent on the diagonal */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
/* Navy scrim over the photo so it reads as one cohesive hero, not a stuck-on image. */
.prism-page .prism-hero-split .hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(10,37,64,0.55) 0%, rgba(10,37,64,0.10) 45%, rgba(10,37,64,0) 70%);
}
.prism-page .prism-hero-split .shell { position: relative; z-index: 2; }
.prism-page .prism-hero-split .hero-text {
    width: 50%;
    padding: 72px 40px 72px 0;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.prism-page .prism-hero-split .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #9ec5ed;
    font-weight: 700;
    margin: 0 0 14px;
}
.prism-page .prism-hero-split h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.13;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    text-transform: none;
}
.prism-page .prism-hero-split .hero-lead {
    font-size: 17px;
    color: #cfdce8;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 480px;
}
.prism-page .prism-hero-split .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.prism-page .prism-hero-split .btn-hero-primary {
    background: var(--prism-blue);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--prism-radius-button);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    box-shadow: var(--prism-shadow-button);
    transition: background .15s, transform .1s;
}
.prism-page .prism-hero-split .btn-hero-primary:hover {
    background: var(--prism-blue-dark);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.prism-page .prism-hero-split .btn-hero-secondary {
    background: transparent;
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--prism-radius-button);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,0.5);
    transition: background .15s, transform .1s;
}
.prism-page .prism-hero-split .btn-hero-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.prism-page .prism-hero-split .hero-breadcrumb {
    margin-top: 24px;
    font-size: 13px;
    color: #8fa3b8;
}
.prism-page .prism-hero-split .hero-breadcrumb a {
    color: #cfdce8;
    text-decoration: none;
}
.prism-page .prism-hero-split .hero-breadcrumb a:hover { color: #fff; }

/* Tablet / mobile: stack — photo becomes a straight-edged banner above the text. */
@media (max-width: 880px) {
    .prism-page .prism-hero-split .hero-photo-wrap {
        position: relative;
        width: 100%;
        height: 200px;
        -webkit-clip-path: none;
                clip-path: none;
        background: none;
    }
    .prism-page .prism-hero-split .hero-photo {
        left: 0;
        -webkit-clip-path: none;
                clip-path: none;
    }
    .prism-page .prism-hero-split .hero-text {
        width: 100%;
        padding: 44px 0;
        min-height: 0;
    }
    .prism-page .prism-hero-split h1 { font-size: 32px; }
}


/* ============================================================================
 * 12. FEATURE CARD GRID — generic content cards (settings, use-cases, etc.)
 *     Used across the service and sector pages.
 * ============================================================================ */
.prism-page .prism-feature-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .prism-page .prism-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prism-page .prism-feature-grid { grid-template-columns: 1fr; } }
.prism-page .prism-feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .prism-page .prism-feature-grid.cols-2 { grid-template-columns: 1fr; } }
.prism-page .prism-feature-card {
    background: var(--prism-card-bg);
    border: 1px solid var(--prism-border);
    border-radius: var(--prism-radius-card);
    padding: 26px 24px;
    transition: transform .15s, box-shadow .15s;
}
.prism-page .prism-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--prism-shadow-card-hover);
}
.prism-page .prism-feature-card .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--prism-blue-tint);
    color: var(--prism-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}
.prism-page .prism-feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--prism-text);
    margin: 0 0 8px;
    text-transform: none;
}
.prism-page .prism-feature-card p {
    font-size: 14px;
    color: var(--prism-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================================
 * 13. CLOSING CTA BAND — shared across service and sector pages
 * ============================================================================ */
.prism-page .prism-cta {
    background: var(--prism-blue);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}
.prism-page .prism-cta h2 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    text-transform: none;
    margin: 0 0 12px;
}
.prism-page .prism-cta p {
    font-size: 16px;
    color: var(--prism-blue-deep);
    max-width: 580px;
    margin: 0 auto 22px;
    line-height: 1.55;
}
.prism-page .prism-cta .btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.prism-page .prism-cta .btn-on-blue {
    background: #fff;
    color: var(--prism-blue);
    padding: 13px 28px;
    border-radius: var(--prism-radius-button);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    transition: transform .1s, background .15s;
}
.prism-page .prism-cta .btn-on-blue:hover { background: var(--prism-blue-tint); transform: translateY(-1px); text-decoration: none; }
.prism-page .prism-cta .btn-on-blue-outline {
    background: transparent;
    color: #fff;
    padding: 13px 28px;
    border-radius: var(--prism-radius-button);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,0.6);
    transition: transform .1s, background .15s;
}
.prism-page .prism-cta .btn-on-blue-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); text-decoration: none; color: #fff; }

/* ============================================================================
 * 14. PROSE BLOCK — readable body-copy column for service/sector pages
 * ============================================================================ */
.prism-page .prism-prose {
    max-width: 760px;
    margin: 0 auto;
}
.prism-page .prism-prose p {
    font-size: 16px;
    color: var(--prism-text-muted);
    line-height: 1.75;
    margin: 0 0 16px;
}
.prism-page .prism-prose h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--prism-text);
    text-transform: none;
    margin: 36px 0 12px;
    line-height: 1.3;
}
.prism-page .prism-prose h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--prism-text);
    text-transform: none;
    margin: 26px 0 10px;
}
.prism-page .prism-prose ul { margin: 0 0 16px; padding-left: 22px; }
.prism-page .prism-prose li { font-size: 16px; color: var(--prism-text-muted); line-height: 1.7; margin-bottom: 6px; }
.prism-page .prism-prose a { color: var(--prism-blue); }