/* Shell-side visual overrides for the in-document icore-website theme.
 *
 * Loaded by renderPackageThemeInline() AFTER the theme's own stylesheet, so
 * these win on equal specificity without touching the theme bundle. Keep every
 * rule tightly scoped to a theme class — this file must never restyle the theme
 * broadly. Remove a rule to revert that tweak.
 *
 * `!important` is used only where the theme sets the property via an inline
 * style attribute (React style={{…}}), which nothing else can override.
 */

/* ── Header logo: reserve its box before the image loads (CLS) ─────────────────
 * The theme fixes height (42px desktop / 36px mobile, both !important) but
 * leaves width:auto -- so before the <img> has loaded (no HTML width/height
 * attrs either), the browser can't compute the auto width from a ratio it
 * doesn't have yet, and the box grows from ~0 to its real ~85px once the
 * image decodes. That width jump reflows the whole header row (nav, burger
 * button) sideways -- desktop Lighthouse: 0.10+ of a 0.45 total CLS traced
 * straight to "Media element lacking an explicit size" on this element.
 * aspect-ratio (logo's natural 520x256 px) lets the browser derive the width
 * from the theme's own fixed height immediately, with no image load needed. */
.new-header-logo-img {
  aspect-ratio: 520 / 256;
}

/* ── Homepage "Our Technology Stack & Platforms" ───────────────────────────────
 * The right panel stretches to the (taller) domains sidebar, leaving each tab
 * with 3 small icon cards top-aligned and ~280px of empty white below. Make the
 * cards + icons substantial and centre the row in the leftover space.        */
.tech-stack-section .tech-content-area.desktop-only .technologies-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 28px 0 auto;      /* sit just under the header; leftover space at foot */
  align-content: start;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card {
  padding: 40px 18px;
  gap: 18px;
  min-height: 210px;
  justify-content: center;
  border-radius: 16px;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-icon {
  width: 76px !important;
  height: 76px !important;
  border-radius: 16px;
  flex: 0 0 auto;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-icon img,
.tech-stack-section .tech-content-area.desktop-only .tech-card-icon svg {
  width: 48px !important;
  height: 48px !important;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-name {
  font-size: 16px;
  font-weight: 600;
}

/* Tablet / narrow accordion variant (.tech-content-area.mobile-only): a gentle
 * icon bump only — its 3-up grid gets tight below ~520px, so don't push it. */
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon {
  width: 54px !important;
  height: 54px !important;
}
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon img,
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon svg {
  width: 36px !important;
  height: 36px !important;
}