/*
 * KKI Design System — Canonical hero template
 *
 * Standardizes the harington theme's `.hero-title` across the main landing
 * pages to a single visual template:
 *
 *   - Cormorant Garamond italic, weight 500
 *   - clamp(48px, 5.4vw, 72px) — fluid but capped
 *   - text-transform: none (overrides the body.uppercase-text default)
 *   - centered, single-line, color #fff7e8
 *
 * The pattern was already in use on Methodology, Services, Projects, and
 * Portfolio (via existing page-scoped overrides in switcher.css). This file
 * extends the same template to:
 *
 *   - About (page IDs 2711 EN / 4516 TH) — was 115px UPPERCASE
 *   - Insights (4487 EN / 4523 TH) — was 72px UPPERCASE
 *   - Contact (2713 EN / 4522 TH) — was 72px UPPERCASE
 *   - Project detail (body.single-kki_project) — was 72px UPPERCASE
 *   - Portfolio Case detail (body.single-harington_portfolio) — was 72px UPPERCASE
 *
 * Home page (4122 / 4519) keeps its unique brand-pillar treatment (76px
 * normal, multi-line) — that's a deliberate marketing surface, not a
 * pattern page.
 */

body.page-id-2711 #hero .hero-title,
body.page-id-2711 #hero .hero-title span,
body.page-id-4516 #hero .hero-title,
body.page-id-4516 #hero .hero-title span,
body.page-id-4487 #hero .hero-title,
body.page-id-4487 #hero .hero-title span,
body.page-id-4523 #hero .hero-title,
body.page-id-4523 #hero .hero-title span,
body.page-id-2713 #hero .hero-title,
body.page-id-2713 #hero .hero-title span,
body.page-id-4522 #hero .hero-title,
body.page-id-4522 #hero .hero-title span,
body.single-kki_project #hero .hero-title,
body.single-kki_project #hero .hero-title span,
body.single-harington_portfolio #hero .hero-title,
body.single-harington_portfolio #hero .hero-title span {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(48px, 5.4vw, 72px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    text-align: center !important;
    color: #fff7e8 !important;
    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Subtitle pattern — Poppins, muted cream, centered, narrow column. */
body.page-id-2711 #hero .hero-subtitle,
body.page-id-2711 #hero .hero-subtitle span,
body.page-id-4516 #hero .hero-subtitle,
body.page-id-4516 #hero .hero-subtitle span,
body.page-id-4487 #hero .hero-subtitle,
body.page-id-4487 #hero .hero-subtitle span,
body.page-id-4523 #hero .hero-subtitle,
body.page-id-4523 #hero .hero-subtitle span,
body.page-id-2713 #hero .hero-subtitle,
body.page-id-2713 #hero .hero-subtitle span,
body.page-id-4522 #hero .hero-subtitle,
body.page-id-4522 #hero .hero-subtitle span,
body.single-kki_project #hero .hero-subtitle,
body.single-kki_project #hero .hero-subtitle span,
body.single-harington_portfolio #hero .hero-subtitle,
body.single-harington_portfolio #hero .hero-subtitle span {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: clamp(15px, 1.32vw, 20px) !important;
    font-weight: 400 !important;
    color: rgba(247, 240, 223, 0.78) !important;
    text-align: center !important;
    line-height: 1.55 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-title-wrapper alignment (override left-aligned defaults) */
body.page-id-2711 #hero .hero-title-wrapper,
body.page-id-4516 #hero .hero-title-wrapper,
body.page-id-4487 #hero .hero-title-wrapper,
body.page-id-4523 #hero .hero-title-wrapper,
body.page-id-2713 #hero .hero-title-wrapper,
body.page-id-4522 #hero .hero-title-wrapper,
body.single-kki_project #hero .hero-title-wrapper,
body.single-harington_portfolio #hero .hero-title-wrapper {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.page-id-2711 #hero #hero-caption .inner,
body.page-id-4516 #hero #hero-caption .inner,
body.page-id-4487 #hero #hero-caption .inner,
body.page-id-4523 #hero #hero-caption .inner,
body.page-id-2713 #hero #hero-caption .inner,
body.page-id-4522 #hero #hero-caption .inner,
body.single-kki_project #hero #hero-caption .inner,
body.single-harington_portfolio #hero #hero-caption .inner {
    text-align: center !important;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero height — force 100vh on every standardized landing so the image
 * gets full canvas (matches Methodology / Services / Projects / Portfolio).
 * Insights was 590px; Contact was 500px with hidden wrapper. */
body.page-id-2711 #hero,
body.page-id-4516 #hero,
body.page-id-4487 #hero,
body.page-id-4523 #hero,
body.page-id-2713 #hero,
body.page-id-4522 #hero,
body.single-kki_project #hero,
body.single-harington_portfolio #hero {
    min-height: 100vh !important;
    height: 100vh !important;
    display: block !important;
    padding: 0 !important;
}

