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

/* ==========================================================================
   1. INTRO — image @78,712 951x857 r19 (+ 221x221 inset) · copy from x1149
   ========================================================================== */
.sp_intro { padding: calc(127 * var(--s)) 0 calc(164 * var(--s)); }
.sp_intro .sq_split { gap: calc(120 * var(--s)); }
.sp_intro_media { width: 53.9%; flex: none; position: relative; }   /* 951 / 1764 */
.sp_intro_media > img:first-child { width: 100%; height: auto; display: block; border-radius: var(--r); }
.sp_intro_inset {
	position: absolute; left: 3.3%; top: calc(606 * var(--s));
	width: 23.2%; height: auto; border-radius: var(--r); display: block;
}
.sp_intro_copy { flex: 1; }
.sp_intro_copy .sq_h2b { margin-bottom: calc(29 * var(--s)); }
.sp_intro_copy .sq_lead { color: var(--muted); margin-bottom: calc(31 * var(--s)); }
.sp_why { font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--blue); margin: 0 0 calc(35 * var(--s)); }
.sp_intro_copy .sq_steps { margin-bottom: calc(46 * var(--s)); }

/* ==========================================================================
   2. COLLECTION RANGE — 5 cards 342x387, image slot 342x260
   ========================================================================== */
.sp_range { background: var(--soft); padding: calc(104 * var(--s)) 0 calc(126 * var(--s)); }
.sp_range h2 { margin-bottom: calc(82 * var(--s)); }
.sp_range_row { display: flex; gap: calc(13 * var(--s)); }
.sp_range_row .sq_card { flex: 1; }
.sp_range_row .sq_slot { height: calc(260 * var(--s)); min-height: 130px; }
.sp_range_row .sq_card_body { padding: calc(29 * var(--s)) calc(31 * var(--s)) calc(30 * var(--s)); }

/* ==========================================================================
   3. TWO DESIGN TRADITIONS — 2 cards 868x858, image band 515 tall
   ========================================================================== */
.sp_traditions { padding: calc(127 * var(--s)) 0 calc(139 * var(--s)); }
.sp_traditions h2 { margin-bottom: calc(114 * var(--s)); }
.sp_trad_row { display: flex; gap: calc(28 * var(--s)); }
.sp_trad_row .sq_card { flex: 1; background: var(--soft); }
.sp_trad_img { height: calc(515 * var(--s)); min-height: 220px; overflow: hidden; }
.sp_trad_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp_trad_body { padding: calc(37 * var(--s)) calc(37 * var(--s)) calc(45 * var(--s)); }
.sp_trad_body .sq_eyebrow { margin-bottom: calc(19 * var(--s)); }

/* ==========================================================================
   4. MATERIALS — full-width #545456 band, two slots + finish chips
   ========================================================================== */
