/* ============================================================================
   Marketing pillar page kit
   ----------------------------------------------------------------------------
   Shared component CSS for vertical "pillar" pages (/trade-show-models,
   /data-center-models, and any future vertical). Extracted from
   TradeShowModels.razor.css, which CLAUDE.md names as the source of truth for
   these components.

   WHY GLOBAL, NOT SCOPED: Blazor scoped CSS (.razor.css) cannot be shared
   between components, which is what drove these rules to be copy-pasted per
   page in the first place. Because App.razor loads this file BEFORE the scoped
   bundle (KiwiMill_Website.styles.css), any page can still override a rule from
   its own .razor.css — scoped selectors win on both source order and
   specificity (Blazor appends a [b-xxxxx] attribute).

   NOTE: ::deep does not exist outside scoped CSS. Rules that used
   `.x ::deep .y` here are plain descendant selectors `.x .y`, which is the
   exact equivalent once there is no scope attribute to opt out of.

   USAGE — a new pillar page needs only:
     <div class="pillar-page">
       <header class="pillar-hero"> … </header>
       <div class="pillar-body"> … </div>
     </div>
   and a .razor.css holding nothing but that page's own sections.

   TUNING — set these on .pillar-page in the page's own scoped CSS:
     --pillar-hero-min-h / --pillar-hero-h / --pillar-hero-max-h
     --pillar-hero-h-lg  / --pillar-hero-max-h-lg   (>= 900px)
     --pillar-panel / --pillar-line
   ========================================================================== */

.pillar-page {
    --mark-brass: #c4a35a;
    --mark-ink: #0a0b0d;
    --pillar-panel: #141414;
    --pillar-line: rgba(255, 255, 255, 0.1);
    background: var(--mark-ink);
    color: #f0f2f4;
    min-height: 100%;
    display: block;
}

/* ---------------------------------------------------------------- hero ---- */

.pillar-hero {
    position: relative;
    min-height: var(--pillar-hero-min-h, 280px);
    height: var(--pillar-hero-h, 48vh);
    max-height: var(--pillar-hero-max-h, 420px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.pillar-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Decorative layer (static image or carousel); don't steal clicks from
       the CTAs/copy above it. Carousel controls opt back in below. */
    pointer-events: none;
}

/* Static hero image variant. Direct-child selectors ONLY: a descendant
   `.pillar-hero-media img` would also match the carousel's slide images and
   absolutely-position every slide into the same box. */
.pillar-hero-media > picture,
.pillar-hero-media > img,
.pillar-hero-media > picture > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel hero variant (Radzen + KiwiHeroCarousel). */
.pillar-hero-media .kiwi-hero-carousel {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* NOTE: do NOT add .rz-stack here. The carousel's only .rz-stack descendant is
   the pager (div.rz-stack.rz-carousel-pager); forcing it to 100% height blows it
   up to cover the whole hero, which swallows clicks meant for the prev/next
   buttons and keeps Radzen's pause-on-hover permanently engaged. */
.pillar-hero-media .kiwi-hero-carousel,
.pillar-hero-media .rz-carousel,
.pillar-hero-media .rz-carousel-item {
    height: 100% !important;
}

.pillar-hero-media .kiwi-hero-slide {
    display: block;
    width: 100%;
    height: 100%;
}

.pillar-hero-media .kiwi-hero-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pillar-hero-media .rz-carousel-pager,
.pillar-hero-media .rz-carousel-prev,
.pillar-hero-media .rz-carousel-next {
    z-index: 3;
    pointer-events: auto;
}

.pillar-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 11, 13, 0.25) 0%, rgba(10, 11, 13, 0.92) 100%);
    pointer-events: none;
}

.pillar-hero-copy {
    position: relative;
    z-index: 4;
    padding: 2rem 1.15rem 1.75rem;
    max-width: var(--mkt-content-max, 72rem);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    pointer-events: auto;
}

.pillar-hero-copy .cta-link {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.pillar-hero-copy h1 {
    margin: 0;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.85rem, 4.5vw, 2.65rem);
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.pillar-crumb {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: rgba(240, 242, 244, 0.65);
    font-family: "DM Sans", system-ui, sans-serif;
}

.pillar-crumb a {
    color: var(--mark-brass);
    text-decoration: none;
}

.pillar-crumb a:hover {
    text-decoration: underline;
}

.pillar-hero-sub {
    margin: 0.75rem 0 0;
    max-width: 40rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.15rem);
    line-height: 1.5;
    color: rgba(240, 242, 244, 0.92);
}

.pillar-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ------------------------------------------------------- body + sections -- */

.pillar-body {
    padding: 0 0 3rem;
    font-family: "DM Sans", system-ui, sans-serif;
}

.pillar-positioning,
.pillar-gallery,
.pillar-quote,
.pillar-faq,
.pillar-cta-final {
    max-width: var(--mkt-content-max, 72rem);
    margin: 0 auto;
    padding: 2.5rem 1.15rem 0.5rem;
    box-sizing: border-box;
}

.pillar-positioning p {
    margin-block: 0;
    margin-inline: auto;
    max-width: 820px;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: rgba(240, 242, 244, 0.9);
}

.pillar-positioning strong {
    color: var(--mark-brass);
    font-weight: 600;
}

/* --------------------------------------------------------- gallery grid -- */

.pillar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.pillar-card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    text-decoration: none;
    background: #000;
}

.pillar-card picture,
.pillar-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pillar-card:hover img {
    transform: scale(1.04);
}

.pillar-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.4rem 0.75rem 0.65rem;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

