/* Consultancy pages (home, about, case studies, resources, contact, QFOOD):
   approved editorial collages and the light/dark theme layer.
   Colours come from the site tokens in custom.css (--s-*, contract A). Dark is the default and
   matches the original dark design; html[data-theme="light"] gives each dark band a light
   counterpart. Photos and collages are never recoloured: light collages sit in a frame on dark
   pages, dedicated light panoramas accompany the interior pages in light mode. Filled brand buttons and the red
   brand bands keep white text in both themes. */

/* ── Shared helpers ─────────────────────────────────────────────────────── */
.pg-chip { background: var(--s-brand-tint); color: var(--s-brand-text); }
.pg-chip--line { border: 1px solid var(--s-brand-ring); }
.pg-icon-box { background: var(--s-brand-tint); color: var(--s-brand-text); }
.pg-text-2 { color: color-mix(in srgb, var(--s-text) 75%, transparent); }
.pg-text-dim { color: var(--s-text-dim); }
.pg-line { background: var(--s-brand); }

/* Translucent panel on a band; a white card in light mode */
.pg-glass { background: var(--s-overlay-1); border: 1px solid var(--s-border); }
html[data-theme="light"] .pg-glass { background: var(--s-surface); box-shadow: var(--s-shadow-sm); }
.pg-tile { background: var(--s-overlay-1); }
html[data-theme="light"] .pg-tile { background: var(--s-surface-2); }

/* Card that lifts on hover (replaces the inline onmouseover handlers, which production CSP blocks) */
.pg-card { background: var(--s-surface); border: 1px solid var(--s-border); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.pg-lift:hover { border-color: var(--s-brand); transform: translateY(-4px); box-shadow: var(--s-shadow-sm); }
.pg-lift--sm:hover { transform: translateY(-2px); }

/* Light collage artwork (white background) shown as a framed plate */
.pg-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--s-border); background: #fff; }
.pg-frame > img { display: block; }

