/**
 * Regenerate Cascadia - Hero (Canonical Contract)
 * Modular CSS partial extracted from rc-core.css Section 28.
 * Version: v1.0-a11y3.0b
 * Date: 2026-05-08
 * Generated by Claude (A11Y-3.0b Deploy 1; hero family unification)
 *
 * A11Y-3.0b (2026-05-08): Canonical hero contract for the unified hero
 *   system. Replaces six prior hero families with one canonical class
 *   (.rc-ph) plus five modifier variants (--compact, --small, --solid,
 *   --post, --event) and eleven slot classes.
 *
 *   Source consolidation:
 *     Family A (.rch-hero) — distinct, stays in rc-home.css (audit-only).
 *     Family B (.rc-ph)    — canonical; this file is the new home.
 *     Family C (.rc-cp-hero) — collapsed to .rc-ph (rc-content-page.css
 *                              rules removed; content-page-template.php
 *                              markup swapped).
 *     Family D (.dash-hero) — collapsed to .rc-ph .rc-ph--small
 *                              (rc-dashboard.css rules removed;
 *                              dashboard-template.php markup swapped).
 *     Family E (.rc-lg-hero) — distinct, stays in rc-landscape.css
 *                              (tokenize-in-place in A11Y-3.0c).
 *     Family F (.rc-hero)   — collapsed to .rc-ph with --post and
 *                              --event modifiers (rc-blog.css Section 3
 *                              removed; unified-shortcodes.php markup
 *                              swapped on five sites; template-rc-archive,
 *                              template-rc-search markup swapped).
 *
 *   Contract proposal: docs/living/sessions/a11y/A11Y-3.0b_Deploy1_Proposal.md v1.1.
 *   Hero tokens (--rc-hero-*) live in rc-core.css :root (added in this deploy).
 *
 *   Variant override posture: all base .rc-ph slot rules use !important
 *   to defeat the Elementor cascade. Variant overrides on those same
 *   slots also use !important. Variant-only properties (not on a base
 *   slot) use natural specificity.
 *
 *   Sections:
 *     1.  Base hero (.rc-ph and slots)
 *     2.  --compact variant (legacy .rc-ph-compact transitional alias)
 *     3.  --small variant (Family D resolution)
 *     4.  --solid variant (Family F search resolution)
 *     5.  --post variant + slots (Family F single-post resolution)
 *     6.  --event variant + slots (Family F single-event resolution)
 *     7.  Responsive overrides
 */


/* ═══════════════════════════════════════
   1. BASE HERO (.rc-ph)
   Migrated from rc-core.css Section 28.
   Eyebrow font-size raised 11px → var(--fs-300)
   per A11Y-2.5B floor change.
   Overlay rgba triplets tokenized to RGB
   companion form per AP-3 cleanup.
   ═══════════════════════════════════════ */

.rc-ph {
  position: relative;
  min-height: var(--rc-hero-min-height-default, 340px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -1px;
  margin-bottom: 32px;
}

.rc-ph-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.rc-ph img.rc-ph-bg,
.elementor img.rc-ph-bg,
.elementor-widget-container img.rc-ph-bg {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.rc-ph-no-img {
  position: absolute;
  inset: 0;
  background: var(--rc-deep-forest);
}

.rc-ph-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--rc-hero-overlay-top, rgba(var(--rc-deep-forest-rgb), 0.94)) 0%,
    var(--rc-hero-overlay-mid, rgba(var(--rc-deep-forest-rgb), 0.60)) 45%,
    var(--rc-hero-overlay-bot, rgba(var(--rc-deep-forest-rgb), 0.15)) 100%
  );
}

.rc-ph-inner {
  position: relative;
  z-index: 2;
  max-width: var(--rc-hero-inner-max-width, 1120px);
  margin: 0 auto;
  padding:
    var(--rc-hero-inner-pad-y-top, 80px)
    var(--rc-hero-inner-pad-x, 40px)
    var(--rc-hero-inner-pad-y-bottom, 48px);
  width: 100%;
}

.rc-ph .rc-ph-eyebrow,
.elementor .rc-ph .rc-ph-eyebrow {
  font-family: 'Inconsolata', monospace !important;
  font-size: var(--fs-300) !important;
  font-weight: 500 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--rc-hero-eyebrow-color, var(--rc-moss)) !important;
  margin-bottom: 16px;
  line-height: 1;
}

.rc-ph h1.rc-ph-title,
.elementor .rc-ph h1.rc-ph-title,
.elementor h1.rc-ph-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 700 !important;
  color: var(--rc-hero-title-color, var(--rc-cream)) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  margin: 0;
  padding: 0;
}

.rc-ph .rc-ph-subtitle,
.elementor .rc-ph .rc-ph-subtitle {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(16px, 2vw, 21px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--rc-hero-subtitle-color, var(--rc-sky-water)) !important;
  line-height: 1.5;
  max-width: 600px;
  margin-top: 14px;
}


/* ═══════════════════════════════════════
   2. --compact VARIANT
   Resolves rc-content-page.css .rc-cp-hero-compact
   plus legacy .rc-ph-compact (transitional alias).
   ═══════════════════════════════════════ */

.rc-ph--compact {
  min-height: var(--rc-hero-min-height-compact, 200px);
}

