/* ==========================================================================
   Resources — Guide cards (Tab 0: Guides & How-Tos)
   Split from style.css for decomposition — loaded by functions.php auto-enqueue
   ========================================================================== */

/* SHARED: Guide card base
   Pencil/Figma: cornerRadius 4, padding 32, shadow elev-1, bg #e5e7eb
   ======================================================================== */
.wp-block-neilkelly-resources .nk-resources__guide {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--neutral-200);
	padding: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--radius--default);
	position: relative;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--elev-1);
	transition: box-shadow 200ms ease;
}
/* Keyboard focus ring — inset (-2px) so it survives the row's overflow:hidden.
   The hover/focus signal is the image zoom below; no shadow change. */
.wp-block-neilkelly-resources .nk-resources__guide:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: -2px;
}

/* Guide tag — pill, absolute top-right */
.wp-block-neilkelly-resources .nk-resources__guide-tag {
	position: absolute;
	right: var(--wp--preset--spacing--6);
	top: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--full);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: var(--wp--custom--font-weight--bold);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
	line-height: var(--wp--custom--line-height--loose);
	z-index: 1;
}
.wp-block-neilkelly-resources .nk-resources__guide-tag--red {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-white);
}

/* Guide text block (title + desc grouped) */
.wp-block-neilkelly-resources .nk-resources__guide-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}
.wp-block-neilkelly-resources .nk-resources__guide-title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}
.wp-block-neilkelly-resources .nk-resources__guide-desc {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--xs);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

/* Guide image — Pencil: cornerRadius:8 on container */
.wp-block-neilkelly-resources .nk-resources__guide-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	min-height: 0;
}
.wp-block-neilkelly-resources .nk-resources__guide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

/* Cover image zooms on card hover / keyboard focus (clipped by the image
   wrapper's overflow:hidden). Zoom is the only hover signal — no shadow. */
.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide-image img,
.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide-image img,
.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide--c4-image img,
.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide--c4-image img {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

/* Guide arrow — Pencil: plain "→" text, left-aligned at bottom */
.wp-block-neilkelly-resources .nk-resources__guide-arrow {
	color: var(--wp--preset--color--brand-red);
	font-size: var(--wp--preset--font-size--md-base);
	line-height: var(--wp--custom--line-height--xs);
	flex-shrink: 0;
	margin-top: auto;
	/* Shrink to content width so the hover shift can't overflow the card. */
	align-self: flex-start;
	transition: transform 150ms ease;
}

/* Arrow nudges right on card hover (matches the services block). */
.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide-arrow,
.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide-arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-resources .nk-resources__guide-arrow,
	.wp-block-neilkelly-resources .nk-resources__guide-image img,
	.wp-block-neilkelly-resources .nk-resources__guide--c4-image img { transition: none; }
	.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide-arrow,
	.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide-arrow { transform: none; }
	.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide-image img,
	.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide-image img,
	.wp-block-neilkelly-resources .nk-resources__guide:hover .nk-resources__guide--c4-image img,
	.wp-block-neilkelly-resources .nk-resources__guide:focus-visible .nk-resources__guide--c4-image img { transform: none; }
}

/* Stats row (card 2) */
.wp-block-neilkelly-resources .nk-resources__guide-stats {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--3);
}
.wp-block-neilkelly-resources .nk-resources__guide-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wp-block-neilkelly-resources .nk-resources__guide-stat-val {
	font-size: var(--wp--preset--font-size--lg-xl);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
	text-align: center;
}
.wp-block-neilkelly-resources .nk-resources__guide-stat-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--label);
	letter-spacing: var(--wp--custom--letter-spacing--semi-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
	text-align: center;
}
.wp-block-neilkelly-resources .nk-resources__guide-stat-div {
	width: 1px;
	height: var(--wp--preset--spacing--12);
	background: var(--wp--preset--color--neutral-300);
	flex-shrink: 0;
}

/* Meta row (card 3) — date/time */
.wp-block-neilkelly-resources .nk-resources__guide-meta {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	padding-top: var(--wp--preset--spacing--1);
}
.wp-block-neilkelly-resources .nk-resources__guide-meta-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--xs);
	color: var(--wp--preset--color--ink-primary);
}
.wp-block-neilkelly-resources .nk-resources__guide-meta-item svg { flex-shrink: 0; color: var(--wp--preset--color--brand-red); }

/* Checklist (card 4) — Pencil: 12.8px padding-top + 11.2px parent gap = 24px */
.wp-block-neilkelly-resources .nk-resources__guide-checklist {
	list-style: none;
	padding: var(--wp--preset--spacing--6) 0 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}
.wp-block-neilkelly-resources .nk-resources__guide-check {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--xs);
	color: var(--wp--preset--color--ink-primary);
}
.wp-block-neilkelly-resources .nk-resources__guide-check-icon {
	width: var(--wp--preset--spacing--6);
	height: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--brand-red) 10%, transparent);
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--brand-red);
	justify-content: center;
	flex-shrink: 0;
}

/* TAB 0: Guides & How-Tos — asymmetric 2-row layout
   Figma/Pencil: Row 1 = 760+498 @420h, Row 2 = 414+846 @375h, col-gap 33
   ======================================================================== */
