/* ------------------------------------------------------------------
   product-family.css
   Webcore product-family marketing layer for the `start` site.
   Sits on top of cmx-mkt.css / webcore.css / cms-cards.css - it adds
   only what those do not already provide. Hex literals to match the
   rest of the marketing layer (no CSS custom properties in use here).
   ------------------------------------------------------------------ */


/* ---------- 0. Brand lockup fonts ------------------------------- */
/* Self-hosted from SiteRoot/start/fonts/brand/ rather than a CDN, the
   same way the latitude and fusion apps do it, so the marketing site
   and the products render the wordmark identically. Both faces are
   SIL Open Font License.

   NOTE ON DELIVERY: these .ttf files are git-tracked and reach a
   server through a build (they are registered in WebcoreCorp.csproj),
   whereas this stylesheet is CMS content. The two travel by different
   routes - deploying one without the other leaves the lockup falling
   back to the generic stack. */

@font-face {
    font-family: 'Iceland';
    src: url('../fonts/brand/Iceland-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Orbitron ExtraBold';
    src: url('../fonts/brand/Orbitron-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

/* The lockup is ONLY for a real "webcore <product>" brand - never for a
   page title or a section heading. Orbitron ExtraBold is a heavy display
   face; on anything that is not a product name it reads as shouting.
   Plain titles use .prod-hero-title / .prod-brand-plain below. */


/* ---------- 1. Product family grid (home page + /products hub) ----- */

.prod-grid {
    margin-top: 30px;
}

.prod-grid > [class*="col-"] {
    margin-bottom: 26px;
    display: flex;
}

.prod-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 2px solid #dee7ff;
    border-radius: 9px;
    padding: 26px 24px 20px;
    overflow: hidden;
    box-shadow: 0 .15rem 1.35rem rgba(33, 40, 50, .10);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.prod-card:hover {
    transform: translateY(-4px);
    border-color: #a4d1ff;
    box-shadow: 0 .35rem 1.9rem rgba(33, 40, 50, .18);
}

/* Card header band: the product mark and the brand lockup, inline on a dark
   navy of the hero's family, lifted a few steps. The lockup treatment is the
   product splash screens' (white mark, Iceland "webcore" in #b3aed6, Orbitron
   name in white), on the site's own dark rather than the splash's.

   NAVY, NOT PURPLE, AND ON PURPOSE. Two purples were tried first. #453ba7 is
   the nucleus mark's core-dot accent: filling a band with it turns an accent
   into a field, and the marks' own purple then disappears against a ground of
   its own hue. #14111f is the splash ground: it reads as near-black on a page
   this light, and it left the card in two palettes, since everything below
   the band - .prod-desc, the bullet icons, .prod-more - is site blue. Navy
   puts the band, the nav and the card body on one colour story and leaves the
   marks their accents. #2a3565 rather than the hero's own #0e2350: at card
   size the hero value goes heavy against a white page, and lifting it keeps
   the band a header rather than a slab.

   FULL BLEED BY NEGATIVE MARGIN. The band cancels the card's own top and
   side padding and gives it back as its own, so it reaches the card edges
   without .prod-card's padding having to change. That keeps the padding
   defined in exactly one place, but it does couple the two: the margin here
   must match .prod-card's padding at EVERY breakpoint. There is one other
   breakpoint - 768px, where the card drops to 20px/18px - and it is handled
   in section 9. A new .prod-card padding value needs a matching margin. */
.prod-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -26px -24px 18px;
    padding: 15px 24px;
    background: #2a3565;
}

/* The marks are unrelated shapes - a hex, a rosette, a globe, a medal that
   hangs below its own centre - with different ink-to-viewBox ratios. The
   hero lockups correct for that per mark (see .prod-hero-mark-* below); at
   34px those corrections are all under a pixel, so here the box is fixed and
   the artwork is fitted into it instead. */
.prod-card-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.prod-card-head .prod-brand {
    margin: 0;
    color: #fff;
}

.prod-card-head .prod-brand .wc {
    color: #b3aed6;
}

.prod-card-head .prod-brand-plain {
    color: #fff;
}

/* Step-down for a product name long enough to wrap the band.

   Orbitron ExtraBold is a wide face and the band only has ~250px of text
   column at lg once the 34px mark and its gap are taken out. Every name in
   the family clears that at 1.5rem except serviceDesk, which wraps - and a
   two-line band on one card in a row of three reads as a broken layout next
   to five one-line bands, even though the CARDS are still equal height.

   A modifier rather than a smaller base size, because shrinking all six to
   fit the longest would leave "cmx" and "certifi" looking undersized in
   their own bands. Any future name longer than about 11 characters wants
   this class too. */
.prod-card-head .prod-brand-sm {
    font-size: 1.24rem;
}

.prod-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #e7f0ff;
    color: #007bff;
    font-size: 26px;
    margin-bottom: 16px;
}

.prod-card-icon i {
    line-height: 1;
}

/* Retired by the band above: the tinted glyph tile that used to sit over the
   card title. Kept defined rather than deleted, and switched off only INSIDE
   a product card, because the site-template tiles reuse .prod-card-icon
   outside .prod-card and still want the glyph. Wins on specificity (0-2-0
   against 0-1-0), so the order of the two rules does not matter. */
.prod-card .prod-card-icon {
    display: none;
}

/* Brand lockup: "webcore" in Iceland, the product name in Orbitron
   ExtraBold - matching the product splash screens and app sidebars.

   The element itself carries the Orbitron face so the product name needs
   no markup of its own: it is the bare text node after the .wc span, and
   a text node cannot be targeted by a selector. Iceland is then restored
   on .wc. Iceland has a small x-height next to Orbitron, so .wc is scaled
   back up in em to keep the two optically level - the same relationship
   the apps use (Iceland 16px / Orbitron 13px in the arx sidebar). */
.prod-brand {
    font-family: 'Orbitron ExtraBold', 'Iceland', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: .02em;
    color: #204593;
    margin: 0 0 4px;
}

.prod-brand .wc {
    font-family: 'Iceland', sans-serif;
    font-weight: 400;
    font-size: 1.34em;
    letter-spacing: .01em;
    color: #8b949d;
    margin-right: .1em;
}

/* A product wordmark set inline in running prose - "...published in cmx" -
   rather than as a card heading.

   .prod-brand is a block heading: it carries the Orbitron lockup face but also
   a display size, its own margins and a fixed line-height, none of which belong
   mid-sentence. This keeps the face and resets the box, so the wordmark sits on
   the text baseline instead of pushing the line apart. Replaces the repeated
   inline style="font-size:1em;display:inline;margin:0;line-height:inherit;"
   that was being copied onto every occurrence. */
.prod-brand.prod-inline {
    display: inline;
    font-size: 1em;
    margin: 0;
    line-height: inherit;
}

/* On the full-width blue band the #204593 wordmark is all but invisible, and
   the band sets colour on the section rather than per element - so the wordmark
   has to opt back in to white explicitly. */
.section-pn-fw .prod-brand,
.section-pn-fw .prod-brand.prod-inline {
    color: #fff;
}

/* Card titles that are not a webcore lockup (e.g. "Site templates"). */
.prod-brand-plain {
    font-family: 'Iceland', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 0;
}

.prod-desc {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: #007bff;
    margin: 0 0 14px;
    min-height: 2.6em;
}

.prod-card p {
    font-size: .94rem;
    line-height: 1.5;
    color: #4d4e53;
}

.prod-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.prod-card ul li {
    position: relative;
    padding: 0 0 7px 24px;
    font-size: .92rem;
    line-height: 1.4;
    color: #4d4e53;
}

.prod-card ul li i {
    position: absolute;
    left: 0;
    top: 3px;
    color: #007bff;
    font-size: .95rem;
}

.prod-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef2ff;
}

