/* =========================================================
   HOMA WORLD — page-level styles
   Loaded after style.css (tokens + shared chrome live there).
   ========================================================= */

/* ---------- shared section heading w/ underline accent ---------- */
.section-heading {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2rem; border-bottom: 1px solid var(--gray-200); padding-bottom: 1rem; gap: 1rem; flex-wrap: wrap;
}
.section-heading__link { color: var(--homa-green); font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.section-heading__link:hover { text-decoration: underline; }

.underline-title { font-size: 1.875rem; font-weight: 900; position: relative; display: inline-block; }
.underline-title span { position: relative; z-index: 1; }
.underline-title::after {
	content: "";
	position: absolute;
	bottom: 4px; right: 0; left: 0;
	height: var(--ul-height, .75rem);
	background: var(--ul-color, var(--ul-fallback, transparent));
	z-index: 0;
}
.underline-peach { --ul-fallback: var(--homa-peach); }
.underline-mint   { --ul-fallback: var(--homa-mint); }
.underline-coral  { --ul-fallback: var(--homa-coral); }

.section-title-underline {
  font-size: 1.5rem; font-weight: 700; display: inline-block;
  border-bottom: 1px solid var(--gray-200); padding-bottom: .5rem; margin-bottom: 1rem;
}

/* =========================================================
   HOME PAGE
   ========================================================= */
.home-page { display: flex; flex-direction: column; gap: 4rem; padding-bottom: 2rem; }

.hero {
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) { .hero { flex-direction: row; margin-top: 4rem; } }
.hero__text { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .hero__text { flex: 1; } }
.hero__eyebrow {
  display: inline-block; background: rgba(174,255,245,.2); color: var(--homa-green);
  padding: .25rem 1rem; border-radius: var(--radius-full); font-weight: 500; width: fit-content;
}
.hero__title { font-size: 2.25rem; font-weight: 900; line-height: 1.2; }
@media (min-width: 768px) { .hero__title { font-size: 3.75rem; } }
.hero__title .text-coral { color: var(--homa-coral); }
.hero__highlight { background: var(--homa-mint); padding: 0 .5rem; }
.hero__desc { font-size: 1.125rem; color: var(--gray-700); max-width: 32rem; }
@media (min-width: 768px) { .hero__desc { font-size: 1.25rem; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 1rem; }
.hero__visual { flex: none; width: 100%; position: relative; height: 320px; }
@media (min-width: 768px) { .hero__visual { flex: 1; height: 400px; } }
.hero__visual .memphis { width: 100%; height: 100%; border-radius: 0 100px 0 100px; }
.hero__star { position: absolute; top: -1rem; right: -1rem; background: #fff; box-shadow: var(--shadow-md); padding: 1rem; border-radius: var(--radius-2xl); }

.benefits { background: var(--homa-green); color: #fff; padding: 3rem 0; }
.benefits__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
.benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.benefit__icon { background: rgba(255,255,255,.1); padding: 1rem; border-radius: var(--radius-2xl); }
.benefit h3 { font-size: 1.5rem; font-weight: 700; }

.course-grid .card { transition: transform .2s ease; }
.course-grid .course-card:hover { transform: translateY(-.5rem); }

.course-card { display: flex; flex-direction: column; height: 100%; transition: transform .2s ease; }
.course-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.course-card__media { height: 10rem; position: relative; border-bottom: 1px solid var(--gray-200); }
.course-card__memphis { width: 100%; height: 100%; }
.course-card__featured-badge { position: absolute; top: .5rem; right: .5rem; border: 1px solid #fff; }
.course-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.course-card__title { font-weight: 700; font-size: 1.125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card__meta { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--gray-600); flex: 1; }
.course-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; }
.course-card__price { font-weight: 900; color: var(--homa-green); }

/* Add-to-cart action row — sibling of course-card-link, not nested inside it */
.course-card__actions { padding: 0 1rem 1rem; }
.course-card__add-btn {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	font-size: .9rem;
}

.paths-banner { background: var(--homa-mint); padding: 2rem; border-radius: var(--radius-xl); position: relative; overflow: hidden; }
@media (min-width: 768px) { .paths-banner { padding: 3rem; } }
.paths-banner__content { position: relative; z-index: 1; max-width: 42rem; }
.paths-banner__content h2 { font-size: 1.875rem; font-weight: 900; margin-bottom: 1rem; }
@media (min-width: 768px) { .paths-banner__content h2 { font-size: 2.25rem; } }
.paths-banner__content p { font-size: 1.125rem; margin-bottom: 2rem; font-weight: 500; }
.paths-banner__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.paths-banner__btn { font-size: 1.125rem; border-width: 3px !important; }

.campaign-banner {
  background: var(--homa-green); color: #fff; padding: 2rem; border-radius: var(--radius-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; text-align: center;
}
@media (min-width: 768px) { .campaign-banner { flex-direction: row; text-align: right; } }
.campaign-banner__text h2 { font-size: 1.875rem; font-weight: 900; color: var(--homa-peach); margin-bottom: .5rem; }
.campaign-banner__text p { font-size: 1.125rem; }
.campaign-banner__code {
  background: var(--homa-coral); color: #000; padding: 1rem; font-weight: 900; font-size: 1.5rem;
  border: 2px solid #fff; transform: rotate(-3deg);
}

/* ---------- method / how-it-works steps ---------- */
.method-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .method-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.method-step { position: relative; display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; }
.method-step__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
	background: var(--homa-green); color: #fff; font-weight: 900; font-size: 1.125rem;
	flex-shrink: 0; overflow: hidden;
}
.method-step__badge .method-step__icon-svg {
	width: 60%; height: 60%; display: flex; align-items: center; justify-content: center;
}
.method-step__badge .method-step__icon-svg svg { width: 100%; height: 100%; display: block; }
.method-step h3 { font-size: 1.125rem; font-weight: 700; }
.method-step p { color: var(--gray-600); font-size: .95rem; }
/* Dashed connector between steps intentionally removed per design update */

/* ---------- interactive path-finder quiz (inside .paths-banner) ---------- */
.quiz__options { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 0; }
@media (min-width: 640px) { .quiz__options { grid-template-columns: repeat(2, 1fr); } }
.quiz__option {
  text-align: right; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; font-weight: 700; font-size: 1rem; transition: border-color .15s ease, transform .15s ease;
}
.quiz__option:hover { border-color: var(--homa-green); transform: translateY(-2px); }
.quiz__option.is-selected { border-color: var(--homa-green); border-width: 2px; background: var(--homa-mint); }
.quiz__result {
  margin-top: 1.5rem; background: #fff; border-radius: var(--radius-lg); padding: 1.5rem;
  border: 2px solid var(--homa-green);
}
.quiz__result-label { font-weight: 700; color: var(--gray-600); font-size: .875rem; margin-bottom: .25rem; }
.quiz__result h3 { font-size: 1.375rem; font-weight: 900; margin-bottom: .5rem; }
.quiz__result-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }

/* ---------- campaign countdown ---------- */
.campaign-banner__countdown { margin-top: .75rem; font-weight: 700; color: var(--homa-mint); font-size: 1rem; }

/* ---------- founder note / trust section ---------- */
.founder-note {
  display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl);
  padding: 2rem; box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .founder-note { flex-direction: row; align-items: center; } }
.founder-note__badge {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 8rem; height: 8rem; border-radius: var(--radius-full); background: var(--homa-mint);
  text-align: center; font-weight: 700; gap: .25rem; margin: 0 auto;
}
.founder-note__badge-num { font-size: 2.25rem; font-weight: 900; line-height: 1; }
.founder-note__text h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: .75rem; }
.founder-note__text p { color: var(--gray-700); line-height: 1.8; }