.wp-block-neilkelly-resources .nk-resources__grid--guides {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

/* Each row is its own grid with unique column proportions */
.wp-block-neilkelly-resources .nk-resources__guides-row {
	display: grid;
	column-gap: var(--wp--preset--spacing--8);
	overflow: hidden;
}
.wp-block-neilkelly-resources .nk-resources__guides-row:first-child {
	grid-template-columns: 760fr 498fr;
	grid-template-rows: 1fr;
	height: var(--wp--custom--components--resources--guide-top-row-height);
}
.wp-block-neilkelly-resources .nk-resources__guides-row:last-child {
	grid-template-columns: 414fr 846fr;
	grid-template-rows: 1fr;
	height: var(--wp--custom--components--resources--guide-btm-row-height);
}
.wp-block-neilkelly-resources .nk-resources__guides-row > * {
	min-width: 0;
	min-height: 0;
	height: 100%;
}

/* Row 1 cards: explicit 420px height (Figma: 760x420 + 500x420) */
.wp-block-neilkelly-resources .nk-resources__guide--c1,
.wp-block-neilkelly-resources .nk-resources__guide--c2 {
	height: var(--wp--custom--components--resources--guide-top-row-height);
	max-height: var(--wp--custom--components--resources--guide-top-row-height);
}

/* Row 2 cards: explicit 375px height (Figma: 420x375 + 850x375) */
.wp-block-neilkelly-resources .nk-resources__guide--c3,
.wp-block-neilkelly-resources .nk-resources__guide--c4 {
	height: var(--wp--custom--components--resources--guide-btm-row-height);
	max-height: var(--wp--custom--components--resources--guide-btm-row-height);
}

/* Card 1: Kitchen Guide — image fills remaining vertical space */
.wp-block-neilkelly-resources .nk-resources__guide--c1 .nk-resources__guide-text { margin-bottom: var(--wp--preset--spacing--4); }
.wp-block-neilkelly-resources .nk-resources__guide--c1 .nk-resources__guide-image {
	flex: 1 1 0%;
	min-height: 0;
}

/* Card 2: Cost Report — image fills remaining vertical space */
.wp-block-neilkelly-resources .nk-resources__guide--c2 {
	gap: var(--wp--preset--spacing--4);
}
.wp-block-neilkelly-resources .nk-resources__guide--c2 .nk-resources__guide-image {
	flex: 1 1 0%;
	min-height: 0;
}

/* Card 3: Workshop — fixed 124px image height per Pencil spec */
.wp-block-neilkelly-resources .nk-resources__guide--c3 .nk-resources__guide-image {
	height: var(--wp--custom--components--resources--workshop-img-height);
	flex-shrink: 0;
	min-height: 0;
}
.wp-block-neilkelly-resources .nk-resources__guide--c3 .nk-resources__guide-meta {
	padding-top: var(--wp--preset--spacing--1);
	margin-bottom: var(--wp--preset--spacing--3);
}
/* Card 3 tag — Figma: right 16px, top 21px (differs from default 24/24) */
.wp-block-neilkelly-resources .nk-resources__guide--c3 .nk-resources__guide-tag--red {
	right: var(--wp--preset--spacing--4);
	top: var(--wp--preset--spacing--5);
}

/* Card 4: Contractor — text left + image right (absolute positioned) */
.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-title { max-width: 65%; }
.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-desc { max-width: 65%; }
.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-checklist { max-width: 55%; }
.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-arrow {
	margin-top: auto;
}
.wp-block-neilkelly-resources .nk-resources__guide--c4-image {
	position: absolute;
	right: var(--wp--preset--spacing--6);
	top: 37%;
	width: 59.3%;
	bottom: var(--wp--preset--spacing--8);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}
.wp-block-neilkelly-resources .nk-resources__guide--c4-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

/* Responsive — Guides */
@media (max-width: 1023px) {
	/* Doubled wrapper specificity to override desktop fixed heights without !important */
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guides-row { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; overflow: visible; row-gap: var(--wp--preset--spacing--4); }
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guides-row > * { height: auto; max-height: none; }
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guide--c1,
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guide--c2,
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guide--c3,
	.wp-block-neilkelly-resources.nk-resources .nk-resources__guide--c4 { height: auto; max-height: none; }
	.wp-block-neilkelly-resources .nk-resources__guide--c4-image { position: static; width: 100%; height: auto; min-height: var(--wp--preset--spacing--24); margin-top: var(--wp--preset--spacing--4); }
	.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-arrow { position: static; margin-top: var(--wp--preset--spacing--3); }
	.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-title,
	.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-desc,
	.wp-block-neilkelly-resources .nk-resources__guide--c4 .nk-resources__guide-checklist { max-width: none; }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-resources .nk-resources__grid--guides { gap: var(--wp--preset--spacing--3); }
	.wp-block-neilkelly-resources .nk-resources__guide { padding: var(--wp--preset--spacing--4); }
	.wp-block-neilkelly-resources .nk-resources__guide-title { font-size: var(--wp--preset--font-size--base); }
	.wp-block-neilkelly-resources .nk-resources__guide-desc { font-size: var(--wp--preset--font-size--sm); line-height: var(--wp--custom--line-height--md-tight); }
	.wp-block-neilkelly-resources .nk-resources__guide-stat-val { font-size: var(--wp--preset--font-size--md); line-height: var(--wp--custom--line-height--lg); }
	.wp-block-neilkelly-resources .nk-resources__guide-stat-label { font-size: var(--wp--preset--font-size--xs); }
	.wp-block-neilkelly-resources .nk-resources__guide-arrow { font-size: var(--wp--preset--font-size--base); }
}