/**
 * projects.css — Birch Projects section
 *
 * Scope: card-grid responsive layout, stack-chip cluster, focus-visible rings
 * for project cards and service links. All colours, typography, spacing,
 * radius, and shadow are resolved from theme.json named tokens — no raw hex,
 * no new custom properties.
 *
 * Enqueued in tg_enqueue_assets() after tg-theme-patterns, file_exists guarded.
 * Config version: 0.1.0
 *
 * Token reference (all from theme.json):
 *   Colours : --wp--preset--color--{paper, paper-warm, ink, ink-soft, hairline,
 *             terracotta, terracotta-deep, terracotta-deeper}
 *   Radius  : --wp--custom--radius--{md, lg}
 *   Shadow  : --wp--custom--elevation--sm
 *   Spacing : --wp--preset--spacing--section, --wp--preset--spacing--gutter
 *   Fonts   : --wp--preset--font-family--{montserrat, inter}
 *   Sizes   : --wp--preset--font-size--{xs, sm, base, lg}
 *   Focus   : --wp--custom--focus-ring
 *
 * WCAG 2.2 AA notes:
 *   - Card link focus-visible ring uses --wp--custom--focus-ring (3px solid
 *     rgba(219,85,55,0.30)), matching the site focus standard.
 *   - Card grid: no horizontal scroll at any breakpoint (auto-fit + 100% max-width).
 *   - Chip cluster wraps; chips are non-interactive labels on this implementation
 *     (target-size rule n/a); if chips become links, padding 6px 10px applies.
 *   - No motion or hover transform introduced. No prefers-reduced-motion override needed.
 */

/* ==========================================================================
   1. Card grid — responsive, token-aligned
   ========================================================================== */

/**
 * .tg-project-grid
 *
 * Reflows automatically:
 *   360px  (mobile)  → 1 column  (minmax 280px floor fills the viewport)
 *   768px  (tablet)  → 2 columns
 *   1024px (desktop) → 3 columns
 *
 * No explicit breakpoints needed — repeat(auto-fit, minmax(280px, 1fr))
 * handles all three states natively.
 */
.tg-project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	/* Ensure no horizontal overflow at any viewport. */
	max-width: 100%;
}

/* ==========================================================================
   2. Project card
   ========================================================================== */

/**
 * .tg-project-card
 * Base card shell. Inline styles on the element carry background, border,
 * radius, shadow, and position — matching the service_detail.php idiom.
 * This rule adds the flex column layout so the chip cluster pushes to
 * the bottom of variable-height cards.
 */
.tg-project-card {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   3. Card link — focus-visible ring
   ========================================================================== */

/**
 * .tg-project-card__link
 * Title link inside each archive card. Focus ring matches the site standard
 * (--wp--custom--focus-ring). Outline-offset 3px clears the ink text.
 */
.tg-project-card__link:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring, 0 0 0 3px rgba(219, 85, 55, 0.30));
	border-radius: var(--wp--custom--radius--md, 10px);
	outline-offset: 3px;
}

/* ==========================================================================
   4. Stack-chip cluster — archive and detail
   ========================================================================== */

/**
 * .tg-project-card__chips / .tg-project__stack-chips
 * Flex row that wraps when chips overflow. Inline styles on the element
 * carry display:flex, flex-wrap:wrap, and gap — this rule is a fallback
 * for environments where inline styles are stripped.
 */
.tg-project-card__chips,
.tg-project__stack-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ==========================================================================
   5. Detail-page service links — focus-visible ring
   ========================================================================== */

/**
 * .tg-project__service-link
 * Related-service links on the detail page. Same focus-ring token as cards.
 */
.tg-project__service-link:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring, 0 0 0 3px rgba(219, 85, 55, 0.30));
	border-radius: var(--wp--custom--radius--md, 10px);
	outline-offset: 3px;
}

/* ==========================================================================
   6. Back link — focus-visible ring
   ========================================================================== */

/**
 * .tg-project__back
 * Back-to-projects link on the detail page.
 */
.tg-project__back:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring, 0 0 0 3px rgba(219, 85, 55, 0.30));
	border-radius: var(--wp--custom--radius--md, 10px);
	outline-offset: 3px;
}

/* ==========================================================================
   7. Responsive: constrain card images
   ========================================================================== */

/**
 * .tg-card__image
 * Card thumbnail images. max-width:100% prevents overflow in narrow
 * single-column layout; height:auto preserves aspect ratio.
 */
.tg-card__image {
	max-width: 100%;
	height: auto;
	display: block;
}

/**
 * .tg-project__featured-img
 * Featured image on detail pages. Same constraints.
 */
.tg-project__featured-img {
	max-width: 100%;
	height: auto;
	display: block;
}