/*
 * =========================================================
 * OLYTIC SOLUTIONS - Layout Shell & Section Utilities
 * layout.css
 *
 * Covers:
 *   - Page-level flow (skip link, main content)
 *   - Container widths
 *   - Section wrappers with background variants
 *   - Callout box (3px Gold left border, Surface bg)
 *   - Dark verdict block (Obsidian bg, Gold accents)
 *   - Loop four-column motif
 *   - Utilities: spacing, grid helpers, dividers
 *
 * Requires: tokens.css, typography.css
 * =========================================================
 */

/* ─── Skip to Main Content (Accessibility) ──────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);

  background-color: var(--color-obsidian);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* ─── Page Content Wrapper ───────────────────────────────── */

.page-content {
  outline: none;   /* Receives programmatic focus; no visible ring needed */
  min-height: 60vh;
}

/* ─── Container ─────────────────────────────────────────── */
/*
 * Standard page container.
 * Centered, max-width constrained, horizontal padding.
 * Use .container--wide for hero/feature sections.
 */

.container {
  width: 100%;
  max-width: var(--max-width-xl);   /* 1200px */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.container--wide {
  max-width: var(--max-width-2xl);  /* 1400px */
}

.container--narrow {
  max-width: var(--max-width-md);   /* 768px - long-form reading */
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ─── Section Wrapper ───────────────────────────────────── */
/*
 * Standard section block.
 * Brand spec: 40–60% whitespace target.
 * Generous vertical padding baked in.
 */

.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
  position: relative;
}

/* Tighter section - for compact informational blocks */
.section--md {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Flush - no vertical padding (used when adjacent sections share a bg) */
.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Hero sections get extra breathing room */
.section--hero {
  padding-top: calc(var(--space-32) + var(--nav-height));
  padding-bottom: var(--space-32);
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.section--hero .container {
  width: 100%;
}

/* ─── Section Background Variants ──────────────────────── */

/* Dark - Obsidian bg, white text (cover pages, verdict blocks) */
.section--dark {
  background-color: var(--color-obsidian);
  color: #FFFFFF;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: #FFFFFF;
}

.section--dark p,
.section--dark li {
  color: rgba(255, 255, 255, 0.80);
}

.section--dark .text-muted {
  color: rgba(255, 255, 255, 0.45);
}

.section--dark strong {
  color: #FFFFFF;
}

/* Navy - structural sections */
.section--navy {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy h5,
.section--navy h6 {
  color: #FFFFFF;
}

.section--navy p,
.section--navy li {
  color: rgba(255, 255, 255, 0.80);
}

/* Surface - warm off-white for alternating sections, cards */
.section--surface {
  background-color: var(--color-surface);
}

/* White - explicit white override */
.section--white {
  background-color: #FFFFFF;
}

/* ─── Section Header Block ──────────────────────────────── */
/*
 * Reusable heading + sub-text layout for section openers.
 * Includes the Gold rule via .section-title.
 */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center h2,
.section-header--center h3,
.section-header--center p {
  margin-left: auto;
  margin-right: auto;
}

.section-header--center .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Callout Box (brand spec) ───────────────────────────── */
/*
 * 3px Gold left border on Surface background.
 * Used for key insights, pull quotes, and supporting facts.
 */

.callout {
  background-color: var(--color-surface);
  border-left: var(--border-gold-thick);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
}

.callout p {
  font-size: var(--text-md);
  color: var(--color-navy);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  margin-bottom: 0;
  max-width: 72ch;
}

.callout .callout__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
}

/* Callout on dark bg */
.section--dark .callout,
.section--navy .callout {
  background-color: rgba(255, 255, 255, 0.06);
  border-left-color: var(--color-gold);
}

.section--dark .callout p,
.section--navy .callout p {
  color: rgba(255, 255, 255, 0.90);
}

/* ─── Verdict / Dark Block ───────────────────────────────── */
/*
 * Full Obsidian background, Gold accents, white text.
 * Used for positioning statements and key takeaways.
 */

.verdict-block {
  background-color: var(--color-obsidian);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-12);
  position: relative;
  overflow: hidden;
}

/* Gold accent rule at top */
.verdict-block::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-gold);
}

.verdict-block h2,
.verdict-block h3 {
  color: #FFFFFF;
}

.verdict-block p {
  color: rgba(255, 255, 255, 0.80);
}

.verdict-block .label {
  color: var(--color-gold);
}

@media (max-width: 640px) {
  .verdict-block {
    padding: var(--space-8) var(--space-6);
  }
}

/* ─── The Olytic Loop - Four-Column Motif ───────────────── */
/*
 * Brand spec: "Use 'Build → Run → Improve → Compound' as
 * a four-column text block or visual motif on relevant pages."
 *
 * Usage:
 * <div class="loop-grid">
 *   <div class="loop-stage">...</div> × 4
 * </div>
 */

.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  position: relative;
}

/* Arrow connectors between stages */
.loop-grid::before {
  content: '';
  position: absolute;
  top: 2.5rem;              /* Aligns with stage number center */
  left: calc(25% - 12px);
  right: calc(25% - 12px);
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-gold) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.loop-stage {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-5);
  background-color: transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

/* Stage number - DM Mono Gold */
.loop-stage__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-4);
}

/* Stage name - H4 level */
.loop-stage__name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

/* Stage description - body */
.loop-stage__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

/* Arrow between stages */
.loop-stage__arrow {
  display: none;    /* Decorative; shown via CSS on larger viewports */
}

/* On dark backgrounds */
.section--dark .loop-stage__name {
  color: #FFFFFF;
}

.section--dark .loop-stage__desc {
  color: rgba(255, 255, 255, 0.60);
}

@media (max-width: 900px) {
  .loop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .loop-grid::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .loop-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Two-Column Content Grid ───────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-10);
  align-items: start;
}

.grid-2--asymmetric {
  grid-template-columns: 1.4fr 1fr;
}

.grid-2--reverse {
  grid-template-columns: 1fr 1.4fr;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-2--asymmetric,
  .grid-2--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ─── Three-Column Card Grid ────────────────────────────── */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ─── Card Component ─────────────────────────────────────── */

.card {
  background-color: var(--bg-white);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  transition: box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 169, 110, 0.35);
}

/* Surface card */
.card--surface {
  background-color: var(--color-surface);
  border-color: transparent;
}

/* Gold accent left border */
.card--accent {
  border-left: var(--border-gold-thick);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ─── Horizontal Gold Divider ───────────────────────────── */

.rule-gold {
  height: 1px;
  background-color: var(--color-gold);
  border: none;
  margin: var(--space-12) 0;
  opacity: 0.5;
}

.rule-gold--full {
  opacity: 1;
}

/* ─── Spacing Utilities ─────────────────────────────────── */

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ─── Responsive section padding scale ─────────────────── */

@media (max-width: 900px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section--hero {
    padding-top: calc(var(--space-24) + var(--nav-height-mobile));
    padding-bottom: var(--space-20);
    min-height: auto;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }
}

@media (max-width: 480px) {
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section--md {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}