/* ==========================================================================
   WORKSHOPR SHARED COMPONENTS

   Shared CSS for PHP includes used across all microsites:
   - apps-grid.php  (.resources-section, .resource-card)
   - landing-footer.php (.footer, .footer-container)
   - Section layout (.section-container, .section-header)
   - Button base (.btn, .btn-primary)

   Load order: unified-header.css → shared-components.css → [microsite].css
   Microsite CSS loads LAST so :root overrides cascade correctly.

   v1.0 - March 2026
   ========================================================================== */

@import '/design-system/platform-tokens.css';

/* ==========================================================================
   VARIABLE BRIDGE
   Maps generic names to platform tokens with fallback chains.
   Microsites can override any of these via their own :root block.
   ========================================================================== */

:root {
  /* Text */
  --sc-ink: var(--text-primary, var(--color-ink, #2C2416));
  --sc-ink-secondary: var(--text-secondary, var(--color-ink-secondary, #5C5242));
  --sc-ink-muted: var(--text-muted, var(--color-ink-muted, #78716C));
  --sc-ink-faint: var(--text-faint, var(--color-ink-faint, #A8A29E));

  /* Backgrounds */
  --sc-paper: var(--bg-page, #FEF7F1);
  --sc-surface: var(--bg-surface, #FFFFFF);
  --sc-muted: var(--bg-muted, #F5F5F4);

  /* Borders */
  --sc-border: var(--border, var(--color-border-grid, rgba(44, 36, 22, 0.12)));
  --sc-border-strong: var(--border-strong, rgba(0, 0, 0, 0.12));

  /* Accent — each microsite overrides --accent in its own CSS */
  --sc-accent: var(--accent, var(--mainsite-primary, #E54D4D));
  --sc-accent-hover: var(--accent-hover, var(--accent-dark, #C73E3E));
  --sc-accent-bg: var(--accent-bg, #FEF2F2);
  --sc-accent-border: var(--accent-border, rgba(229, 77, 77, 0.2));

  /* Typography */
  --sc-font-display: var(--font-display, var(--font-heading, 'Fraunces', Georgia, serif));
  --sc-font-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

  /* Spacing */
  --sc-space-1: var(--space-1, 4px);
  --sc-space-2: var(--space-2, 8px);
  --sc-space-3: var(--space-3, 12px);
  --sc-space-4: var(--space-4, 16px);
  --sc-space-5: var(--space-5, 20px);
  --sc-space-6: var(--space-6, 24px);
  --sc-space-8: var(--space-8, 32px);
  --sc-space-10: var(--space-10, 40px);
  --sc-space-12: var(--space-12, 48px);
  --sc-space-16: var(--space-16, 64px);

  /* Sizing */
  --sc-container-max: 1080px;
  --sc-radius: var(--radius, 8px);
  --sc-radius-md: var(--radius-md, 12px);

  /* Animation */
  --sc-ease: var(--ease, cubic-bezier(0.25, 1, 0.5, 1));
  --sc-duration: var(--duration, 200ms);
  --sc-duration-fast: var(--duration-fast, 150ms);

  /* Font sizes */
  --sc-text-xs: var(--text-xs, 11px);
  --sc-text-sm: var(--text-sm, 13px);
  --sc-text-base: var(--text-base, 14px);
  --sc-text-md: var(--text-md, 15px);
  --sc-text-lg: var(--text-lg, 17px);
  --sc-text-xl: var(--text-xl, 20px);
  --sc-text-3xl: var(--text-3xl, 32px);
}


/* ==========================================================================
   SECTION LAYOUT
   Used by all landing page sections across microsites.
   ========================================================================== */

.section-container {
  max-width: var(--sc-container-max);
  margin: 0 auto;
  padding: 0 var(--sc-space-6);
}

.section-header {
  text-align: center;
  margin-bottom: var(--sc-space-10);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-size: var(--sc-text-sm);
  font-weight: 500;
  color: var(--sc-ink-muted);
  margin-bottom: var(--sc-space-3);
}

.section-eyebrow .icon {
  width: 16px;
  height: 16px;
  color: var(--sc-accent);
}

.section-title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
  margin-bottom: var(--sc-space-3);
}

.section-subtitle {
  font-size: var(--sc-text-md);
  color: var(--sc-ink-secondary);
  max-width: 520px;
  margin: 0 auto;
}


/* ==========================================================================
   APPS GRID (apps-grid.php)
   Cross-promo grid of Workshopr apps. Used on 7+ landing pages.
   ========================================================================== */

.resources-section {
  padding: var(--sc-space-16) var(--sc-space-5);
  background: var(--sc-paper);
}

.resources-section .section-container {
  max-width: var(--sc-container-max);
  margin: 0 auto;
}

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

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
  padding: var(--sc-space-6);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-md);
  text-decoration: none;
  transition: all 0.2s var(--sc-ease);
}

.resource-card:hover {
  border-color: var(--sc-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.resource-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-accent-bg);
  border-radius: 10px;
  border: 1px solid var(--sc-accent-border);
}

.resource-icon .icon {
  width: 22px;
  height: 22px;
  color: var(--sc-accent);
}

.resource-card h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-text-base);
  font-weight: 600;
  color: var(--sc-ink);
  margin: 0;
}

.resource-card p {
  font-size: var(--sc-text-sm);
  color: var(--sc-ink-secondary);
  line-height: 1.5;
  margin: 0;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--sc-text-sm);
  font-weight: 500;
  color: var(--sc-accent);
  margin-top: auto;
}

.resource-link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--sc-ease);
}

.resource-card:hover .resource-link .icon {
  transform: translateX(3px);
}


/* ==========================================================================
   LANDING FOOTER (landing-footer.php)
   Dark footer used across microsite landing pages.
   ========================================================================== */

.footer {
  background: var(--sc-ink);
  color: white;
  padding: var(--sc-space-12) var(--sc-space-6) var(--sc-space-8);
}

.footer-container {
  max-width: var(--sc-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sc-space-12);
}

.footer-logo {
  font-family: var(--sc-font-display);
  font-size: var(--sc-text-xl);
  font-weight: 600;
  color: white;
  text-decoration: none;
}

.footer-tagline {
  font-size: var(--sc-text-sm);
  color: var(--sc-ink-muted);
  margin-top: var(--sc-space-4);
  line-height: 1.5;
}

.footer-social {
  display: flex;
  gap: var(--sc-space-4);
  margin-top: var(--sc-space-5);
}

.footer-social a {
  color: var(--sc-ink-muted);
  transition: color var(--sc-duration-fast) var(--sc-ease);
}

.footer-social a:hover {
  color: white;
}

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

.footer-col h4 {
  font-size: var(--sc-text-sm);
  font-weight: 600;
  margin-bottom: var(--sc-space-4);
  color: white;
}

.footer-col a {
  display: block;
  font-size: var(--sc-text-sm);
  color: var(--sc-ink-muted);
  text-decoration: none;
  padding: var(--sc-space-1) 0;
  transition: color var(--sc-duration-fast) var(--sc-ease);
}

.footer-col a:hover {
  color: white;
}

.footer-bottom {
  max-width: var(--sc-container-max);
  margin: var(--sc-space-10) auto 0;
  padding-top: var(--sc-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: var(--sc-text-sm);
  color: var(--sc-ink-faint);
}


/* ==========================================================================
   BUTTON BASE
   Shared button styles. Microsites override colors via --accent.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-5);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-base);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--sc-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--sc-duration) var(--sc-ease);
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: var(--sc-accent);
  color: white;
}

.btn-primary:hover {
  background: var(--sc-accent-hover);
}

.btn-secondary {
  background: var(--sc-surface);
  color: var(--sc-ink);
  border: 1px solid var(--sc-border);
}

.btn-secondary:hover {
  background: var(--sc-muted);
  border-color: var(--sc-border-strong);
}

.btn-large {
  padding: var(--sc-space-4) var(--sc-space-6);
  font-size: var(--sc-text-md);
}


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

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

  .footer-container {
    grid-template-columns: 1fr;
    gap: var(--sc-space-10);
  }
}

@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
    gap: var(--sc-space-3);
  }

  .resource-card {
    padding: var(--sc-space-4);
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

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