/* Spotlight boards, group b: Double It, GCC, GPU, Business Community Co, Avelorre.
   Every rule is scoped to a .bd-* board class. Shared classes are not restyled. */

/* ---------- shared bits used inside these boards (scoped) ---------- */
:is(.bd-dbl, .bd-gpu) .screen { container-type: inline-size; }

/* profile screen (phone), sized in screen-width units so it works on desktop and mobile */
.bd-dbl .bd-pf { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0b0c; color: #fff; }
.bd-dbl .bd-pf .top { height: 15cqw; flex: none; }
.bd-dbl .bd-pf .hd { display: flex; align-items: center; gap: 7cqw; padding: 0 6cqw; }
.bd-dbl .bd-pf .av { width: 21cqw; height: 21cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .9cqw #0b0b0c, 0 0 0 1.7cqw #c8102e; flex: none; }
.bd-dbl .bd-pf .st { flex: 1; display: flex; justify-content: space-between; }
.bd-dbl .bd-pf .st span { display: grid; justify-items: center; gap: 2.2cqw; }
.bd-dbl .bd-pf .st b { width: 7cqw; height: 2.6cqw; border-radius: 2cqw; background: rgba(255,255,255,.85); }
.bd-dbl .bd-pf .st i { width: 11cqw; height: 1.8cqw; border-radius: 2cqw; background: rgba(255,255,255,.28); }
.bd-dbl .bd-pf .sk { display: block; height: 2cqw; border-radius: 2cqw; background: rgba(255,255,255,.24); }
.bd-dbl .bd-pf .nm { display: grid; gap: 2.4cqw; padding: 6cqw 6cqw 0; }
.bd-dbl .bd-pf .nm .sk:first-child { background: rgba(255,255,255,.7); height: 2.4cqw; }
.bd-dbl .bd-pf .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 5cqw 6cqw 0; }
.bd-dbl .bd-pf .btns span { height: 7cqw; border-radius: 2cqw; background: rgba(255,255,255,.12); }
.bd-dbl .bd-pf .btns .on { background: #c8102e; }
.bd-dbl .bd-pf .tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5cqw; border-bottom: 1px solid rgba(255,255,255,.12); }
.bd-dbl .bd-pf .tabs i { height: 7cqw; position: relative; }
.bd-dbl .bd-pf .tabs i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4.4cqw; height: 4.4cqw; transform: translate(-50%, -50%); border-radius: 1cqw; border: .6cqw solid rgba(255,255,255,.4); box-sizing: border-box; }
.bd-dbl .bd-pf .tabs .on::before { border-color: #fff; }
.bd-dbl .bd-pf .tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: .6cqw; background: #fff; }
.bd-dbl .bd-pf .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6cqw; padding-top: .6cqw; }
.bd-dbl .bd-pf .grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }

/* story header (bars + avatar) over a story frame */
:is(.bd-dbl, .bd-gpu) .bd-sthd { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 17cqw 4.5cqw 0; display: grid; gap: 3cqw; background: linear-gradient(rgba(0,0,0,.45), transparent); padding-bottom: 10cqw; }
:is(.bd-dbl, .bd-gpu) .bd-sthd .bars { display: flex; gap: 1.4cqw; }
:is(.bd-dbl, .bd-gpu) .bd-sthd .bars i { flex: 1; height: .9cqw; border-radius: 1cqw; background: rgba(255,255,255,.35); }
:is(.bd-dbl, .bd-gpu) .bd-sthd .bars .on { background: #fff; }
:is(.bd-dbl, .bd-gpu) .bd-sthd .who { display: flex; align-items: center; gap: 3cqw; }
:is(.bd-dbl, .bd-gpu) .bd-sthd .who img { width: 11cqw; height: 11cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.9); }
:is(.bd-dbl, .bd-gpu) .bd-sthd .sk { width: 30cqw; height: 2.4cqw; border-radius: 2cqw; background: rgba(255,255,255,.75); }

