/**
 * Investment page. Confirmed from the Figma "02 - Public Website" file,
 * node 34:327 ("investment-page").
 *
 * Two corrections to the confirmed frame's content, same discipline as
 * every other page in this project:
 *
 * 1. "Properties for Consideration" (Opportunities-Section, node 34:362)
 *    showed 3 hardcoded example cards with a fabricated "Pre-Launch"
 *    status - properties.status's real ENUM is Available/Under Offer/
 *    Sold/Draft (see database/schema.sql), no such value exists. Rebuilt
 *    to show real featured, available properties via get_properties()
 *    (investment.php), with the same card layout the frame specifies but
 *    fed real title/location/price/type/status instead of examples.
 *
 * 2. "Calculator-Section" (node 34:448)'s extracted text is confirmed
 *    scrambled - reassembling its fragments in a different order
 *    ("If you are considering property investment in Lagos, we can help
 *    you understand the market, identify suitable opportunities, and
 *    guide you through the acquisition process.") reveals one coherent
 *    flowing paragraph that got laid out across unrelated absolutely-
 *    positioned UI chrome (a slider label, a price display, two
 *    percentage figures) - the same broken/unfinished-export pattern
 *    already documented for the Services page's card grid in
 *    static-pages.css. The card's ₦920,000,000 output and 8.5%/12.4%
 *    figures have no real calculation behind them and no confirmed
 *    source - BRAND_VOICE.md's Part C explicitly blocks invented
 *    statistics, so this build does not fabricate an ROI/return figure
 *    to fill that slot either. Rebuilt as a plain "Speak With Our Team"
 *    contact card using the real, reassembled paragraph as body copy and
 *    a single advisor CTA - same visual card/divider/dark-panel shell,
 *    no invented numbers or non-functional slider.
 */

.inv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 520px;
    width: 100%;
    overflow: hidden;
}

.inv-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inv-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(6, 34, 23, 0.1) 25%, rgba(6, 34, 23, 0.8) 57.5%, rgba(6, 34, 23, 0.95) 75%);
    z-index: 1;
}

.inv-hero__titles {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 80px 80px;
}

.inv-hero__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0;
}

.inv-hero__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.15;
    color: var(--color-white);
    margin: 0;
    max-width: 700px;
}

/* ---------------------------------------------------------------------
 * Market overview (node 34:354)
 * --------------------------------------------------------------------- */

.inv-overview-section {
    display: flex;
    align-items: center;
    gap: 96px;
    padding: 140px 80px;
    background: var(--color-warm-white);
}

.inv-section-kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0 0 12px;
}

.inv-section-heading {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--color-primary-green);
    margin: 0;
}

.inv-overview-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* .inv-body, not p.inv-body - admin/page-content.php's editable version of
   this copy (get_content_block('investment', 'inv_overview_body', ...))
   wraps its TinyMCE-produced <p> tags in a <div class="inv-body"> instead
   of being one literal <p> itself (a <p> can't legally contain another
   <p>) - a tag-qualified selector would stop matching once that wrapper
   is a div. Typography properties here are inheritable, so this still
   styles the nested <p> tags correctly either way. */
.inv-overview-left .inv-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-charcoal);
    margin: 0;
}

/* Was two separate <p class="inv-body"> elements getting the 32px flex
   gap from .inv-overview-left between them - restores that separation
   for the nested <p> tags now living inside one merged wrapper (see the
   comment above). */
.inv-overview-left .inv-body p {
    margin: 0 0 32px;
}

.inv-overview-left .inv-body p:last-child {
    margin-bottom: 0;
}

.inv-overview-right {
    flex: 1;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.inv-overview-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------------
 * Opportunities (node 34:362) - real properties, see file comment
 * --------------------------------------------------------------------- */

.inv-opportunities-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 140px 80px;
    background: var(--color-ivory);
}

.inv-opportunities-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.inv-opp-card {
    display: flex;
    align-items: stretch;
    height: 320px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
}

.inv-opp-card__image {
    flex: none;
    width: 360px;
    height: 100%;
}

