/*
Theme Name:   WoodMart Child
Theme URI:    https://example.com/
Description:  WoodMart child theme — custom Tutor LMS course card, archive hero, hidden author.
Author:       You
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart-child
*/

/* =========================================================
   Design tokens — exact values from the approved card design.
   Edit here in one place. (Kept as fixed brand values so the
   card renders pixel-identical, not pulled from theme/kit.)
   ========================================================= */
.wd-tutor-card,
.wd-course-hero,
.wd-sec-head {
	/* Wired to Elementor Global Colors (kit-55); design hex = fallback. */
	--wdtc-accent: var(--e-global-color-primary, #b8954f);
	--wdtc-ink:    var(--e-global-color-secondary, #3a2c1e);
	--wdtc-bg:     var(--e-global-color-white, #fff);
	--wdtc-font:   "El Messiri", serif;

	--wdtc-radius:     16px;
	--wdtc-btn-radius: 11px;

	--wdtc-border:  1px solid rgba(184, 149, 79, 0.1);
	--wdtc-shadow:  0 8px 24px rgba(58, 44, 30, 0.07);
	--wdtc-badge-bg: rgba(255, 255, 255, 0.94);
	--wdtc-hero-bg: var(--e-global-color-light, #faf6ef);
}

/* ---------------- Course card ---------------- */
.wd-tutor-card {
	height: 100%;
	background: var(--wdtc-bg);
	border: var(--wdtc-border);
	border-radius: var(--wdtc-radius);
	box-shadow: var(--wdtc-shadow);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wd-tutor-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(58, 44, 30, 0.12);
}

.wd-tutor-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.wd-tutor-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wd-tutor-card:hover .wd-tutor-card__media img {
	transform: scale(1.04);
}

/* ---------------- Card auto-slide gallery ----------------
   Pure CSS crossfade — no library. Every slide runs the same
   keyframes; a NEGATIVE per-slide delay (--gh-i) offsets each one
   into a different part of the cycle, so they are all mid-animation
   from the first frame (no start-up flash). Cycle length scales with
   the slide count (--gh-n) at ~3s of screen time per image.
   Only the keyframe percentages depend on the count, hence the
   [data-count] variants below. */
.wd-tutor-card__media--gallery .wd-tutor-card__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation-duration: calc(var(--gh-n, 3) * 3s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: calc(var(--gh-i, 0) * -3s);
	/* Paused until the card scrolls into view (see card-gallery.js). */
	animation-play-state: paused;
}

/* First slide stays visible while paused / before JS runs. */
.wd-tutor-card__media--gallery .wd-tutor-card__slide:first-child { opacity: 1; }

.wd-tutor-card__media--gallery.is-playing .wd-tutor-card__slide {
	animation-play-state: running;
}

.wd-tutor-card__media--gallery[data-count="2"] .wd-tutor-card__slide { animation-name: gh-card-fade-2; }
.wd-tutor-card__media--gallery[data-count="3"] .wd-tutor-card__slide { animation-name: gh-card-fade-3; }
.wd-tutor-card__media--gallery[data-count="4"] .wd-tutor-card__slide { animation-name: gh-card-fade-4; }
.wd-tutor-card__media--gallery[data-count="5"] .wd-tutor-card__slide { animation-name: gh-card-fade-5; }

/* Visible for one slot, hidden for the rest, fading back in over the
   final 5% so the loop closes seamlessly. */
@keyframes gh-card-fade-2 { 0%, 45% { opacity: 1; } 55%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gh-card-fade-3 { 0%, 28% { opacity: 1; } 38%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gh-card-fade-4 { 0%, 20% { opacity: 1; } 30%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gh-card-fade-5 { 0%, 15% { opacity: 1; } 25%, 95% { opacity: 0; } 100% { opacity: 1; } }

/* Hover zoom needs no extra rule — the existing
   `.wd-tutor-card__media img` selector already covers the slides. */

/* Rotation is decorative: with reduced motion, show the first image only. */
@media (prefers-reduced-motion: reduce) {
	.wd-tutor-card__media--gallery .wd-tutor-card__slide,
	.wd-tutor-card__media--gallery.is-playing .wd-tutor-card__slide {
		animation: none;
		opacity: 0;
	}
	.wd-tutor-card__media--gallery .wd-tutor-card__slide:first-child { opacity: 1; }
}

.wd-tutor-card__badge {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-end: 9px;
	background: var(--wdtc-badge-bg);
	color: var(--wdtc-accent);
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
}

.wd-tutor-card__body {
	padding: 14px 15px 16px;
}

.wd-tutor-card__title {
	font-family: var(--wdtc-font);
	/* Fluid: ~13px on small phones (2 cards per row) → 15px from tablet up. */
	font-size: clamp(13px, 3vw, 15px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wdtc-ink);
	margin: 0 0 7px;
	/* Long titles wrap instead of blowing out the narrow mobile card. */
	overflow-wrap: anywhere;
}

/* Desktop: bigger title. Element+class (h3.…) plus !important to beat
   the Elementor Kit's own h3 rule, which otherwise wins on specificity. */
@media (min-width: 1025px) {
	h3.wd-tutor-card__title {
		font-size: 20px !important;
	}
}

.wd-tutor-card__title a {
	color: inherit;
	text-decoration: none;
}

.wd-tutor-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.wd-tutor-card__price {
	color: var(--wdtc-accent);
	font-weight: 700;
	font-size: 15px;
}

.wd-tutor-card__add {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	line-height: 1;
	text-decoration: none;
	font-size: 20px;
	color: var(--wdtc-bg);
	background: var(--wdtc-ink);
	border-radius: var(--wdtc-btn-radius);
	transition: background 0.2s ease;
}

.wd-tutor-card__add:hover,
.wd-tutor-card__add:focus {
	background: var(--wdtc-accent);
	color: var(--wdtc-bg);
}

/* Native WooCommerce/Tutor add-to-cart button, shaped to the compact "+".
   Keeps the native <a> (add_to_cart_button, data-product_id, ajax, nonce). */
.wd-tutor-card__cart { flex-shrink: 0; line-height: 0; }
.wd-tutor-card__cart a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	min-width: 0 !important;
	height: 38px;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: var(--wdtc-btn-radius);
	background: var(--wdtc-ink) !important;
	color: var(--wdtc-bg) !important;
	font-size: 0 !important;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease;
}
.wd-tutor-card__cart a > * { display: none !important; }
.wd-tutor-card__cart a::after { content: "+"; font-size: 20px; }
.wd-tutor-card__cart a:hover,
.wd-tutor-card__cart a:focus { background: var(--wdtc-accent) !important; }

/* ---------------- Archive hero (right-aligned, no band) ---------------- */
.wd-course-hero {
	text-align: start;
	padding: clamp(20px, 4vw, 40px) 0 clamp(6px, 1.5vw, 12px);
}

.wd-course-hero__title {
	font-family: var(--wdtc-font);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 34px);
	color: var(--wdtc-ink);
	margin: 0;
}

.wd-course-hero__divider {
	width: 46px;
	height: 2px;
	background: var(--wdtc-accent);
	margin: 14px 0 0;
	margin-inline-start: 0;
}

/* ---------------- Section head (homepage) ---------------- */
.wd-sec-head {
	margin-bottom: 26px;
}

.wd-sec-head__title {
	font-family: var(--wdtc-font);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 28px);
	color: var(--wdtc-ink);
	margin: 0 0 4px;
}

.wd-sec-head__divider {
	width: 46px;
	height: 2px;
	background: var(--wdtc-accent);
	/* Sits at the start edge (right in RTL). */
	margin-inline-start: 0;
}

/* ---------------- Elementor Kit shield ----------------
   Keep the Elementor Kit globally (its --e-global-* variables stay
   available for header/footer/Elementor pages), but stop the Kit's
   Theme Style from overriding Tutor's own buttons + headings.
   Scoped to Tutor wrappers so only Tutor UI is protected. */
:is(.tutor-wrap, .tutor-dashboard, [class*="tutor-course-content"], [class*="tutor-course-details"]) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wd-title-font, "El Messiri", serif) !important;
}

/* Links + buttons: drop the kit's font bleed (color left to Tutor). */
:is(.tutor-wrap, .tutor-dashboard, [class*="tutor-course-content"], [class*="tutor-course-details"]) :is(a, .tutor-btn) {
	font-family: var(--wd-text-font, inherit) !important;
}

/* ---------------- Course archive grid ----------------
   Auto-fit + centered so few courses don't pin to one side,
   and it stays responsive (2 on mobile → up to ~4 on desktop).
   Card width capped so single items don't stretch huge. */
body.post-type-archive-courses .tutor-course-list.tutor-grid,
body.tax-course-category .tutor-course-list.tutor-grid,
body.tax-course-tag .tutor-course-list.tutor-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: two cards per row */
	gap: clamp(12px, 3vw, 24px);
	margin-top: 26px;           /* space below the page title */
}

@media (min-width: 600px) {
	body.post-type-archive-courses .tutor-course-list.tutor-grid,
	body.tax-course-category .tutor-course-list.tutor-grid,
	body.tax-course-tag .tutor-course-list.tutor-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
		justify-content: center;
	}
}