/* ---------- 1. Double It: profile + story + carousel grid ---------- */
.bd-dbl { --shot: rgba(0,0,0,.7); background: radial-gradient(ellipse 38% 62% at 34% 52%, rgba(200,16,46,.30), transparent 70%), radial-gradient(ellipse 50% 70% at 82% 40%, rgba(200,16,46,.12), transparent 72%), linear-gradient(160deg, #1d0809, #0a0304 70%); }
.bd-dbl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 5.4cqw, rgba(255,255,255,.018) 5.4cqw 5.5cqw); }
.bd-dbl .g-prof { left: 5cqw; top: 6.2cqw; width: 22.4cqw; }
.bd-dbl .g-story { left: 30.6cqw; top: 10.4cqw; width: 18.6cqw; }
.bd-dbl .g-story .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(0,0,0,.8), 0 0 7cqw -2cqw rgba(200,16,46,.45); }
.bd-dbl .g-grid { left: 52.4cqw; top: 6.2cqw; width: 42.6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-dbl .g-grid .tile { aspect-ratio: 1; }

/* ---------- 2. GCC: feed phone + staggered columns ---------- */
.bd-gcc { --shot: rgba(0,10,12,.7); background: radial-gradient(ellipse 40% 60% at 18% 50%, rgba(25,166,194,.22), transparent 70%), radial-gradient(ellipse 45% 55% at 70% 100%, rgba(127,169,174,.12), transparent 70%), linear-gradient(155deg, #0f3b41, #061a1e 72%); }
.bd-gcc::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(127,220,235,.16) 1px, transparent 1.4px); background-size: 2.2cqw 2.2cqw; -webkit-mask: linear-gradient(100deg, transparent 30%, #000 70%, transparent); mask: linear-gradient(100deg, transparent 30%, #000 70%, transparent); }
.bd-gcc .g-phone { left: 6.6cqw; top: 6.4cqw; width: 23cqw; }
.bd-gcc .g-phone .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(0,0,0,.75), 0 0 8cqw -2cqw rgba(25,166,194,.35); }
.bd-gcc .feedui .who img { background: #0e3a40; box-shadow: 0 0 0 .15cqw #fff, 0 0 0 .3cqw #19a6c2; }
.bd-gcc .feedui .who.nx { margin-top: 1.4cqw; }
.bd-gcc :is(.g-c1, .g-c2, .g-c3) { width: 16.6cqw; display: grid; gap: 2cqw; }
.bd-gcc :is(.g-c1, .g-c2, .g-c3) .tile { aspect-ratio: 4 / 5; }
.bd-gcc .g-c1 { left: 39.4cqw; top: 5.6cqw; }
.bd-gcc .g-c2 { left: 58.2cqw; top: 9.2cqw; }
.bd-gcc .g-c3 { left: 77cqw; top: 3.4cqw; }

/* ---------- 3. GPU: brick wall of posts + shared-to-story frame ---------- */
.bd-gpu { --shot: rgba(0,4,30,.75); background: linear-gradient(112deg, transparent 0 55%, rgba(30,111,208,.10) 55% 70%, transparent 70%), radial-gradient(ellipse 36% 60% at 84% 48%, rgba(30,111,208,.30), transparent 70%), radial-gradient(ellipse 50% 60% at 20% 20%, rgba(70,40,170,.18), transparent 72%), linear-gradient(165deg, #0c1858, #050a2c 72%); }
.bd-gpu > .tile { width: 17.4cqw; aspect-ratio: 4 / 5; }
.bd-gpu .t1 { left: 4.4cqw; top: 4.4cqw; }
.bd-gpu .t2 { left: 23.6cqw; top: 4.4cqw; }
.bd-gpu .t3 { left: 42.8cqw; top: 4.4cqw; }
.bd-gpu .t4 { left: 14cqw; top: 28.4cqw; }
.bd-gpu .t5 { left: 33.2cqw; top: 28.4cqw; }
.bd-gpu .t6 { left: 52.4cqw; top: 28.4cqw; }
.bd-gpu .swatches { left: 4.6cqw; bottom: 4.6cqw; flex-direction: column; }
.bd-gpu .g-story { left: 74.2cqw; top: 6.6cqw; width: 21.4cqw; }
.bd-gpu .g-story .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(0,0,0,.8), 0 0 9cqw -2cqw rgba(30,111,208,.55); }
.bd-gpu .bd-shr { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #050a2c; }
.bd-gpu .bd-shr .bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(5cqw) saturate(1.2) brightness(.7); }
.bd-gpu .bd-shr .art { position: relative; width: 82%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3cqw; box-shadow: 0 6cqw 12cqw -4cqw rgba(0,0,0,.8); }

/* ---------- 4. Business Community Co: company page + 2x2 ---------- */
.bd-bcc { --shot: rgba(14,26,58,.30); background: radial-gradient(ellipse 45% 70% at 30% 50%, rgba(255,255,255,.75), transparent 72%), radial-gradient(ellipse 40% 60% at 90% 10%, rgba(29,63,214,.14), transparent 70%), linear-gradient(160deg, #e9eefa, #d6def3); }
.bd-bcc::after { box-shadow: inset 0 0 0 1px rgba(14,26,58,.06); }
.bd-bcc .g-page { left: 4.6cqw; top: 6.8cqw; width: 50cqw; }
.bd-bcc .bd-br { border-radius: 1.1cqw; overflow: hidden; background: #fff; box-shadow: 0 2.6cqw 5cqw -2.2cqw rgba(14,26,58,.38), 0 0 0 1px rgba(14,26,58,.06); }
.bd-bcc .chrome { display: flex; align-items: center; gap: .45cqw; height: 2.2cqw; padding: 0 .9cqw; background: #eceff5; }
.bd-bcc .chrome i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #c7ccd8; }
.bd-bcc .chrome .url { flex: 1; height: 1cqw; margin-left: 1cqw; border-radius: 1cqw; background: #fff; }
.bd-bcc .pg { background: #f3f5f9; padding-bottom: 1.6cqw; }
.bd-bcc .cover { aspect-ratio: 5 / 1; background: radial-gradient(circle at 82% 70%, transparent 0 3cqw, rgba(255,255,255,.10) 3cqw 3.3cqw, transparent 3.3cqw 5.6cqw, rgba(255,255,255,.08) 5.6cqw 5.9cqw, transparent 5.9cqw 8.4cqw, rgba(255,255,255,.06) 8.4cqw 8.7cqw, transparent 8.7cqw), linear-gradient(110deg, #0e1a3a 0%, #1d3fd6 70%, #2c54f0); }
.bd-bcc .id { display: flex; align-items: flex-end; gap: 1.4cqw; padding: 0 2cqw; margin-top: -2.8cqw; background: linear-gradient(transparent 2.8cqw, #fff 2.8cqw); padding-bottom: 1.4cqw; }
.bd-bcc .id .av { width: 6.4cqw; height: 6.4cqw; border-radius: .9cqw; object-fit: cover; box-shadow: 0 0 0 .3cqw #fff, 0 .6cqw 1.4cqw -.4cqw rgba(14,26,58,.4); }
.bd-bcc .id .nm { flex: 1; display: grid; gap: .6cqw; padding-bottom: .3cqw; }
.bd-bcc .sk { display: block; height: .7cqw; border-radius: 1cqw; background: #d8dde8; }
.bd-bcc .id .nm .sk:first-child { height: .9cqw; background: #0e1a3a; }
.bd-bcc .id .fol { width: 7cqw; height: 2.2cqw; border-radius: 2cqw; background: #1d3fd6; }
.bd-bcc .tabs { display: flex; gap: 2.2cqw; padding: 0 2cqw; background: #fff; border-bottom: 1px solid #e3e7ef; }
.bd-bcc .tabs i { width: 4.4cqw; height: 2.2cqw; position: relative; }
.bd-bcc .tabs i::before { content: ""; position: absolute; left: 0; right: 0; top: .8cqw; height: .6cqw; border-radius: 1cqw; background: #c9cfdb; }
.bd-bcc .tabs .on::before { background: #0e1a3a; }
.bd-bcc .tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25cqw; background: #0f7a55; }
.bd-bcc .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; padding: 1.6cqw 2cqw 0; }
.bd-bcc .posts .tile { aspect-ratio: 1; border-radius: .7cqw; }
.bd-bcc .g-grid { left: 59.4cqw; top: 5cqw; width: 36cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-bcc .g-grid .tile { aspect-ratio: 4 / 5; }

/* ---------- 5. Avelorre: overlapping phones + editorial 2x2 ---------- */
.bd-av { --shot: rgba(90,62,30,.30); --phone: #1a1714; background: radial-gradient(ellipse 34% 60% at 26% 52%, rgba(255,250,242,.8), transparent 72%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(200,160,90,.20), transparent 70%), linear-gradient(160deg, #efe4d5, #dfccb6); }
.bd-av::after { box-shadow: inset 0 0 0 1px rgba(80,55,25,.07); }
.bd-av .g-phones { left: 9.6cqw; top: 4.2cqw; width: 34cqw; height: 48cqw; }
.bd-av .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(70,45,15,.55); }
.bd-av .prof { position: absolute; left: 0; top: 0; width: 22cqw; }
.bd-av .prof .screen > img { object-position: top; }
.bd-av .reel { position: absolute; right: 0; top: 13.4cqw; width: 17.4cqw; z-index: 2; }
.bd-av .g-grid { left: 50cqw; top: 4.4cqw; width: 38cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-av .g-grid .tile { aspect-ratio: 4 / 5; }

/* ---------- phones: boards restack into cards ---------- */


/* phone restacking removed at integration: boards keep their 16:9 composition and scale with the slide (cqw units). */