/* ---------- mid-funnel consultation banner ---------- */
.consult-banner {
  display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: space-between;
  background: var(--homa-peach); border-radius: var(--radius-xl); padding: 2rem;
}
@media (min-width: 768px) { .consult-banner { flex-direction: row; align-items: center; } }
.consult-banner__text h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: .5rem; }
.consult-banner__text p { font-size: 1.0625rem; font-weight: 500; }

/* ---------- final CTA ---------- */
.final-cta {
  background: var(--homa-green); color: #fff; border-radius: var(--radius-xl);
  padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.final-cta h2 { font-size: 1.875rem; font-weight: 900; }
.final-cta p { font-size: 1.125rem; opacity: .9; }
.final-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .5rem; }
.final-cta__outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.final-cta__outline:hover { background: rgba(255,255,255,.1); }

.article-card { display: flex; flex-direction: column; height: 100%; transition: transform .2s ease; }
.article-card-link:hover .article-card { transform: translateY(-.5rem); }
.article-card__media { height: 12rem; border-bottom: 1px solid var(--gray-200); position: relative; }
.article-card__memphis { width: 100%; height: 100%; }
.article-card__cat-floating {
  position: absolute; top: .5rem; right: .5rem; background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  padding: .25rem 1rem; border-radius: var(--radius-full); font-size: .875rem; font-weight: 500;
}
.article-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.article-card__title { font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.article-card-link:hover .article-card__title { color: var(--homa-coral); }
.article-card__excerpt { color: var(--gray-600); flex: 1; }
.article-card__meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1rem; font-size: .75rem; color: var(--gray-500); font-weight: 700; gap: .5rem; }
.article-card__meta span { display: inline-flex; align-items: center; gap: .25rem; }

/* =========================================================
   COURSES ARCHIVE
   ========================================================= */
.courses-hero {
  background: var(--homa-peach); padding: 2rem; margin-bottom: 3rem; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.courses-hero__content { position: relative; z-index: 1; }
.courses-hero h1 { font-size: 2.25rem; font-weight: 900; margin-bottom: 1rem; }
.courses-hero p { font-size: 1.25rem; max-width: 42rem; font-weight: 500; }

.courses-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .courses-layout { flex-direction: row; } }

.courses-sidebar { width: 100%; flex-shrink: 0; }
@media (min-width: 768px) { .courses-sidebar { width: 16rem; } }
.courses-filters { padding: 1rem; position: sticky; top: 6rem; }
.courses-filters__head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-200); }
.courses-filters__head h2 { font-size: 1.25rem; font-weight: 700; }
.courses-filters__group { margin-bottom: 1.5rem; }
.courses-filters__group h3 { font-weight: 700; margin-bottom: .75rem; }
.courses-filters__group .checkbox-row { margin-bottom: .5rem; }

.courses-results { flex: 1; min-width: 0; }
.courses-results__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.courses-sort select { width: auto; height: auto; padding: .5rem; }

.pagination { display: flex; justify-content: center; margin-top: 3rem; }
.pagination ul { display: flex; gap: .5rem; list-style: none; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-lg); font-weight: 700; background: #fff;
}
.pagination .page-numbers.current { background: var(--homa-green); color: #fff; border-color: var(--homa-green); }
.pagination .page-numbers:hover:not(.current) { background: var(--gray-50); }

/* =========================================================
   SINGLE COURSE
   ========================================================= */
.single-course { padding: 2rem 1rem; }
.single-course__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .single-course__grid { grid-template-columns: 2fr 1fr; } }
.single-course__main { display: flex; flex-direction: column; gap: 2rem; }

.single-course__cover { height: 16rem; position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
@media (min-width: 768px) { .single-course__cover { height: 25rem; } }
.single-course__memphis { width: 100%; height: 100%; }
.single-course__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2); width: 100%; transition: transform .2s ease;
}
.single-course__play:hover { transform: scale(1.05); }

.single-course__title { font-size: 1.875rem; font-weight: 900; margin-bottom: 1rem; }
@media (min-width: 768px) { .single-course__title { font-size: 2.25rem; } }
.single-course__desc { font-size: 1.125rem; color: var(--gray-700); line-height: 1.8; }

.learn-points { margin-top: 1rem; }
.learn-point { display: flex; align-items: flex-start; gap: .5rem; }

.curriculum-accordion { padding: 0; }
.curriculum-item { border-top: 1px solid var(--gray-200); }
.curriculum-item:first-child { border-top: none; }
.curriculum-item__row {
	width: 100%;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: none;
	text-align: right;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}
.curriculum-item__row:hover { background: var(--gray-50); }
.curriculum-item__row--static { cursor: default; }
.curriculum-item__row--static:hover { background: none; }
.curriculum-item__left { display: flex; align-items: center; gap: .75rem; }
.curriculum-item__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem; border-radius: 50%;
	background: var(--gray-100); font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.curriculum-item__right { display: flex; align-items: center; gap: .75rem; }
.curriculum-item__time { font-size: .85rem; color: var(--gray-500); }
.curriculum-item__chevron { transition: transform .2s ease; color: var(--gray-400); flex-shrink: 0; }
.curriculum-item.is-open .curriculum-item__chevron { transform: rotate(180deg); }
.curriculum-item__panel { padding: 0 1rem 1.25rem 1rem; }
.curriculum-item__panel p { color: var(--gray-600); font-size: .9rem; line-height: 1.8; margin: 0; padding-right: 2.5rem; }

/* ── FAQ accordion (same visual language) ── */
.faq-accordion { padding: 0; }
.faq-item { border-top: 1px solid var(--gray-200); }
.faq-item:first-child { border-top: none; }
.faq-item__row {
	width: 100%; padding: 1rem; display: flex; align-items: center; justify-content: space-between;
	background: none; border: none; text-align: right; font-family: inherit; cursor: pointer; transition: background .15s;
}
.faq-item__row:hover { background: var(--gray-50); }
.faq-item__chevron { transition: transform .2s ease; color: var(--gray-400); flex-shrink: 0; }
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); }
.faq-item__panel { padding: 0 1rem 1.25rem 1rem; }
.faq-item__panel p { color: var(--gray-600); font-size: .9rem; line-height: 1.8; margin: 0; }

/* ── Participant count stat ── */
.single-course__participants {
	display: flex; align-items: center; gap: .4rem;
	font-size: .875rem; color: var(--homa-green); font-weight: 600;
	margin: .5rem 0 1rem;
}

/* ── Course contact CTA — sticky box, same width as the buybox, right below it ── */
.course-cta-box {
	border-radius: var(--radius-2xl);
	padding: 1.25rem 1.5rem;
	text-align: center;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
}
.course-cta-box__text {
	display: block;
	margin-bottom: .75rem;
	line-height: 1.6;
}
.course-cta-box__btn {
	display: inline-block;
	width: 100%;
	background: var(--homa-coral);
	color: #fff;
	padding: .65rem 1.5rem;
	border-radius: var(--radius-lg);
	font-weight: 700;
	font-size: .875rem;
	transition: transform .15s ease;
}
.course-cta-box__btn:hover { transform: translateY(-2px); }

