/**
 * Portfolio Grid Card — uniform card styling for wd_portfolio output.
 *
 * Critical lesson learned the hard way:
 * WoodMart's grid (.wd-grid-f-col) creates inter-card spacing via
 *   .wd-grid-f-col > .wd-col {
 *       padding-inline: calc(var(--wd-gap) / 2);
 *       margin-bottom: var(--wd-gap);
 *   }
 * i.e. each article (.portfolio-entry IS the .wd-col) has horizontal
 * padding that combines with siblings to form the visual gap, plus a
 * negative margin on the container that cancels the outermost halves.
 *
 * Therefore: NEVER zero padding/margin on .portfolio-entry — doing so
 * collapses the gap to zero and cards stick together (this happened on
 * the archive page in an earlier revision).
 *
 * Decorate the INNER .entry-header element instead. The outer article
 * keeps its WoodMart-managed grid spacing; the header is the card
 * surface that gets the background / radius / shadow.
 *
 * Override these CSS variables in 外觀 → 自訂 → 附加的 CSS to retune:
 *   --wme-pg-card-bg
 *   --wme-pg-card-radius
 *   --wme-pg-card-shadow
 *   --wme-pg-badge-bg
 *   --wme-pg-badge-color
 *   --wme-pg-info-min-height
 *   --wme-pg-thumb-ratio
 *
 * Title: NOT touched on purpose. Theme + Customizer set color/size
 * globally and cards must inherit so they stay consistent.
 */

.wd-projects {
	--wme-pg-card-bg: #fff;
	--wme-pg-card-radius: 14px;
	--wme-pg-card-shadow: 0 4px 18px rgba(0, 0, 0, .06);
	--wme-pg-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, .1);
	--wme-pg-badge-bg: #A3262A;
	--wme-pg-badge-color: #fff;
	--wme-pg-badge-radius: 999px;
	--wme-pg-info-padding: 16px 18px 20px;
	--wme-pg-info-min-height: 96px;
	--wme-pg-thumb-ratio: 350 / 230;
}

/* ─── Card surface ────────────────────────────────────────────
   .entry-header IS the visual card. Article (.portfolio-entry)
   stays untouched so WoodMart's .wd-col padding can keep doing
   its inter-card spacing job. */
.wd-projects .portfolio-entry .entry-header,
.wd-projects .wd-project .entry-header {
	background: var(--wme-pg-card-bg);
	border-radius: var(--wme-pg-card-radius);
	overflow: hidden;
	box-shadow: var(--wme-pg-card-shadow);
	transition: box-shadow .25s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* WoodMart's own .wd-project .entry-header already sets
	   border-radius via --wd-brd-radius; we override to our value. */
}

.wd-projects .portfolio-entry:hover .entry-header,
.wd-projects .wd-project:hover .entry-header {
	box-shadow: var(--wme-pg-card-shadow-hover);
}

/* ─── Thumbnail — uniform aspect ratio + edge-to-edge ────────
   With the card surface on .entry-header and figure being a direct
   child of that, figure naturally fills width: 100% (flex column
   align-items: stretch). aspect-ratio fixes the height so all
   cards in a row are visually identical regardless of source image
   orientation (WoodMart's 350x230 size is registered crop=false). */
.wd-projects .portfolio-entry .entry-thumbnail,
.wd-projects .wd-project .entry-thumbnail,
.wd-projects figure.entry-thumbnail {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	position: relative;
	line-height: 0;
	aspect-ratio: var(--wme-pg-thumb-ratio);
	border-radius: 0 !important;  /* outer card already has radius+overflow:hidden */
}

/* a.portfolio-thumbnail receives `margin-block: 20px` from a CORS-protected
   stylesheet (verified via DevTools — couldn't read the rule, but computed
   margin-block resolves to 20px). That margin pushes the image 20px below
   the figure's top edge, creating the white strip the user kept seeing.
   !important on margin is the only reliable override. */
.wd-projects .portfolio-thumbnail,
.wd-projects a.portfolio-thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.wd-projects .wd-project .entry-thumbnail img,
.wd-projects .portfolio-thumbnail img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	margin: 0;
	padding: 0;
	border: 0;
	transition: transform .4s ease;
}

.wd-projects .portfolio-entry:hover .portfolio-thumbnail img {
	transform: scale(1.04);
}

/* ─── Hover action buttons (lightbox + share) ─────────────────
   On the package page (Elementor-embedded wd_portfolio widget), a
   CORS-blocked stylesheet sets:
     - .wd-portfolio-btns { bottom: 53px; left: 305px; }   →
       this stretches the wrapper height to 180px (figure_height
       minus 53px), and with two flex-column children it gives
       each button 90px instead of the archive's 50px.
     - .wd-action-btn (each child) effectively gets 90px.
   Result: enlarge / share icons sit too low and offset right.

   We can't read the offending rule (CORS), so override directly.
   These values match the archive page where icons render correctly. */
.wd-projects .wd-portfolio-btns {
	top: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	left: auto !important;
	height: auto !important;
}

.wd-projects .wd-portfolio-btns .wd-action-btn,
.wd-projects .wd-portfolio-btns .portfolio-enlarge,
.wd-projects .wd-portfolio-btns .social-icons-wrapper {
	height: 50px !important;
	flex: 0 0 50px !important;
}

/* ─── Info area ───────────────────────────────────────────────
   WoodMart sets .wd-project .portfolio-info { padding: 20px }
   AFTER our CSS in cascade order, so we need !important to win.
   min-height + flex column → cards in same row align at bottom. */
.wd-projects .wd-project .portfolio-info,
.wd-projects .portfolio-entry .portfolio-info {
	padding: var(--wme-pg-info-padding) !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: var(--wme-pg-info-min-height);
}

/* ─── Category badges (red pill) ──────────────────────────────
   Clamp to a single visible row — some posts have 8 categories
   which would wrap and break alignment. */
.wd-projects .wrap-meta {
	display: flex;
	justify-content: center;
	margin-bottom: 0 !important;  /* override WoodMart's 10px */
}

.wd-projects .wd-project .proj-cats-list,
.wd-projects .proj-cats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	gap: 6px;
	max-width: 100%;
}

/* WoodMart adds ", " between badges via ::after — we use real
   pills, so suppress that separator. */
.wd-projects .proj-cats-list li:not(:last-child)::after {
	content: '' !important;
}

.wd-projects .proj-cats-list li {
	flex: 0 0 auto;
	display: inline-block;
	padding: 4px 14px;
	background: var(--wme-pg-badge-bg);
	color: var(--wme-pg-badge-color);
	border-radius: var(--wme-pg-badge-radius);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .5px;
	white-space: nowrap;
}

/* ─── Title — layout only, never colors / size / weight ─────── */
.wd-projects .wrap-title {
	margin-top: auto;
}

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.wd-projects {
		--wme-pg-info-min-height: 80px;
		--wme-pg-info-padding: 12px 14px 16px;
	}
}

/* ─── Carousel exception ─────────────────────────────────────
   .wd-carousel containers reuse .wd-grid utility classes but
   shouldn't get card backgrounds. */
.wd-carousel .portfolio-entry .entry-header,
.wd-carousel .wd-project .entry-header {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}