.prod-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    width: fit-content;
    font-weight: 700;
    font-size: .93rem;
    color: #007bff;
    text-decoration: none;
}

.prod-more:hover {
    color: #204593;
    text-decoration: none;
}

.prod-card.prod-card-wide .prod-desc {
    min-height: 0;
}

/* Inside a tab panel the card headings are feature names, not brands. */
.tab-panel .prod-card .prod-brand {
    font-family: 'Nunito Sans', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0;
    color: #204593;
}


/* ---------- 2. Product page hero -------------------------------- */

.prod-hero {
    position: relative;
    background: url(../img/img26.jpg) #184fc1e0 no-repeat;
    background-position: right;
    background-size: cover;
    background-blend-mode: hard-light;
    align-items: center;
    padding: 66px 0 58px;
    color: #fff;
}

/* Contrast floor for the text column.

   The hero photo is a light sky on the left - exactly where the copy sits - so
   white text over it was only ever legible because of the text-shadow. With the
   shadow gone the type needs a base of its own, and a shadow is the wrong tool
   anyway: it smears a heavy display face. This scrim darkens the left third and
   fades out well before the honeycomb on the right, so the photo is untouched
   where it actually reads as an image. */
.prod-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(14, 35, 80, .80) 0%,
        rgba(14, 35, 80, .58) 40%,
        rgba(14, 35, 80, .12) 68%,
        rgba(14, 35, 80, 0) 82%);
    pointer-events: none;
}