.sp_materials { background: var(--dark); padding: calc(98 * var(--s)) 0 calc(75 * var(--s)); }
.sp_materials h2 { color: #fff; margin-bottom: calc(115 * var(--s)); }
.sp_mat_row { display: flex; gap: calc(38 * var(--s)); }
.sp_mat_col { flex: 1; }
.sp_mat_slot {
	height: calc(260 * var(--s)); min-height: 140px; border-radius: var(--r);
	background: var(--slot); overflow: hidden; margin-bottom: calc(36 * var(--s));
	display: flex; align-items: center; justify-content: center;
}
.sp_mat_slot img { width: 101%; height: 100%; object-fit: cover; display: block; }
.sp_mat_col .sq_eyebrow { color: #fff; margin-bottom: calc(20 * var(--s)); }
.sp_finishes { display: flex; justify-content: center; gap: calc(-8 * var(--s)); margin-top: calc(90 * var(--s)); }
.sp_finishes img {
	width: calc(92 * var(--s)); min-width: 46px; height: auto; aspect-ratio: 92 / 95;
	border-radius: 50%; object-fit: cover; display: block;
	margin-left: calc(-42 * var(--s)); 
	/* border: 2px solid #545456; */
}
.sp_finishes img:first-child { margin-left: 0; }
.sp_mat_note { text-align: center; color: rgba(255,255,255,.82); margin: calc(32 * var(--s)) auto 0; max-width: calc(890 * var(--s)); }

/* ==========================================================================
   5. HOW THEY'RE MADE — 6 numbered steps, image 562x260 over a 562x221 card
   ========================================================================== */
.sp_made { padding: calc(110 * var(--s)) 0 calc(120 * var(--s)); text-align: center; }
.sp_made h2 { text-transform: uppercase; margin-bottom: calc(42 * var(--s)); }
.sp_made_sub { margin-bottom: calc(14 * var(--s)); }
.sp_made_intro { color: var(--muted); margin-bottom: calc(68 * var(--s)); }
.sp_made_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(39 * var(--s)) calc(39 * var(--s)); text-align: left; }
.sp_made_item img { width: 100%; height: calc(260 * var(--s)); min-height: 140px; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: calc(13 * var(--s)); }
.sp_made_card {
	background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(33 * var(--s)) calc(33 * var(--s)) calc(36 * var(--s)); height: calc(100% - 13px);
}
.sp_made_card b { display: block; font-size: clamp(20px, calc(32 * var(--s)), 32px); line-height: 1; font-weight: 600; color: var(--blue); margin-bottom: calc(12 * var(--s)); }
.sp_made_card h3 { margin-bottom: calc(11 * var(--s)); }
.sp_made_card p { color: var(--muted); }

/* ==========================================================================
   6. CUSTOM MOLDED SHAPES
   ========================================================================== */
.sp_custom { padding: calc(62 * var(--s)) 0 calc(137 * var(--s)); }
.sp_custom .sq_split { align-items: center; gap: calc(60 * var(--s)); }
.sp_custom_copy { width: 40%; flex: none; position: relative; }
.sp_custom_copy h2 { margin-bottom: calc(30 * var(--s)); }
.sp_custom_copy p { color: var(--muted); font-weight: 500; }
.sp_custom_inset { position: absolute; left: calc(-42 * var(--s)); bottom: calc(100% + 40 * var(--s)); width: calc(217 * var(--s)); height: calc(276 * var(--s)); object-fit: cover; display: block; }
.sp_custom_imgs { flex: 1; display: flex; gap: calc(37 * var(--s)); justify-content: flex-end; }
.sp_custom_imgs img { width: calc(424 * var(--s)); max-width: 48%; height: calc(755 * var(--s)); min-height: 260px; object-fit: cover; border-radius: var(--r); display: block; }

/* ==========================================================================
   8. DISTRIBUTION & OPTICS — black band with the optics diagram
   ========================================================================== */
.sp_optics { background: #000; padding: calc(115 * var(--s)) 0 calc(120 * var(--s)); text-align: center; }
.sp_optics h2 { color: #fff; margin-bottom: calc(86 * var(--s)); }
.sp_optics img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   9. BEAM ANGLE
   ========================================================================== */
.sp_beam { padding: calc(253 * var(--s)) 0 calc(134 * var(--s)); }
.sp_beam .sq_split { gap: calc(78 * var(--s)); }
.sp_beam_copy { width: 47.7%; flex: none; }
.sp_beam_copy h2 { margin-bottom: calc(29 * var(--s)); }
.sp_beam_copy p { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; font-weight: 500; color: var(--muted); }
.sp_beam_list { flex: 1; display: grid; gap: calc(45 * var(--s)); }
.sp_beam_list p { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: var(--ink); margin: 0; }

/* ==========================================================================
   10. ADJUSTABLE BEAM DIRECTION — full-bleed grey band
   ========================================================================== */
.sp_adjust { background: var(--dark); padding: calc(62 * var(--s)) 0 calc(68 * var(--s)); }
.sp_adjust .sq_split { gap: calc(78 * var(--s)); align-items: flex-start; }
.sp_adjust_copy { width: 47.7%; flex: none; }
.sp_adjust_copy h3 { font-size: clamp(18px, calc(30 * var(--s)), 30px); line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 calc(15 * var(--s)); }
.sp_adjust_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.53; color: rgba(255,255,255,.85); margin: 0; }
.sp_adjust .sq_bullets { flex: 1; }
.sp_adjust .sq_bullets li { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; margin-bottom: calc(16 * var(--s)); }

/* ==========================================================================
   11. LIGHT SOURCE
   ========================================================================== */
.sp_source { padding: calc(228 * var(--s)) 0 calc(84 * var(--s)); }
.sp_source .sq_split { gap: calc(78 * var(--s)); }
.sp_source_copy { width: 47.7%; flex: none; }
.sp_source_copy h2 { margin-bottom: calc(29 * var(--s)); }
.sp_source_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.53; color: var(--muted); }
.sp_source_list { flex: 1; display: grid; gap: calc(45 * var(--s)); }
.sp_source_list p { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: var(--ink); margin: 0; }

/* ==========================================================================
   12. POWER & OUTPUT
   ========================================================================== */
.sp_power { background: var(--soft); padding: calc(121 * var(--s)) 0 calc(110 * var(--s)); }
.sp_power .sq_split { gap: calc(70 * var(--s)); align-items: center; justify-content: space-between; }
.sp_power_copy { flex: 1; max-width: calc(607 * var(--s)); }   /* text column ends at x685 */
.sp_power_copy h2 { margin-bottom: calc(29 * var(--s)); }
.sp_power_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.53; color: var(--muted); margin: 0 0 calc(19 * var(--s)); }
.sp_power_card {
	width: 44.6%; flex: none;                                  /* 787 / 1764 */
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(48 * var(--s)) calc(40 * var(--s)) calc(42 * var(--s)); text-align: center;
}
.sp_power_card .sq_xs { color: var(--muted); margin-bottom: calc(10 * var(--s)); }
.sp_power_card b {
	display: block; font-size: clamp(38px, calc(86 * var(--s)), 86px); line-height: .95;
	font-weight: 600; color: var(--blue); margin-bottom: calc(24 * var(--s));
}
.sp_power_card p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.4; font-weight: 500; color: var(--ink); margin: 0; }

