/**
 * tti-all-courses.css — page-scoped CSS for /all-courses (page 3426).
 *
 * Loaded ONLY on the Courses catalog page via conditional enqueue in
 * themes/droipbase/functions.php (gated on is_page(3426) || is_page('all-courses')).
 *
 * Architecture rule: per-page CSS/JS lives in its own file. Do NOT merge
 * page-specific overrides into tti-home.css, theme stylesheets, or any
 * other shared file — those are loaded site-wide and a stray selector
 * collision will leak. See feedback_per_page_assets memory.
 */

/* ================================================================================
   Scope: all polish below `@media (max-width: 991px)` (tablet + phone).
   Every selector anchored under `[data-droip="dpeasvry"]` (the page section)
   so nothing leaks to any other page that happens to share .dp4bmbnv et al.

   Card DOM (Droip Collection, post-3426):
     .dp8wgcmd                — card root
       .dpfrr0zv              — inner flex column
         img.dpungi97         — thumbnail
         .dple9lkm            — content body
           .dppjx1jv          — content stack
             .dpxmqtqh > .dpvpknb5  — rating row
             .dphfrz2q                — by-author row (p"by" + p.author)
             .dp5j40n9 > a.dpgqzw2v   — title link
           div > div > span.dpe6rpm1  — price
           .dpcttfmg > button.dpmpv3cf — CTA "Add to cart"
   ================================================================================ */