/* ── Testimonials ── */
.testimonial-grid { align-items: stretch; }
.testimonial-card {
	background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl);
	padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; height: 100%;
}
.testimonial-card__text { color: var(--gray-700); font-size: .9rem; line-height: 1.8; flex: 1; }
.testimonial-card__author { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testimonial-card__author strong { font-size: .9rem; color: var(--homa-green); }
.testimonial-card__author span { font-size: .8rem; color: var(--gray-500); }
.testimonial-card--screenshot { padding: 0; overflow: hidden; background: #fff; }
.testimonial-card--screenshot img { width: 100%; height: auto; display: block; }

.curriculum-item__left { display: flex; align-items: center; gap: .75rem; }
.curriculum-item__num {
  background: rgba(255,185,115,.2); color: var(--homa-green); width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: var(--radius-full); flex-shrink: 0;
}
.curriculum-item__right { display: flex; align-items: center; gap: 1rem; font-size: .875rem; }
.curriculum-item__time { display: none; color: var(--gray-500); }
@media (min-width: 640px) { .curriculum-item__time { display: inline; } }

.single-course__sidebar { position: relative; }
.single-course__buybox { padding: 1.5rem; }
.single-course__sidebar-sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.single-course__price-row { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-width: 2px; }
.single-course__price { font-size: 1.875rem; font-weight: 900; color: var(--homa-green); }
.single-course__specs { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.single-course__spec { display: flex; justify-content: space-between; align-items: center; }
.single-course__spec-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--gray-600); font-weight: 500; }
.single-course__cta { animation: homa-pulse 2s infinite; }
.single-course__cta:hover { animation: none; }

/* Standalone sections that live OUTSIDE the two-column grid (testimonials,
   suggested courses) — previously had NO spacing rule at all, causing
   everything to look cramped/overlapping. */
.single-course > .single-course__section { margin-top: 3rem; }
@keyframes homa-pulse { 0%,100% { opacity: 1; } 50% { opacity: .85; } }

/* =========================================================
   ARTICLES ARCHIVE / SINGLE
   ========================================================= */
.articles-page { padding: 2rem 1rem; }
.articles-hero {
  background: var(--homa-green); color: #fff; display: flex; flex-direction: column; gap: 1rem;
  justify-content: space-between; align-items: center; margin-bottom: 3rem; padding: 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .articles-hero { flex-direction: row; } }
.articles-hero h1 { font-size: 2.25rem; font-weight: 900; margin-bottom: .5rem; color: var(--homa-peach); }
.articles-hero p { font-size: 1.125rem; }
.articles-hero__search { width: 100%; }
@media (min-width: 768px) { .articles-hero__search { width: 33%; } }
.articles-hero__search input { color: #000; }

.articles-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--gray-200); padding-bottom: 1rem; }

.single-article { padding: 2rem 1rem; max-width: 56rem; margin: 0 auto; }
.single-article__header { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.single-article__header h1 { font-size: 2.25rem; font-weight: 900; line-height: 1.2; }
@media (min-width: 768px) { .single-article__header h1 { font-size: 3rem; } }
.single-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; color: var(--gray-600); font-weight: 500; padding: 1rem 0; border-bottom-width: 2px; border-top-width: 2px; }
.single-article__meta span { display: inline-flex; align-items: center; gap: .375rem; }

.single-article__cover { height: 16rem; margin-bottom: 2.5rem; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .single-article__cover { height: 25rem; } }
.single-article__memphis { width: 100%; height: 100%; }

.single-article__content { font-size: 1.125rem; line-height: 2; color: var(--gray-800); text-align: justify; }
.single-article__content p { margin-bottom: 1.25rem; font-weight: 500; }
.single-article__content p:first-of-type { font-size: 1.25rem; font-weight: 700; }
.single-article__content h2 {
  font-size: 1.875rem; font-weight: 900; margin-top: 2.5rem; margin-bottom: 1rem; position: relative; display: inline-block;
}
.single-article__content ul {
  list-style: disc; padding-right: 1.25rem; margin: 1rem 0; font-weight: 700;
  border-right: 4px solid var(--homa-green); padding-top: .5rem; padding-bottom: .5rem; background: var(--gray-50); border-radius: 0 0 var(--radius-lg) 0;
}
.single-article__content li { margin-bottom: .5rem; }

.single-article__footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.single-article__tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.tag-pill { background: var(--gray-100); color: var(--gray-700); padding: .25rem .75rem; font-weight: 700; font-size: .875rem; border: 1px solid var(--gray-300); }
.single-article__share { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.single-article__share:hover { color: var(--homa-coral); }

/* =========================================================
   CHECKOUT
   ========================================================= */
.checkout-page { padding: 2rem 1rem; }
.checkout-page__title { font-size: 1.875rem; font-weight: 900; margin-bottom: 2rem; padding-bottom: 1rem; display: inline-block; border-color: var(--gray-200); }
.checkout-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .checkout-layout { flex-direction: row; } }