.prod-hero > .container {
    position: relative;
    z-index: 1;
}

/* A product page hero: the brand lockup. */
.prod-hero .prod-hero-brand {
    font-family: 'Orbitron ExtraBold', 'Iceland', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: .02em;
    color: #fff;
    margin: 0;
}

/* Hairline between the identity and the descriptor.

   The hero carries three different jobs - who this is (the lockup), what it is
   (the descriptor) and why you would care (the lead) - and previously they ran
   together as three stacked lines of decreasing size. The rule gives the block
   an actual structure and a beat of rest after a very heavy display face, which
   is also what stops the descriptor reading as an afterthought.

   Applied to the page-title hero too so /products matches the product pages. */
.prod-hero .prod-hero-brand::after,
.prod-hero .prod-hero-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .5);
    margin: 20px 0 17px;
}

/* No margin-right here on purpose. The word space in the markup already gives
   .34em at the h1 size, which is what the brand file has between "webcore" and
   "certifi" (159px against a 472px Orbitron em). Adding .1em on top made the
   lockup read looser than the logo it is reproducing. */
.prod-hero .prod-hero-brand .wc {
    font-family: 'Iceland', sans-serif;
    font-weight: 400;
    font-size: 1.34em;
    letter-spacing: .01em;
    opacity: .72;
}

/* An all-caps product name.

   CURRENTLY UNUSED. fusion was the one product set in capitals and has since
   been lowercased everywhere, so nothing carries this class today. It is kept
   because the correction below is derived rather than eyeballed, and the next
   all-caps product name would need exactly it again. The reasoning, written
   while FUSION was still capitalised:

   FUSION is the only product whose name is set in capitals, and Orbitron's
   caps stand .72em where the lowercase names' x-height is .58em - 24% taller
   at the same font-size. Left alone it towers over the "webcore" beside it and
   over the other four product pages, which is exactly the "too big" the
   lockup was reported as.

   .806 is 0.58/0.72. It sets FUSION's cap height equal to the x-height the
   lowercase names render at, which puts the lockup on a 1.24 ratio to
   "webcore" - the same figure certifi measures. So this is a derivation, not
   a nudge to taste, and it is the class any future all-caps product needs.

   Deliberately NOT applied to the mark, which stays anchored to the h1 size:
   every page's mark should be the same absolute size, and it is the letters
   that were out of step, not the artwork. */
.prod-hero .prod-hero-brand .pn-caps {
    font-size: .806em;
}

/* The product mark, set inline ahead of the wordmark.

   Sizing is PER MARK, not shared, and deliberately so. Each product's .svg has
   its own ink-to-viewBox relationship - certifi's ribbon fills y36-206 of a 210
   box and hangs below the baseline, nucleus's hexagon is centred in a square
   512 box - so one height/vertical-align pair cannot place both. The shared
   class carries only what genuinely is shared; the modifier carries the
   geometry. Adding a new product mark means adding a modifier, not retuning
   this rule and breaking the others. */
.prod-hero .prod-hero-brand .prod-hero-mark {
    width: auto;
}

/* certifi. Every number measured off logo-webcore-certifi-dark.png and
   expressed against the h1 font-size, so the lockup holds its proportions at
   every breakpoint:

     mark ink height  = 2.32 x the "certifi" x-height (635px vs 274px)
     mark ink sits    = .89em above the baseline, .46em below it
     gap to "webcore" = .65em (305px against a 472px Orbitron em)

   viewBox is 200x210 with artwork in y36-206 / x50-150, so the box is scaled
   to 1.66em to land 1.34em of ink, and the .4em of built-in side bearing is
   subtracted from the .65em gap. */
.prod-hero .prod-hero-brand .prod-hero-mark-certifi {
    height: 1.66em;
    vertical-align: -.49em;
    margin-right: .25em;
}

