/* ==========================================================================
   Template-level chrome shared by non-block pages (archive, single, 404, search,
   blog). Enqueued globally because block CSS only loads on pages using the block.
   ========================================================================== */

/* Breadcrumbs (also used inside the page-hero block) */
.cfg-breadcrumbs { font-size: .85rem; color: var(--cfg-ink-soft); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.cfg-breadcrumbs a { color: var(--cfg-ink-soft); text-decoration: none; }
.cfg-breadcrumbs a:hover { color: var(--cfg-accent-dk); }
.cfg-breadcrumbs span[aria-current] { color: var(--cfg-ink); font-weight: 500; }

/* Compact page-hero used by archive.php / single.php */
.cfg-page-hero--compact { position: relative; background: var(--cfg-surface-2); border-bottom: 1px solid var(--cfg-line); padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.cfg-page-hero--compact h1 { margin: .1em 0 .3em; }

/* Prose (single project body, generic content) */
.cfg-prose { max-width: 760px; }
.cfg-prose h2, .cfg-prose h3 { margin-top: 1.6em; }
.cfg-prose img { border-radius: var(--cfg-radius-sm); }
.cfg-single__hero { margin: 0 0 2rem; }
.cfg-single__hero img { width: 100%; border-radius: var(--cfg-radius); box-shadow: var(--cfg-shadow-sm); }

/* Gallery (project archive grid) — image-dominant overlay cards, matches cfg/category-tiles */
.cfg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.cfg-gallery-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: clamp(320px, 32vw, 420px); border-radius: var(--cfg-radius); overflow: hidden;
	text-decoration: none; color: inherit;
	box-shadow: var(--cfg-shadow-sm); transition: box-shadow .35s var(--cfg-ease);
}
.cfg-gallery-card:hover { box-shadow: var(--cfg-shadow); }
.cfg-gallery-card__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.cfg-gallery-card__media img, .cfg-gallery-card__ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--cfg-ease); }
.cfg-gallery-card__ph { background: linear-gradient(135deg, var(--cfg-surface-2), #3D4855); }
.cfg-gallery-card:hover .cfg-gallery-card__media img { transform: scale(1.06); }
.cfg-gallery-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,35,0) 30%, rgba(15,28,35,.3) 58%, rgba(15,28,35,.88) 100%); transition: background .35s var(--cfg-ease); }
.cfg-gallery-card:hover .cfg-gallery-card__scrim { background: linear-gradient(180deg, rgba(15,28,35,.1) 20%, rgba(15,28,35,.42) 50%, rgba(15,28,35,.92) 100%); }
.cfg-gallery-card__body { position: relative; z-index: 2; padding: 1.4rem 1.5rem 1.5rem; color: #fff; display: flex; flex-direction: column; gap: .3rem; }
.cfg-gallery-card__cat { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cfg-accent-dk); }
.cfg-gallery-card__title { font-family: var(--cfg-font-head); font-size: clamp(1.1rem, 1.7vw, 1.35rem); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; color: #fff; }
.cfg-gallery-card__more { display: inline-flex; align-items: center; gap: .4em; font-size: .88rem; font-weight: 600; color: #fff;
	opacity: 0; max-height: 0; transform: translateY(6px); transition: opacity .3s var(--cfg-ease), max-height .3s var(--cfg-ease), transform .3s var(--cfg-ease); }
.cfg-gallery-card__more svg { transition: transform .25s var(--cfg-ease); }
.cfg-gallery-card:hover .cfg-gallery-card__more { opacity: 1; max-height: 2rem; transform: none; }
.cfg-gallery-card:hover .cfg-gallery-card__more svg { transform: translateX(3px); }

/* Generic post list (blog fallback) */
.cfg-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; }
.cfg-postcard__media img { border-radius: var(--cfg-radius-sm); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.cfg-postcard__title { font-size: 1.3rem; margin: .6rem 0 .3rem; }

/* 404 */
.cfg-404__actions .cfg-btn { margin-right: .6rem; }

/* Visually hidden, still announced. Used where an interactive element's
   accessible name cannot come from visible text -- e.g. a gallery link that
   wraps only an image whose alt is legitimately empty. */
.cfg-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}