.checkout-items { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.checkout-item { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .checkout-item { flex-direction: row; } }
.checkout-item__media { width: 100%; height: 6rem; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
@media (min-width: 640px) { .checkout-item__media { width: 8rem; } }
.checkout-item__media .memphis { width: 100%; height: 100%; }
.checkout-item__info { flex: 1; text-align: center; }
@media (min-width: 640px) { .checkout-item__info { text-align: right; } }
.checkout-item__info h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: .25rem; }
.checkout-item__info p { color: var(--gray-500); font-size: .875rem; }
.checkout-item__actions { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
@media (min-width: 640px) { .checkout-item__actions { align-items: flex-end; width: auto; } }
.checkout-item__price { font-weight: 900; font-size: 1.25rem; color: var(--homa-green); }
.checkout-item__remove { color: var(--red-500); display: flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 700; padding: .25rem .5rem; border-radius: var(--radius-lg); }
.checkout-item__remove:hover { background: var(--red-50); }

.checkout-summary { width: 100%; }
@media (min-width: 1024px) { .checkout-summary { width: 25rem; } }
.checkout-summary__card { padding: 1.5rem; position: sticky; top: 6rem; }
.checkout-summary__card h2 { font-size: 1.25rem; font-weight: 900; margin-bottom: 1.5rem; }
.checkout-summary__lines { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 500; }
.checkout-summary__line { display: flex; justify-content: space-between; }
.checkout-summary__line span:first-child { color: var(--gray-600); }
.checkout-summary__line--discount { color: var(--homa-coral); }
.checkout-summary__line--discount span:first-child { color: var(--homa-coral); }
.checkout-summary__line--total { padding-top: 1rem; border-width: 2px; font-weight: 900; font-size: 1.5rem; }
.checkout-summary__total-amount { color: var(--homa-green); }

.checkout-summary__promo { margin-bottom: 2rem; }
.checkout-summary__promo label { display: block; font-weight: 700; margin-bottom: .5rem; font-size: .875rem; }
.checkout-summary__promo-row { display: flex; gap: .5rem; }
.checkout-summary__promo-row input { flex: 1; }

.checkout-summary__payment { margin-bottom: 2rem; }
.checkout-summary__payment-label { display: block; font-weight: 700; margin-bottom: .75rem; font-size: .875rem; }
.payment-option {
  display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg); cursor: pointer; transition: all .15s ease; margin-bottom: .75rem;
}
.payment-option input { width: 1.25rem; height: 1.25rem; accent-color: #000; }
.payment-option.is-selected { border-color: var(--homa-green); background: rgba(13,43,41,.05); }
.card-to-card-box {
  margin-top: 1rem; padding: 1rem; background: var(--gray-100); border: 2px dashed var(--gray-400);
  font-size: .875rem; display: flex; flex-direction: column; gap: .5rem;
}
.card-to-card-box__number { text-align: center; font-size: 1.25rem; letter-spacing: .1em; font-weight: 900; }

/* =========================================================
   LOGIN / REGISTER
   ========================================================= */
.login-page {
  min-height: calc(100vh - 4rem); display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem; background: var(--homa-mint); position: relative; overflow: hidden;
}
.login-page__bg {
  position: absolute; inset: 0; opacity: .15; pointer-events: none;
  background-image: radial-gradient(circle, var(--black) 2px, transparent 2px);
  background-size: 40px 40px;
}
.login-page__inner { width: 100%; max-width: 64rem; display: flex; flex-direction: column; position: relative; z-index: 1; }
@media (min-width: 768px) { .login-page__inner { flex-direction: row; } }

.login-page__visual { display: none; background: var(--homa-peach); padding: 2rem; flex-direction: column; justify-content: center; position: relative; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
@media (min-width: 768px) { .login-page__visual { display: flex; width: 50%; } }
.login-page__back { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; gap: .25rem; font-weight: 700; }
.login-page__back:hover { text-decoration: underline; }
.login-page__back--mobile { display: flex; font-size: .875rem; }
@media (min-width: 768px) { .login-page__back--mobile { display: none; } }
.login-page__visual-text { margin-bottom: 2rem; }
.login-page__visual-text h2 { font-size: 2.25rem; font-weight: 900; margin-bottom: 1rem; }
.login-page__visual-text p { font-size: 1.125rem; font-weight: 500; }
.login-page__visual-img { height: 16rem; position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.login-page__visual-img .memphis { width: 100%; height: 100%; }

.login-page__form-side { width: 100%; padding: 2rem; border: 4px solid var(--gray-200); position: relative; border-radius: var(--radius-xl); }
@media (min-width: 768px) { .login-page__form-side { width: 50%; border-right: none; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; } }

.login-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .login-tabs { margin-top: 0; } }
.login-tabs__btn { flex: 1; text-align: center; padding-bottom: .5rem; font-size: 1.25rem; font-weight: 900; border-bottom: 4px solid transparent; color: var(--gray-400); }
.login-tabs__btn:hover { color: var(--black); }
.login-tabs__btn.is-active-login { border-color: var(--homa-coral); color: var(--homa-coral); }
.login-tabs__btn.is-active-register { border-color: var(--homa-green); color: var(--homa-green); }

.login-form { display: flex; flex-direction: column; gap: 1.5rem; }
.field__label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.field__label-row label { margin-bottom: 0; }
.field__forgot { font-size: .875rem; font-weight: 700; color: var(--homa-coral); }
.field__forgot:hover { text-decoration: underline; }

/* =========================================================
   PROFILE
   ========================================================= */
.profile-page { padding: 2rem 1rem; }
.profile-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .profile-layout { flex-direction: row; } }

.profile-sidebar { width: 100%; flex-shrink: 0; }
@media (min-width: 768px) { .profile-sidebar { width: 16rem; } }
.profile-sidebar__card { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; position: sticky; top: 6rem; }
.profile-avatar { width: 6rem; height: 6rem; background: var(--homa-peach); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.profile-name { font-size: 1.25rem; font-weight: 900; margin-bottom: .25rem; }
.profile-email { font-size: .875rem; color: var(--gray-500); font-weight: 500; margin-bottom: 1.5rem; }

.profile-tabs { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.profile-tab {
  width: 100%; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-weight: 700;
  border: 2px solid var(--gray-200); background: #fff; color: var(--gray-700); transition: all .15s ease; border-radius: var(--radius-lg);
}
.profile-tab:hover { background: var(--gray-50); }
.profile-tab.is-active { background: var(--homa-green); color: #fff; border-color: var(--homa-green); box-shadow: var(--shadow-sm); }
.profile-tabs hr { border-color: var(--gray-200); margin: 1rem 0; width: 100%; }
.profile-logout { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-weight: 700; color: var(--red-500); border-radius: var(--radius-lg); }
.profile-logout:hover { background: var(--red-50); }

.profile-content { flex: 1; min-width: 0; }
.profile-content__card { padding: 2rem; min-height: 31rem; }
.profile-panel { display: none; }
.profile-panel.is-active { display: block; }
.profile-panel__title { font-size: 1.5rem; font-weight: 900; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .5rem; }

.my-course-item { border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1rem; display: flex; align-items: center; gap: 1rem; }
.my-course-item__icon { width: 5rem; height: 5rem; background: rgba(174,255,245,.2); color: var(--homa-green); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.my-course-item__info { flex: 1; }
.my-course-item__info h3 { font-weight: 700; margin-bottom: .5rem; }
.progress-bar { width: 100%; background: var(--gray-100); height: .5rem; border-radius: var(--radius-full); margin-bottom: .25rem; overflow: hidden; }
.progress-bar__fill { background: var(--homa-green); height: 100%; }
.my-course-item__pct { font-size: .75rem; font-weight: 700; color: var(--gray-500); }

.profile-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 16rem; color: var(--gray-400); gap: 1rem; }

.settings-form { max-width: 28rem; display: flex; flex-direction: column; gap: 1rem; }

/* =========================================================
   GENERIC PAGE (About / Contact)
   ========================================================= */
.generic-page { padding: 3rem 1rem; max-width: 56rem; margin: 0 auto; }
.generic-page__title { font-size: 1.875rem; font-weight: 900; margin-bottom: 1rem; }
.generic-page__content { font-size: 1.125rem; line-height: 1.9; color: var(--gray-700); }
.generic-page__content p { margin-bottom: 1rem; }
.contact-info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-info-item { padding: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.contact-info-item h3 { font-weight: 700; margin-bottom: .25rem; }
.contact-info-item p { color: var(--gray-600); }

/* =========================================================
   404
   ========================================================= */
.error-404-page { padding: 4rem 1rem; max-width: 28rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.error-404-page__visual { width: 10rem; height: 10rem; border-radius: var(--radius-full); }
.error-404-page__visual .memphis { width: 100%; height: 100%; border-radius: var(--radius-full); }
.error-404-page h1 { font-size: 4rem; font-weight: 900; }

/* ── Homepage Admin: Festival Slider ── */
.homa-festival-section { padding: 0; }
.homa-festival-slider { position: relative; }
.homa-fest-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  animation: homaFadeIn .5s ease;
}
@media (min-width: 768px) { .homa-fest-slide { flex-direction: row; align-items: center; } }
@keyframes homaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.homa-fest-dot { transition: background .3s, transform .2s; }
.homa-fest-dot.active, .homa-fest-dot:hover { transform: scale(1.3); }

/* ── Method Step Icon ── */
/* .method-step__icon rule removed — icons now render inside .method-step__badge */

/* ── Founder Side Image ── */
.founder-note__image { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════
   COMMENTS — تم هما
═══════════════════════════════════════════════════════ */
.homa-comments-wrap {
	max-width: 56rem;
	margin: 0 auto;
	padding-top: 0;
}

/* ── Form ── */
.homa-comment-form { display: flex; flex-direction: column; gap: 1.25rem; }
#respond {
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-2xl);
	padding: 2rem;
	margin-bottom: 2.5rem;
}
#respond h3#reply-title {
	font-size: 1.375rem;
	font-weight: 900;
	margin-bottom: 1.5rem;
	color: var(--homa-green);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.homa-comment-fields-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 640px) { .homa-comment-fields-row { grid-template-columns: 1fr; } }
.homa-comment-field { display: flex; flex-direction: column; gap: .4rem; }
.homa-comment-field label { font-weight: 700; font-size: .9rem; color: var(--gray-700); }
.homa-comment-field label .required { color: var(--homa-coral); margin-right: 2px; }
.homa-comment-field .input { width: 100%; padding: .625rem .875rem; }
.homa-comment-field--full { width: 100%; }
.homa-comment-textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
.homa-comment-submit-wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: .5rem;
}
.homa-comment-submit { min-width: 140px; }
#cancel-comment-reply-link { font-size: .85rem; color: var(--homa-coral); }
#cancel-comment-reply-link:hover { text-decoration: underline; }

/* ── Comments List ── */
.homa-comments-list-wrap { margin-top: 1rem; }
.homa-comments-title {
	font-size: 1.25rem;
	font-weight: 900;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--homa-green);
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--gray-100);
}
.homa-comment {
	display: flex;
	flex-wrap: wrap;   /* lets .children (nested replies) below wrap onto its own full-width line instead of sitting beside the avatar/body */
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--gray-100);
}
.homa-comment.bypostauthor > .homa-comment__body { background: #f0fdf9; border-radius: var(--radius-xl); padding: 1rem; margin-top: -.5rem; border: 1px solid var(--homa-mint); }
.homa-comment__avatar-img { border-radius: 50%; width: 48px; height: 48px; flex-shrink: 0; border: 2px solid var(--gray-200); }
.homa-comment__body { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.homa-comment__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.homa-comment__author { font-weight: 800; font-size: .95rem; color: var(--homa-green); }
.homa-comment__date { font-size: .8rem; color: var(--gray-500); }
.homa-comment__text { color: var(--gray-700); font-size: .95rem; line-height: 1.8; }
.homa-comment__text p { margin: 0; }
.homa-comment__moderation { font-size: .85rem; color: var(--gray-500); font-style: italic; background: var(--gray-100); border-radius: var(--radius-lg); padding: .375rem .75rem; }
.homa-comment__actions { margin-top: .25rem; }
.homa-comment__reply-btn {
	font-size: .8rem;
	font-weight: 700;
	color: var(--homa-coral);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	transition: opacity .15s;
}
.homa-comment__reply-btn:hover { opacity: .75; }

/* Nested reply comments: WordPress's 'div'-style comment walker does NOT wrap
   replies in a ".children" container — it nests a reply's own .homa-comment
   div DIRECTLY inside its parent's .homa-comment div, right alongside the
   avatar and body divs. Since the parent is display:flex, the reply would
   otherwise sit beside the avatar/body as a 3rd flex item. Force it onto its
   own full-width line below, with indentation to show it's a reply. */
.homa-comment > .homa-comment {
	flex: 1 1 100%;
	width: 100%;
	margin-top: .75rem;
	margin-right: 0;
	padding: 1rem 2rem 0 0;
	border-top: 1px dashed var(--gray-200);
	border-bottom: none;
}
@media (max-width: 640px) {
	.homa-comment > .homa-comment { padding-right: 1rem; }
}

/* ── Pagination ── */
.comment-navigation { margin-top: 1.5rem; display: flex; justify-content: space-between; }
.comment-navigation a { font-weight: 700; color: var(--homa-green); }

/* ═══════════════════════════════════════════════════════
   SUGGESTED COURSES & RELATED ARTICLES
═══════════════════════════════════════════════════════ */
.homa-suggested-courses,
.homa-related-articles {
	border-top: 1px solid var(--gray-100);
	padding-top: 3rem;
}
.homa-suggested-courses .section-heading,
.homa-related-articles .section-heading {
	margin-bottom: 1.5rem;
}


/* ── Hero Section: relative position for bg slider ── */
.homa-hero-section { position: relative; overflow: hidden; }
.homa-hero-section .hero__text { position: relative; z-index: 1; }
.homa-hero-section .hero__visual { position: relative; z-index: 1; }
.hero-bg-slider { pointer-events: none; }
.hero-bg-dots { pointer-events: all; }
.hero-bg-dot:hover { transform: scale(1.3); }

/* ── Festival: full-width mode ── */
.homa-festival-fullwidth { width: 100%; max-width: 100%; padding: 0; margin: 2rem 0; }
.homa-festival-fullwidth .homa-fest-slide { border-radius: 0; }
.homa-festival-fullwidth .homa-fest-dots { padding-bottom: 1rem; }

/* ── Section underline ── */
.homa-ul { display: block; width: 60px; margin-top: 6px; border-radius: 4px; }
.homa-ul--thin   { height: 3px; }
.homa-ul--medium { height: 6px; }
.homa-ul--thick  { height: 12px; }


/* ═══════════════════════════════════════════════════════
   SINGLE ARTICLE — 3-Column Layout
═══════════════════════════════════════════════════════ */
.single-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "main";
	gap: 2rem;
	align-items: stretch; /* must stretch, not "start" — sticky needs the column to be as tall as the main content */
	padding: 2rem 1rem;
}
/* Right sidebar appears */
.single-article-layout.has-right-sidebar {
	grid-template-columns: 1fr;
	grid-template-areas:
		"right-sb"
		"main";
}
/* Left sidebar appears */
.single-article-layout.has-left-sidebar {
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"left-sb";
}
/* Both sidebars */
.single-article-layout.has-right-sidebar.has-left-sidebar {
	grid-template-areas:
		"right-sb"
		"main"
		"left-sb";
}

@media (min-width: 1024px) {
	.single-article-layout.has-right-sidebar {
		grid-template-columns: 280px 1fr;
		grid-template-areas: "right-sb main";
	}
	.single-article-layout.has-left-sidebar {
		grid-template-columns: 1fr 240px;
		grid-template-areas: "main left-sb";
	}
	.single-article-layout.has-right-sidebar.has-left-sidebar {
		grid-template-columns: 280px 1fr 240px;
		grid-template-areas: "right-sb main left-sb";
	}
}

/* Main column */
.article-main {
	grid-area: main;
	min-width: 0;
}
.article-main .single-article__header,
.article-main .single-article__cover,
.article-main .single-article__content,
.article-main .single-article__footer,
.article-main .homa-comments-wrap {
	max-width: 100%;
}

/* Sidebars */
.article-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.article-sidebar--right { grid-area: right-sb; }
.article-sidebar--left  { grid-area: left-sb; }

/* Sticky wrapper for left sidebar */
.article-sidebar__sticky {
	position: sticky;
	top: 5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Sidebar block (title + content) */
.sidebar-block { display: flex; flex-direction: column; gap: .75rem; }
.sidebar-block__title {
	font-size: .875rem;
	font-weight: 800;
	color: var(--homa-green);
	display: flex;
	align-items: center;
	gap: .4rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--gray-100);
}

/* ── Right sidebar: course slider ── */
.sidebar-courses-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xl);
}
.sidebar-courses-track {
	display: flex;
	transition: transform .45s cubic-bezier(.4,0,.2,1);
	/* RTL: positive translateX = slide left (prev) */
}
.sidebar-courses-track .course-card-mini-link {
	flex: 0 0 100%;
	width: 100%;
}
/* Dot controls */
.sidebar-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .5rem 0 0;
}
.sidebar-slider-btn {
	background: none;
	border: 1px solid var(--gray-200);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--gray-600);
	transition: all .2s;
	padding: 0;
}
.sidebar-slider-btn:hover { background: var(--gray-100); color: var(--homa-green); }
.sidebar-slider-dots { display: flex; gap: 5px; }
.sidebar-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--gray-300); border: none; cursor: pointer; padding: 0;
	transition: background .2s, transform .2s;
}
.sidebar-dot.active { background: var(--homa-coral); transform: scale(1.3); }