/* Tutor's full-width column ships a gutter that double-pads our own
   containers — drop it so content lines up with the page edge. */
.tutor-col-12 {
	padding-inline: 0 !important;
}

/* ---------------- Homepage grid (shortcode) ---------------- */
.wd-courses-section .tutor-course-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(var(--wd-cols, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.wd-courses-section .tutor-course-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.wd-courses-section .tutor-course-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ---------------- Mobile density (2 cards per row) ----------------
   Narrower cards → tighter padding, smaller price/badge so the
   title + price + "+" row still breathes at 360-400px viewports. */
@media (max-width: 575px) {
	.wd-tutor-card__body {
		padding: 11px 12px 13px;
	}

	.wd-tutor-card__price {
		font-size: 14px;
	}

	.wd-tutor-card__badge {
		font-size: 9.5px;
		padding: 3px 7px;
		inset-block-start: 7px;
		inset-inline-end: 7px;
	}
}

/* ---------------------------------------------------------------
   Quantity — one per order, site-wide.
   PHP marks every product "sold individually", so core templates
   already drop the box. This only mops up widgets that render
   their own markup regardless (quick view, sticky add-to-cart).
   --------------------------------------------------------------- */
.woocommerce div.product form.cart .quantity,
.woocommerce-cart table.cart td.product-quantity .quantity,
.wd-sticky-btn-cart .quantity,
.quick-shop-form .quantity {
	display: none !important;
}