/* Marks other than certifi have no lockup file fixing their relationship to
   the wordmark, so they are matched to each other instead: ~1.19em2 of ink,
   optically centred on the cap band (ink centre .40em above the baseline -
   just above the .385em geometric centre, because a geometric mark set dead
   centre reads low), and the same .646em gap certifi's brand file specifies.

   AREA is the thing held constant, not height. These are unrelated shapes -
   a tall sparse ribbon, a wide rosette, a round globe - and matching them on
   height alone makes the wide ones outweigh the wordmark. */

/* nucleus - the atom. viewBox 200x200; the three rx78/ry30 ellipses at
   0/60/120 plus the electron at x178 give ink x20-184 / y28.8-171.2, so .82 of
   the box wide by .712 tall. Note this is NOT the hexagon that used to sit at
   this filename - that artwork is cmx's, and is now under cmx-mark-wt.svg. */
.prod-hero .prod-hero-brand .prod-hero-mark-nucleus {
    height: 1.43em;
    vertical-align: -.315em;
    margin-right: .53em;
}

/* serviceDesk - the headset. viewBox 200x200 like nucleus, and drawn to sit in
   the same ink box (x22-178 / y35-179 after its -10 translate), so it takes the
   same numbers rather than needing its own derivation. */
.prod-hero .prod-hero-brand .prod-hero-mark-servicedesk {
    height: 1.43em;
    vertical-align: -.315em;
    margin-right: .53em;
}

/* cmx - the webcore hex. viewBox 512x512, ink y45.5-466.5 / x73-439 once the
   11-unit stroke is allowed for: .822 of the box tall, .715 wide, centred. */
.prod-hero .prod-hero-brand .prod-hero-mark-cmx {
    height: 1.42em;
    vertical-align: -.31em;
    margin-right: .44em;
}

/* latitude. viewBox 240x240, globe centred; ink spans x +-89.5 / y +-96 once
   the strokes are allowed for, so .746 of the box wide and .80 tall. Sized to
   the same 1.15em of ink as nucleus and centred on the cap band the same way. */
.prod-hero .prod-hero-brand .prod-hero-mark-latitude {
    height: 1.44em;
    vertical-align: -.32em;
    margin-right: .46em;
}

/* fusion. viewBox 256x256, but the ink is NOT the full rosette: the three
   satellite dots push it to x33-227.5 / y40.8-215.2, giving .760 wide by .681
   tall - a wide, low box unlike the other three.

   Matched on AREA rather than height, which is why the numbers look out of
   step with nucleus and latitude. Sizing this one to 1.15em of ink like the
   others would have made it 1.28em wide as well, and a wide rosette at that
   scale outweighs the wordmark it is supposed to sit beside. At 1.52em of box
   it lands ~1.04em x 1.16em of ink - the same visual mass as the other marks
   carry, which is the thing that actually needs to match. */
.prod-hero .prod-hero-brand .prod-hero-mark-fusion {
    height: 1.52em;
    vertical-align: -.36em;
    margin-right: .48em;
}

/* A hero that is a page title rather than a product - e.g. "Our Products".
   Deliberately the ordinary site display face: the Orbitron lockup belongs
   to product names only, and using it on a section title made the heading
   read as a heavy brand mark. */
.prod-hero .prod-hero-title {
    font-family: 'Nunito Sans', 'DM Sans', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    line-height: 1.15;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
}

/* What the product IS - the line that has to survive a five-second look, and
   the one carrying the most information in the block. At 300 weight it read as
   a caption hung off the wordmark; 500 and full white make it the second tier
   rather than a trailing note. The width cap is set by the longest descriptor
   in the family ("Content Management, Portals & Documentation Platform"), so it
   breaks to two balanced lines instead of running the width of the hero. */
.prod-hero-sub {
    font-size: 1.32rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .005em;
    color: #ffffff;
    max-width: 620px;
    margin: 0 0 13px;
}

.prod-hero-lead {
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.62;
    color: #dce8ff;
    max-width: 690px;
    margin: 0 0 26px;
}

.prod-hero-cta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    width: fit-content;
}

.prod-hero-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    width: fit-content;
}


/* ---------- 3. Capability strip (under the page intro) ----------- */

.prod-caps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 26px;
    padding: 0;
    list-style: none;
}

.prod-caps li {
    padding: 6px 14px;
    border: 1px solid #d0d7ff;
    border-radius: 20px;
    background: #f5f8ff;
    font-size: .88rem;
    font-weight: 600;
    color: #204593;
    white-space: nowrap;
}


/* ---------- 4. "Works with" / integrations row ------------------- */

.prod-stack {
    margin-top: 10px;
}

