/* File: theme/css/humanspark-layout.css
 * Purpose: Structural layout - hero, sections, grids, content width.
 * Project: HumanSpark | Date: 2026-03-22
 *
 * Overview: Minimal layout classes for the HumanSpark theme.
 * Provides .hs-hero, .hs-section variants, .hs-grid, and
 * width constraints. No decorative effects - that's CSS's job
 * to look good, not impressive.
 */

/* --- Base --- */
html { overflow-x: hidden; }
body { background: var(--hs-navy); overflow-x: hidden; }
main { background: var(--hs-navy); padding-top: 0; }

/* --- Pico classless overrides ---
 * Pico classless styles bare HTML elements directly. These resets
 * prevent Pico from conflicting with theme components. */

/* Sections: Pico constrains body children to max-width: 1450px */
body > header, body > main, body > footer { max-width: none; margin: 0; padding: 0; }

/* article: Pico adds card styling (bg, padding, shadow, margin) */
article { margin-bottom: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }

/* nav: Pico adds negative margins to first/last list in nav */
.hs-site-header nav ul { margin-left: 0; margin-right: 0; }

/* nav li: Pico injects zero-width space before every nav item */
:where(nav li)::before { content: none; }

/* details/summary: Pico adds spacing and injects chevron icon */
details { margin-bottom: 0; }
details[open] > summary { margin-bottom: 0; }

/* forms: Pico adds bottom margin to all form elements */
input, select, textarea { margin-bottom: 0; }

/* lists: Pico sets list-style: square on ul li directly */
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }

/* Reset list-style on component lists that need list-style: none */
.hs-post-sidebar__toc li,
.hs-site-footer li,
.hs-cta-discover__list li,
.hs-nav__menu li,
.hs-post-content ul > li,
.hs-feature-list li,
.hs-pricing__features li { list-style-type: none; }

/* buttons: Pico adds border-radius to all button elements */
button { border-radius: 0; }

img { max-width: 100%; height: auto; }