/* ── Mini Course Card ── */
.course-card-mini-link { display: block; text-decoration: none; color: inherit; }
.course-card-mini {
	display: flex;
	flex-direction: row;        /* landscape */
	gap: 0;
	overflow: hidden;
	transition: transform .2s ease;
}
.course-card-mini-link:hover .course-card-mini { transform: translateY(-2px); }

/* Media: full width, 1/3 height ratio relative to card width */
.course-card-mini__media {
	width: 36%;
	flex-shrink: 0;
	aspect-ratio: 16/9;         /* keep consistent */
	position: relative;
	background: var(--gray-100);
}
.course-card-mini__memphis { width: 100%; height: 100%; }

/* Body */
.course-card-mini__body {
	flex: 1;
	padding: .625rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}
.course-card-mini__title {
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.course-card-mini__instructor {
	font-size: .7rem;
	color: var(--gray-500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-card-mini__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	gap: .25rem;
}
.course-card-mini__price {
	font-size: .75rem;
	font-weight: 900;
	color: var(--homa-green);
}
.course-card-mini__footer .badge-rating {
	font-size: .65rem;
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--gray-600);
}

/* ── Article List Item (related articles sidebar) ── */
.sidebar-article-list { display: flex; flex-direction: column; gap: 0; }
.article-list-item {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .75rem 0;
	border-bottom: 1px solid var(--gray-100);
	text-decoration: none;
	color: inherit;
	transition: color .15s;
}
.article-list-item:last-child { border-bottom: none; }
.article-list-item:hover .article-list-item__title { color: var(--homa-coral); }
.article-list-item__thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--gray-100);
}
.article-list-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-list-item__thumb-placeholder { width: 100%; height: 100%; }
.article-list-item__memphis { width: 100%; height: 100%; }
.article-list-item__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}
.article-list-item__cat {
	font-size: .65rem;
	font-weight: 700;
	color: var(--homa-coral);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.article-list-item__title {
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s;
}
.article-list-item__date {
	font-size: .65rem;
	color: var(--gray-500);
	margin-top: auto;
}

/* ── Left Sidebar Banners ── */
.sidebar-banner {
	display: block;
	border-radius: var(--radius-xl);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	transition: box-shadow .2s, transform .2s;
}
a.sidebar-banner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sidebar-banner__img img {
	width: 100%;
	height: auto;
	display: block;
}
.sidebar-banner__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.sidebar-banner__title {
	font-size: .9rem;
	font-weight: 800;
	line-height: 1.3;
	display: block;
}
.sidebar-banner__desc {
	font-size: .8rem;
	line-height: 1.6;
	opacity: .85;
	margin: 0;
}
.sidebar-banner__btn {
	display: inline-block;
	margin-top: .25rem;
	padding: .45rem 1rem;
	border-radius: var(--radius-lg);
	font-size: .8rem;
	font-weight: 700;
	background: var(--homa-coral);
	color: #fff;
	text-align: center;
	align-self: flex-start;
}


/* ── Hero Image Slider (inside visual area) ── */
.hero-img-slider {
	position: relative;
	width: 100%;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.hero-img-track {
	display: flex;
	transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.hero-img-slide {
	flex: 0 0 100%;
	width: 100%;
	opacity: 0;
	transition: opacity .4s ease;
	position: relative;
}
.hero-img-slide.is-active { opacity: 1; }
.hero-img-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-2xl);
}
/* Dot nav */
.hero-img-dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	z-index: 5;
}
.hero-img-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.9);
	background: transparent;
	cursor: pointer; padding: 0;
	transition: background .25s, transform .2s;
}
.hero-img-dot.active {
	background: #fff;
	transform: scale(1.25);
}

