/* =============================================================
   File: assets/css/markets.css
   Pienaar Group — MARKETS PAGE ONLY (rebuilt 26 Sep 2026 to the
   approved Markets mock-up). Loaded after site.css and home.css.

   Header, Private Access, the three-column band and the footer are
   the global components from home.css, used unchanged. This file
   holds only Markets layout: HERO · THREE-COLUMN DETAIL · ONE IVORY
   SPLIT (eight markets as text; photograph bleeds top to bottom) ·
   CLOSING CHAPTER · RESPONSIVE. Built on the same system as the
   approved Property page.
   ============================================================= */


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

.m-hero {
    min-height: max(100svh, 640px);
    align-items: center;
    background: var(--black);
}
.m-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.m-hero-media picture, .m-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Sun at centre, the zebras along the lower third: hold both. */
.m-hero-media img { object-fit: cover; object-position: 50% 58%; }

/* The copy sits high, in the sky, so it ends well above the zebras'
   heads (they stand on the horizon in the lower third). */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .page-markets .m-hero { align-items: flex-start; }
    .page-markets .m-hero .hero-inner { padding: calc(var(--header-h) + clamp(var(--s5), 1rem + 2.5vw, var(--s8))) var(--edge) var(--s8); }
}
/* Laptop-height screens: lift the copy a little further so the CTA
   clears the standing zebra's ears. */
@media (min-width: 1081px) and (max-height: 820px) {
    .page-markets .m-hero .hero-inner { padding-top: calc(var(--header-h) + var(--s4)); }
    .page-markets .m-hero .hero-actions { margin-top: var(--s4); }
}

/* Directional shade on the copy side only. */
.page-markets .m-hero::before {
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9,12,14,.72) 0%, rgba(9,12,14,.5) 24%, rgba(9,12,14,.14) 44%, rgba(9,12,14,0) 56%),
        linear-gradient(180deg, rgba(9,12,14,.55) 0%, rgba(9,12,14,0) 22%, rgba(9,12,14,0) 80%, rgba(9,12,14,.35) 100%);
}

.m-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-markets .m-hero .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.page-markets .m-hero .hero-title span { display: block; }
.page-markets .m-hero .hero-lead { max-width: 30em; }


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

.m-pillars .h-num::after {
    content: "";
    display: block;
    width: 22px; height: 1px;
    margin-top: var(--s2);
    background: var(--line-gold);
}
.m-pillars .h-pillar h3 { margin-top: var(--s3); }
@media (min-width: 1081px) { .m-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.
   ############################################################ */

.m-editorial {
    display: grid;
    grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
    align-items: stretch;
    min-height: clamp(460px, 32.5vw, 660px);   /* ≈624px at 1920 (final pass: −14%) */
    margin: 0;
    padding: 0;
    background: var(--ivory);
    color: var(--ink);
}

.m-editorial-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s7) clamp(var(--s6), 1rem + 3vw, var(--s9)) var(--s7) max(var(--edge), calc((100vw - var(--content)) / 2));
}
.m-editorial-copy .label { font-size: 9.5px; color: var(--ink-soft); }
.m-editorial-copy .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); background: var(--gold); }
.m-editorial-copy .h2 {
    font-size: clamp(2.125rem, 1.1rem + 1.3vw, 2.75rem);   /* 43 @1920 */
    line-height: 1.12;
    color: var(--ink);
}
.m-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;
}
.m-editorial-copy p + p { margin-top: var(--s3); }

/* The outlined action, on ivory: gold hairline, ink label. */
.m-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);
}
.m-btn-outline-ink svg { width: 12px; height: 12px; flex: none; }
.m-btn-outline-ink:hover { background: rgba(183, 154, 90, 0.14); }
.m-btn-outline-ink:active { background: var(--gold); color: #0E1113; }

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

/* Eight markets as information: two small labels, names in one line
   each, fine gold separators. No cards, no images, no icons. */
.m-market-lists { margin-top: var(--s5); }
.m-list-label {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
}
.m-list-label + .m-list { margin-top: var(--s2); }
.m-list + .m-list-label { margin-top: var(--s4); }
.m-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: var(--s1);
    margin: 0; padding: 0; list-style: none;
}
.m-list li {
    font-family: var(--serif);
    font-size: clamp(0.875rem, 0.8rem + 0.12vw, 0.9375rem);    /* 15 @1920 */
    line-height: 1.5;
    color: var(--ink-soft);
}
.m-list li + li::before {
    content: "";
    display: inline-block;
    width: 1px; height: 0.9em;
    margin: 0 12px;
    background: var(--gold);
    opacity: 0.8;
    vertical-align: -0.1em;
}


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