/* --- Content width --- */
.hs-contain {
  max-width: var(--hs-content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.hs-section .hs-contain,
.hs-section--dark .hs-contain {
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* --- Light page wrapper (blog posts, editorial) --- */
.hs-page-light {
  background: var(--hs-bg-reading);
}

/* --- Hero --- */
.hs-hero {
  background: var(--hs-warm-white);
  color: var(--hs-text);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hs-hero h1,
.hs-hero h2 {
  color: var(--hs-text-heading);
  max-width: 800px;
  margin-inline: auto;
  font-size: clamp(2.15rem, 4.5vw, 3.3rem);
  line-height: 1.04;
  margin-bottom: var(--size-4);
  letter-spacing: -0.038em;
}

.hs-hero h1::after { display: none; }

.hs-hero p {
  color: var(--hs-text);
  max-width: 580px;
  margin-inline: auto;
  font-size: var(--font-size-2);
  line-height: var(--hs-leading-tight);
  margin-bottom: var(--size-2);
}

.hs-hero .hs-btn {
  margin-top: var(--size-3);
  padding: var(--size-2) var(--size-fluid-4);
  font-size: var(--font-size-1);
}

.hs-hero .hs-tagline,
.hs-hero--split .hs-hero__text .hs-tagline {
  color: var(--hs-accent);
  font-size: var(--hs-text-base);
  letter-spacing: var(--hs-tracking-wide);
  margin-bottom: var(--size-2);
}

/* --- Dark hero variant --- */
.hs-hero--dark { background: var(--hs-navy); color: var(--hs-white); }
.hs-hero--dark h1, .hs-hero--dark h2 { color: var(--hs-white); }
.hs-hero--dark p { color: var(--hs-dark-text); }
.hs-hero--dark .hs-tagline { color: var(--hs-accent); }
.hs-hero--dark.hs-hero--split .hs-hero__text p { color: var(--hs-dark-text); }

/* --- Split hero (image + text) --- */
.hs-hero--split {
  text-align: left;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.75rem, 3.8vw, 3.2rem);
  align-items: center;
  max-width: var(--hs-content-width);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.hs-hero--split .hs-hero__text {
  position: relative;
  z-index: 1;
}

.hs-hero--split .hs-hero__text h1 {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  line-height: 1.06;
  margin-bottom: var(--size-3);
  font-weight: 800;
}

.hs-hero--split .hs-hero__text p {
  margin-inline: 0;
  max-width: none;
  font-size: var(--font-size-1);
  line-height: var(--hs-leading-tight);
  color: var(--hs-text);
}

.hs-hero--split .hs-hero__text h1::after { display: none; }

.hs-hero--split .hs-btn {
  margin-top: var(--size-2);
  padding: var(--size-2) var(--size-5);
  font-size: var(--font-size-1);
  white-space: nowrap;
}

/* --- Hero image --- */
.hs-hero__image {
  border-radius: var(--hs-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin: 0;
  background: var(--hs-white);
  padding: 2px;
}

.hs-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--hs-radius);
}

.hs-hero__image figcaption {
  color: var(--hs-text-muted);
  font-size: var(--font-size-00);
  text-align: right;
  padding: var(--size-2) var(--hs-space-sm) 0;
  font-style: italic;
  background: none;
}

/* --- Sections --- */
.hs-section {
  padding-block: var(--hs-section-pad-spacious);
  padding-inline: 0;
  background: var(--hs-warm-white);
  margin-bottom: 0;
}

.hs-section h2 {
  text-align: center;
  margin-bottom: var(--size-4);
  margin-top: 0;
  color: var(--hs-navy);
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  letter-spacing: var(--hs-tracking-tight);
  line-height: 1.06;
}

/* Small gold accent line below section headings */
.hs-section h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--hs-gradient-line);
  margin-top: var(--size-2);
  margin-inline: auto;
  border-radius: var(--hs-radius);
}

.hs-section .hs-tagline { text-align: center; }

/* --- Section variants --- */
.hs-section--dark {
  background: var(--hs-navy);
  color: var(--hs-white);
  padding-block: var(--hs-section-pad-standard);
  text-align: center;
  margin-bottom: 0;
}

.hs-section--dark h2,
.hs-section--dark h3 { color: var(--hs-white); }

.hs-section--dark .hs-grid .hs-card { text-align: left; }

/* font-size intentionally NOT set here — inherited from section/body.
   Setting it on `p` creates a specificity trap (0,1,1) that silently
   overrides component-level class selectors (0,1,0). */
.hs-section--dark p {
  color: var(--hs-dark-text);
  max-width: 550px;
  margin-inline: auto;
  line-height: var(--hs-leading-tight);
}

.hs-section--dark .hs-grid .hs-card p,
.hs-section--dark .hs-grid .hs-card .hs-card__body {
  max-width: none;
  margin-inline: 0;
}

.hs-section--dark .hs-tagline {
  color: var(--hs-accent);
  letter-spacing: var(--hs-tracking-wide);
}

/* Structural section types */
.hs-section--proof { text-align: center; padding-block: var(--hs-section-pad-standard); }
.hs-section--proof .hs-contain { max-width: var(--hs-content-width); }
.hs-section--offer { padding-block: var(--hs-section-pad-standard); }
.hs-section--offer .hs-contain { max-width: var(--hs-content-width); }
.hs-section--editorial { padding-block: var(--hs-section-pad-compact); }
.hs-section--editorial .hs-contain { max-width: var(--hs-reading-width); }
.hs-section--editorial h2 { text-align: left; }
.hs-section--editorial h2::after { display: none; }
.hs-section--dark.hs-section--editorial { text-align: left; }
.hs-section--detail > .hs-contain > .hs-btn { margin-top: var(--size-4); }
.hs-section__intro { font-size: var(--font-size-2); line-height: var(--hs-leading-tight); color: var(--hs-text); max-width: none; }
.hs-section--grey { background: var(--hs-warm-white); }

.hs-section--services {
  background: var(--hs-warm-white);
  padding-block: var(--hs-section-pad-compact);
}
.hs-section--services .hs-tagline { text-align: left; font-size: var(--font-size-00); color: var(--hs-accent); margin-bottom: 0.2rem; }
.hs-section--services h2 { text-align: left; font-size: clamp(1.45rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.14; max-width: 760px; color: var(--hs-navy); margin-top: 0; margin-bottom: var(--size-3); }
.hs-section--services h2::after { display: none; }
.hs-section--services .hs-grid { margin-top: var(--size-3); }
@media (min-width: 768px) { .hs-section--services .hs-grid { grid-template-columns: repeat(3, 1fr); } }

.hs-section--testimonial { padding-block: var(--hs-section-pad-standard); background: var(--hs-white); }
.hs-section--testimonial h2 { text-align: center; color: var(--hs-navy); font-size: clamp(1.55rem, 2.8vw, 2.05rem); margin-bottom: var(--size-fluid-4); }
.hs-section--testimonial h2::after { display: none; }

/* CTA warm section - centered CTA on light background */
.hs-section--cta-warm { text-align: center; padding-block: var(--hs-section-pad-spacious); }
.hs-section--cta-warm h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); max-width: 660px; margin-inline: auto; }
.hs-section--cta-warm p { max-width: 550px; margin-inline: auto; margin-bottom: var(--size-2); }
.hs-section--cta-warm .hs-btn { margin-top: var(--size-2); }

