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

   Header, Private Access and footer are the global components from
   home.css, unchanged. Contact is deliberately more compact than the
   other pages: shorter hero, a typographic directory, one dark access
   band, footer.
     HERO (~650px) · IVORY DIRECTORY (~640px) · ACCESS (~400px)
   ============================================================= */

.c-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-contact .gold-rule { width: 32px; }


/* ############################################################
   HERO — one photograph, no action (the directory follows)
   ############################################################ */

.c-hero { background: var(--black); }
.c-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.c-hero-media picture, .c-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The Twelve Apostles and the lit shoreline across the upper-left half,
   the bay and rocks below: hold the mountains and the lights. */
.c-hero-media img { object-fit: cover; object-position: 50% 42%; }

.page-contact .c-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,.12) 44%, rgba(9,12,14,0) 56%),
        linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,0) 20%, rgba(9,12,14,0) 78%, rgba(9,12,14,.35) 100%);
}
.page-contact .c-hero .gold-rule { margin: var(--s3) 0 var(--s4); }
.page-contact .c-hero .hero-title span { display: block; }
.page-contact .c-hero .hero-lead { max-width: 27em; }

@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .page-contact { --c-hero-h: clamp(480px, 34vw, 660px); }       /* ≈653px at 1920 */
    .page-contact .c-hero { min-height: var(--c-hero-h); height: var(--c-hero-h); }
    .page-contact .c-hero .hero-inner { padding-top: var(--header-h); padding-bottom: 0; }
}


/* ############################################################
   IVORY CONTACT DIRECTORY — typographic, no cards, no photographs
   ############################################################ */

.c-directory {
    background: var(--ivory);
    color: var(--ink);
    padding-block: clamp(var(--s6), 1.5rem + 2vw, var(--s7)) clamp(var(--s6), 1.5rem + 1.6vw, var(--s7));
}
.c-wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--edge);
}
.c-wrap > * { max-width: var(--content); margin-inline: auto; }

.c-dir-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s8);
    align-items: end;
}
.c-directory .label { font-size: 9.5px; color: var(--ink); }
.c-directory .gold-rule { margin: var(--s3) 0 var(--s4); background: var(--gold); }
.c-directory .h2 {
    font-size: clamp(2.125rem, 1.1rem + 1.3vw, 2.75rem);   /* 43 @1920 */
    line-height: 1.1;
    color: var(--ink);
}
.c-dir-intro {
    max-width: 29em;
    font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ink-soft);
}

.c-offices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: var(--s5);
}
.c-office { padding-top: var(--s4); border-top: 1px solid rgba(183, 154, 90, 0.55); }
.c-office + .c-office { margin-left: var(--s7); position: relative; }
.c-office + .c-office::before {          /* fine vertical separation */
    content: ""; position: absolute;
    left: calc(-1 * var(--s7) / 2); top: var(--s3); bottom: var(--s1);
    width: 1px; background: rgba(183, 154, 90, 0.3);
}
.c-offices .c-office:first-child { margin-right: 0; }

.c-office-label {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}
.c-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: start;
    margin-top: var(--s3);
}
.c-row + .c-row { margin-top: var(--s3); }
.c-icon { width: 20px; height: 20px; color: var(--gold); margin-top: 3px; }
.c-icon--lg { width: 26px; height: 26px; margin-top: 2px; flex: none; }
.c-office address {
    font-style: normal;
    font-family: var(--serif);
    font-size: clamp(0.9375rem, 0.85rem + 0.15vw, 1.0625rem);
    line-height: 1.55;
    color: var(--ink);
}
.c-link {
    font-family: var(--serif);
    font-size: clamp(0.9375rem, 0.85rem + 0.15vw, 1.0625rem);
    color: var(--ink);
    text-decoration: none;
    background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
    transition: background-size var(--dur) var(--ease);
}
.c-link:hover { background-size: 100% 1px; }
.c-link--arrow { display: inline-flex; align-items: center; gap: 10px; }
.c-link--arrow svg { width: 14px; height: 14px; color: var(--gold); }
.c-row .c-link { display: inline-flex; align-items: center; min-height: 28px; }

.c-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--s5) auto 0;
    padding: var(--s4) 0 0;
    list-style: none;
    border-top: 1px solid rgba(183, 154, 90, 0.55);
}
.c-channels li {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding-inline: var(--s5);
    border-left: 1px solid rgba(183, 154, 90, 0.3);
}
.c-channels li:first-child { padding-left: 0; border-left: 0; }
.c-channel-label {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}
.c-channels .c-link { overflow-wrap: anywhere; }


/* ############################################################
   ACCESS — WhatsApp Business | Private Access (dark, compact)
   ############################################################ */

.c-access {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--black-deep);
    border-top: 1px solid var(--line-gold-2);
}
.c-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(340px, 20vw, 400px);        /* ≈384px at 1920 */
}
.c-panel--pa { border-left: 1px solid rgba(183, 154, 90, 0.35); }