body.page-id-2711 #hero #hero-caption,
body.page-id-4516 #hero #hero-caption,
body.page-id-4487 #hero #hero-caption,
body.page-id-4523 #hero #hero-caption,
body.page-id-2713 #hero #hero-caption,
body.page-id-4522 #hero #hero-caption,
body.single-kki_project #hero #hero-caption,
body.single-harington_portfolio #hero #hero-caption {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force the bg image wrapper visible — Contact had it hidden. */
body.page-id-2711 #hero-image-wrapper,
body.page-id-4516 #hero-image-wrapper,
body.page-id-4487 #hero-image-wrapper,
body.page-id-4523 #hero-image-wrapper,
body.page-id-2713 #hero-image-wrapper,
body.page-id-4522 #hero-image-wrapper,
body.single-kki_project #hero-image-wrapper,
body.single-harington_portfolio #hero-image-wrapper {
    display: block !important;
}

/* Subtle navy gradient overlay so the hero text reads against any bg image
 * (matches the portfolio-pattern overlay used by Methodology / Services). */
body.page-id-2711 #hero::after,
body.page-id-4516 #hero::after,
body.page-id-4487 #hero::after,
body.page-id-4523 #hero::after,
body.page-id-2713 #hero::after,
body.page-id-4522 #hero::after,
body.single-kki_project #hero::after,
body.single-harington_portfolio #hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 30% 50%, rgba(216, 189, 118, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(7, 17, 29, 0.55) 0%, rgba(7, 17, 29, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Ensure caption sits above the gradient overlay. */
body.page-id-2711 #hero #hero-caption,
body.page-id-4516 #hero #hero-caption,
body.page-id-4487 #hero #hero-caption,
body.page-id-4523 #hero #hero-caption,
body.page-id-2713 #hero #hero-caption,
body.page-id-4522 #hero #hero-caption,
body.single-kki_project #hero #hero-caption,
body.single-harington_portfolio #hero #hero-caption {
    position: relative !important;
    z-index: 2 !important;
}

/* ── Specificity bump · the switcher.css "fallback hero" rule uses a chain
 *    of 5 `:not(.kki-*-hero)` selectors which gives it specificity (0,6,1).
 *    Our previous `body.page-id-X #hero` (0,2,1) loses to it. To beat it
 *    cleanly without modifying the plugin's stylesheet, repeat the page-id
 *    class 6× to push specificity to (0,7,1). Browsers accept duplicate
 *    classes; the repetition is the canonical "specificity hack" pattern. */
body.page-id-2711.page-id-2711.page-id-2711.page-id-2711.page-id-2711.page-id-2711 #hero,
body.page-id-4516.page-id-4516.page-id-4516.page-id-4516.page-id-4516.page-id-4516 #hero,
body.page-id-4487.page-id-4487.page-id-4487.page-id-4487.page-id-4487.page-id-4487 #hero,
body.page-id-4523.page-id-4523.page-id-4523.page-id-4523.page-id-4523.page-id-4523 #hero,
body.page-id-2713.page-id-2713.page-id-2713.page-id-2713.page-id-2713.page-id-2713 #hero,
body.page-id-4522.page-id-4522.page-id-4522.page-id-4522.page-id-4522.page-id-4522 #hero,
body.single-kki_project.single-kki_project.single-kki_project.single-kki_project.single-kki_project.single-kki_project #hero,
body.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio #hero {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    padding: 0 !important;
}

/* Same specificity bump for #hero-image-wrapper (Contact had it set to
 * display:none by the harington fallback). Force it visible so the bg
 * image renders. */
body.page-id-2711.page-id-2711.page-id-2711.page-id-2711.page-id-2711.page-id-2711 #hero-image-wrapper,
body.page-id-4516.page-id-4516.page-id-4516.page-id-4516.page-id-4516.page-id-4516 #hero-image-wrapper,
body.page-id-4487.page-id-4487.page-id-4487.page-id-4487.page-id-4487.page-id-4487 #hero-image-wrapper,
body.page-id-4523.page-id-4523.page-id-4523.page-id-4523.page-id-4523.page-id-4523 #hero-image-wrapper,
body.page-id-2713.page-id-2713.page-id-2713.page-id-2713.page-id-2713.page-id-2713 #hero-image-wrapper,
body.page-id-4522.page-id-4522.page-id-4522.page-id-4522.page-id-4522.page-id-4522 #hero-image-wrapper,
body.single-kki_project.single-kki_project.single-kki_project.single-kki_project.single-kki_project.single-kki_project #hero-image-wrapper,
body.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio.single-harington_portfolio #hero-image-wrapper {
    display: block !important;
    height: 100vh !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}