/* ==========================================================================
   BOLLARDS PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "Bollards" (1920 x 14466).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

.sq { --bl-soft-ink: #B7B0FF; }

/* ==========================================================================
   1. BANNER — same as the other squeeze pages, plus the design's text shadow
   ========================================================================== */
.bl_banner h1, .bl_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }

/* ==========================================================================
   2. INTRO — image @78,729 951x857 r19 · copy from x1149, 120px gutter
   ========================================================================== */
.bl_intro { padding: calc(144 * var(--s)) 0 calc(143 * var(--s)); }
.bl_intro .sq_split { gap: calc(120 * var(--s)); }
.bl_intro_media { width: 53.9%; flex: none; }   /* 951 / 1764 */
.bl_intro_media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.bl_intro_copy { flex: 1; padding-top: calc(47 * var(--s)); }
.bl_h2_lg {
	font-size: clamp(26px, calc(55 * var(--s)), 55px); line-height: 1;
	font-weight: 600; color: var(--ink); margin: 0 0 calc(36 * var(--s));
}
.bl_intro_copy .sq_lead { color: var(--muted); margin-bottom: calc(33 * var(--s)); }
.bl_why {
	font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: var(--blue); text-transform: uppercase; margin: 0 0 calc(17 * var(--s));
}
.bl_intro_copy .sq_steps { margin-bottom: calc(29 * var(--s)); }
.sq_step > b { letter-spacing: calc(0.84 * var(--s)); }

/* ==========================================================================
   3. MATERIALS — 3 columns 565 wide, 34 gap · image 233x183 over a bordered box
   ========================================================================== */
.bl_materials { padding: calc(45 * var(--s)) 0 calc(183 * var(--s)); }
.bl_materials h2 { padding-top: calc(35 * var(--s)); margin-bottom: calc(48 * var(--s)); }
.bl_mat_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--s)); }
.bl_mat_img { display: flex; justify-content: center; padding-top: calc(20 * var(--s)); margin-bottom: calc(44 * var(--s)); }
.bl_mat_img img { width: calc(233 * var(--s)); min-width: 140px; height: auto; display: block; }

/* bordered text box — used by Materials */
.bl_box {
	border: 1px solid var(--line); border-radius: var(--r); background: #fff;
	padding: calc(34 * var(--s)) calc(34 * var(--s)) calc(33 * var(--s)); min-height: calc(135 * var(--s));
}
.bl_box h3 { font-size: clamp(16px, calc(22 * var(--s)), 22px); line-height: 1.23; margin-bottom: calc(12 * var(--s)); }
.bl_box p { color: var(--muted); }

/* 6 columns of 272; odd columns = image then text, even columns = text then image */

/* ==========================================================================
   5. FINISH OPTIONS — 3 cards 565x318, swatch 230 tall
   ========================================================================== */
.bl_finish { padding: calc(133 * var(--s)) 0 calc(166 * var(--s)); }
.bl_finish h2 { margin-bottom: calc(52 * var(--s)); }
.bl_finish_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--s)); }
.bl_finish_card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bl_finish_card img { width: 100%; height: calc(230 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.bl_finish_card h3 {
	font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.18; font-weight: 600; color: var(--ink);
	margin: 0; padding: calc(29 * var(--s)) calc(30 * var(--s)) calc(33 * var(--s));
}
.bl_finish_note { color: var(--muted); margin-top: calc(52 * var(--s)); }

/* ==========================================================================
   6. LUMEN PACKAGE — black band, 3 outlined stat cards
   ========================================================================== */
.bl_lumen { background: #000; padding: calc(85 * var(--s)) 0 calc(94 * var(--s)); }
.bl_lumen h2 { color: #fff; margin-bottom: calc(52 * var(--s)); }
.bl_lumen_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--s)); }
.bl_lumen_card {
	border: 1px solid rgba(255,255,255,.22); border-radius: var(--r);
	padding: calc(32 * var(--s)) calc(36 * var(--s)) calc(34 * var(--s)); min-height: calc(176 * var(--s));
}
.bl_lumen_card b {
	display: block; font-size: clamp(20px, calc(34 * var(--s)), 34px); line-height: 1.03;
	font-weight: 600; color: #fff; margin-bottom: calc(17 * var(--s));
}
.bl_lumen_card span {
	display: block; font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2;
	font-weight: 600; color: var(--bl-soft-ink); margin-bottom: calc(14 * var(--s));
}
.bl_lumen_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: rgba(255,255,255,.8); margin: 0; }
.bl_lumen_note { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: rgba(255,255,255,.8); margin: calc(37 * var(--s)) 0 0; }

/* ==========================================================================
   7. DIMMING OPTIONS — icon beside the heading, 3 cards (28 gap)
   ========================================================================== */