.prod-stack > [class*="col-"] {
    margin-bottom: 20px;
    display: flex;
}

.prod-stack-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    border: 6px solid #dee7ff;
    border-radius: 6px;
    background: #fff;
}

.prod-stack-item h4 {
    font-family: 'Iceland', 'Nunito Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #204593;
    margin: 0 0 8px;
}

.prod-stack-item p {
    font-size: .92rem;
    line-height: 1.5;
    color: #4d4e53;
    margin-bottom: 14px;
}

.prod-stack-item .prod-more {
    margin-top: auto;
}


/* ---------- 5. Early-access / status notice --------------------- */
/* Blue informational callout - never amber. Used by webcore fusion. */

.prod-notice {
    background: #eaf3ff;
    border-left: 4px solid #007bff;
    border-radius: 6px;
    padding: 9px 13px;
    margin: 18px 0;
}

.prod-notice h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #204593;
    margin: 0 0 3px;
}

.prod-notice p {
    font-size: .92rem;
    line-height: 1.45;
    color: #4d4e53;
    margin: 0;
}


/* ---------- 6. Home page hero spacing --------------------------- */
/* Replaces the inline margins that used to sit on the hero row.    */

.fp-hero-row {
    margin-top: 80px;
    margin-bottom: 100px;
}


/* ---------- 7. Client logo strip -------------------------------- */
/* These replace per-image inline styles. clients.css sets a shared
   `.clients img { height: 67px; padding: 15px 0 }` at specificity
   0-1-1, so each override must be scoped `.clients img.<class>`
   (0-2-1) to win - a bare single class would lose and the logo would
   fall back to the shared height. The old inline styles applied at
   every breakpoint, including under the 768px rule in clients.css,
   so these are deliberately declared once and left unscoped by any
   media query to reproduce that behaviour exactly. */

.client-logo {
    margin-left: 32px;
}

.clients img.logo-h55 {
    height: 55px;
}

.clients img.logo-ba {
    height: 76px;
    padding: 6px 0;
}


/* ---------- 8. Home page product band --------------------------- */

.prod-band {
    background: linear-gradient(180deg, #78b8ff24 0%, #ffffff 82%);
    padding: 50px 0 20px;
}


/* ---------- 9. Responsive --------------------------------------- */

@media only screen and (max-width: 1200px) {
    .prod-desc {
        min-height: 0;
    }

    .prod-brand {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 992px) {
    .prod-hero {
        padding: 46px 0 40px;
    }

    .prod-hero .prod-hero-brand {
        font-size: 2.3rem;
    }

    .prod-hero .prod-hero-title {
        font-size: 2.2rem;
    }

    .prod-hero .prod-hero-brand::after,
    .prod-hero .prod-hero-title::after {
        margin: 16px 0 14px;
    }

    .prod-hero-sub {
        font-size: 1.15rem;
    }
}

@media only screen and (max-width: 768px) {
    .prod-hero {
        padding: 34px 0 30px;
    }

    .prod-hero .prod-hero-brand {
        font-size: 1.75rem;
    }

    .prod-hero .prod-hero-title {
        font-size: 1.7rem;
    }

    .prod-hero .prod-hero-brand::after,
    .prod-hero .prod-hero-title::after {
        width: 48px;
        margin: 13px 0 12px;
    }

    /* The scrim is a left-to-right fade on desktop because the copy sits in the
       left column. Once the hero is a single narrow column the text crosses the
       whole width, so it has to darken the whole width too. */
    .prod-hero::before {
        background: linear-gradient(180deg,
            rgba(14, 35, 80, .72) 0%,
            rgba(14, 35, 80, .62) 100%);
    }

    .prod-hero-sub {
        font-size: 1.05rem;
    }

    .prod-hero-cta {
        flex-wrap: wrap;
        white-space: normal;
        width: 100%;
    }

    .prod-card {
        padding: 20px 18px 16px;
    }

    /* Must track .prod-card's padding above - see the note on .prod-card-head. */
    .prod-card-head {
        margin: -20px -18px 14px;
        padding: 13px 18px;
    }

    .prod-brand {
        font-size: 1.3rem;
    }

    .prod-brand-plain {
        font-size: 1.8rem;
    }

    .prod-caps {
        justify-content: flex-start;
    }

    .prod-caps li {
        white-space: normal;
    }

    .fp-hero-row {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .client-logo {
        margin-left: 0;
        margin-top: 14px;
    }

    .prod-band {
        padding: 26px 0 10px;
    }
}