/* ========================================================================
   Kasi Economic Warriors (KEW)
   Public Website Front-End
   File: assets/css/pages.css

   Purpose:
   Page-specific presentation only. Shared structure belongs in layout.css,
   reusable UI belongs in components.css and responsive overrides belong in
   responsive.css. All colours and measurements must consume locked tokens
   from variables.css.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Shared page-level accents
   ------------------------------------------------------------------------ */
.page-hero--brand {
  background:
    linear-gradient(var(--charcoal-overlay), var(--charcoal-overlay)),
    var(--color-page);
  color: var(--kew-paper);
}

.page-hero--brand h1,
.page-hero--brand h2,
.page-hero--brand h3,
.page-hero--brand p {
  color: inherit;
}

.page-hero--light {
  background: var(--kew-paper);
}

.page-hero__eyebrow,
.section-eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--kew-red);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.page-hero--brand .page-hero__eyebrow {
  color: var(--kew-gold);
}

.page-intro {
  max-width: 760px;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}

.section-heading {
  max-width: 760px;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading p {
  color: var(--color-text-muted);
}

.section--paper {
  background: var(--kew-paper);
}

.section--cream {
  background: var(--kew-cream);
}

.section--charcoal {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.section--charcoal h2,
.section--charcoal h3,
.section--charcoal p {
  color: inherit;
}

.section--red {
  background: var(--kew-red);
  color: var(--color-secondary-text);
}

.section--red h2,
.section--red h3,
.section--red p {
  color: inherit;
}

.section--gold {
  background: var(--kew-gold);
  color: var(--kew-charcoal);
}

/* ------------------------------------------------------------------------
   Home page
   ------------------------------------------------------------------------ */
.home-hero {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.home-hero .page-hero__content {
  max-width: 900px;
}

.home-hero h1 {
  max-width: 12ch;
  color: var(--kew-paper);
  font-size: var(--font-size-hero);
}

.home-hero__lead {
  max-width: 620px;
  color: var(--kew-paper);
  font-size: var(--font-size-lg);
}

.home-hero__principles {
  color: var(--kew-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.home-ecosystem {
  background: var(--kew-paper);
}

.home-ecosystem__grid {
  margin-top: var(--space-2xl);
}

.home-kasitree {
  background: var(--kew-cream);
}

.home-kasitree__logo {
  width: min(100%, 360px);
}

.home-market-preview {
  background: var(--kew-paper);
}

.home-community-preview {
  background: var(--kew-cream);
}

.home-final-cta {
  background: var(--kew-red);
  color: var(--color-secondary-text);
}

.home-final-cta h2,
.home-final-cta p {
  color: inherit;
}

/* ------------------------------------------------------------------------
   About page
   ------------------------------------------------------------------------ */
.about-hero {
  background: var(--kew-paper);
}

.about-story {
  background: var(--kew-cream);
}

.about-story__copy {
  max-width: 720px;
}

.about-values {
  background: var(--kew-paper);
}

.about-quote {
  padding: var(--space-2xl);
  border-left: 4px solid var(--kew-gold);
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.about-quote blockquote {
  color: inherit;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
}

.about-quote cite {
  display: block;
  margin-top: var(--space-lg);
  color: var(--kew-gold);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------------------
   KasiTree public explanation page
   ------------------------------------------------------------------------ */
.kasitree-hero {
  background: var(--kew-cream);
}

.kasitree-hero__logo {
  width: min(100%, 430px);
  margin-bottom: var(--space-xl);
}

.kasitree-hero__tagline {
  color: var(--kew-red);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.kasitree-features {
  background: var(--kew-paper);
}

.kasitree-journey {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.kasitree-journey h2,
.kasitree-journey h3,
.kasitree-journey p {
  color: inherit;
}

.kasitree-journey .process-step__number {
  background: var(--kew-gold);
  color: var(--kew-charcoal);
}

/* ------------------------------------------------------------------------
   Kasi Market page
   ------------------------------------------------------------------------ */
.market-hero {
  background: var(--kew-paper);
}

.market-hero__title-accent {
  color: var(--kew-red);
}

.market-toolbar {
  padding-block: var(--space-xl);
  border-block: var(--border-default);
  background: var(--kew-cream);
}

.market-categories {
  background: var(--kew-paper);
}

.market-results {
  background: var(--kew-cream);
}

.market-results__grid {
  margin-top: var(--space-xl);
}

.market-empty {
  padding: var(--space-3xl) var(--space-xl);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--kew-paper);
  text-align: center;
}

.market-empty h3 {
  margin-bottom: var(--space-sm);
}

/* ------------------------------------------------------------------------
   Services page
   ------------------------------------------------------------------------ */
.services-hero {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.services-hero h1,
.services-hero p {
  color: inherit;
}

.services-grid-section {
  background: var(--kew-paper);
}

.services-support {
  background: var(--kew-cream);
}

.services-support__note {
  padding: var(--space-xl);
  border-left: 4px solid var(--kew-red);
  background: var(--kew-paper);
}

/* ------------------------------------------------------------------------
   Letsema page
   ------------------------------------------------------------------------ */
.letsema-hero {
  background: var(--kew-cream);
}

.letsema-focus {
  background: var(--kew-paper);
}

.letsema-process {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.letsema-process h2,
.letsema-process h3,
.letsema-process p {
  color: inherit;
}

.letsema-opportunities {
  background: var(--kew-cream);
}

/* ------------------------------------------------------------------------
   Stokvels page
   ------------------------------------------------------------------------ */
.stokvels-hero {
  background: var(--kew-paper);
}

.stokvels-hero__accent {
  color: var(--kew-red);
}

.stokvels-benefits {
  background: var(--kew-cream);
}

.stokvels-process {
  background: var(--kew-paper);
}

.stokvels-disclaimer {
  padding: var(--space-lg);
  border: var(--border-default);
  border-left: 4px solid var(--kew-gold);
  border-radius: var(--radius-sm);
  background: var(--kew-paper);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------------------
   How It Works page
   ------------------------------------------------------------------------ */
.how-hero {
  background: var(--kew-charcoal);
  color: var(--kew-paper);
}

.how-hero h1,
.how-hero p {
  color: inherit;
}

.how-process {
  background: var(--kew-paper);
}

.how-process__grid {
  counter-reset: kew-process;
}

.how-process__item {
  counter-increment: kew-process;
}

.how-process__item::before {
  content: counter(kew-process, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--kew-red);
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  line-height: 1;
}

/* ------------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------------ */
.contact-hero {
  background: var(--kew-cream);
}

.contact-main {
  background: var(--kew-paper);
}

.contact-details {
  align-self: start;
}

.contact-details__item {
  padding-block: var(--space-lg);
  border-bottom: var(--border-default);
}

.contact-details__item:first-child {
  padding-top: 0;
}

.contact-details__label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--kew-red);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.contact-form-panel {
  padding: clamp(var(--space-xl), 5vw, var(--space-3xl));
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--kew-cream);
}

.contact-form-panel h2 {
  margin-bottom: var(--space-sm);
}

.contact-form-panel > p {
  margin-bottom: var(--space-xl);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------------
   Legal pages
   ------------------------------------------------------------------------ */
.legal-hero {
  min-height: auto;
  padding-block: var(--section-space-sm);
  background: var(--kew-paper);
  border-bottom: var(--border-default);
}

.legal-page {
  background: var(--kew-cream);
}

.legal-content {
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-block: var(--section-space-md);
}

.legal-content h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.legal-content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal-content p + p,
.legal-content ul + p,
.legal-content ol + p {
  margin-top: var(--space-md);
}

.legal-content ul,
.legal-content ol {
  margin-block: var(--space-md);
}

.legal-updated {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------------------
   Shared public join/contact CTA band
   ------------------------------------------------------------------------ */
.join-band {
  background: var(--kew-red);
  color: var(--color-secondary-text);
}

.join-band h2,
.join-band p {
  color: inherit;
}

.join-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.join-band__copy {
  max-width: 760px;
}

/* ------------------------------------------------------------------------
   Image treatment hooks
   ------------------------------------------------------------------------ */
.page-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--charcoal-soft);
}

.page-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-media--portrait {
  aspect-ratio: 4 / 5;
}

.page-media--landscape {
  aspect-ratio: 16 / 10;
}

.page-media--square {
  aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------------------------
   Visual brand locks for logo placement
   ------------------------------------------------------------------------ */
.brand-lockup--kew img {
  width: auto;
  max-height: 82px;
}

.brand-lockup--kasitree img {
  width: min(100%, 430px);
  height: auto;
}

/* No invented sub-brand visual identities. These hooks are deliberately
   neutral and continue to use the KEW parent-brand system. */
.market-brand,
.services-brand,
.letsema-brand,
.stokvels-brand {
  color: var(--kew-charcoal);
}