/* Clean up old bg-slider classes */
.hero-bg-slider { display: none !important; }
.hero-bg-dots   { display: none !important; }

/* ═══════════════════════════════════════════════════════
   SINGLE ARTICLE — FULL WIDTH + WIDER SIDEBARS (v2)
═══════════════════════════════════════════════════════ */

/* Override container padding for single article — use full viewport width */
.single-article-layout.container {
	max-width: 100%;
	padding-right: 1rem;
	padding-left: 1rem;
	box-sizing: border-box;
}
@media (min-width: 1024px) {
	.single-article-layout.container {
		padding-right: 2rem;
		padding-left: 2rem;
	}
}
@media (min-width: 1280px) {
	.single-article-layout.container {
		padding-right: 3rem;
		padding-left: 3rem;
	}
}

/* Grid columns: right sidebar 20% bigger (280→336px), left sidebar 50% bigger (240→360px) */
@media (min-width: 1024px) {
	.single-article-layout.has-right-sidebar {
		grid-template-columns: 336px 1fr;
	}
	.single-article-layout.has-left-sidebar {
		grid-template-columns: 1fr 360px;
	}
	.single-article-layout.has-right-sidebar.has-left-sidebar {
		grid-template-columns: 336px 1fr 360px;
	}
}

/* ── Right sidebar: course card uses full course-card (not mini) ── */

/* Sidebar course slider — full card height */
.sidebar-courses-slider {
	overflow: hidden;
	border-radius: var(--radius-xl);
}
.sidebar-courses-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.sidebar-courses-track > * { flex: 0 0 100%; width: 100%; }
/* Legacy overrides kept for any old .course-card-mini markup still cached/rendered */
.sidebar-courses-track .course-card-mini-link {
	flex: 0 0 100%; width: 100%;
}