.m-closing {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    min-height: clamp(460px, 29vw, 600px);     /* ≈557px at 1920: clearly shorter than the hero */
    overflow: hidden;
    background: var(--black-deep);
}
.m-closing-media, .m-closing-media picture, .m-closing-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-closing-media { z-index: -2; }
/* Both waterbuck with their horns; the copy sits in the foliage at
   upper left, above the nearer animal's back and clear of its head. */
.m-closing-media img { object-fit: cover; object-position: 50% 20%; }   /* both heads and full horns in frame */

.m-closing::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9,12,14,.74) 0%, rgba(9,12,14,.52) 24%, rgba(9,12,14,.12) 40%, rgba(9,12,14,0) 50%),
        linear-gradient(180deg, rgba(9,12,14,.3) 0%, rgba(9,12,14,0) 34%);
}

.m-closing-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(var(--s5), 0.5rem + 2vw, var(--s6)) var(--edge) var(--s6);
}
.m-closing-inner > * { max-width: 30rem; }
.m-closing .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.m-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);
}
.m-closing p {
    margin-top: var(--s4);
    max-width: 28em;
    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);
}
.m-closing .hero-actions { margin-top: var(--s5); }


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

/* Landscape tablets keep the split. */
@media (min-width: 701px) and (max-width: 1080px) and (orientation: landscape) {
    .m-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-markets { --m-img: 58svh; }

    .m-hero { display: block; min-height: 100svh; }
    .m-hero-media { inset: 0 0 auto 0; height: var(--m-img); }
    .m-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%);
    }
    .m-hero-media img { object-position: 50% 50%; }
    .page-markets .m-hero::before { display: none; }
    .page-markets .m-hero .hero-inner { padding: calc(var(--m-img) + var(--s4)) var(--edge) var(--s7); }
    .page-markets .m-hero .hero-title, .page-markets .m-hero .hero-lead { text-shadow: none; }

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

    .m-closing { display: block; min-height: 0; }
    .m-closing-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
    .m-closing-media img { object-position: 50% 50%; }
    .m-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%);
    }
    .m-closing::before { display: none; }
    .m-closing-inner { padding: var(--s5) var(--edge) var(--s8); }
    .m-closing .h2, .m-closing p { text-shadow: none; }
}

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

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

/* ############################################################
   FINAL PROPORTION PASS — ivory split (desktop / landscape only).
   Tighter vertical rhythm so the section is ≈14% shorter; the
   40/60 split and the top-to-bottom photograph bleed are unchanged.
   ############################################################ */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .m-editorial-copy { padding-top: var(--s6); padding-bottom: var(--s6); }
    .m-editorial-copy .gold-rule { margin: var(--s2) 0 var(--s3); }
    .m-editorial-copy p { max-width: 32em; margin-top: var(--s3); line-height: 1.6; }
    .m-editorial-copy p + p { margin-top: var(--s2); }
    .m-market-lists { margin-top: var(--s4); }
    .m-list + .m-list-label { margin-top: var(--s3); }
}


/* ############################################################
   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) {
    .m-editorial { min-height: var(--editorial-h); }
    .m-closing { min-height: var(--closing-h); }
}
@media (min-width: 1081px) and (max-width: 1500px) {
    .m-editorial-copy { padding-top: var(--s5); padding-bottom: var(--s5); }
}
/* Horns to chins of both waterbuck need ≈43% of the frame; allow the
   standard's upper limit (≤540px) for this photograph only. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .m-closing { min-height: clamp(400px, 27.6vw, 530px); }
    .m-closing-media img { object-position: 50% 23%; }
}