/**
 * @file plugins/themes/lumina/styles/academic/pinnacle-contact.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Pinnacle experience presentation for the OJS Contact page (contact.tpl).
 *
 * Scope & ownership:
 *   - Every rule is scoped under `body.lm-layout-pinnacle .page_contact`,
 *     so the certified Zenith presentation (zenith-contact.css) and every
 *     other experience remain untouched.
 *   - Pinnacle markup is gated on `experience->id == 'pinnacle'` in the
 *     template (same pattern as the information pages).
 *   - The H1 is owned by the Page Context (ADR-62). This stylesheet only
 *     styles the presentation band below it — never another heading 1.
 *
 * Palette / token conformance:
 *   - THIS FILE IS NOT A PALETTE SOURCE. It defines no color ramp and no
 *     custom `--lm-*` color variables.
 *   - Every color resolves from canonical Lumina tokens owned by
 *     PaletteEngine (`--lm-accent-*`, `--lm-primary`, `--lm-surface-*`,
 *     `--lm-border`, `--lm-text-*`, `--lm-link`, `--lm-link-hover`,
 *     `--lm-focus-ring`) or from the static foundation tokens
 *     (`--lm-radius-*`, `--lm-shadow-*`, `--lm-motion-*`, `--space-*`).
 *     Zero hex/rgb/hsl literals appear below.
 *   - The Contact page therefore adapts automatically whenever the active
 *     Lumina palette changes; no Contact-specific color system is created.
 *
 * Icon / illustration conformance:
 *   - Semantic icons use the existing Font Awesome 4.7 icon font already
 *     loaded by the theme (no new dependency).
 *   - The hero building illustration is the existing Lumina asset
 *     assets/images/academic/lumina-institutional-headquarters.svg (rendered as a plain
 *     <img>, no duplicate, no new asset, no external URL). Following the same
 *     documented convention already used by the Zenith contact hero
 *     (zenith-contact.css), the asset is shown in full grayscale so its
 *     embedded hues never fight the active Lumina palette. The decorative
 *     field and location pin remain token-driven; the card visuals are pure
 *     CSS. The page itself loads no new raster/vector assets.
 */

/* =========================================================
   1. CONTACT HERO (presentation band below the Page Context H1)
   ========================================================= */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl, 2.5rem);
    align-items: center;
    padding: 2.75rem 0 3.25rem;
    margin: 0;
    border-bottom: 1px solid var(--lm-border);
}

/* Editorial two-column composition on desktop — content left, illustration right */
@media (min-width: 1180px) {
    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
        gap: var(--space-2xl, 3rem);
        padding: 3rem 0 3.5rem;
    }
}

/* Tablet 768–1179px: keep the balanced editorial two-column composition
   (smaller illustration column), instead of stacking content. */
@media (min-width: 768px) and (max-width: 1179px) {
    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem);
        gap: var(--space-lg, 1.5rem);
        padding: 2.5rem 0 3rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__visual {
        min-height: 10rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-visual__field {
        max-width: 14rem;
    }
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__content {
    min-width: 0;
    max-width: 36rem;
}

/* Eyebrow — same editorial chrome as the information-pages hero:
   uppercase, tracked, accent color, with a leading accent bar. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-accent-700);
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 2px;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full);
}

/* Short horizontal accent rule under the eyebrow */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__accent-line {
    margin-top: 1rem;
    width: 2.75rem;
    height: 3px;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full);
}

/* Structured OJS metadata — the hero's real, data-driven editorial content.
   Rendered only when the corresponding OJS fields are populated. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.15rem;
    border-radius: var(--lm-radius-md);
    background: var(--lm-accent-50);
    border: 1px solid var(--lm-accent-100);
    color: var(--lm-accent-700);
    font-size: 1.05rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta-body {
    min-width: 0;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lm-accent-700);
    margin-bottom: 0.3rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__meta-value {
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--lm-text-secondary);
}

/* =========================================================
   1b. HERO VISUAL — EXISTING INSTITUTIONAL BUILDING ASSET
   =========================================================
   A large, soft, asymmetric accent field holding the existing Lumina asset
   assets/images/academic/lumina-institutional-headquarters.svg (rendered as a plain
   <img>, decorative only — aria-hidden by its wrapper) plus a small floating
   location-pin marker. Same grayscale convention as the Zenith contact hero:
   the asset keeps its intrinsic colors while its embedded hues are
   neutralized so it never fights the active Lumina palette. No new assets,
   no hardcoded colors. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    pointer-events: none;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-visual__field {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 19rem;
    aspect-ratio: 1 / 0.96;
    border-radius: 58% 42% 55% 45% / 56% 48% 52% 44%;
    background: var(--lm-accent-50);
    border: 1px solid var(--lm-accent-100);
}

/* Building — existing lumina-institutional-headquarters.svg asset */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-visual__building {
    display: block;
    width: 88%;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    z-index: 1;
}