/* Override mini card to look like full course-card inside sidebar */
.sidebar-courses-track .course-card-mini {
	flex-direction: column;   /* vertical like the real card */
	height: auto;
}
.sidebar-courses-track .course-card-mini__media {
	width: 100%;
	aspect-ratio: unset;
	height: 11rem;            /* 10rem + 10% bigger */
}
.sidebar-courses-track .course-card-mini__body {
	padding: 1rem;
	gap: .5rem;
}
.sidebar-courses-track .course-card-mini__title {
	font-size: 1rem;          /* bigger & readable */
	font-weight: 700;
	-webkit-line-clamp: 2;
}
.sidebar-courses-track .course-card-mini__instructor { font-size: .8rem; }
.sidebar-courses-track .course-card-mini__price { font-size: .9rem; font-weight: 900; }

/* ── Right sidebar: article list items — bg color, no category ── */
.article-list-item__cat { display: none; }  /* hide category as requested */

.sidebar-article-list .article-list-item {
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);   /* override bottom-only border */
	padding: .75rem;
	margin-bottom: .5rem;
	transition: background .2s, box-shadow .2s;
}
.sidebar-article-list .article-list-item:last-child { border-bottom: 1px solid var(--gray-200); }
.sidebar-article-list .article-list-item:hover {
	background: #fff;
	box-shadow: var(--shadow-sm);
}
/* Bigger thumbnail in article list */
.article-list-item__thumb {
	width: 76px;   /* 64 × 1.2 */
	height: 76px;
	border-radius: var(--radius-md);
}
.article-list-item__title {
	font-size: .875rem;   /* slightly bigger */
}

/* ── Left sidebar banners: 50% bigger ── */
.article-sidebar--left .sidebar-banner__img img {
	max-height: none;   /* allow full height */
}
.article-sidebar--left .sidebar-banner__body {
	padding: 1.25rem;   /* 1rem × 1.25 */
	gap: .75rem;
}
.article-sidebar--left .sidebar-banner__title {
	font-size: 1.1rem;  /* .9 × ~1.2 → feels 50% more prominent */
	font-weight: 900;
}
.article-sidebar--left .sidebar-banner__desc {
	font-size: .95rem;  /* .8 × 1.2 */
	line-height: 1.7;
}
.article-sidebar--left .sidebar-banner__btn {
	padding: .65rem 1.5rem;
	font-size: .95rem;
	font-weight: 800;
	align-self: stretch;
	text-align: center;
}


/* ── Comments: extra states ── */
.must-log-in, .logged-in-as { margin-bottom: 1rem; }
.must-log-in a, .logged-in-as a { color: var(--homa-coral); font-weight: 700; }
.comments-pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.comments-pagination a, .comments-pagination span {
	padding: .35rem .75rem; border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200); font-size: .85rem;
}
.comments-pagination .current { background: var(--homa-green); color: #fff; border-color: var(--homa-green); }
/* Moderation pending */
.homa-comment__moderation {
	background: #fff9e6; border: 1px solid #f0d060;
	color: #7a5c00; border-radius: var(--radius-md);
	padding: .3rem .75rem; font-size: .8rem;
}


/* ── Single article: right sidebar sticky ── */
.article-sidebar--right .article-sidebar__sticky {
	position: sticky;
	top: 5rem;
	max-height: calc(100vh - 6rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--gray-200) transparent;
}
.article-sidebar--right .article-sidebar__sticky::-webkit-scrollbar { width: 4px; }
.article-sidebar--right .article-sidebar__sticky::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 4px; }

/* Sidebar block title: 25% bigger (.875rem → 1.094rem) */
.sidebar-block__title {
	font-size: 1.094rem !important;
}

/* Article h1: 40% smaller */
.single-article__h1 {
	font-size: clamp(1.25rem, 3vw, 1.7rem) !important;
	line-height: 1.4;
	font-weight: 900;
	margin-bottom: .75rem;
}

/* Cover image: full width, top of article */
.single-article__cover {
	border-radius: var(--radius-2xl);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

/* ── Sidebar banner: slide type ── */
.sidebar-banner--slide { overflow: hidden; position: relative; }
.sidebar-banner-slide-track {
	display: flex;
	transition: none;  /* JS controls */
}
.sidebar-banner-slide-item {
	flex: 0 0 100%;
	width: 100%;
}
/* Vertical slide */
.sidebar-banner--slide-vertical .sidebar-banner-slide-track {
	flex-direction: column;
}
/* Dots for slide banner */
.sidebar-banner-slide-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: .5rem 0;
	background: inherit;
}
.sidebar-banner-slide-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--gray-300); border: none; cursor: pointer; padding: 0;
	transition: background .2s;
}
.sidebar-banner-slide-dot.active { background: var(--homa-coral); }


/* ═══════════════════════════════════════════════════════
   CTA SPLIT — Booking (gradient) + Lead-magnet form (light)
═══════════════════════════════════════════════════════ */
.cta-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) {
	.cta-split { grid-template-columns: 1fr 1fr; gap: 0; }
}