.inv-opp-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inv-opp-card__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    gap: 24px;
}

.inv-opp-card__title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--color-primary-green);
    margin: 0 0 8px;
}

.inv-opp-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #717171;
}

.inv-opp-card__stats {
    display: flex;
    gap: 40px;
    margin-top: 24px;
}

.inv-opp-card__stat-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #717171;
    margin: 0 0 4px;
}

.inv-opp-card__stat-value {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-charcoal);
    margin: 0;
}

.inv-opp-card__stat-value--status {
    color: var(--color-primary-green);
}

.inv-opp-card__actions {
    display: flex;
    gap: 12px;
    flex: none;
}

.inv-opp-card__enquire-btn {
    padding: 14px 24px;
    border-radius: 4px;
    border: 1px solid var(--color-primary-green);
    color: var(--color-primary-green);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.inv-opp-card__details-btn {
    padding: 14px 24px;
    border-radius: 4px;
    background: var(--color-primary-green);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.inv-empty-opportunities {
    font-family: var(--font-body);
    color: #717171;
}

/* ---------------------------------------------------------------------
 * "Speak With Our Team" card (node 34:448, rebuilt - see file comment)
 * --------------------------------------------------------------------- */

.inv-team-section {
    padding: 140px 80px;
    background: var(--color-warm-white);
}

.inv-team-card {
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
}

.inv-team-card__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.inv-team-card__heading {
    font-family: var(--font-heading);
    font-size: 36px;
    color: var(--color-primary-green);
    margin: 0;
}

.inv-team-card__body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-charcoal);
    margin: 0;
}

.inv-team-card__divider {
    width: 1px;
    height: 200px;
    background: var(--color-border-light);
    flex: none;
}

.inv-team-card__cta-panel {
    flex: none;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: var(--color-primary-green);
    border-radius: 12px;
}

.inv-team-card__cta-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-light-gold);
    margin: 0;
}

.inv-team-card__cta-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
    opacity: 0.85;
    margin: 0;
}

.inv-team-card__cta-btn {
    display: block;
    text-align: center;
    padding: 14px 0;
    border-radius: 4px;
    background: var(--color-champagne-gold);
    color: #071f16;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Investment process (node 34:480)
 * --------------------------------------------------------------------- */

.inv-process-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 140px 80px;
    background: var(--color-ivory);
}

.inv-process-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.inv-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.inv-process-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
}

.inv-process-card__number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 42px;
    color: var(--color-champagne-gold);
    margin: 0;
}

.inv-process-card__title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--color-primary-green);
    margin: 0 0 8px;
}

.inv-process-card__desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: #717171;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Consultation CTA (node 34:505)
 * --------------------------------------------------------------------- */

.inv-cta-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 120px 80px;
    background: var(--color-primary-green);
    text-decoration: none;
}

.inv-cta-banner__title {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--color-white);
    text-align: center;
    margin: 0;
}

.inv-cta-banner__desc {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-white);
    opacity: 0.8;
    text-align: center;
    max-width: 640px;
    margin: 0;
}

.inv-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 4px;
    background: var(--color-champagne-gold);
    color: #071f16;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .inv-hero__titles,
    .inv-overview-section,
    .inv-opportunities-section,
    .inv-team-section,
    .inv-process-section,
    .inv-cta-banner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .inv-overview-section {
        flex-direction: column;
    }

    .inv-opp-card {
        flex-direction: column;
        height: auto;
    }

    .inv-opp-card__image {
        width: 100%;
        height: 200px;
    }

    .inv-opp-card__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .inv-team-card {
        flex-direction: column;
    }

    .inv-team-card__divider {
        width: 100%;
        height: 1px;
    }

    .inv-team-card__cta-panel {
        width: 100%;
    }

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

@media (max-width: 640px) {
    .inv-hero__title {
        font-size: 32px;
    }

    .inv-opp-card__stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .inv-opp-card__actions {
        flex-direction: column;
        width: 100%;
    }

    .inv-process-grid {
        grid-template-columns: 1fr;
    }
}