/* Parkdale Intelligence - ecosystem landing (front-page.php).
   Reuses the parent's hero + service-card classes for structure and its var(--theme-color)
   custom property for brand, so nothing here hardcodes a colour. The parent supplies
   .video-hero / .hero-heading / .service-card styling; this file adds only what the landing
   needs beyond that: a gradient hero background (there is no hero video), the ecosystem card
   emphasis, and the philosophy band. */

/* ── Hero: a theme-asset background image + brand overlay, mirroring the Parkdale Strategy hero
   (image with a dark/brand scrim on top). The image is set inline in front-page.php via
   get_stylesheet_directory_uri(), so nothing here hardcodes a path or an attachment ID. The
   padding-bottom leaves room for the ecosystem plate to overlap into empty hero space below the
   text, rather than onto it. ─────────────────────────────────────────────────────────────── */
.pi-hero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    padding-bottom: 7rem;
    overflow: hidden;
}
.pi-hero-bg {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--theme-color-darker-r, 11), var(--theme-color-darker-g, 30), var(--theme-color-darker-b, 31));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Brand + darkening scrim over the image: opaque on the left where the heading sits (so white
   text stays legible in BOTH light and dark viewers - the hero is always dark-on-image), fading
   right so the photograph stays visible. Uses the theme-colour channels, so it follows the
   Customizer Overlay Colour rather than hardcoding a brand hex. */
.pi-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.10) 100%),
        linear-gradient(135deg,
            rgba(var(--theme-color-darker-r, 11), var(--theme-color-darker-g, 30), var(--theme-color-darker-b, 31), 0.82) 0%,
            rgba(var(--theme-color-dark-r, 31), var(--theme-color-dark-g, 85), var(--theme-color-dark-b, 86), 0.45) 55%,
            rgba(44, 122, 123, 0.28) 100%);
    pointer-events: none;
}
.pi-hero .video-hero-content {
    position: relative;
    z-index: 1;
}

/* ── Ecosystem cards ──────────────────────────────────────────────────────────────────────
   The card plate overlaps the hero with a -75px pull-up - the Parkdale Strategy value - so the
   two sites read as siblings. Two things keep the overlap working: the section adds no top
   padding, and nothing above the cards inside the plate (there is deliberately no heading here,
   which would otherwise consume the negative margin). The plate carries an explicit z-index so it
   paints above the hero. The rules are !important because the container also carries the parent's
   .service-cards class; landing.css loads after main.css, so these win by source order. */
.pi-ecosystem {
    padding: 0 0 4rem !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}
/* Flex + centered rather than the parent's fixed 3-column grid, because there are FIVE cards: a
   centered wrap lets the last row sit centred instead of leaving an awkward empty grid cell. The
   selector is doubled (.pi-ecosystem .pi-ecosystem-cards) so it out-specifies the parent's
   .service-cards grid; landing.css also loads later. */
.pi-ecosystem .pi-ecosystem-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1.1rem !important;
    width: 92%;
    max-width: 1200px !important;
    margin: -75px auto 0 !important;
    padding: 15px !important;
    background: var(--surface-card, #fff) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}
/* Each card takes a comfortable ~300px basis and grows to fill the row; on a 1200px plate that is
   three per row, so the five cards land as 3 + 2 centred. */
.pi-ecosystem .pi-ecosystem-cards .pi-card {
    flex: 1 1 300px !important;
    max-width: 370px !important;
    min-width: 240px !important;
}
/* The card chrome comes from the parent's .service-card. These are text-first cards (no image
   band), so give them their own comfortable padding and a hover lift consistent with the shop. */
.pi-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.pi-card .service-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* "Coming soon" pill for the ParkdalePoint card (an informational property, not a live link yet). */
.pi-card-badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--theme-color, #2c7a7b);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 0 0 0.7rem;
}
/* Secondary descriptive line (e.g. the ParkdalePoint framing). Must not flex-grow, so the primary
   description keeps ownership of the spare vertical space and the CTA stays pinned to the bottom. */
.pi-card .service-card-description.pi-card-note {
    font-size: 0.88rem;
    color: #5b6a6a;
    flex: 0 0 auto;
    margin-bottom: 1rem;
}
.pi-card .service-card-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--theme-color, #2c7a7b);
    margin: 0 0 0.6rem;
}
.pi-card .service-card-description {
    color: #444;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}
.pi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
.pi-card-cta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    color: var(--theme-color, #2c7a7b);
}
/* NOTE on the PiTools Store card: the parent forces .service-card .service-card-content
   { background: var(--surface-card) !important } and the title colour with !important, so a
   filled-teal "primary" treatment would require an !important war against the shared parent -
   not worth it for cosmetics. The store is already the clear primary action: it is the hero's
   headline button, the first ecosystem card, a top-level nav item, and the closing CTA. So the
   card is left consistent with the others (teal frame, teal title, visible teal CTA). */

/* ── Philosophy band - the site ends on why PiTools exists ───────────────────────────────── */
.pi-philosophy {
    background: #12171a;
    color: #e8ecec;
    padding: 4rem 8vw;
}
.pi-philosophy-inner {
    max-width: 60rem;
    margin: 0 auto;
}
.pi-philosophy-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    margin: 0 0 1.4rem;
    color: #fff;
}
.pi-philosophy p {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    color: #cdd5d5;
}
.pi-philosophy-cta {
    margin-top: 1.8rem;
}

/* Between tablet and desktop, let the cards wrap into 2-3 comfortable columns. */
@media (max-width: 980px) {
    .pi-ecosystem-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
}
@media (max-width: 600px) {
    .pi-hero { min-height: 60vh; padding-bottom: 5rem; }
    /* Single column on phones; a smaller pull-up keeps the overlap without crowding the heading. */
    .pi-ecosystem-cards { grid-template-columns: 1fr !important; margin-top: -55px !important; width: 90%; }
    .pi-philosophy { padding: 3rem 6vw; }
}