/* ── Left: booking panel (gradient) ── */
.cta-split__booking {
	position: relative;
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	min-height: 280px;
	overflow: hidden;
	color: #fff;
}
.cta-split__booking-icon {
	position: absolute;
	top: 1.75rem;
	left: 1.75rem;
	width: 3rem; height: 3rem;
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.22);
	backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
}
.cta-split__booking-icon svg { width: 1.5rem; height: 1.5rem; }
.cta-split__booking-glow {
	position: absolute; top: -20%; left: -10%;
	width: 220px; height: 220px; border-radius: 50%;
	background: rgba(255,255,255,.18);
	filter: blur(6px);
	pointer-events: none;
}
.cta-split__booking-title { font-size: 1.375rem; font-weight: 900; position: relative; z-index: 1; }
.cta-split__booking-desc  { font-size: .95rem; opacity: .92; line-height: 1.7; position: relative; z-index: 1; max-width: 34ch; }
.cta-split__booking-btn {
	align-self: flex-start;
	position: relative; z-index: 1;
	background: #fff;
	color: var(--homa-green);
	font-weight: 800;
	font-size: .9rem;
	padding: .75rem 1.5rem;
	border-radius: var(--radius-lg);
	margin-top: .5rem;
	display: inline-block;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cta-split__booking-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Right: lead-magnet form panel ── */
.cta-split__lead {
	background: #fff;
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cta-split__lead-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.cta-split__lead-title { font-size: 1.125rem; font-weight: 800; color: var(--homa-green); margin-bottom: .35rem; }
.cta-split__lead-desc  { font-size: .875rem; color: var(--gray-500); }
.cta-split__lead-icon {
	flex-shrink: 0;
	width: 3rem; height: 3rem;
	border-radius: var(--radius-lg);
	background: var(--homa-green);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.cta-split__lead-icon svg { width: 1.35rem; height: 1.35rem; }
.cta-split__lead-fields { display: flex; flex-direction: column; gap: .75rem; }
.cta-split__lead-fields input {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	font-family: inherit;
	font-size: .9rem;
	background: var(--gray-50);
	transition: border-color .15s;
}
.cta-split__lead-fields input:focus { border-color: var(--homa-green); outline: none; background: #fff; }
.cta-split__lead-btn {
	width: 100%;
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .9rem 1.5rem;
	border-radius: var(--radius-lg);
	font-weight: 800;
	font-size: .95rem;
	color: #fff;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cta-split__lead-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta-split__lead-btn svg { width: 1.1rem; height: 1.1rem; }
.cta-split__lead-note { font-size: .75rem; color: var(--gray-400); text-align: center; }


/* ═══════════════════════════════════════════════════════
   PRODUCT CARD — unified base structure (3 types)
   Per-type colors/sizes are injected via homa_card_design_css()
═══════════════════════════════════════════════════════ */
.product-card { display: flex; flex-direction: column; height: 100%; background: #fff; transition: transform .2s ease; position: relative; }
.product-card:hover { transform: translateY(-.4rem); }
.product-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.product-card__media { position: relative; background: var(--gray-100); flex-shrink: 0; }
.product-card__memphis { width: 100%; height: 100%; }
.product-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__meta { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--gray-600); flex: 1; }
.product-card__footer { display: flex; justify-content: space-between; align-items: center; }
.product-card__price-wrap { display: flex; flex-direction: column; gap: 2px; }
.product-card__price-original { font-size: .75rem; color: var(--gray-400); text-decoration: line-through; }
.product-card__actions { padding: 0 1rem 1rem; }
.product-card__add-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.product-card__badge { position: absolute; top: .6rem; border-radius: var(--radius-lg); padding: .25rem .7rem; font-size: .7rem; font-weight: 800; }
.product-card__badge--featured { right: .6rem; }
.product-card__badge--discount { left: .6rem; }

/* ── Type: standard (vertical) ── */
.product-card--standard .product-card__media { height: 10rem; }
.product-card--standard .product-card__body { padding: 1rem; }
.product-card--standard .product-card__title { font-size: 1.125rem; font-weight: 700; }
.product-card--standard .product-card__footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--gray-200); }

/* ── Type: stretched (wide, ~1:3, larger) ── */
.product-card--stretched .product-card__link { flex-direction: row; }
.product-card--stretched .product-card__media { width: 34%; flex-shrink: 0; }
.product-card--stretched .product-card__body { padding: 1.75rem; justify-content: center; }
.product-card--stretched .product-card__title { font-size: 1.375rem; font-weight: 800; }
.product-card--stretched .product-card__meta { flex-direction: row; gap: 1.5rem; font-size: 1rem; }
.product-card--stretched .product-card__footer { margin-top: 1.25rem; }
.product-card--stretched .product-card__actions { padding: 1.75rem; padding-top: 0; }
@media (max-width: 640px) {
	.product-card--stretched .product-card__link { flex-direction: column; }
	.product-card--stretched .product-card__media { width: 100%; height: 10rem; }
}

/* ── Type: thumbnail (compact landscape, no actions/badges) ── */
.product-card--thumbnail .product-card__link { flex-direction: row; }
.product-card--thumbnail .product-card__media { width: 36%; aspect-ratio: 16/9; height: auto; }
.product-card--thumbnail .product-card__body { padding: .625rem .75rem; gap: .25rem; }
.product-card--thumbnail .product-card__title { font-weight: 700; line-height: 1.3; }
.product-card--thumbnail .product-card__instructor { font-size: .7rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card--thumbnail .product-card__footer { margin-top: auto; }
.product-card--thumbnail .product-card__rating { font-size: .65rem; }


/* =========================================================
   WEBINAR PROMO PAGE (وبینار معرفی محصول) — single-webinar.php
   ========================================================= */

/* ── Two-column layout: main content (right) + CTA sidebar (left) ── */
.webinar-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}
@media (min-width: 1024px) {
	.webinar-layout { grid-template-columns: 1fr 340px; align-items: start; }
}

.webinar-main {
	display: flex;
	flex-direction: column;
	gap: 2.75rem;
	min-width: 0;
	padding: 1.75rem;
}
@media (min-width: 768px) { .webinar-main { padding: 2.5rem; } }
.webinar-section { margin: 0; }

/* ── Content blocks: heading / text / image, in whatever order was chosen ── */
.webinar-block-heading-lg { font-size: 1.75rem; font-weight: 800; color: var(--homa-green); line-height: 1.3; }
.webinar-block-heading-sm { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); line-height: 1.4; }
.webinar-block-text { font-size: 1rem; color: var(--gray-700); line-height: 1.9; }
.webinar-block-text p { margin: 0 0 1rem; }
.webinar-block-text p:last-child { margin-bottom: 0; }
.webinar-block-image { border-radius: var(--radius-xl); overflow: hidden; line-height: 0; }
.webinar-block-image img { width: 100%; height: auto; display: block; }

/* ── Features: icon + phrase (3–5 items) ── */
.webinar-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}
@media (min-width: 640px) { .webinar-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .webinar-features__grid { grid-template-columns: repeat(3, 1fr); } }
.webinar-feature-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
}
.webinar-feature-item__icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--homa-mint);
	color: var(--homa-green);
}
.webinar-feature-item__icon svg { width: 1.25rem; height: 1.25rem; }
.webinar-feature-item__phrase { font-size: .9rem; color: var(--gray-700); }

/* ── Sticky CTA + price sidebar ── */
.webinar-cta-sidebar { position: static; }
@media (min-width: 1024px) { .webinar-cta-sidebar { position: sticky; top: 6rem; } }
.webinar-cta-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; text-align: center; position: relative; }
.webinar-cta-card__featured-badge { position: absolute; top: .75rem; left: .75rem; border: 1px solid #fff; }
.webinar-cta-card__price-row { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding-bottom: 1rem; }
.webinar-cta-card__price { font-size: 1.75rem; font-weight: 800; color: var(--homa-green); }
.webinar-cta-card__price--free { color: var(--homa-coral); }
.webinar-cta-card__discount { display: inline-block; }
.webinar-cta-card__title { font-size: 1.25rem; font-weight: 800; color: var(--homa-green); margin: 0; }
.webinar-cta-card__desc { font-size: .9rem; color: var(--gray-600); margin: 0; line-height: 1.8; }
.webinar-cta-card__btn { margin-top: .25rem; }

/* On mobile, the price/CTA card is more important than a long scroll of
   content, so it jumps above the main column instead of sitting after it. */
@media (max-width: 1023px) {
	.webinar-cta-sidebar { order: -1; }
}

/* ── Testimonial color themes (so cards aren't all identical) ── */
.testimonial-card--theme-green  { background: var(--homa-green); color: #fff; }
.testimonial-card--theme-green  .testimonial-card__text { color: #fff; }
.testimonial-card--theme-green  .testimonial-card__author strong { color: #fff; }
.testimonial-card--theme-green  .testimonial-card__author span { color: rgba(255,255,255,.7); }
.testimonial-card--theme-green  .testimonial-card__quote-icon { color: rgba(255,255,255,.25); }

.testimonial-card--theme-mint   { background: var(--homa-mint); }
.testimonial-card--theme-mint   .testimonial-card__quote-icon { color: rgba(13,43,41,.15); }

.testimonial-card--theme-coral  { background: var(--homa-coral); color: #fff; }
.testimonial-card--theme-coral  .testimonial-card__text { color: #fff; }
.testimonial-card--theme-coral  .testimonial-card__author strong { color: #fff; }
.testimonial-card--theme-coral  .testimonial-card__author span { color: rgba(255,255,255,.8); }
.testimonial-card--theme-coral  .testimonial-card__quote-icon { color: rgba(255,255,255,.3); }

.testimonial-card--theme-peach  { background: var(--homa-peach); }
.testimonial-card--theme-peach  .testimonial-card__quote-icon { color: rgba(13,43,41,.15); }