/* Buttons */
.pg-btn-ghost { background: transparent; color: color-mix(in srgb, var(--s-text) 90%, transparent); border: 1px solid color-mix(in srgb, var(--s-text) 25%, transparent); border-radius: 8px; transition: border-color .25s ease, background .25s ease, color .25s ease; }
.pg-btn-ghost:hover, .pg-btn-ghost:focus-visible { color: var(--s-text); border-color: color-mix(in srgb, var(--s-text) 60%, transparent); background: var(--s-overlay-1); }
/* White button on a red brand band: same in both themes */
.pg-btn-on-brand { background: #fff; color: var(--s-brand); border: none; border-radius: 10px; transition: transform .25s ease, box-shadow .25s ease; }
.pg-btn-on-brand:hover, .pg-btn-on-brand:focus-visible { background: #fff; color: var(--s-brand-hover); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.pg-btn-outline { color: var(--s-brand-text); border: 1px solid var(--s-brand-text); background: transparent; }
.pg-btn-outline:hover, .pg-btn-outline:focus-visible { color: var(--s-on-brand); background: var(--s-brand); border-color: var(--s-brand); }
/* Pressed state: Bootstrap's .btn:active paints --bs-btn-active-*, which none of the site's own button classes set,
   so they turned transparent while held. Each keeps its hover look while pressed (qfood.html sets the same for its page). */
.btn-brand { --bs-btn-active-bg: var(--s-brand-hover); --bs-btn-active-color: var(--s-on-brand); --bs-btn-active-border-color: transparent; }
.pg-btn-ghost { --bs-btn-active-bg: var(--s-overlay-2); --bs-btn-active-color: var(--s-text); --bs-btn-active-border-color: color-mix(in srgb, var(--s-text) 60%, transparent); }
.pg-btn-on-brand { --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--s-brand-hover); --bs-btn-active-border-color: transparent; }
.pg-btn-outline { --bs-btn-active-bg: var(--s-brand-hover); --bs-btn-active-color: var(--s-on-brand); --bs-btn-active-border-color: var(--s-brand-hover); }

/* ── Home: hero ─────────────────────────────────────────────────────────── */
.home-hero__img { filter: brightness(.25); }
/* Dark veil kept as legacy rgba: a gradient with color-mix() stops would interpolate in oklab and shift the red */
.home-hero__veil { background: linear-gradient(160deg, rgba(26, 26, 26, .85) 0%, rgba(193, 39, 45, .35) 100%); }
.pg-stat-val { color: var(--s-brand-text); }
/* Opaque chip: the veil turns red towards the bottom right, which would lower the chip's contrast */
.home-hero .pg-chip { background: color-mix(in srgb, var(--s-brand) 10%, var(--s-bg)); }
/* Light: the same render as a neutral grey negative (an abstract texture, not a photo of people); grayscale first so no colour fringes appear, the veil carries the brand tone */
html[data-theme="light"] .home-hero { background: var(--s-bg); }
html[data-theme="light"] .home-hero__img { filter: grayscale(1) invert(1) contrast(.85); opacity: .55; }
html[data-theme="light"] .home-hero__veil {
    background: linear-gradient(160deg, color-mix(in srgb, var(--s-bg) 92%, transparent) 0%, color-mix(in srgb, var(--s-bg) 72%, transparent) 55%, color-mix(in srgb, var(--s-brand) 16%, transparent) 100%);
}

/* ── Home: Organisation Security band ───────────────────────────────────── */
.home-product { background: linear-gradient(160deg, var(--s-band-start) 0%, #2a1012 100%); } /* #2a1012: the original band's red end */
html[data-theme="light"] .home-product { background: linear-gradient(160deg, var(--s-bg-alt) 0%, color-mix(in srgb, var(--s-brand) 9%, var(--s-bg-alt)) 100%); }
/* OrgSec logo: light wordmark on dark, original on light */
.pg-logo-light { display: none !important; }
html[data-theme="light"] .pg-logo-light { display: inline-block !important; }
html[data-theme="light"] .pg-logo-dark { display: none !important; }

/* ── Interior page heroes (about, resources, contact, case studies) ─────── */
.about-hero, .resources-hero, .cs-hero, .contact-hero { background: var(--s-bg-alt); }
.about-hero::before, .resources-hero::before, .contact-hero::before {
    opacity: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.about-hero::before { background-image: url('images/collage/about-hero-dark.png'); }
.resources-hero::before { background-image: url('images/collage/resources-hero-dark.png'); }
.contact-hero::before { background-image: url('images/collage/contact-hero-dark.png'); }
.about-hero::after, .resources-hero::after, .contact-hero::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--s-band-start) 45%, transparent) 0%, color-mix(in srgb, var(--s-band-start) 25%, transparent) 42%, transparent 70%);
}
.cs-hero::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--s-band-start) 85%, transparent) 0%, color-mix(in srgb, var(--s-band-start) 65%, transparent) 42%, transparent 72%),
                url('images/collage/cases-hero-dark.png') center/cover no-repeat;
    opacity: 1;
}
.cs-hero .container { text-align: left; }
.cs-hero h1, .cs-hero p { max-width: 600px; margin-left: 0; margin-right: 0; }
.pg-hero-sub { color: color-mix(in srgb, var(--s-text) 75%, transparent); }
.cs-hero .pg-hero-sub { color: color-mix(in srgb, var(--s-text) 85%, transparent); }
.pg-badge { background: color-mix(in srgb, var(--s-text) 12%, transparent); color: color-mix(in srgb, var(--s-text) 90%, transparent); }
@media (max-width: 991px) {
    .about-hero::before, .resources-hero::before, .contact-hero::before, .cs-hero::after {
        opacity: .38;
        background-position: 65% center;
    }
}

