/* CoreCave editorial — cards module.
 * T2.3 / Wave 2 — restore container padding + editorial card-base.
 *
 * Token strategy: every editorial token below uses a fallback chain so this
 * file stays correct regardless of which exact names T2.1 ships in
 * tokens.css. Fallback order is dispatch-name -> work-doc-name -> literal.
 * Do not declare tokens here — tokens.css owns :root.
 */

/* ---------------------------------------------------------------------------
 * 1. Section vertical rhythm
 * ---------------------------------------------------------------------------
 * Apply fluid section padding to top-level wrappers. style.css already sets
 * padding-block on .cc-home-hero — we only add inline padding there.
 */
.cc-home-hero {
	padding-inline: clamp(20px, 4vw, 64px);
}

.cc-stage-section,
.cc-teachers-section,
.cc-courses-grid,
.cc-faq-accordion,
.cc-payment-trust-row,
.cc-stat-row {
	padding-block: var(--cc-sp-fluid-section, clamp(48px, 6vw, 96px));
}

/* ---------------------------------------------------------------------------
 * 2. Container padding restoration
 * ---------------------------------------------------------------------------
 * Diagnosis (Wave 1 T1.5): Elementor e-con-boxed defaults flatten these
 * wrappers to 0/10/0/10. Add explicit logical-axis padding tokens.
 * Belt-and-suspenders selector list defeats Elementor element specificity
 * without resorting to !important.
 */
.cc-stat-row,
.elementor-element.cc-stat-row,
.cc-payment-trust-row,
.elementor-element.cc-payment-trust-row,
.cc-faq-accordion,
.elementor-element.cc-faq-accordion,
.cc-courses-grid,
.elementor-element.cc-courses-grid,
.cc-teachers-section,
.elementor-element.cc-teachers-section {
	padding-inline: var(--cc-sp-card-pad-x, clamp(20px, 2.5vw, 36px));
}

/* ---------------------------------------------------------------------------
 * 3. Editorial card-base — color refresh only
 * ---------------------------------------------------------------------------
 * style.css already declares padding/radius/shadow/hover for cc-stage-card,
 * cc-teacher-card, cc-stat-card. We only refresh surface + border to the
 * editorial palette (cream + paper-rule hairline). Keeps the diff narrow
 * and preserves the existing rounded-corner + shadow rhythm.
 */