.rc-ph--compact .rc-ph-inner {
  padding: 48px 40px 36px;
}

/* Transitional alias for legacy single-dash class. Drops in Phase 4. */
.rc-ph-compact {
  min-height: var(--rc-hero-min-height-compact, 200px);
}

.rc-ph-compact .rc-ph-inner {
  padding: 48px 40px 36px;
}


/* ═══════════════════════════════════════
   3. --small VARIANT (resolves Family D)
   Dashboard-sized hero with gold eyebrow,
   darker overlay, smaller title.
   ═══════════════════════════════════════ */

.rc-ph--small {
  min-height: var(--rc-hero-min-height-small, 220px);
}

.rc-ph--small .rc-ph-inner {
  padding: 56px 40px 48px;
}

.rc-ph--small .rc-ph-overlay {
  background: linear-gradient(
    180deg,
    var(--rc-hero-overlay-darken-top, rgba(var(--rc-deep-forest-rgb), 0.5)) 0%,
    var(--rc-hero-overlay-darken-bot, rgba(var(--rc-deep-forest-rgb), 0.85)) 100%
  );
}

.rc-ph--small .rc-ph-eyebrow,
.elementor .rc-ph--small .rc-ph-eyebrow {
  color: var(--rc-hero-eyebrow-color-alt, var(--rc-gold)) !important;
  margin-bottom: 12px;
}

.rc-ph--small h1.rc-ph-title,
.elementor .rc-ph--small h1.rc-ph-title {
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.15 !important;
}

.rc-ph--small .rc-ph-subtitle,
.elementor .rc-ph--small .rc-ph-subtitle {
  font-size: clamp(16px, 2vw, 20px) !important;
  max-width: 500px;
}


/* ═══════════════════════════════════════
   4. --solid VARIANT (resolves Family F search)
   Solid forest background; no image, no overlay.
   ═══════════════════════════════════════ */

.rc-ph--solid {
  background: var(--rc-forest);
}

.rc-ph--solid .rc-ph-bg {
  display: none;
}

.rc-ph--solid .rc-ph-overlay {
  display: none;
}

.rc-ph--solid .rc-ph-inner {
  padding: 64px 40px 48px;
}


/* ═══════════════════════════════════════
   5. --post VARIANT + SLOTS (resolves Family F single post)
   Adds badge, excerpt, meta slots.
   Title clamp standardized on Family B per Q5 ratified.
   ═══════════════════════════════════════ */

/* --post root inherits .rc-ph defaults; no override needed. */

.rc-ph--post .rc-ph-badge {
  display: inline-block;
  font-family: 'Inconsolata', monospace;
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rc-on-dark-strong);
  background: var(--rc-fill-dark-soft);
  padding: 4px 10px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  margin-bottom: 12px;
  text-decoration: none;
}

.rc-ph--post .rc-ph-badge:hover {
  background: var(--rc-fill-dark-medium);
}

.rc-ph--post .rc-ph-excerpt {
  font-family: 'Jost', sans-serif;
  font-size: var(--fs-700);
  font-weight: 300;
  color: var(--rc-on-dark-primary);
  line-height: 1.5;
  max-width: 640px;
  margin-top: 12px;
}

.rc-ph--post .rc-ph-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inconsolata', monospace;
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-on-dark-secondary);
  margin-top: 16px;
}

.rc-ph--post .rc-ph-author {
  /* inherits parent typography */
}

.rc-ph--post .rc-ph-dot {
  opacity: 0.5;
  padding: 0 2px;
}


/* ═══════════════════════════════════════
   6. --event VARIANT + SLOTS (resolves Family F single event)
   Event detail row replaces subtitle slot per Q7 ratified.
   ═══════════════════════════════════════ */

.rc-ph--event .rc-ph-subtitle {
  display: none;
}

.rc-ph--event .rc-ph-event-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  gap: 24px;
  margin-top: 20px;
}

.rc-ph-event-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rc-ph-event-label {
  font-family: 'Inconsolata', monospace;
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-on-dark-secondary);
}

.rc-ph-event-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-800);
  font-weight: 600;
  color: var(--rc-on-dark-strong);
  line-height: 1.2;
}

.rc-ph-event-value.is-highlight {
  color: var(--rc-on-dark-link);
}


/* ═══════════════════════════════════════
   7. RESPONSIVE
   Mirrors prior Section 28 + Family F 560px
   responsive consolidated.
   ═══════════════════════════════════════ */

@media (max-width: 767px) {
  .rc-ph {
    min-height: auto;
  }
  .rc-ph-inner {
    padding: 60px 24px 36px;
  }
  .rc-ph--compact .rc-ph-inner,
  .rc-ph-compact .rc-ph-inner {
    padding: 40px 24px 28px;
  }
  .rc-ph--small .rc-ph-inner {
    padding: 40px 24px 32px;
  }
  .rc-ph--solid .rc-ph-inner {
    padding: 48px 24px 36px;
  }
  .rc-ph--event .rc-ph-event-details {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .rc-ph-inner {
    padding: 56px 24px 36px;
  }
  .rc-ph--compact .rc-ph-inner,
  .rc-ph-compact .rc-ph-inner {
    padding: 36px 24px 24px;
  }
  .rc-ph--event .rc-ph-event-details {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}