/* ==========================================================================
   Icons layer (loads after main.css / home.css).
   Tier 1: UI glyphs are Phosphor (regular), filled paths on a 256 grid, via tb_icon().
   Tier 2: feature slots carry rendered 3D objects (smoked glass + TripleBoost-blue metal,
   cyan rim light from the upper left), via tb_icon3d(). The render IS the tile, so the old
   outlined boxes around those slots are dropped here.
   ========================================================================== */

/* ---------- Tier 1: Phosphor glyphs ---------- */
.tb-icon { fill: currentColor; stroke: none; }
.tb-icon--loop { fill: none; stroke: currentColor; }

/* ---------- Tier 2: 3D feature icons ---------- */
.tb-icon3d { display: block; max-width: none; object-fit: contain; pointer-events: none; user-select: none; }

/* Slot: no frame, no fill, the object sits on the card with a soft contact shadow.
   !important: the frame comes from a dozen context rules in main.css (hover, featured, blue room). */
.tb-service__icon--3d {
	width: 80px; height: 80px; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: none !important; box-shadow: none !important;
}
.tb-service__icon--3d .tb-icon3d { width: 100%; height: 100%; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .34)); }
/* On TripleBoost blue the dark glass needs a lift, not a deeper shadow: a hairline light contour
   separates it from the ground (no glow), then a soft navy contact shadow. */
.tb-room--blue .tb-service__icon--3d .tb-icon3d { filter: drop-shadow(0 0 .5px rgba(255, 255, 255, .55)) drop-shadow(0 10px 12px rgba(0, 18, 80, .35)); }
/* A missing render falls back to the flat glyph: keep it tidy inside the frameless slot. */
.tb-service__icon--3d > .tb-icon { width: 55%; height: 55%; color: var(--tb-accent); }

/* Compact rows (site features, brand deliverables, contact details) */
.tb-deliverable .tb-service__icon--3d { width: 64px; height: 64px; }
.tb-feature .tb-service__icon--3d { width: 56px; height: 56px; }
.tb-feature:has(> .tb-service__icon--3d) { gap: 14px; }
.tb-contact__item .tb-service__icon--3d,
a.tb-contact__item:hover .tb-service__icon--3d { width: 64px; height: 64px; }

/* Goal / pillar / value cards: the lead card carries a larger object. */
.tb-goals__grid .tb-service__icon--3d,
.tb-pillars__grid .tb-service__icon--3d,
.tb-values .tb-service__icon--3d { width: 92px; height: 92px; }
.tb-goals__grid > .tb-card:first-child .tb-service__icon--3d,
.tb-pillars__grid > .tb-card:first-child .tb-service__icon--3d,
.tb-values > .tb-card:first-child .tb-service__icon--3d { width: 124px; height: 124px; }
/* Where the lead slab shows its hand-drawn doodle (desktop, main.css), the doodle is the card's one
   visual; the 3D object returns wherever the doodle is hidden. */
@media (min-width: 1101px) {
	.tb-goals__grid > .tb-card:first-child:is(:nth-last-child(4), :nth-last-child(5), :nth-last-child(6)) .tb-service__icon--3d,
	.tb-pillars__grid > .tb-card:first-child:is(:nth-last-child(4), :nth-last-child(5), :nth-last-child(6)) .tb-service__icon--3d,
	.tb-values > .tb-card:first-child:nth-last-child(4) .tb-service__icon--3d { display: none; }
}

/* Mega menu entries */
.tb-mega__link .tb-mega__icon { width: 38px; height: 38px; margin-block: -4px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .3)); }

/* A small lift when the card that owns the object is hovered. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tb-service__icon--3d .tb-icon3d,
	.tb-mega__link .tb-mega__icon { transition: transform .5s var(--tb-ease); }
	:is(.tb-service, .tb-card, a.tb-contact__item):hover .tb-service__icon--3d .tb-icon3d,
	.tb-mega__link:hover .tb-mega__icon { transform: translateY(-4px) rotate(-3deg); }
}

@media (max-width: 760px) {
	.tb-service__icon--3d { width: 72px; height: 72px; }
	.tb-goals__grid > .tb-card:first-child .tb-service__icon--3d,
	.tb-pillars__grid > .tb-card:first-child .tb-service__icon--3d,
	.tb-values > .tb-card:first-child .tb-service__icon--3d { width: 88px; height: 88px; }
}