/* Location pin — small circular floating marker, subordinate to the
   illustration (a refined accent, not a primary visual). */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-visual__pin {
    position: absolute;
    top: 5%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: var(--lm-radius-full);
    background: var(--lm-accent-600);
    color: var(--lm-text-inverse);
    font-size: 0.95rem;
    box-shadow: var(--lm-shadow-sm);
    z-index: 2;
}

/* =========================================================
   2. CONTACT INFORMATION SECTIONS (editorial panels)
   =========================================================
   ROW 1: Mailing Address | Principal Contact
   ROW 2: Support Contact (compact feature band)

   Editorial treatment instead of boxed cards: borderless columns separated
   by hairlines, defined by heading + content rather than by a box. Heights
   are content-driven (columns never stretch to match). The hero already
   carries compact metadata; these are the full structured sections. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact {
    margin-top: var(--space-xl, 2.5rem);
}

/* Two-column grid on desktop, single column below. Content-driven heights:
   columns never stretch to match (align-items: start). */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem var(--space-2xl, 3rem);
    align-items: start;
}

@media (min-width: 768px) {
    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Row-1 sections — borderless editorial columns. A hairline top separator
   marks each section; the section reads as heading + content, not a box. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card {
    min-width: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lm-border);
    color: inherit;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card:focus-within {
    outline: var(--lm-focus-ring);
    outline-offset: var(--lm-focus-offset, 2px);
}

/* Section header — icon tile + strong editorial heading + restrained accent */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lm-radius-md);
    background: var(--lm-accent-50);
    border: 1px solid var(--lm-accent-100);
    color: var(--lm-accent-700);
    font-size: 1rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__title {
    margin: 0;
    font-family: var(--lm-font-heading-sans, var(--lm-font-sans, inherit));
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--lm-text-primary);
}

/* Restrained accent rule under the section heading */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__title::after {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-top: 0.45rem;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full);
}

/* Mailing Address — readable editorial body, controlled measure so the
   panel stays proportional to its content (no oversized whitespace). */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__address {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lm-text-secondary);
    max-width: 36ch;
}

/* Principal Contact — editorial profile hierarchy: prominent name, muted
   affiliation, then a hairline divider before the contact details. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lm-text-primary);
    margin-bottom: 0.3rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__role {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--lm-text-secondary);
    margin-bottom: 0.3rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__affiliation {
    font-size: 0.92rem;
    color: var(--lm-text-muted);
    margin-bottom: 0;
}

/* Detail rows (phone + email) */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__details {
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lm-border);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__detail {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--lm-text-secondary);
    overflow-wrap: anywhere;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__detail-icon {
    width: 1.25rem;
    text-align: center;
    color: var(--lm-accent-600);
    flex-shrink: 0;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__detail a {
    color: var(--lm-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--lm-motion-fast, 150ms ease);
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__detail a:hover {
    color: var(--lm-link-hover);
}

/* Support Contact — compact feature information band. Tinted surface with a
   hairline border and restrained radius; phone + email share one horizontal
   row on desktop so the panel stays low and dense. */
body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support {
    margin-top: var(--space-xl, 2.5rem);
    padding: 1.25rem 1.5rem 1.4rem;
    background: var(--lm-accent-50);
    border: 1px solid var(--lm-accent-100);
    border-radius: var(--lm-radius-lg);
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support .lm-pinnacle-contact-card__icon {
    background: var(--lm-surface-card);
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support .lm-pinnacle-contact-card__header {
    margin-bottom: 0.75rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support .lm-pinnacle-contact-card__name {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support .lm-pinnacle-contact-card__details {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.9rem 2rem;
    margin-top: 0;
    padding-top: 0.75rem;
    border-top-color: var(--lm-accent-100);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Tablet 768–1179px two-column hero is defined with the hero rules above
   (see @media (min-width: 768px) and (max-width: 1179px)). */

/* Mobile ≤767px: stacked hero, sections single column */
@media (max-width: 767px) {
    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 2rem 0 2.5rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-hero__visual {
        min-height: 0;
        justify-content: flex-start;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-visual__field {
        max-width: 13rem;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact {
        margin-top: 2rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact__grid {
        gap: 2rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card {
        padding-top: 1.25rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support {
        margin-top: 2rem;
        padding: 1.1rem 1.25rem 1.25rem;
    }

    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card--support .lm-pinnacle-contact-card__details {
        flex-direction: column;
        gap: 0.65rem;
    }
}

/* =========================================================
   MOTION — RESPECT REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    body.lm-layout-pinnacle .page_contact .lm-pinnacle-contact-card__detail a {
        transition: none;
    }
}