/* ============================================================
   DLC Department Content Boxes - v1.2.1 | 2026-11-05
   1.2.1: switch on the standard lines (same as Department Categories): 3 across from 768, one per row at
   767 and below, each box up to 400px, centered. Side Space applies at 992 and up only.
   1.2.0: Side Space setting (None / Small / Medium / Large - extra room left and right, off on phones);
   3 across down to a 540px section (phones in landscape), stacked below that with each box capped at
   300px and centered (the 1.0.x phone look).
   1.1.0: CSS grid instead of floats in a Bootstrap .container. On the homepage / department pages the
   boxes line up with the header (--container-max / --container-gutter, corsetmaking.css b70+). 3 boxes
   across when the section is 720px or wider (540px from 1.2.0), 1 below (container query - was 3 down to 768px, then a fixed
   300px column). Tokens only: heading Crimson Text (EB Garamond has no token), text 14px minimum, links
   use the site link color. Breakpoints: none by window - all on the section's own width.
   ============================================================ */

/* -- Section wrapper ---------------------------------------- */
/* --cb-side = Side Space setting (on phones always 0) */
.dlc-dept-cb {
	--cb-side: 0px;
	width: 100%;
	background-color: var(--color-white);
	padding: var(--space-lg) var(--cb-side);
	box-sizing: border-box;
}

.dlc-dept-cb--side-small  { --cb-side: var(--space-lg); }
.dlc-dept-cb--side-medium { --cb-side: var(--space-2xl); }
.dlc-dept-cb--side-large  { --cb-side: calc(var(--space-2xl) * 2); }

@media (max-width: 991px) {
	.dlc-dept-cb.dlc-dept-cb { --cb-side: 0px; }
}

/* Homepage / department pages (body#SFNT - full-width column): content lines up with the header -
   capped at --container-max and padded by --container-gutter (same as .cms-container). Elsewhere it fills its column. */
body#SFNT .dlc-dept-cb {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(var(--container-gutter) + var(--cb-side));
	padding-right: calc(var(--container-gutter) + var(--cb-side));
	box-sizing: border-box;
}

/* -- Grid: 1 column, 3 across from 768 (1.2.1: window lines, same as Department Categories) -- */
.dlc-dept-cb__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg) var(--space-xl);
}

@media (min-width: 768px) {
	.dlc-dept-cb__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -- Individual box ------------------------------------------ */
.dlc-dept-cb__box {
	min-width: 0;
	text-align: left;
}

/* -- Image - fills the box width ----------------------------- */
.dlc-dept-cb__image {
	width: 100%;
	height: auto;
	display: block;
}

/* -- Heading ------------------------------------------------- */
.dlc-dept-cb__heading {
	font-family: var(--font-accent);
	font-style: normal;
	font-size: var(--font-size-18);
	font-weight: 400;
	line-height: 1.3;
	color: var(--brand-gold-text);
	margin: 0 0 var(--space-sm);
	text-align: left;
}

.dlc-dept-cb__heading a {
	color: var(--brand-gold-text);
	text-decoration: none;
}

.dlc-dept-cb__heading a:hover,
.dlc-dept-cb__heading a:focus {
	color: var(--brand-gold-text);
	text-decoration: underline;
}

/* -- Description --------------------------------------------- */
.dlc-dept-cb__description {
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	line-height: 1.5;
	color: var(--text-body);
	margin: var(--space-sm) 0;
	text-align: left;
}

/* -- Link (shown as typed - no all caps) --------------------- */
a.dlc-dept-cb__link,
.dlc-dept-cb__link {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	font-weight: 600;
	color: var(--link-color);
	text-decoration: underline;
}

a.dlc-dept-cb__link:hover,
a.dlc-dept-cb__link:focus {
	color: var(--link-hover);
}

.dlc-dept-cb a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* -- Horizontal rule between boxes - not used ---------------- */
.dlc-dept-cb__rule {
	display: none;
}

/* -- Phones (767 and below): one box per row, up to 400px, centered, gold line under each -- */
@media (max-width: 767px) {
	.dlc-dept-cb__grid {
		grid-template-columns: minmax(0, 400px);
		justify-content: center;
	}
	.dlc-dept-cb__box {
		padding-bottom: var(--space-lg);
		border-bottom: 1px solid var(--brand-gold-accent);
	}
}