/* =============================================================
   File: assets/css/investments.css
   Pienaar Group — INVESTMENTS PAGE ONLY (rebuilt 26 Sep 2026 to the
   approved Investments mock-up). Loaded after site.css and home.css.
   Built on the same system as the approved Property page. Header,
   Private Access, three-column band, footer and the global proportion
   variables (--band-pad, --editorial-h, --closing-h) come from home.css.
   ============================================================= */


/* ############################################################
   HERO — one full-bleed photograph, copy in the open grass
   ############################################################ */

.i-hero {
    min-height: max(100svh, 640px);
    align-items: center;
    background: var(--black);
}
.i-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.i-hero-media picture, .i-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The lion lies on the right, mane to front paws; the left half is open
   sky and grass for the words. Hold the frame low so the paws stay in. */
.i-hero-media img { object-fit: cover; object-position: 60% 72%; }

/* Directional shade on the copy side only. */
.page-investments .i-hero::before {
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9,12,14,.74) 0%, rgba(9,12,14,.52) 22%, rgba(9,12,14,.14) 40%, rgba(9,12,14,0) 52%),
        linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,0) 18%, rgba(9,12,14,0) 80%, rgba(9,12,14,.4) 100%);
}

.i-eyebrow {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.3em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--gold-champ);
}
.page-investments .i-hero .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.page-investments .i-hero .hero-title span { display: block; }
.page-investments .i-hero .hero-lead { max-width: 27em; }


/* ############################################################
   THREE COLUMNS — Home component; the mock-up adds a short gold
   rule beneath each number and has no links
   ############################################################ */

.i-pillars .h-num::after {
    content: "";
    display: block;
    width: 22px; height: 1px;
    margin-top: var(--s2);
    background: var(--line-gold);
}
.i-pillars .h-pillar h3 { margin-top: var(--s3); }
@media (min-width: 1081px) { .i-pillars { padding-block: var(--band-pad); } }   /* global standard */


/* ############################################################
   IVORY SPLIT — copy ~41%, photograph ~59%.
   The photograph is a plane, not a component: it starts exactly at
   the top edge of the section and ends exactly at the bottom edge,
   touching the dark band above and the photograph below.
   ############################################################ */

.i-editorial {
    display: grid;
    grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
    align-items: stretch;
    min-height: clamp(520px, 38vw, 780px);
    margin: 0;
    padding: 0;
    background: var(--ivory);
    color: var(--ink);
}

.i-editorial-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s8) clamp(var(--s6), 1rem + 3vw, var(--s9)) var(--s8) max(var(--edge), calc((100vw - var(--content)) / 2));
}
.i-editorial-copy .label { font-size: 9.5px; color: var(--ink-soft); }
.i-editorial-copy .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); background: var(--gold); }
.i-editorial-copy .h2 {
    font-size: clamp(2.125rem, 1.1rem + 1.3vw, 2.75rem);   /* 43 @1920 */
    line-height: 1.12;
    color: var(--ink);
}
.i-editorial-copy p {
    max-width: 28em;
    margin-top: var(--s4);
    font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem);
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.i-editorial-copy p + p { margin-top: var(--s3); }

/* The outlined action, on ivory: gold hairline, ink label. */
.i-btn-outline-ink {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-top: var(--s5);
    padding: 0 20px;
    border: 1px solid var(--gold);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.i-btn-outline-ink svg { width: 12px; height: 12px; flex: none; }
.i-btn-outline-ink:hover { background: rgba(183, 154, 90, 0.14); }
.i-btn-outline-ink:active { background: var(--gold); color: #0E1113; }

/* Full row height, no padding, no border, no caption. */
.i-editorial-media {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--charcoal);
}
.i-editorial-media picture, .i-editorial-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0;
}
/* Table Mountain, the lit city, the water and the lamp-lit road. */
.i-editorial-media img { object-fit: cover; object-position: 50% 42%; }


/* ############################################################
   CLOSING CHAPTER — full-bleed photograph, copy upper left in sky
   ############################################################ */

.i-closing {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    min-height: clamp(560px, 44vw, 880px);
    overflow: hidden;
    background: var(--black-deep);
}
.i-closing-media, .i-closing-media picture, .i-closing-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.i-closing-media { z-index: -2; }
/* Acacia canopy at the top, the herd along the foot. */
.i-closing-media img { object-fit: cover; object-position: 50% 88%; }

.i-closing::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9,12,14,.66) 0%, rgba(9,12,14,.42) 26%, rgba(9,12,14,.08) 46%, rgba(9,12,14,0) 58%),
        linear-gradient(180deg, rgba(9,12,14,.3) 0%, rgba(9,12,14,0) 30%);
}

.i-closing-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(var(--s6), 1rem + 2.6vw, var(--s8)) var(--edge) var(--s8);
}
.i-closing-inner > * { max-width: 36rem; }
.i-closing .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.i-closing .h2 {
    font-size: clamp(1.875rem, 1rem + 1.25vw, 2.625rem);    /* 40 @1920 */
    line-height: 1.1;
    color: var(--white);
    text-shadow: 0 1px 18px rgba(9,12,14,.35);
}
.i-closing p {
    margin-top: var(--s4);
    max-width: 33em;
    font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem);
    line-height: 1.7;
    color: var(--white-soft);
    text-shadow: 0 1px 14px rgba(9,12,14,.35);
}
.i-closing .hero-actions { margin-top: var(--s5); }