.pillar-gallery-more {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

/* Gallery header: heading, how many are shown of how many, and the "View all" link up top, so
   the count and the way into the full portfolio are visible before the cards, not only after. */
.pillar-gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1.5rem;
    margin-bottom: 1rem;
}

.pillar-gallery-head h2 {
    margin: 0;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    color: #fff;
}

.pillar-gallery-count {
    margin: 0;
    color: #b5b1a8;
    font-size: 0.95rem;
}

.pillar-gallery-all {
    color: #c9a24b;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pillar-gallery-all:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ testimonial - */

.pillar-quote {
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.pillar-quote blockquote {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    line-height: 1.55;
    font-style: italic;
    color: rgba(240, 242, 244, 0.92);
}

.pillar-quote cite {
    display: block;
    margin-top: 0.9rem;
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mark-brass);
}

/* --------------------------------------------- process / use-case strip --- */

.pillar-process {
    margin-top: 2.5rem;
    padding: 2.75rem 0;
    background: var(--pillar-panel);
    border-top: 1px solid var(--pillar-line);
    border-bottom: 1px solid var(--pillar-line);
}

.pillar-process-inner {
    max-width: var(--mkt-content-max, 72rem);
    margin: 0 auto;
    padding: 0 1.15rem;
    box-sizing: border-box;
}

.pillar-process h2,
.pillar-faq h2,
.pillar-cta-final h2 {
    margin: 0 0 0.5rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.45rem, 3vw, 1.75rem);
    letter-spacing: -0.02em;
    color: #fff;
}

.pillar-lead {
    margin: 0 0 1.5rem;
    color: rgba(240, 242, 244, 0.7);
    max-width: 45rem;
    line-height: 1.55;
}

/* Numbered process steps (4-up). */
.pillar-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.pillar-step-num {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--mark-brass);
}

.pillar-step h3 {
    margin: 0.35rem 0 0.35rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.pillar-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(240, 242, 244, 0.7);
}

/* Buyer-type / use-case cards (3-up), brass headings, no step numbers. */
.pillar-uc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.pillar-uc h3 {
    margin: 0 0 0.4rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mark-brass);
}

.pillar-uc p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(240, 242, 244, 0.7);
}

/* ------------------------------------------------------ deadline callout -- */

.pillar-deadline {
    margin-top: 1.5rem;
    /* Border spans the container; the copy inside keeps a readable measure. */
    max-width: none;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(196, 163, 90, 0.4);
    font-size: 0.98rem;
    line-height: 1.5;
    color: rgba(240, 242, 244, 0.88);
}

/* No max-width: capping the copy narrower than the border left an obvious gap
   at the right edge. The box is a short callout, so the full measure is fine. */
.pillar-deadline p {
    margin: 0;
}

.pillar-deadline strong {
    color: var(--mark-brass);
}

/* ----------------------------------------------------------------- FAQ ---- */

.pillar-faq {
    padding-top: 3rem;
}

.pillar-faq details {
    border-bottom: 1px solid var(--pillar-line);
}

.pillar-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.25rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
}

.pillar-faq summary::-webkit-details-marker {
    display: none;
}

.pillar-faq summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--mark-brass);
    font-size: 1.25rem;
    font-weight: 400;
}

.pillar-faq details[open] summary::after {
    content: "–";
}

.pillar-faq-answer {
    padding: 0 0.25rem 1.1rem;
    max-width: 54rem;
    color: rgba(240, 242, 244, 0.75);
    line-height: 1.55;
}

/* ------------------------------------------------------------ CTA band ---- */

.pillar-cta-final {
    padding-top: 3.5rem;
    padding-bottom: 1rem;
    text-align: center;
}

/* :not() keeps this off the soft line below, so .pillar-cta-soft needs no
   container-specific selector and can be reused inside any CTA panel. */
.pillar-cta-final p:not(.pillar-cta-soft) {
    margin: 0 auto 1.35rem;
    max-width: 35rem;
    color: rgba(240, 242, 244, 0.7);
    line-height: 1.55;
}

.pillar-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Soft secondary CTA. Container-agnostic on purpose: also used inside
   .extended-port-cta on /…/extended-portfolio. A host panel that styles its
   own <p> must exempt this class — see Portfolio-Extended.razor.css. */
.pillar-cta-soft {
    /* max-width + auto centring carried over from the .pillar-cta-final <p>
       rule this class is now exempt from, so the line keeps the same box in
       any container. Bottom margin is 0: it is always the last element, and
       host panels may have a visible border right below it. */
    margin: 14px auto 0;
    max-width: 35rem;
    font-size: 14.5px;
    line-height: 1.55;
    color: #b5b1a8;
}

.pillar-cta-soft a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(201, 162, 75, .35);
    text-underline-offset: 3px;
}

.pillar-cta-soft a:hover {
    text-decoration-color: #c9a24b;
}

/* --------------------------------------------------------- breakpoints ---- */

@media (min-width: 600px) {
    .pillar-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillar-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3-up from 600px and stays there (matches the original .dcm-uc-grid). */
    .pillar-uc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .pillar-hero {
        height: var(--pillar-hero-h-lg, 42vh);
        max-height: var(--pillar-hero-max-h-lg, 400px);
    }

    .pillar-hero-copy {
        padding: 2.5rem 1.5rem 2rem;
    }

    .pillar-positioning,
    .pillar-gallery,
    .pillar-quote,
    .pillar-faq,
    .pillar-cta-final {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .pillar-process-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .pillar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .pillar-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}