/* ==========================================================================
   13. DIMMING OPTIONS — 4 cards 420x182
   ========================================================================== */
.sp_dimming { padding: calc(120 * var(--s)) 0 calc(122 * var(--s)); }
.sp_dimming_head { max-width: calc(880 * var(--s)); margin: 0 auto calc(88 * var(--s)); text-align: center; }
.sp_dimming_head h2 { margin-bottom: calc(29 * var(--s)); }
.sp_dimming_head p { color: var(--muted); }
.sp_dim_row { display: flex; gap: calc(28 * var(--s)); }
.sp_dim_row .sq_card { flex: 1; }
.sp_dim_row .sq_card_body { padding: calc(35 * var(--s)); }

/* ==========================================================================
   14. ACCESSORIES — grey band, image + copy rows
   ========================================================================== */
/* heading sits in a left column, the rows run alongside it from the same y */
.sp_accessories { background: var(--dark); padding: calc(94 * var(--s)) 0 calc(88 * var(--s)); }
.sp_accessories .sq_wrap { display: flex; align-items: flex-start; gap: calc(40 * var(--s)); }
.sp_accessories h2 { color: #fff; width: calc(416 * var(--s)); flex: none; }   /* heading column to x534 */
.sp_acc_list { flex: 1; }
.sp_acc_row { display: flex; align-items: center; gap: calc(59 * var(--s)); padding: calc(6 * var(--s)) 0; }
/* the source asset is a full photo; the design shows a 521x92 strip of it */
.sp_acc_row img { width: calc(521 * var(--s)); max-width: 40%; height: calc(92 * var(--s)); min-height: 52px; object-fit: cover; display: block; flex: none; }
.sp_acc_txt { flex: 1; }
.sp_acc_txt h3 { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 calc(6 * var(--s)); }
.sp_acc_txt p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.53; color: #fff; margin: 0; }

/* ==========================================================================
   15. VERTICAL INTEGRATION — theme-blue band
   ========================================================================== */
.sp_vertical { background: var(--blue); padding: calc(106 * var(--s)) 0 calc(120 * var(--s)); }
.sp_vert_head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(60 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.sp_vert_head > div { max-width: calc(700 * var(--s)); }
.sp_eyebrow_soft { font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: #B7B0FF; margin: 0 0 calc(24 * var(--s)); }
.sp_vertical h2 { color: #fff; margin-bottom: calc(23 * var(--s)); }
.sp_vertical .sp_vert_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
.sp_vert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(39 * var(--s)); }
.sp_vert_grid img { width: 100%; height: calc(408 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: calc(63 * var(--s)); }
.sp_vert_grid b { display: block; font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: #B7B0FF; margin-bottom: calc(13 * var(--s)); }
.sp_vert_grid p { font-size: clamp(15px, calc(23 * var(--s)), 23px); line-height: 1.26; font-weight: 600; color: #fff; margin: 0; }

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

@media (max-width: 991px) {
	.sp_intro_media, .sp_intro_copy, .sp_custom_copy, .sp_beam_copy,
	.sp_adjust_copy, .sp_source_copy, .sp_power_copy { width: 100%; flex: none; }
	.sp_intro_inset { position: static; width: 30%; margin-top: 14px; }

	.sp_range_row, .sp_trad_row, .sp_mat_row, .sp_dim_row { flex-wrap: wrap; gap: 18px; }
	.sp_range_row .sq_card { flex: 1 1 calc(50% - 9px); }
	.sp_trad_row .sq_card, .sp_mat_col { flex: 1 1 100%; }
	.sp_dim_row .sq_card { flex: 1 1 calc(50% - 9px); }

	.sp_made_grid, .sp_vert_grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

	.sp_custom_imgs { justify-content: flex-start; gap: 16px; }
	.sp_custom_imgs img { height: 360px; max-width: calc(50% - 8px); width: auto; flex: 1; }
	.sp_custom_inset { display: none; }

	.sp_vert_head { flex-direction: column; gap: 24px; }
	.sp_accessories .sq_wrap { flex-direction: column; gap: 26px; }
	.sp_accessories h2 { width: 100%; flex: none; }
	.sp_acc_list { width: 100%; }
	.sp_acc_row { gap: 24px; }
	.sp_acc_row img { max-width: 40%; }
	.sp_finishes { margin-top: 40px; }
}

@media (max-width: 575px) {
	.sp_range_row .sq_card, .sp_dim_row .sq_card { flex: 1 1 100%; }
	.sp_made_grid, .sp_vert_grid { grid-template-columns: 1fr; }
	.sp_custom_imgs { flex-direction: column; }
	.sp_custom_imgs img { max-width: 100%; width: 100%; height: 300px; }
	.sp_acc_row { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sp_acc_row img { max-width: 100%; width: 100%; }
	.sp_power_card b { font-size: 44px; }
}

/* ==========================================================================
   DECORATIVE ICONS — vectorised marks placed at their exact Figma positions
   (built straight from the Figma path geometry, see _figma/svg.js)
   ========================================================================== */
.sp_icon { display: block; height: auto; }

/* Custom molded shapes — icon @78,6565 sits above the heading */
.sp_icon_custom { width: calc(130 * var(--s)); margin-bottom: calc(31 * var(--s)); }

/* Beam Angle — icon @0,10207 hangs off the far left edge of the section */
.sp_beam { position: relative; }
.sp_icon_beam { position: absolute; left: 0; top: calc(108 * var(--s)); width: calc(425 * var(--s)); z-index: 0; }
.sp_beam .sq_wrap { position: relative; z-index: 1; }

/* Light source — icon @41,11141 above the heading, slightly outdented */
.sp_icon_source { width: calc(219 * var(--s)); margin: 0 0 calc(28 * var(--s)) calc(-37 * var(--s)); }

/* Power & Output — a mark each side of the split */
/* .sp_icon_power_r { width: calc(179 * var(--s)); flex: none; align-self: flex-start; margin-top: calc(-3 * var(--s)); } */


/* Dimming — icon @72,12297 sits to the left of the heading block */
.sp_dimming_head { display: flex; align-items: flex-start; gap: calc(42 * var(--s)); text-align: left; max-width: calc(1100 * var(--s)); }
.sp_icon_dim { width: calc(172 * var(--s)); flex: none; }

@media (max-width: 991px) {
	.sp_icon_beam { position: static; width: 180px; margin-bottom: 18px; }
	.sp_icon_source, 	.sp_icon_power_r { display: none; }
	.sp_icon_custom { width: 96px; }
	.sp_dimming_head { gap: 20px; max-width: 100%; }
	.sp_icon_dim { width: 96px; }
}

@media (max-width: 575px) {
	.sp_dimming_head { flex-direction: column; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Column offsets: in these sections the left heading starts lower than the
   right-hand column, which is what leaves room for the decorative marks.
   -------------------------------------------------------------------------- */

/* Beam Angle — icon @108, heading @350, right column @253 from the section top */
.sp_beam_copy { margin-top: calc(97 * var(--s)); }

/* Light source — icon @83, heading @330, right column @228 */
.sp_source { padding-top: calc(83 * var(--s)); }
.sp_source_list { margin-top: calc(145 * var(--s)); }

/* Power & Output — both marks are watermarks behind the copy, not in flow */
.sp_power .sq_wrap { position: relative; }
.sp_power_copy, .sp_power_card { position: relative; z-index: 1; }
.sp_icon_power_r {
    position: absolute;
    left: calc(899 * var(--s));
    top: calc(-81 * var(--s));
    width: calc(179 * var(--s));
    margin: 0;
    z-index: 2;
}

/* Dimming — the mark sits just outside the container edge */
.sp_icon_dim { margin-left: calc(-6 * var(--s)); }

@media (max-width: 991px) {
	.sp_beam_copy { margin-top: 0; }
	.sp_source { padding-top: calc(60 * var(--s)); }
	.sp_source_list { margin-top: 0; }
		.sp_icon_dim { margin-left: 0; }
}

/* Dimming — heading and copy stack to the right of the mark (design x286) */
.sp_dimming_head > div { flex: 1; }
.sp_dimming_head h2 { margin-bottom: calc(28 * var(--s)); }

/* ==========================================================================
   FIX: image and card are two separate boxes in a column, not one stretched box
   (design: Group 562x494 = image 562x260 r19, 13px gap, card 562x221 r19 + border)
   ========================================================================== */
.sp_made_item { display: flex; flex-direction: column; }
.sp_made_item img { flex: none; }
.sp_made_card { flex: 1; height: auto; }

/* ==========================================================================
   TEXT CASE — taken from each Figma text node's own textCase setting
   ========================================================================== */
/* UPPER */
.sp_trad_body .sq_eyebrow, .sp_mat_col .sq_eyebrow, .sp_made_sub, 
.sp_made_card h3
/* .sp_custom_copy p  */
{ text-transform: uppercase; }

/* TITLE */
.sp_range_row .sq_card_body h3,
.sp_custom_copy h2       { text-transform: capitalize; }

/* the heading is not uppercase in the design — it renders in lower case there */
.sp_made h2              { text-transform: none; }

/* ==========================================================================
   DIVIDER RULES + BORDERED BOXES
   Figma draws these as "Item" frames with strokeTop only (T1 R0 B0 L0) and as
   "Border" frames with a full 1px stroke — both were missing.
   ========================================================================== */

/* Beam Angle + Light source: 1px rule above each paragraph */
.sp_beam_list, .sp_source_list { gap: 0; }
.sp_beam_list p, .sp_source_list p {
	border-top: 1px solid var(--line);
	padding: calc(23 * var(--s)) 0 calc(22 * var(--s));
}

/* Accessories: same pattern but the rule is white, and only spans the copy */
.sp_acc_row { align-items: center; padding: 0; }
.sp_acc_txt {
	border-top: 1px solid #fff;
	padding: calc(25 * var(--s)) 0 calc(24 * var(--s));
}

/* Materials: each column is a white-bordered box with the slot flush at the top */
.sp_mat_col {
	border: 1px solid #fff; border-radius: var(--r); overflow: hidden;
	padding-bottom: calc(37 * var(--s));
}
.sp_mat_slot { border: 1px solid var(--line); border-radius: 0; margin: 0 0 calc(36 * var(--s)); }
.sp_mat_col > .sq_eyebrow, .sp_mat_col > .sq_bullets { padding-left: calc(37 * var(--s)); padding-right: calc(37 * var(--s)); }

/* Two design traditions: the image band carries its own 1px rule */
.sp_trad_img { border-bottom: 1px solid var(--line); }

/* small eyebrow labels: UPPER + 2.1px tracking in the design */
.sp_why,
.sp_eyebrow_soft { text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); }
.sq_xs           { text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); }
.sp_vert_grid b  { letter-spacing: calc(1.5 * var(--s)); }
.sq_step > b     { letter-spacing: calc(0.84 * var(--s)); }
.sp_power_card b { letter-spacing: calc(8.6 * var(--s)); }

/* --------------------------------------------------------------------------
   Spacing re-trimmed to the design now that the borders/boxes are in place
   -------------------------------------------------------------------------- */
/* Materials: heading 3919 -> box 3971 (52), box -> finishes (66), note (24) */
.sp_materials h2 { margin-bottom: calc(52 * var(--s)); }
.sp_finishes     { margin-top: calc(66 * var(--s)); }
.sp_mat_note     { margin-top: calc(24 * var(--s)); }
.sp_mat_col      { padding-bottom: calc(36 * var(--s)); }


/* Light source: right column starts 122 below the icon, 62 of tail padding */
.sp_source        { padding-bottom: calc(62 * var(--s)); }
.sp_source_list   { margin-top: calc(122 * var(--s)); }