/* CTA dark section - extends --dark with gradient background */
.hs-section--cta-dark {
  padding-block: var(--hs-section-pad-spacious) clamp(3rem, 5.5vw, 4.5rem);
  background: linear-gradient(180deg, #000a2a 0%, var(--hs-navy) 100%);
}
.hs-section--cta-dark h2 { font-size: clamp(1.85rem, 3.5vw, 2.45rem); max-width: 660px; margin-inline: auto; line-height: 1.06; }
.hs-section--cta-dark p { margin-bottom: var(--size-2); max-width: 550px; margin-inline: auto; }
.hs-section--cta-dark .hs-btn { margin-top: var(--size-2); }

/* Page title */
.hs-page-title {
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  color: var(--hs-text-heading);
  font-weight: 800;
  letter-spacing: var(--hs-tracking-tight);
  line-height: 1.06;
  margin-bottom: var(--size-fluid-3);
  text-align: left;
}
.hs-page-title::after { display: none; }

/* --- Discovery CTA --- */
.hs-cta-discover__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--size-fluid-5);
  align-items: center;
}

.hs-cta-discover__text { text-align: left; }
.hs-cta-discover__text .hs-tagline { text-align: left; }
.hs-cta-discover__text h2 { text-align: left; font-size: clamp(1.4rem, 2.5vw, 1.95rem); color: var(--hs-white); margin-bottom: var(--size-4); line-height: 1.08; font-weight: 800; }
.hs-cta-discover__text h2::after { display: none; }

.hs-cta-discover__list { list-style: none; padding: 0; margin: 0; }
.hs-cta-discover__list li { color: var(--hs-dark-text); font-size: var(--hs-text-md); display: flex; align-items: center; gap: var(--size-2); margin-bottom: var(--size-2); line-height: var(--hs-leading-tight); }
.hs-cta-discover__list li .hs-icon { color: var(--hs-accent); flex-shrink: 0; width: 18px; height: 18px; }

.hs-cta-discover__action {
  text-align: center;
  padding: var(--size-6) var(--size-5);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-cta-discover__avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 3px solid var(--hs-accent);
  margin-bottom: var(--size-3);
}

.hs-cta-discover__meta {
  color: var(--hs-dark-text-muted);
  font-size: var(--hs-text-sm);
  margin-bottom: var(--size-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: var(--hs-tracking-wide);
}

.hs-cta-discover p,
.hs-cta-discover .hs-cta-discover__meta,
.hs-cta-discover__list li { max-width: none; margin-inline: 0; }

/* --- Grids --- */
.hs-grid {
  display: grid;
  gap: clamp(var(--size-3), 2.5vw, var(--size-fluid-3));
  max-width: var(--hs-content-width);
  margin-inline: auto;
}
.hs-grid--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.hs-grid--3col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hs-grid--podcast { grid-template-columns: 1fr; gap: var(--size-fluid-3); }
@media (min-width: 640px) { .hs-grid--podcast { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hs-grid--podcast { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .hs-grid--podcast > :last-child:nth-child(3n+1) { grid-column: 2; } }

.hs-grid--casestudy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.hs-grid--casestudy > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; }
.hs-grid--training-routing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.hs-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-fluid-3);
  max-width: var(--hs-content-width);
  margin-inline: auto;
}


/* --- Tagline --- */
.hs-tagline {
  font-size: var(--font-size-0);
  font-weight: var(--hs-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--hs-tracking-wide);
  color: var(--hs-accent);
  margin-bottom: var(--size-2);
  line-height: var(--hs-leading-tight);
}

