/* ==========================================================================
   AIEME — WooCommerce single product "card" layout
   --------------------------------------------------------------------------
   Restyles the product hero (image + title + short description + price +
   Add to Cart) as a bordered card, using the site's existing Kadence color
   palette and font. Pairs with woocommerce/content-single-product.php,
   which adds the .aieme-product-card wrapper this file targets.

   Applies to every single WooCommerce/LearnDash course product page
   (enqueued only when is_product() is true — see
   inc/aieme-product-card-functions.php).
   ========================================================================== */

/* ---- Breakout wrapper: escape the theme's ~842px content column -------- */

.aieme-product-card-breakout {
	/* Classic full-bleed technique: stretch to the viewport width regardless
	   of how narrow the parent content column is (Kadence's site-wide
	   "Content Width" setting), then let .aieme-product-card re-center
	   itself inside that with its own, wider max-width below. This only
	   affects this card — it does not change the Content Width setting or
	   any other page. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0 1.5rem;
	box-sizing: border-box;
	margin-bottom: 2.5rem;
}

.aieme-product-card {
	/* Pull from Kadence's global color palette when available, with
	   sensible fallbacks so the card still looks right if a palette slot
	   is ever renamed or removed in the Customizer. */
	--aieme-navy: var(--global-palette2, #215387);
	--aieme-blue: var(--global-palette1, #2b6cb0);
	--aieme-text: var(--global-palette5, #4a5568);
	--aieme-card-bg: var(--global-palette8, #f7fafc);
	--aieme-font: var(--global-body-font-family, Georgia, "Times New Roman", Times, serif);
	/* Overall width cap for the wide card — adjust this one value to make
	   it wider/narrower. */
	--aieme-card-max-width: 1400px;

	display: grid;
	/* 2/5 (image) : 3/5 (content) column split, full card width. */
	grid-template-columns: 2fr 3fr;
	align-items: stretch;
	background: var(--aieme-card-bg);
	border: 1px solid var(--aieme-navy);
	border-radius: 16px;
	padding: 2.25rem 3rem;
	margin: 0 auto;
	width: 100%;
	max-width: var(--aieme-card-max-width);
	font-family: var(--aieme-font);
	box-sizing: border-box;
}

.aieme-product-card * {
	box-sizing: border-box;
}

/* ---- Left column: product image (2/5 width) ------------------------------ */

.aieme-product-card .images,
.aieme-product-card .woocommerce-product-gallery {
	grid-column: 1;
	/* Kadence's default WooCommerce CSS floats/percentage-widths this
	   element for its own (non-grid) two-column layout. Since this card
	   lays the columns out with CSS Grid instead, those old rules have to
	   be explicitly cancelled or the column renders far narrower than its
	   grid track (leaving a mystery gap and a tiny image). */
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	border-right: 2px solid var(--aieme-navy);
	padding-right: 3rem;
}

.aieme-product-card .woocommerce-product-gallery__wrapper,
.aieme-product-card .woocommerce-product-gallery__image,
.aieme-product-card .woocommerce-product-gallery__image a {
	margin: 0;
	width: 100% !important;
	max-width: 100% !important;
}

.aieme-product-card .woocommerce-product-gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: 280px !important;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Hide the PhotoSwipe zoom/magnifier icon — not part of this design */
.aieme-product-card .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ---- Right column: summary (3/5 width) ------------------------------------ */

.aieme-product-card .summary.entry-summary {
	grid-column: 2;
	/* Same override as the image column above — cancel Kadence's default
	   float/percentage-width WooCommerce summary styling so this box
	   actually fills its 3fr grid track instead of a legacy 48%. */
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title  title"
		"desc   desc"
		"price  cart";
	align-items: center;
	align-content: center;
	row-gap: 1.25rem;
	column-gap: 1.5rem;
	margin: 0 !important;
	padding-left: 3rem;
}

.aieme-product-card .product_title.entry-title {
	grid-area: title;
	margin: 0;
	font-family: var(--aieme-font);
	font-weight: 700;
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.25rem);
	line-height: 1.15;
	color: var(--aieme-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.aieme-product-card .woocommerce-product-details__short-description {
	grid-area: desc;
	font-family: var(--aieme-font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--aieme-text);
}

.aieme-product-card .woocommerce-product-details__short-description p {
	margin: 0;
}

.aieme-product-card .woocommerce-product-details__short-description p + p {
	margin-top: 0.75em;
}

.aieme-product-card p.price {
	grid-area: price;
	display: flex;
	align-items: center;
	margin: 0;
	min-height: 3rem;
	font-family: var(--aieme-font);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--aieme-navy);
}

.aieme-product-card p.price ins {
	text-decoration: none;
}

.aieme-product-card .cart {
	grid-area: cart;
	display: flex;
	align-items: center;
	justify-self: end;
	min-height: 3rem;
	margin: 0;
}

.aieme-product-card .single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	background: var(--aieme-blue);
	border: 1px solid var(--aieme-blue);
	color: #fff;
	font-family: var(--aieme-font);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.875rem 2.25rem;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aieme-product-card .single_add_to_cart_button.button:hover,
.aieme-product-card .single_add_to_cart_button.button:focus {
	background: var(--aieme-navy);
	border-color: var(--aieme-navy);
	color: #fff;
}

/* Hide star rating + SKU/category/tag meta row inside the card
   (per approved design — no meta line shown). */
.aieme-product-card .woocommerce-product-rating,
.aieme-product-card .product_meta {
	display: none;
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 782px) {
	.aieme-product-card {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 1.75rem;
		row-gap: 1.5rem;
	}

	.aieme-product-card .images,
	.aieme-product-card .woocommerce-product-gallery {
		grid-column: 1;
		border-right: none;
		border-bottom: 2px solid var(--aieme-navy);
		padding-right: 0;
		padding-bottom: 1.5rem;
	}

	.aieme-product-card .summary.entry-summary {
		grid-column: 1;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"desc"
			"price"
			"cart";
		justify-items: center;
		padding-left: 0;
	}

	.aieme-product-card p.price,
	.aieme-product-card .cart {
		justify-content: center;
		justify-self: center;
	}
}

@media (max-width: 480px) {
	.aieme-product-card {
		padding: 1.25rem;
	}

	.aieme-product-card .product_title.entry-title {
		font-size: 1.375rem;
	}

	.aieme-product-card p.price {
		font-size: 1.5rem;
	}

	.aieme-product-card .single_add_to_cart_button.button {
		width: 100%;
		text-align: center;
	}
}