/* WhatsApp panel: the Cape Town photograph, held far back. */
.c-panel-bg, .c-panel-bg picture, .c-panel-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-panel-bg { z-index: -2; }
.c-panel-bg img { object-fit: cover; object-position: 50% 85%; opacity: 0.32; }
.c-panel--wa::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(9,12,14,.92) 0%, rgba(9,12,14,.78) 55%, rgba(9,12,14,.6) 100%);
}
/* Private Access panel: near-black with the Pienaar crest set very
   faintly at the right (the real brand mark — no generated imagery). */
.c-panel--pa {
    background:
        radial-gradient(ellipse at 85% 50%, rgba(183,154,90,.10) 0%, rgba(183,154,90,0) 55%),
        var(--black-deep);
}
.c-panel--pa::after {
    content: ""; position: absolute; z-index: -1;
    right: -4%; top: 50%; width: clamp(220px, 20vw, 380px); aspect-ratio: 1;
    transform: translateY(-50%);
    background: url("../img/brand/pienaar-logo-360.png") center / contain no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

.c-panel-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    padding: var(--s6) clamp(var(--s5), 1rem + 3vw, var(--s9));
}
.c-panel--wa .c-panel-inner { padding-left: max(var(--edge), calc((100vw - var(--content)) / 2)); }
.c-panel-copy { max-width: 28rem; }
.c-access .gold-rule { margin: var(--s3) 0 var(--s4); }
.c-access .h2 {
    font-size: clamp(1.75rem, 1rem + 1vw, 2.25rem);          /* 36 @1920 */
    line-height: 1.12;
    color: var(--white);
}
.c-access p {
    margin-top: var(--s3);
    max-width: 26em;
    font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem);
    line-height: 1.65;
    color: var(--white-soft);
}
.c-access .h-btn-outline { margin-top: var(--s5); }
.c-pa-btn .c-lock { width: 11px; height: 11px; color: var(--gold-champ); }

.c-qr { margin: 0; flex: none; text-align: center; }
.c-qr img {
    display: block;
    width: clamp(120px, 7.2vw, 144px); height: auto;
    padding: 8px;
    background: #fff;
}
.c-qr figcaption {
    margin-top: var(--s2);
    font-family: var(--serif);
    font-size: 0.875rem;
    color: var(--white-soft);
}


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

@media (max-width: 1280px) {
    .c-channels li { padding-inline: var(--s4); }
}

/* Phones and portrait tablets: photograph above, words below (the same
   stacked system as the other pages); everything stacks. */
@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .page-contact { --c-img: 36svh; }   /* hero total ≈70svh on phones */
    .c-hero { display: block; min-height: 0; }
    .c-hero-media { inset: 0 0 auto 0; height: var(--c-img); }
    .c-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) 22%,
                    rgba(9,12,14,0) 68%, rgba(9,12,14,.75) 90%, var(--black) 100%);
    }
    .c-hero-media img { object-position: 50% 50%; }
    .page-contact .c-hero::before { display: none; }
    .page-contact .c-hero .hero-inner { padding: calc(var(--c-img) + var(--s3)) var(--edge) var(--s5); }
    .page-contact .c-hero .hero-title, .page-contact .c-hero .hero-lead { text-shadow: none; }

}
@media (min-width: 701px) and (max-width: 1080px) and (orientation: portrait) {
    .page-contact { --c-img: 48svh; }
    /* Portrait tablets keep the two offices side by side. */
    .c-office + .c-office { margin-left: var(--s6); }
    .c-channels li { padding-inline: var(--s3); }
    .c-channels li { flex-direction: column; gap: var(--s2); }
    .c-panel-inner { flex-direction: column; align-items: flex-start; padding: var(--s6) var(--s5); }
    .c-panel--wa .c-panel-inner { padding-left: var(--edge); }
}
/* Phones: the visitor can tap "Start a conversation", so the QR code
   is left out rather than taking a screen of its own. */
@media (max-width: 700px) {
    .c-dir-head { grid-template-columns: 1fr; row-gap: var(--s4); }
    .c-offices { grid-template-columns: 1fr; margin-top: var(--s5); }
    .c-office + .c-office { margin-left: 0; margin-top: var(--s5); }
    .c-office + .c-office::before { display: none; }
    .c-channels { grid-template-columns: 1fr; padding-top: 0; }
    .c-channels li { padding: var(--s4) 0; border-left: 0; border-top: 1px solid rgba(183, 154, 90, 0.3); }
    .c-channels li:first-child { border-top: 0; }
    .c-row .c-link, .c-channels .c-link { min-height: 44px; display: inline-flex; align-items: center; }

    .c-access { grid-template-columns: 1fr; }
    .c-panel { min-height: 0; }
    .c-panel--pa { border-left: 0; border-top: 1px solid rgba(183, 154, 90, 0.35); }
    .c-panel-inner, .c-panel--wa .c-panel-inner { padding: var(--s7) var(--edge); }
    .c-qr { display: none; }
    .page-contact .c-hero .hero-lead { margin-top: var(--s4); }
}