/* ==========================================================================
   Website Modernization Layer
   --------------------------------------------------------------------------
   Site-wide enterprise-grade visual upgrade applied to every section rendered
   by WebsiteRenderingService.  Targets the shared `.section-modern` wrapper
   that the renderer emits for every section type.  Brings non-home pages
   (about, courses, contact, faq, pricing, blog, team, gallery, etc.) up to
   the same modern look as the home page without forcing every renderer to
   ship its own one-off styles.
   --------------------------------------------------------------------------
   • Cohesive section spacing & rhythm
   • Modern card, hover, focus, and shadow conventions
   • Headings with subtle gradient accent underline
   • Lazy IntersectionObserver-driven reveal helper (.ws-reveal)
   • RTL-safe; respects prefers-reduced-motion
   ========================================================================== */

:root {
  --ws-section-radius: 22px;
  --ws-card-radius: 18px;
  --ws-card-bg: #ffffff;
  --ws-card-border: rgba(15, 23, 42, 0.06);
  --ws-card-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  --ws-card-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.12);
  --ws-text-muted: #6b7280;
  --ws-text-strong: #0f172a;
  --ws-bg-soft: #f8fafc;
  --ws-bg-tint: #f1f5f9;
  --ws-section-py: clamp(3rem, 6vw, 5.5rem);
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.section-modern {
  position: relative;
  padding-top: var(--ws-section-py);
  padding-bottom: var(--ws-section-py);
}

.section-modern + .section-modern { padding-top: 0; }

/* Alternate background tint for visual cadence — applies to every other
   non-hero/cta/categories full-bleed section. */
.section-modern.ws-section-contact,
.section-modern.ws-section-features,
.section-modern.ws-section-stats,
.section-modern.ws-section-testimonials-grid,
.section-modern.ws-section-team,
.section-modern.ws-section-faq,
.section-modern.ws-section-comparison {
  background: var(--ws-bg-soft);
}

.section-modern.ws-section-features + .section-modern.ws-section-features,
.section-modern.ws-section-stats + .section-modern.ws-section-features {
  background: #fff;
}

/* --------------------------------------------------------------------------
   Section heading conventions (applied universally where missing)
   -------------------------------------------------------------------------- */
.section-modern h2,
.section-modern .ws-section-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ws-text-strong);
}

.section-modern .ws-section-eyebrow,
.section-modern .ws-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ws-primary, #004aad);
  background: color-mix(in srgb, var(--ws-primary, #004aad) 10%, white);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.section-modern .ws-section-title-underline {
  display: inline-block;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ws-primary, #004aad), var(--ws-accent, #f59e0b));
  margin: 0.85rem 0 1.5rem;
}

.section-modern .ws-section-subtitle {
  color: var(--ws-text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Universal card uplift — targets common card class names emitted by the
   various renderers (features, team, gallery, testimonials, image-text…).
   -------------------------------------------------------------------------- */
.section-modern .ws-card,
.section-modern .feature-card,
.section-modern .team-card,
.section-modern .testimonial-card,
.section-modern .gallery-card,
.section-modern .blog-card,
.section-modern .pricing-card,
.section-modern .timeline-card,
.section-modern .stat-card {
  background: var(--ws-card-bg);
  border-radius: var(--ws-card-radius);
  border: 1px solid var(--ws-card-border);
  box-shadow: var(--ws-card-shadow);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.32s;
}

.section-modern .ws-card:hover,
.section-modern .feature-card:hover,
.section-modern .team-card:hover,
.section-modern .testimonial-card:hover,
.section-modern .gallery-card:hover,
.section-modern .blog-card:hover,
.section-modern .pricing-card:hover,
.section-modern .timeline-card:hover,
.section-modern .stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ws-card-shadow-hover);
  border-color: color-mix(in srgb, var(--ws-primary, #004aad) 25%, transparent);
}

/* Icon badge inside cards */
.section-modern .ws-card-icon,
.section-modern .feature-icon,
.section-modern .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ws-primary, #004aad) 16%, transparent),
    color-mix(in srgb, var(--ws-accent, #f59e0b) 14%, transparent));
  color: var(--ws-primary, #004aad);
  margin-bottom: 1rem;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-modern .ws-card:hover .ws-card-icon,
.section-modern .feature-card:hover .feature-icon,
.section-modern .stat-card:hover .stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

/* --------------------------------------------------------------------------
   Buttons inside sections (renderer's standard link buttons)
   -------------------------------------------------------------------------- */
.section-modern .btn,
.section-modern .ws-btn {
  border-radius: 12px;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
}

.section-modern .btn:hover,
.section-modern .ws-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

/* --------------------------------------------------------------------------
   Scroll-reveal helper
   Renderers can opt-in with class="ws-reveal".  Falls back gracefully when
   IntersectionObserver isn't available (everything visible by default).
   -------------------------------------------------------------------------- */
.ws-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ws-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ws-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Image polish — universal lazy / responsive helper
   -------------------------------------------------------------------------- */
.section-modern img.ws-img,
.section-modern .ws-img-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* --------------------------------------------------------------------------
   RTL polish — flip subtle directional accents
   -------------------------------------------------------------------------- */
[dir="rtl"] .section-modern .ws-section-title-underline {
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   Print friendliness
   -------------------------------------------------------------------------- */
@media print {
  .section-modern { box-shadow: none !important; padding: 1rem 0 !important; }
  .ws-reveal { opacity: 1 !important; transform: none !important; }
}