.bl_dimming { padding: calc(189 * var(--s)) 0 calc(157 * var(--s)); border-bottom: 1px solid var(--line); }
.bl_dimming .sq_wrap { width: calc(1776 * var(--s)); max-width: 1776px; }   /* icon sits 6px outside the container */
.bl_dimming_head { display: flex; align-items: center; gap: calc(42 * var(--s)); margin-bottom: calc(87 * var(--s)); }
.bl_dimming_head img { width: calc(161 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; }
.bl_dim_row { display: flex; gap: calc(28 * var(--s)); padding: 0 calc(6 * var(--s)); }
.bl_dim_row .sq_card { flex: 1; }
.bl_dim_row .sq_card_body { padding: calc(34 * var(--s)); }

/* ==========================================================================
   8. INSTALLATION TYPES — image 457x180 above a 139-tall outlined label box
   ========================================================================== */
.bl_install { padding: calc(118 * var(--s)) 0 calc(145 * var(--s)); text-align: center; }
.bl_install h2 { margin-bottom: calc(87 * var(--s)); }
.bl_install_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--s)); }
.bl_install_col img { width: calc(457 * var(--s)); max-width: 100%; height: auto; display: block; margin: 0 auto calc(12 * var(--s)); }
.bl_install_col h3 {
	border: 1px solid #C7C7C7; border-radius: var(--r);
	min-height: calc(139 * var(--s)); padding: calc(20 * var(--s));
	display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   9. VERTICAL INTEGRATION — theme-blue band, photo over an outlined card
   ========================================================================== */
.bl_vertical { background: var(--blue); padding: calc(106 * var(--s)) 0 calc(103 * var(--s)); }
.bl_vert_head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(60 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.bl_vert_head > div { max-width: calc(610 * var(--s)); }
.bl_eyebrow_soft {
	font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--bl-soft-ink);
	text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(23 * var(--s));
}
.bl_vertical h2 { color: #fff; margin-bottom: calc(23 * var(--s)); }
.bl_vert_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
.bl_vert_head .sq_btn_white { margin-top: calc(24 * var(--s)); text-transform: uppercase; }
.bl_vert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(41 * var(--s)); }
.bl_vert_item { display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.bl_vert_item img { width: 100%; height: calc(408 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.bl_vert_card {
	flex: 1; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r);
	padding: calc(36 * var(--s)); min-height: calc(197 * var(--s));
}
.bl_vert_card b {
	display: block; font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: var(--bl-soft-ink); letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(15 * var(--s));
}
.bl_vert_card p { font-size: clamp(15px, calc(23 * var(--s)), 23px); line-height: 1.25; font-weight: 600; color: #fff; margin: 0; }

/* ==========================================================================
   10. APPLICATIONS — 4 cards 421x486, image slot 353 tall
   ========================================================================== */
.bl_apps { padding: calc(203 * var(--s)) 0 0; }
.bl_apps h2 { margin-bottom: calc(80 * var(--s)); }
.bl_apps_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--s)); }
.bl_apps_row .sq_card { border-color: var(--line); }
.bl_apps_row .sq_slot { height: calc(353 * var(--s)); min-height: 200px; }
.bl_apps_row h3 {
	font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.27; font-weight: 600; color: var(--ink);
	margin: 0; padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); min-height: calc(133 * var(--s));
}

/* ==========================================================================
   11. CTA — design has 180px above it (after the application cards)
   ========================================================================== */
.bl_cta { padding-top: calc(180 * var(--s)); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
	.bl_intro_media, .bl_intro_copy { width: 100%; flex: none; }
	.bl_intro_copy { padding-top: 0; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.bl_mat_row, .bl_finish_row, .bl_lumen_row, .bl_install_row, .bl_vert_grid { gap: 16px; }
	.bl_lumen_card { padding: 20px 18px; }
	.bl_apps_row { grid-template-columns: repeat(2, 1fr); gap: 18px; }

	.bl_dimming { padding-top: 70px; }
	.bl_dimming .sq_wrap { width: 100%; }
	.bl_dim_row { gap: 16px; padding: 0; }

	.bl_vert_head { flex-direction: column; gap: 24px; }
	.bl_vert_head > div { max-width: 100%; }
	.bl_vert_head .sq_btn_white { margin-top: 0; }
}

@media (max-width: 575px) {
	.bl_mat_row, .bl_finish_row, .bl_lumen_row, .bl_install_row, .bl_vert_grid, .bl_apps_row { grid-template-columns: 1fr; }
	.bl_dim_row { flex-direction: column; }
	.bl_dimming { padding-top: 50px; }
	.bl_dimming_head { gap: 18px; }
	.bl_h2_lg { font-size: 30px; }
}