@media (max-width: 991px) {

	/* -----------------------------------------------------------------
	   (a) Strip Droip's per-page transform / inset that pushes the
	       catalog 70–148px to the LEFT of the viewport at <=991px.
	       Without this, cards clip off the left edge.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"],
	html body section[data-droip="dpeasvry"] [data-droip="dpfzejsf"],
	html body section[data-droip="dpeasvry"] [droip_collection_random_id="dpfzejsf"],
	html body section[data-droip="dpeasvry"] [data-droip="dpjulf5i"],
	html body section[data-droip="dpeasvry"] [droip-collection="wrapper"] {
		transform: none !important;
		left: auto !important;
		right: auto !important;
		inset: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* -----------------------------------------------------------------
	   (b) Page-edge gutter: symmetric horizontal padding on the section.
	       clamp scales from 16px (phone) to 36px (large tablet).
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] {
		padding-left:  clamp(16px, 4vw, 36px) !important;
		padding-right: clamp(16px, 4vw, 36px) !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: clip !important;
	}

	/* -----------------------------------------------------------------
	   (c) Items wrapper: 2-col grid w/ equal-height rows + symmetric gaps.
	       grid-auto-rows:1fr forces every row to match the tallest row,
	       which paired with card flex-column below gives uniform cards.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] [data-droip="dpjulf5i"].dp4bmbnv,
	html body section[data-droip="dpeasvry"] [droip-collection="wrapper"].dp4bmbnv {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-rows: auto !important;
		grid-auto-rows: 1fr !important;
		grid-template-areas: none !important;
		row-gap: clamp(16px, 3vw, 28px) !important;
		column-gap: clamp(12px, 2.5vw, 24px) !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	/* -----------------------------------------------------------------
	   (d) Card root: white surface, rounded, soft shadow, full-height
	       flex column. overflow:hidden so the image is clipped by
	       border-radius. Items shrink to grid track width.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] [data-droip="dpjulf5i"].dp4bmbnv > .dp8wgcmd,
	html body section[data-droip="dpeasvry"] [droip-collection="wrapper"].dp4bmbnv > .dp8wgcmd {
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		background: #ffffff !important;
		border: 1px solid #e8e1d6 !important;
		border-radius: 14px !important;
		overflow: hidden !important;
		box-shadow: 0 2px 10px rgba(14, 10, 8, 0.04) !important;
		transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out !important;
	}

	/* Card inner flex column fills root height; image stays at top,
	   content body grows to fill remaining space. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd > .dpfrr0zv {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		height: 100% !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* -----------------------------------------------------------------
	   (e) Image: lock to 16:10 aspect, cover. Full bleed at card top.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dpfrr0zv > div:first-child {
		width: 100% !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd img.dpungi97 {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10 !important;
		object-fit: cover !important;
		object-position: center !important;
		margin: 0 !important;
		border: 0 !important;
	}

	/* -----------------------------------------------------------------
	   (f) Content body: flex column that grows; symmetric padding scales
	       with viewport; price/CTA pinned to bottom via auto top margin.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dple9lkm {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		padding: clamp(14px, 2.6vw, 24px) !important;
		gap: clamp(8px, 1.4vw, 14px) !important;
		row-gap: clamp(8px, 1.4vw, 14px) !important;
	}

	/* Inner content stack also flex-column, fills body so we can push
	   the CTA row to the bottom via margin-top:auto on price/CTA. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dppjx1jv {
		display: flex !important;
		flex-direction: column !important;
		gap: clamp(6px, 1vw, 10px) !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto !important;
	}

	/* -----------------------------------------------------------------
	   (g) Title: clamp to 2 lines, brand typography.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 a.dpgqzw2v,
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 > a {
		display: block !important;
		text-decoration: none !important;
		width: 100% !important;
		height: auto !important;
		color: inherit !important;
	}
	/* Actual title element: Droip emits <h2 class="dplsxkph"> inside the link.
	   The <h2> has its own Droip-defined font-size (22px / weight 600), so we
	   target it directly — the anchor's font-size does not cascade into h2. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 h2,
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 h2.dplsxkph,
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dp5j40n9 a h2 {
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		font-size: clamp(9.5px, 1.07vw, 11.5px) !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		color: #1a0608 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		word-break: break-word !important;
	}

	/* Rating row: tighten height and align stars to the left. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dpxmqtqh,
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dpvpknb5 {
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		min-height: 18px !important;
	}

	/* "by Author" row: inline, muted, single-line with ellipsis truncation. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dphfrz2q {
		display: flex !important;
		flex-direction: row !important;
		align-items: baseline !important;
		gap: 4px !important;
		flex-wrap: nowrap !important;
		overflow: hidden !important;
		font-size: clamp(11px, 1.2vw, 12.5px) !important;
		color: #6b5a4f !important;
		letter-spacing: 0.02em !important;
		margin: 0 !important;
		max-width: 100% !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dphfrz2q p {
		margin: 0 !important;
		padding: 0 !important;
		font-size: inherit !important;
		line-height: 1.4 !important;
		color: inherit !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		min-width: 0 !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dphfrz2q p:first-child {
		flex: 0 0 auto !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dphfrz2q p:last-child {
		flex: 1 1 auto !important;
	}

	/* -----------------------------------------------------------------
	   (h) Price + CTA row: pinned to card bottom for uniformity.
	       The "div > div > span.dpe6rpm1" is the price block.
	   ----------------------------------------------------------------- */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dple9lkm > div:nth-last-child(2) {
		margin-top: auto !important;
		font-size: clamp(15px, 1.7vw, 18px) !important;
		font-weight: 800 !important;
		color: #7a0012 !important;
		line-height: 1.2 !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dpe6rpm1 {
		font-size: inherit !important;
		font-weight: inherit !important;
		color: inherit !important;
	}

	/* CTA row + button. */
	html body section[data-droip="dpeasvry"] .dp8wgcmd .dpcttfmg {
		display: flex !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 auto !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd button.dpmpv3cf {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 40px !important;
		padding: 10px 16px !important;
		background: #7a0012 !important;
		background-color: #7a0012 !important;
		background-image: none !important;
		border: 1px solid #7a0012 !important;
		border-radius: 999px !important;
		color: #ffffff !important;
		font-weight: 700 !important;
		font-size: clamp(12.5px, 1.3vw, 14px) !important;
		letter-spacing: 0.02em !important;
		text-transform: none !important;
		cursor: pointer !important;
		transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd button.dpmpv3cf span {
		color: inherit !important;
		font: inherit !important;
		letter-spacing: inherit !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		max-width: 100% !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd button.dpmpv3cf textarea {
		display: none !important;
	}

	/* -----------------------------------------------------------------
	   (i) Hover lift (only when device supports hover — phones skip).
	   ----------------------------------------------------------------- */
	@media (hover: hover) {
		html body section[data-droip="dpeasvry"] .dp8wgcmd:hover {
			transform: translateY(-3px) !important;
			box-shadow: 0 10px 26px rgba(14, 10, 8, 0.12) !important;
			border-color: #d8cdb8 !important;
		}
		html body section[data-droip="dpeasvry"] .dp8wgcmd:hover button.dpmpv3cf {
			background-color: #5c000d !important;
			border-color: #5c000d !important;
		}
		html body section[data-droip="dpeasvry"] .dp8wgcmd button.dpmpv3cf:hover {
			background-color: #5c000d !important;
			border-color: #5c000d !important;
		}
	}

	/* Focus ring for keyboard nav (a11y). */
	html body section[data-droip="dpeasvry"] .dp8wgcmd a:focus-visible,
	html body section[data-droip="dpeasvry"] .dp8wgcmd button:focus-visible {
		outline: 2px solid #7a0012 !important;
		outline-offset: 2px !important;
	}
}

/* Respect users who opt out of motion. */
@media (prefers-reduced-motion: reduce) {
	html body section[data-droip="dpeasvry"] .dp8wgcmd,
	html body section[data-droip="dpeasvry"] .dp8wgcmd * {
		transition: none !important;
		animation: none !important;
	}
	html body section[data-droip="dpeasvry"] .dp8wgcmd:hover {
		transform: none !important;
	}
}