/* --- Process strip --- */
.hs-process-strip { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--hs-warm-white); }
.hs-process { display: flex; align-items: flex-start; justify-content: center; gap: clamp(0.65rem, 2vw, 1.4rem); }
.hs-process__step { text-align: center; flex: 0 1 220px; }
.hs-process__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: 0.35rem;
  background: rgba(238, 186, 0, 0.12); color: var(--hs-accent);
  border: 2px solid rgba(238, 186, 0, 0.25);
}
.hs-process__icon svg { stroke-width: 2.5; }
.hs-process__number { font-family: 'JetBrains Mono', monospace; font-size: var(--hs-text-sm); font-weight: 700; color: var(--hs-navy); letter-spacing: var(--hs-tracking-wide); display: block; margin-bottom: var(--size-1); }
.hs-process__title { font-size: var(--hs-text-lg); font-weight: 800; color: var(--hs-navy); margin-bottom: 2px; }
.hs-process__detail { font-size: var(--hs-text-sm); color: var(--hs-text-muted); line-height: var(--hs-leading-tight); }
.hs-process__arrow { color: var(--hs-accent); flex-shrink: 0; display: flex; align-items: center; margin-top: 1.5rem; opacity: 0.85; }

/* --- Logo wall --- */
.hs-logo-wall { padding-block: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.hs-logo-wall__label { font-size: var(--font-size-00); text-transform: uppercase; letter-spacing: var(--hs-tracking-wider); color: var(--hs-text-muted); margin-bottom: var(--size-2); font-weight: 600; }
.hs-logo-wall__grid { display: flex; align-items: center; justify-content: center; gap: clamp(var(--size-6), 7vw, var(--size-9)); flex-wrap: wrap; }
.hs-logo-wall__item { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); margin: 0; }
.hs-logo-wall__item img { height: 52px; width: auto; opacity: 0.65; transition: opacity 0.2s; filter: grayscale(0.7); }
.hs-logo-wall__item img:hover { opacity: 0.9; filter: grayscale(0); }
.hs-logo-wall__item figcaption { font-size: var(--font-size-00); color: var(--hs-text-muted); letter-spacing: var(--hs-tracking-wide); font-weight: 500; }
.hs-section--dark .hs-logo-wall__label { color: var(--hs-dark-text-faint); }
.hs-section--dark .hs-logo-wall__item figcaption { color: var(--hs-dark-text-faint); }
.hs-section--dark .hs-logo-wall__item img { filter: invert(1) grayscale(1); }
.hs-section--dark .hs-logo-wall__item img:hover { filter: invert(1) grayscale(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
  .hs-section .hs-contain,
  .hs-section--dark .hs-contain { padding-inline: var(--size-4); }
  .hs-hero h1, .hs-hero h2 { font-size: clamp(1.75rem, 6.8vw, 2.35rem); }
  .hs-hero--split { grid-template-columns: 1fr; text-align: center; }
  .hs-hero--split .hs-hero__text h1 { font-size: clamp(1.5rem, 5.8vw, 1.95rem); margin-inline: auto; }
  .hs-hero--split .hs-hero__text p { margin-inline: auto; }
  .hs-hero__image { max-width: 90%; margin-inline: auto; }
  .hs-section h2 { font-size: clamp(1.45rem, 5.8vw, 1.88rem); }
  .hs-grid { gap: var(--size-3); }
  .hs-section--dark p { max-width: none; }
  .hs-section--cta-dark p { max-width: none; }
  .hs-section--cta-dark h2 { max-width: none; font-size: clamp(1.45rem, 5.8vw, 1.88rem); }
  .hs-stats-grid { grid-template-columns: 1fr; gap: var(--size-3); }
  .hs-process { flex-direction: column; gap: var(--size-2); }
  .hs-process__arrow { transform: rotate(90deg); margin-top: 0; }
  .hs-process__step { flex: none; width: 100%; }
  .hs-logo-wall__item img { height: 34px; }
  .hs-cta-discover__grid { grid-template-columns: 1fr; text-align: center; }
  .hs-cta-discover__text h2 { text-align: center; }
  .hs-cta-discover__list li { justify-content: center; }
  .hs-tagline { font-size: var(--font-size-0); }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hs-hero--split { grid-template-columns: 1fr; text-align: center; }
  .hs-hero--split .hs-hero__text h1 { margin-inline: auto; }
  .hs-hero--split .hs-hero__text p { margin-inline: auto; }
  .hs-hero__image { max-width: 380px; margin-inline: auto; }
  .hs-section h2 { font-size: clamp(1.65rem, 3.8vw, 2.25rem); }
}

@media (min-width: 1600px) {
  .hs-hero h1, .hs-hero h2 { font-size: clamp(3rem, 3.8vw, 4.2rem); max-width: 940px; }
  .hs-hero p { font-size: var(--font-size-3); max-width: 690px; }
  .hs-grid { max-width: 1180px; }
}