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

   Header, Private Access, the three-column band and the footer are
   the global components defined for Home (home.css) and are used
   here unchanged. This file holds only what is specific to Property:
     HERO (single photograph) · THREE-COLUMN DETAIL · IVORY SPLIT
     (photograph bleeds top to bottom) · CLOSING CHAPTER · RESPONSIVE
   ============================================================= */


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

.p-hero {
    min-height: max(100svh, 640px);
    align-items: center;
    background: var(--black);
}
.p-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.p-hero-media picture, .p-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Lioness and cub sit right of centre; hold both heads and the grass
   foreground. */
.p-hero-media img { object-fit: cover; object-position: 60% 40%; }

/* Directional shade on the copy side only. */
.page-property .p-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%);
}

.p-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-property .p-hero .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.page-property .p-hero .hero-title span { display: block; }
.page-property .p-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
   ############################################################ */

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

.p-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);
}

.p-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));
}
.p-editorial-copy .label { font-size: 9.5px; color: var(--ink-soft); }
.p-editorial-copy .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); background: var(--gold); }
.p-editorial-copy .h2 {
    font-size: clamp(2.125rem, 1.1rem + 1.3vw, 2.75rem);   /* 43 @1920 */
    line-height: 1.12;
    color: var(--ink);
}
.p-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;
}
.p-editorial-copy p + p { margin-top: var(--s3); }

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

/* Full row height, no padding, no border, no caption. */
.p-editorial-media {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--charcoal);
}
.p-editorial-media picture, .p-editorial-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0;
}
/* Both towers, the colonnade and the terraces. */
.p-editorial-media img { object-fit: cover; object-position: 55% 40%; }


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

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

.p-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%);
}

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


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

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

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

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

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

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

@media (max-width: 700px) {
    .page-property .p-hero .hero-lead { margin-top: var(--s4); }
    .page-property .p-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) {
    .p-editorial { min-height: var(--editorial-h); }
    .p-closing { min-height: var(--closing-h); }
}
@media (min-width: 1081px) and (max-width: 1500px) {
    .p-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) {
    .p-closing-media img { object-position: 50% 77%; }
    .p-closing-inner { padding-top: var(--s5); padding-bottom: var(--s5); }
    .p-closing .gold-rule { margin: var(--s2) 0 var(--s3); }
    .p-closing p { margin-top: var(--s3); }
    .p-closing .hero-actions { margin-top: var(--s4); }
}