/* ############################################################
   RESPONSIVE
   ############################################################ */

/* Landscape tablets keep the split. */
@media (min-width: 701px) and (max-width: 1080px) and (orientation: landscape) {
    .i-editorial-copy { padding: var(--s7) var(--s5) var(--s7) var(--edge); }
}

/* Phones and portrait tablets: photograph above, words below —
   the same stacked system as Home. */
@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .page-investments { --i-img: 58svh; }

    .i-hero { display: block; min-height: 100svh; }
    .i-hero-media { inset: 0 0 auto 0; height: var(--i-img); }
    .i-hero-media::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(9,12,14,.55) 0%, rgba(9,12,14,0) 20%,
                    rgba(9,12,14,0) 70%, rgba(9,12,14,.72) 90%, var(--black) 100%);
    }
    .i-hero-media img { object-position: 50% 50%; }
    .page-investments .i-hero::before { display: none; }
    .page-investments .i-hero .hero-inner { padding: calc(var(--i-img) + var(--s4)) var(--edge) var(--s7); }
    .page-investments .i-hero .hero-title, .page-investments .i-hero .hero-lead { text-shadow: none; }

    /* Copy, then the photograph, which fills its box edge to edge. */
    .i-editorial { grid-template-columns: 1fr; min-height: 0; }
    .i-editorial-copy { padding: var(--s8) var(--edge) var(--s7); }
    .i-editorial-media { aspect-ratio: 4 / 3; }

    .i-closing { display: block; min-height: 0; }
    .i-closing-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
    .i-closing-media img { object-position: 50% 50%; }
    .i-closing-media::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(9,12,14,.2) 0%, rgba(9,12,14,0) 24%, rgba(9,12,14,0) 72%, var(--black-deep) 100%);
    }
    .i-closing::before { display: none; }
    .i-closing-inner { padding: var(--s5) var(--edge) var(--s8); }
    .i-closing .h2, .i-closing p { text-shadow: none; }
}

@media (min-width: 701px) and (max-width: 1080px) and (orientation: portrait) {
    .page-investments { --i-img: 63svh; }
    .i-editorial-media { aspect-ratio: 16 / 10; }
    .i-closing-media { aspect-ratio: 5 / 4; max-height: 62svh; }
}

@media (max-width: 700px) {
    .page-investments .i-hero .hero-lead { margin-top: var(--s4); }
    .page-investments .i-hero .hero-actions { margin-top: var(--s5); }
}


/* ############################################################
   GLOBAL PROPORTION STANDARD (26 Sep 2026) — section depths come
   from the shared variables in home.css. Desktop / landscape only.
   ############################################################ */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .i-editorial { min-height: var(--editorial-h); }
    .i-closing { min-height: var(--closing-h); }
}
@media (min-width: 1081px) and (max-width: 1500px) {
    .i-closing-inner { padding-bottom: var(--s6); }
}
/* Shorter closing: the frame holds the gazelles' heads and bodies;
   the words start higher so the paragraph ends above their horns and
   the action sits left of the herd. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .i-closing-media img { object-position: 50% 77%; }
    .i-closing-inner { padding-top: var(--s5); padding-bottom: var(--s5); }
    .i-closing .gold-rule { margin: var(--s2) 0 var(--s3); }
    .i-closing p { margin-top: var(--s3); }
    .i-closing .hero-actions { margin-top: var(--s4); }
}


/* ############################################################
   INVESTMENTS SPECIFICS
   ############################################################ */

/* Hero: the Global Proportion Standard's hero depth (≈787px at 1920),
   not the full viewport. Desktop / landscape only. */
.page-investments {
    /* ≈800px at 1920×1080; the usable viewport on laptop screens. */
    --i-hero-h: clamp(560px, max(41vw, calc(100svh - var(--header-h))), 800px);
    --band-pad: 36px;
}
@media (max-width: 1500px) { .page-investments { --band-pad: 24px; } }
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .page-investments .i-hero { min-height: var(--i-hero-h); height: var(--i-hero-h); }
    .page-investments .i-hero .hero-inner { padding-top: var(--header-h); padding-bottom: 0; }
}

/* Closing: the herd, the waterline and the mountains need most of the
   frame, so the words sit in one low row across the sky and mountain
   band — title left, sentence and action beside it — above the herd. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .page-investments .i-closing { min-height: clamp(440px, 27vw, 520px); }
    .i-closing-media img { object-position: 50% 88%; }
    .i-closing-inner {
        display: grid;
        grid-template-columns: max-content minmax(0, 27rem);
        justify-content: start;
        column-gap: clamp(var(--s6), 1rem + 3vw, var(--s9));
        align-items: end;
        padding-top: var(--s6);
        padding-bottom: var(--s6);
    }
    .i-closing-inner > * { max-width: none; }
    .i-closing .i-closing-text p { margin-top: 0; max-width: 27rem; }
    .i-closing .gold-rule { margin: var(--s2) 0 var(--s3); }
    .i-closing .hero-actions { margin-top: var(--s3); }
    .i-closing::before {
        background:
            linear-gradient(180deg, rgba(9,12,14,.55) 0%, rgba(9,12,14,.3) 26%, rgba(9,12,14,0) 44%),
            linear-gradient(90deg, rgba(9,12,14,.35) 0%, rgba(9,12,14,0) 50%);
    }
}