.cc-stage-card,
.cc-teacher-card,
.cc-stat-card,
.cc-payment-logo {
	background: var(--cc-ed-bg-tint, var(--cc-bg-cream, #FAF7F2));
	border: 1px solid var(--cc-ed-paper-rule, var(--cc-paper-rule, #E5DDD0));
	transition:
		transform var(--cc-dur-mid, var(--cc-dur-base, 180ms)) var(--cc-ease, ease),
		box-shadow var(--cc-dur-mid, var(--cc-dur-base, 180ms)) var(--cc-ease, ease);
}

/* cc-payment-logo isn't in style.css — give it the full card-base. */
.cc-payment-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--cc-sp-card-pad-y, clamp(24px, 3vw, 40px));
	padding-inline: var(--cc-sp-card-pad-x, clamp(20px, 2.5vw, 36px));
	border-radius: var(--cc-radius-md, 12px);
	box-shadow: var(--cc-shadow-card, var(--cc-shadow-sm, 0 4px 12px rgba(15, 35, 70, 0.05)));
}

.cc-stage-card:hover,
.cc-teacher-card:hover,
.cc-stat-card:hover,
.cc-payment-logo:hover {
	transform: translateY(-2px);
	box-shadow: var(--cc-shadow-hover, var(--cc-shadow-lg, 0 18px 42px rgba(15, 35, 70, 0.12)));
}

/* Preserve Wave-3-owned premium-tier treatment — do not let our generic
 * cream surface override the gold gradient. */
.cc-stage-card.cc-stage-card--premium {
	background: linear-gradient(135deg, var(--cc-gold-100, #FFF4D6), var(--cc-surface, #FFFFFF));
}

/* ---------------------------------------------------------------------------
 * 4. Tutor LMS template cards
 * ---------------------------------------------------------------------------
 * Course list, dashboard widgets, instructor cards. Same editorial base as
 * the cc-* set so the entire site reads as one design system.
 */
.tutor-course,
.tutor-d-board-card,
.tutor-instructor-card {
	padding-block: var(--cc-sp-card-pad-y, clamp(24px, 3vw, 40px));
	padding-inline: var(--cc-sp-card-pad-x, clamp(20px, 2.5vw, 36px));
	background: var(--cc-ed-bg-tint, var(--cc-bg-cream, #FAF7F2));
	border: 1px solid var(--cc-ed-paper-rule, var(--cc-paper-rule, #E5DDD0));
	border-radius: var(--cc-radius-md, 12px);
	box-shadow: var(--cc-shadow-card, var(--cc-shadow-sm, 0 4px 12px rgba(15, 35, 70, 0.05)));
	transition:
		transform var(--cc-dur-mid, var(--cc-dur-base, 180ms)) var(--cc-ease, ease),
		box-shadow var(--cc-dur-mid, var(--cc-dur-base, 180ms)) var(--cc-ease, ease);
}

.tutor-course:hover,
.tutor-d-board-card:hover,
.tutor-instructor-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cc-shadow-hover, var(--cc-shadow-lg, 0 18px 42px rgba(15, 35, 70, 0.12)));
}

/* ---------------------------------------------------------------------------
 * 5. RTL confirmation
 * ---------------------------------------------------------------------------
 * All padding above uses logical properties (padding-block, padding-inline)
 * so RTL flips automatically. Only the transform translateY is direction-
 * independent. No additional [dir="rtl"] overrides required.
 */

/* ---------------------------------------------------------------------------
 * 6. Reduced motion
 * ---------------------------------------------------------------------------
 * Honor user preference: kill transform on hover for motion-sensitive users.
 * Shadow transitions stay — they read as ambient, not kinetic.
 */
@media (prefers-reduced-motion: reduce) {
	.cc-stage-card,
	.cc-teacher-card,
	.cc-stat-card,
	.cc-payment-logo,
	.tutor-course,
	.tutor-d-board-card,
	.tutor-instructor-card {
		transition: box-shadow var(--cc-dur-mid, var(--cc-dur-base, 180ms)) var(--cc-ease, ease);
	}

	.cc-stage-card:hover,
	.cc-teacher-card:hover,
	.cc-stat-card:hover,
	.cc-payment-logo:hover,
	.tutor-course:hover,
	.tutor-d-board-card:hover,
	.tutor-instructor-card:hover {
		transform: none;
	}
}

/* ============================================================
 * Premium stage-card variant (Thanawiya gold tier)
 * Owned here (cards-domain variant) because the cards.css guard
 * deliberately leaves bg/border untouched on .cc-stage-card--premium.
 * Saffron eyebrow tag floats inset-inline-end (RTL-safe).
 * ============================================================ */
.cc-stage-card.cc-stage-card--premium,
.cc-stage-section .elementor-element.cc-stage-card--premium {
  background: linear-gradient(135deg, var(--cc-ed-gold-light) 0%, var(--cc-ed-gold-dark) 100%);
  border: 1px solid var(--cc-ed-gold);
  border-radius: var(--cc-ed-radius-md);
  box-shadow: 0 12px 24px -16px rgba(200,167,91, 0.32);
  position: relative;
}
.cc-stage-card.cc-stage-card--premium::before {
  content: "متميّز";
  position: absolute;
  inset-block-start: var(--cc-ed-sp-3);
  inset-inline-start: auto;
  inset-inline-end: var(--cc-ed-sp-3);
  width: max-content;
  height: auto;
  padding: var(--cc-ed-sp-1) var(--cc-ed-sp-3);
  background: var(--cc-ed-saffron);
  color: var(--cc-ed-bg);
  border-radius: var(--cc-ed-radius-pill);
  font: 700 var(--cc-fs-xs)/1 var(--cc-font-display);
  letter-spacing: var(--cc-tracking-eyebrow);
}
.cc-stage-card--premium .cc-stage-card__name { color: var(--cc-ed-gold-ink); }
.cc-stage-card--premium .cc-stage-card__range { color: var(--cc-ed-gold-ink-soft); }

/* ============================================================
 * Stats masthead — editorial display of platform scale.
 * Replaces Elementor's stock icon-box cards. The numeral IS the
 * design; everything else is restraint. No card chrome — vertical
 * paper-rule dividers separate four cells, one saffron tick above
 * each numeral as the only ornament, tiny eyebrow label below.
 * ============================================================ */
.cc-stat-row {
  background: var(--cc-ed-bg-tint);
  padding-block: clamp(64px, 8vw, 120px);
  position: relative;
}
.cc-stat-row > .e-con-inner > .elementor-widget-heading {
  text-align: center;
  margin-block-end: clamp(48px, 6vw, 80px);
}
.cc-stat-row .elementor-heading-title {
  font-family: var(--cc-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--cc-ed-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: inline-block;
}
.cc-stat-row .elementor-heading-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--cc-ed-saffron);
}
.cc-stat-row > .e-con-inner > .e-con-boxed.e-child {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.cc-stat-row > .e-con-inner > .e-con-boxed.e-child > .e-con-inner {
  display: contents;
}
.cc-stat-row .elementor-widget-icon-box {
  padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-inline-end: 1px solid var(--cc-ed-paper-rule);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: cc-stat-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.cc-stat-row .elementor-widget-icon-box:last-child {
  border-inline-end: none;
}
.cc-stat-row .elementor-widget-icon-box::before {
  content: '';
  width: 24px;
  height: 4px;
  background: var(--cc-ed-saffron);
  margin-block-end: clamp(16px, 2vw, 24px);
}
.cc-stat-row .elementor-icon { display: none; }
/* Span override required: Elementor wraps the title in a <span> that
 * doesn't inherit font-family reliably across browser fallback paths.
 * Token rationale (skip Cairo Play / chromatic numerals) is documented
 * at the --cc-font-numeral declaration in type.css. */
.cc-stat-row .elementor-icon-box-title,
.cc-stat-row .elementor-icon-box-title span {
  font-family: var(--cc-font-numeral);
  font-weight: 900;
  font-size: clamp(80px, 11vw, 160px);
  line-height: 0.9;
  color: var(--cc-ed-ink);
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.cc-stat-row .elementor-icon-box-description {
  font-family: var(--cc-font-body);
  font-weight: 700;
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.12em;
  color: var(--cc-ed-ink-soft);
  line-height: 1.2;
}
.cc-stat-row .elementor-widget-icon-box:nth-of-type(1) { animation-delay: 0s; }
.cc-stat-row .elementor-widget-icon-box:nth-of-type(2) { animation-delay: 100ms; }
.cc-stat-row .elementor-widget-icon-box:nth-of-type(3) { animation-delay: 200ms; }
.cc-stat-row .elementor-widget-icon-box:nth-of-type(4) { animation-delay: 300ms; }

@keyframes cc-stat-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-stat-row .elementor-widget-icon-box {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 768px) {
  .cc-stat-row > .e-con-inner > .e-con-boxed.e-child {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-stat-row .elementor-widget-icon-box {
    border-inline-end: 1px solid var(--cc-ed-paper-rule);
    border-block-end: 1px solid var(--cc-ed-paper-rule);
  }
  .cc-stat-row .elementor-widget-icon-box:nth-child(2),
  .cc-stat-row .elementor-widget-icon-box:nth-child(4) {
    border-inline-end: none;
  }
  .cc-stat-row .elementor-widget-icon-box:nth-child(3),
  .cc-stat-row .elementor-widget-icon-box:nth-child(4) {
    border-block-end: none;
  }
}

/* Dark mode — surface + divider shift only. Tokens (--cc-ed-bg-tint,
 * --cc-ed-ink, --cc-ed-paper-rule, --cc-ed-muted) already flip via the
 * :root[data-theme="dark"] block in tokens.css, but the inverted-paper
 * row needs an explicit scope so the bg-tint that ships on .cc-stat-row
 * computes against the dark token set. */
[data-theme="dark"] .cc-stat-row {
  background: var(--cc-ed-bg-tint);
}
[data-theme="dark"] .cc-stat-row .elementor-widget-icon-box {
  border-inline-end-color: var(--cc-ed-paper-rule);
}

/* ============================================================
 * 8. Course CTA — editorial saffron
 * ============================================================
 * EduMall paints .tm-button.style-flat via a ::before pseudo with
 * background: var(--edumall-color-primary) (blue). On the course-
 * card enroll/cart CTA (visible in the grid-01 hover quick-view
 * popup) repaint the pseudo to editorial saffron so the primary
 * course CTA reads as brand, not stock blue.
 *
 * Scoped to .course-loop-enrolled-button so the header CTA and any
 * other site-wide .tm-button.style-flat use stays untouched.
 */
.course-loop-enrolled-button .tm-button.style-flat::before {
  background: var(--cc-ed-saffron);
}
.course-loop-enrolled-button .tm-button.style-flat:hover::before,
.course-loop-enrolled-button .tm-button.style-flat:focus-visible::before {
  background: var(--cc-ed-saffron-warm);
}