/* Contact retains its dark collage in a frame in light mode. */
.about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: .75rem; }
@media (min-width: 576px)  { .about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: calc((100% - 540px) / 2 + .75rem); } }
@media (min-width: 768px)  { .about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: calc((100% - 720px) / 2 + .75rem); } }
@media (min-width: 992px)  { .about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: calc((100% - 960px) / 2 + .75rem); } }
@media (min-width: 1200px) { .about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: calc((100% - 1140px) / 2 + .75rem); } }
@media (min-width: 1400px) { .about-hero, .resources-hero, .contact-hero, .cs-hero { --pg-edge: calc((100% - 1320px) / 2 + .75rem); } }
html[data-theme="light"] .contact-hero::after { content: none; }
html[data-theme="light"] .contact-hero::before {
    inset: calc(72px + 1.25rem) var(--pg-edge) 1.5rem 60%;
    border-radius: 16px;
    border: 1px solid var(--s-border);
    box-shadow: var(--s-shadow-sm);
    background-color: #141414;
    background-size: cover;
    background-position: 88% center;
    opacity: 1;
}
/* Keep long case-study headings within the quiet area at tablet landscape widths. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html[data-theme="light"] .cs-hero h1, html[data-theme="light"] .cs-hero p { max-width: 520px; }
}
@media (max-width: 991.98px) {
    html[data-theme="light"] .contact-hero { padding-bottom: calc(190px + 2.5rem); }
    html[data-theme="light"] .contact-hero::before {
        inset: auto var(--pg-edge) 1.5rem var(--pg-edge);
        height: 190px;
        background-position: 82% center;
    }
}

/* Light panoramas: dedicated artwork, blended into the theme surface. */
html[data-theme="light"] .about-hero::after,
html[data-theme="light"] .resources-hero::after { content: none; }
html[data-theme="light"] .about-hero::before,
html[data-theme="light"] .resources-hero::before,
html[data-theme="light"] .cs-hero::after {
    background-color: var(--s-bg-alt);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mask-image: linear-gradient(90deg, transparent 35%, #000 75%);
}
html[data-theme="light"] .about-hero::before { background-image: url('images/collage/about-hero-light.png'); }
html[data-theme="light"] .resources-hero::before { background-image: url('images/collage/resources-hero-light.png'); }
html[data-theme="light"] .cs-hero::after { background-image: url('images/collage/cases-hero-light.png'); }
@media (max-width: 991px) {
    html[data-theme="light"] .about-hero::before,
    html[data-theme="light"] .resources-hero::before,
    html[data-theme="light"] .cs-hero::after {
        opacity: .22;
        background-position: 65% center;
        mask-image: none;
    }
}

/* ── About ──────────────────────────────────────────────────────────────── */
.mission-section .img-mask { height: auto !important; }
.mission-section .img-mask img { width: 100%; height: auto; object-fit: contain; }
.stat-band { background: var(--s-bg-alt); }
html[data-theme="light"] .stat-band { background: var(--s-surface); border-top: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }
.pg-band { background: var(--s-bg-alt); }
.pg-assurance { background: linear-gradient(135deg, color-mix(in srgb, var(--s-brand) 15%, transparent) 0%, color-mix(in srgb, var(--s-brand) 5%, transparent) 100%); border: 1px solid var(--s-brand-ring); }
html[data-theme="light"] .pg-assurance { background: linear-gradient(135deg, color-mix(in srgb, var(--s-brand) 10%, var(--s-surface)) 0%, var(--s-surface) 100%); }

/* ── Resources ──────────────────────────────────────────────────────────── */
.resources-framework-image { height: auto !important; object-fit: contain; }
.resources-framework-image.pg-frame { background: #fafafb; } /* the artwork's own white, so the letterbox is seamless */
.resources-cta { background: linear-gradient(135deg, var(--s-band-start) 0%, #2a1015 50%, var(--s-band-mid) 100%); }
html[data-theme="light"] .resources-cta {
    background: linear-gradient(135deg, var(--s-surface) 0%, color-mix(in srgb, var(--s-brand) 8%, var(--s-surface)) 100%);
    border: 1px solid var(--s-border);
    box-shadow: var(--s-shadow-sm);
}

/* ── Case studies ───────────────────────────────────────────────────────── */
.cs-card .col-lg-5 { align-self: flex-start; }
.cs-card-img.h-100 { height: auto !important; object-fit: contain; background: #fff; }
/* Dark: the white collage becomes an inset plate instead of a white half of the card */
@media (min-width: 992px) {
    html:not([data-theme="light"]) .cs-card .col-lg-5 { padding: 1.25rem 0 1.25rem 1.25rem; }
    html:not([data-theme="light"]) .cs-card-img { border-radius: 12px; }
}
@media (max-width: 991.98px) {
    html:not([data-theme="light"]) .cs-card .col-lg-5 { padding: 1rem 1rem 0; }
    html:not([data-theme="light"]) .cs-card-img { border-radius: 12px; }
}