/* =====================================================
   Premium manufacturer profile (admin-managed, paid)
   Rendered inside layouts/main for above-Basic tiers.
   ===================================================== */
/* --pp-logo-green sampled from assets/images/logo.png — its dominant dark green. */
.pp { --pp-primary: var(--primary, #0d6efd); --pp-dark: #0b1220; --pp-logo-green: #106030; color: #1f2937; }
/* No .container override: Bootstrap plus miimd.css already size it (1320px
   above 1400px viewports). Pinning 1200px here made the premium page 120px
   narrower than its own header and every other page on large displays. */
.pp .pp-h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.25rem; color: #0b1220; }
.pp .pp-sub { color: #6b7280; margin-top: -.75rem; margin-bottom: 1.5rem; }
/* 3.5rem, not 5rem: two stacked sections each contribute their padding, so
   5rem read as a 10rem hole between same-coloured bands like About → Founder. */
.pp-section { padding: 3.5rem 0; }
.pp-muted { background: #f6f8fb; }

/* Anchor nav */
/* Dark-green bar: white text, and the CTA inverts to white-on-green so it
   still reads as the primary action against the dark background. */
.pp-nav { position: sticky; top: 0; z-index: 30; background: var(--pp-logo-green); border-bottom: 1px solid rgba(255,255,255,.12); }
.pp-nav-inner { display: flex; align-items: center; gap: 1rem; height: 60px; }
.pp-nav-brand { font-weight: 800; color: #fff; }
.pp-nav-links { display: flex; gap: 1.25rem; list-style: none; margin: 0 auto 0 1.5rem; padding: 0; flex-wrap: wrap; }
.pp-nav-links a { color: rgba(255,255,255,.82); font-size: .9rem; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.pp-nav-links a:hover, .pp-nav-links a.active { color: #fff; border-bottom-color: #fff; }
.pp-nav-cta { background: #fff; color: var(--pp-logo-green); padding: .5rem 1rem; border-radius: 6px; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pp-nav-cta:hover { color: var(--pp-logo-green); opacity: .92; }

/* Hero */
/* Light hero: the artwork behind it is pale, so every colour here is tuned for
   a light background. The fallback colour is light too — a dark fallback would
   make this same dark text invisible for manufacturers with no hero image. */
.pp-hero { background: #f2f7f4; background-size: cover; background-position: center; color: #1f2937; padding: 4rem 0; }
.pp-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: start; }
/* Logo chip stays white: most manufacturer logos are dark-on-transparent and
   need a clean plate rather than the artwork showing through them. */
.pp-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    max-width: 320px;
}
.pp-hero-logo img { max-height: 90px; max-width: 100%; object-fit: contain; display: block; }
.pp-hero-text h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: .75rem; color: #0b1220 !important; }
.pp-hero-tagline { color: #047857; font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.pp-hero-desc { color: #374151; line-height: 1.7; max-width: 640px; }
.pp-hero-founding { margin-top: 1.25rem; font-weight: 600; color: #0b1220; }
.pp-hero-badges { display: flex; flex-direction: column; gap: .75rem; }
.pp-badge { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.96); color: #0b1220; border: 1px solid rgba(15, 23, 42, .08); border-radius: 10px; padding: .75rem 1rem; }
.pp-badge i { font-size: 1.3rem; color: var(--pp-primary); width: 26px; text-align: center; }
.pp-badge-title { font-weight: 700; font-size: .9rem; }
.pp-badge-sub { font-size: .78rem; color: #6b7280; }

/* Company Overview — compact two-column spec list.
   Label sits beside the value, not above it: the label line plus its margin
   was 25px of every 80px row. Multi-column, not grid — grid gives the two
   columns a shared row height, so one chip row that wraps opens a gap beside
   it. Rows are near-uniform now, so column balancing is even. */
.pp-spec { columns: 2; column-gap: 3rem; margin: 0; }
.pp-spec-row {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: .85rem;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.pp-spec-row dt {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--pp-primary);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 0;
}
.pp-spec-row dt i { font-size: .85rem; width: 1rem; text-align: center; }
.pp-spec-row dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .92rem;
    color: #374151;
    line-height: 1.6;
}
.pp-spec-chip {
    background: #eef4ff;
    color: #0b1220;
    border: 1px solid #dbe4f5;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .82rem;
    line-height: 1.45;
}

.pp .pp-about-h2 { font-size: 2rem; margin-top: 1.25rem; margin-bottom: 2rem; }

/* About */
/* Image left, copy right. The markup keeps the heading first so screen readers
   and mobile get the sensible reading order; `order` only moves it visually. */
.pp-about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; }
/* Centred against the copy column, which is usually the taller of the two.
   The grid stays align-items:start so headings keep their top alignment. */
.pp-about-img { order: -1; align-self: center; }
/* No image uploaded — let the copy use the full width instead of half the row. */
.pp-about-grid > :only-child { grid-column: 1 / -1; }
.pp-about-body { line-height: 1.8; color: #374151; margin-bottom: 1.25rem; }
.pp-about-img img { width: 100%; border-radius: 12px; }
.pp-btn { display: inline-block; background: var(--pp-primary); color: #fff; padding: .6rem 1.25rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.pp-btn:hover { color: #fff; opacity: .92; }

/* Founder story — personal narrative card. Sits on the same white band as
   About, so it uses a bordered card rather than a background change. */
.pp-founder { background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid var(--pp-primary); border-radius: 12px; padding: 1.75rem 1.85rem; }
.pp-founder-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.15rem; }
.pp-founder-avatar { width: 48px; height: 48px; border-radius: 50%; background: #eef4ff; color: var(--pp-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
/* Centred; long company names wrap rather than overflow the container. */
.pp-founder-h2 { text-align: center; overflow-wrap: anywhere; }
.pp-founder-label { font-size: 1.05rem; font-weight: 800; color: #0b1220; margin-bottom: .15rem; }
.pp-founder-name { font-size: .85rem; color: #6b7280; font-weight: 600; }
/* Clamped to ~8 lines with a fade at the cut; .is-open releases it.
   -webkit-line-clamp is supported everywhere despite the prefix. */
.pp-founder-body {
    line-height: 1.8;
    color: #374151;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}
.pp-founder-body::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3.5rem;
    background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none;
}
.pp-founder-body.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pp-founder-body.is-open::after { content: none; }
.pp-readmore {
    margin-top: 1rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--pp-primary);
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
}
.pp-readmore:hover { text-decoration: underline; }

/* Company Summary by MIIMD — editorial note in the platform's voice, so it
   gets a distinct accented treatment. The body is arbitrary editor HTML, so
   every tag it can emit needs a scoped rule; without them admin headings pick
   up the global h1..h6 styles and images overflow the container. */
/* No margin: the sections either side supply the clearance. */
/* Half width, centred; copy inside stays left-aligned. */
.pp-summary { width: 50%; margin: 0 auto; background: #f6f8fb; border: 1px solid #e5e7eb; border-left: 3px solid var(--pp-primary); border-radius: 12px; padding: 1.75rem 1.85rem; }
.pp-summary-head { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.15rem; }
.pp-summary-head .pp-h2 { margin-bottom: 0; }
.pp-summary-badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--pp-primary); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.pp-summary-badge i { font-size: .62rem; }
.pp-summary-body { color: #374151; line-height: 1.8; }
.pp-summary-body > :first-child { margin-top: 0; }
.pp-summary-body > :last-child { margin-bottom: 0; }
.pp-summary-body p { margin-bottom: 1rem; }
.pp-summary-body h2, .pp-summary-body h3, .pp-summary-body h4 { color: #0b1220; font-weight: 700; margin: 1.5rem 0 .6rem; }
.pp-summary-body h2 { font-size: 1.15rem; }
.pp-summary-body h3 { font-size: 1.02rem; }
.pp-summary-body h4 { font-size: .95rem; }
.pp-summary-body ul, .pp-summary-body ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.pp-summary-body li { margin-bottom: .35rem; }
.pp-summary-body a { color: var(--pp-primary); text-decoration: underline; }
.pp-summary-body img { max-width: 100%; height: auto; border-radius: 8px; margin: .5rem 0; }
.pp-summary-body blockquote { border-left: 3px solid #cbd5e1; margin: 1rem 0; padding-left: 1rem; color: #6b7280; font-style: italic; }
.pp-summary-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; display: block; overflow-x: auto; }
.pp-summary-body th, .pp-summary-body td { border: 1px solid #e5e7eb; padding: .5rem .65rem; font-size: .88rem; text-align: left; }

/* Focus + highlights */
.pp-focus-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2.5rem; }
.pp-focus-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pp-focus-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.25rem; }
.pp-focus-card i { font-size: 2.25rem; color: var(--pp-primary); margin-bottom: .85rem; display: block; }
.pp-focus-card h3 { font-size: 1rem; font-weight: 700; color: var(--pp-primary); }
.pp-focus-card p { font-size: .85rem; color: #6b7280; margin: 0; }
.pp-highlights ul { list-style: none; padding: 0; margin: 0; }
.pp-highlights li { padding: .5rem 0; border-bottom: 1px solid #eef2f7; font-size: .92rem; }
.pp-highlights li i { color: #10b981; margin-right: .4rem; }

/* Why matters — dark band. The global `h1..h6 { color: var(--dark) }` in
   miimd.css paints headings #0f172a, which is invisible against this gradient,
   so every heading in here must set its colour explicitly. */
.pp-why { background: linear-gradient(135deg, #0b1220, #12324a); color: #fff; padding: 3.5rem 0; }
.pp-why-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
.pp-why h1, .pp-why h2, .pp-why h3, .pp-why h4, .pp-why h5, .pp-why h6 { color: #fff; }
.pp-why h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.pp-why p { color: rgba(255,255,255,.8); line-height: 1.8; }
/* Pull-quote: centred, with matching open/close marks generated in CSS so a
   closing mark can never be forgotten the way the hard-coded one was. */
.pp-quote { font-size: 1.6rem; font-weight: 700; color: #7dd3fc; border: 0; margin: 0; text-align: center; line-height: 1.45; }
.pp-quote::before { content: '\201C'; }
.pp-quote::after  { content: '\201D'; }

/* Journey tiles — icon + title at rest, description overlaid on hover.
   The copy stays in the DOM (not display:none) so screen readers still
   announce it, and it is shown outright on touch devices, which have no
   hover state and would otherwise never see it.
   grid-auto-rows:1fr sizes every row to the tallest tile, so all boxes match
   height across rows — not just within one row, which is grid's default. */
/* Section split: copy one side, artwork the other. --solo collapses to a
   single column when no image is uploaded, so the copy uses the full width. */
.pp-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.pp-split--solo { grid-template-columns: 1fr; }
/* Image-left variant: equal columns, so the artwork matches the copy's width
   instead of taking the wide 1.6fr share. */
.pp-split--even { grid-template-columns: 1fr 1fr; }
.pp-split-img { align-self: center; }   /* vertically centred against the copy */
.pp-split-img img { width: 100%; height: auto; border-radius: 12px; display: block; }
.pp-split-img--left { order: -1; }

.pp-journey-desc { color: #374151; line-height: 1.8; max-width: 900px; margin: -.5rem 0 1.75rem; }
.pp-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; grid-auto-rows: 1fr; }
.pp-tl-step {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem 1.15rem;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pp-tl-icon { width: 56px; height: 56px; border-radius: 50%; background: #eef4ff; color: var(--pp-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto .75rem; flex-shrink: 0; }
.pp-tl-step h4 { font-size: .92rem; font-weight: 700; margin: 0; }
.pp-tl-step p { font-size: .8rem; color: #6b7280; margin: .6rem 0 0; }

@media (hover: hover) {
    /* The description covers the tile rather than expanding it, so hovering
       never changes the row height or pushes the rest of the page down. */
    .pp-tl-step p {
        position: absolute;
        inset: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem 1.15rem;
        overflow: auto;
        background: var(--pp-primary);
        color: #fff;
        border-radius: 11px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .pp-tl-step:hover, .pp-tl-step:focus-within {
        border-color: var(--pp-primary);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
        transform: translateY(-3px);
    }
    .pp-tl-step:hover p, .pp-tl-step:focus-within p {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-tl-step, .pp-tl-step p { transition: none; }
    .pp-tl-step:hover, .pp-tl-step:focus-within { transform: none; }
    .pp-tl-step p { transform: none; }
}

/* Milestones */
.pp-milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.pp-ms-card { background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid var(--pp-primary); border-radius: 8px; padding: 1rem; }
.pp-ms-card h4 { font-size: .9rem; font-weight: 700; }
.pp-ms-card p { font-size: .8rem; color: #6b7280; margin: 0; }

/* Insight cards */
.pp-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.pp-insight-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.pp-insight-img { height: 160px; background-size: cover; background-position: center; }
.pp-insight-body { padding: 1.25rem; }
.pp-insight-body h4 { font-weight: 700; font-size: 1rem; }
.pp-insight-body p { font-size: .85rem; color: #6b7280; }
.pp-link { color: var(--pp-primary); font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Products — image, name, short description. grid-auto-rows:1fr keeps every
   card the same height whatever the description length. */
.pp-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; grid-auto-rows: 1fr; }
.pp-product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    text-decoration: none;
    color: #1f2937;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pp-product-card:hover {
    color: #1f2937;
    border-color: var(--pp-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-3px);
}
/* Fixed media box so cards line up whether or not a product has an image. */
.pp-product-media {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fb;
    border-radius: 8px;
    overflow: hidden;
}
.pp-product-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-product-media i { font-size: 1.9rem; color: #cbd5e1; }
.pp-product-name { font-size: .85rem; font-weight: 600; }
.pp-product-desc { font-size: .78rem; line-height: 1.5; color: #6b7280; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .pp-product-card { transition: none; }
    .pp-product-card:hover { transform: none; }
}

/* Evidence and Recognition — every tile in one centred row. */
#pp-recognition { text-align: center; }
#pp-recognition .pp-logos { justify-content: center; }
.pp-logos { display: flex; flex-wrap: wrap; gap: 1rem; }
.pp-logo { display: flex; flex-direction: column; align-items: center; gap: .35rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; min-width: 130px; }
.pp-logo img { max-height: 46px; max-width: 120px; object-fit: contain; }
.pp-logo span { font-size: .75rem; color: #6b7280; text-align: center; }

@media (max-width: 860px) {
    .pp-hero-grid, .pp-about-grid, .pp-focus-grid, .pp-why-grid, .pp-split { grid-template-columns: 1fr; }
    .pp-split-img--left { order: 0; }   /* stacked: copy reads first */
    .pp-summary { width: 100%; }   /* 50% is unreadable on a phone */
    /* 165px of label gutter is too much of a phone screen — stack again. */
    .pp-spec { columns: 1; }
    .pp-spec-row { grid-template-columns: 1fr; gap: .3rem; }
    .pp-spec-row dt { margin-bottom: .25rem; }
    /* Stacked: heading and copy read first, image below. */
    .pp-about-img { order: 0; }
    .pp-nav-links { display: none; }
    .pp-hero-text h1 { font-size: 1.8rem; }
}