/* =====================================================
   SKILLS PAGE - bruce-portfolio
   ===================================================== */

/* ── Domain sections ─────────────────────────────── */
.skills-domain {
  padding: clamp(var(--space-12), 6vw, var(--space-16)) 0;
}
.skills-domain--alt {
  background: var(--color-surface);
}

.domain-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.rtsp-domain .domain-header {
  margin-bottom: var(--space-10);
}
.rtsp-domain .skill-cards {
  margin-top: var(--space-4);
}

.domain-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.domain-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.domain-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: none;
  margin-bottom: var(--space-8);
  line-height: 1.7;
}

.commerce-hero-media {
  margin-top: var(--space-8);
  gap: 12px;
}

.commerce-service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.platform-logo {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #d0d7de;
  border-radius: var(--radius-md);
  background: #fff;
  color: #24292f;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.platform-logo:hover {
  border-color: var(--color-primary);
}

/* Dark mode keeps the identical light chip, dimmed as a whole so it does not
   glare against the dark page. Filtering the chip rather than recolouring its
   background means the plate and the logo dim together, so the chip stays
   internally the same object it is in light mode, just recessed. Recolouring
   only the background would leave the logos at full saturation, which reads as
   a bright sticker on a grey plate. Hover restores full brightness. */
html[data-theme="dark"] .platform-logo {
  filter: brightness(0.85);
}

html[data-theme="dark"] .platform-logo:hover {
  filter: brightness(1);
}

.platform-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* The artwork behind wordmark chips ranges from 1:1 (Stripe, Apple Pay) to
   4.1:1 (Clover). A fixed 70x27 box letterboxed most of it, leaving the logo
   adrift in the chip. Letting the width follow the intrinsic ratio makes each
   chip hug its own logo. Applied in both themes: the chips are styled
   identically light and dark, so their geometry has to match too. */
.platform-logo--wordmark img {
  width: auto;
  max-width: 110px;
  height: 27px;
}

.platform-note {
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* ── Skill cards grid ────────────────────────────── */
.skill-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.skill-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.skills-domain--alt .skill-block {
  background: var(--color-bg);
}

/* :hover is deliberately NOT defined here. Every card on the site shares one
   hover treatment, defined once in style.css. This file loads after it, so a
   :hover rule here would silently override the shared one for these cards. */

.skill-block--highlight {
  /* Tint only - no border-color override. A resting border this close to
     var(--color-primary) reads as "already hovered", so hovering a sibling
     card looked like nothing happened (both borders were near-identical:
     rgba(88,166,255,.35) vs. the hover state's opaque --color-primary). */
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(88, 166, 255, 0.04) 100%);
}

.skills-domain--alt .skill-block--highlight {
  background: linear-gradient(135deg, var(--color-bg) 0%, rgba(88, 166, 255, 0.05) 100%);
}

.skill-block-label {
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skill-block-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.skill-block-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  flex: 1;
}

/* ── Skill tags ──────────────────────────────────── */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── Interest cards grid ─────────────────────────── */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.interest-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

/* :hover shared from style.css, as above. */

.interest-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-dim);
  border: 1px solid rgba(88, 166, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.interest-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.interest-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ── Light mode overrides ────────────────────────── */
[data-theme="light"] .skill-block--highlight {
  background: linear-gradient(135deg, #fff 0%, rgba(88, 166, 255, 0.06) 100%);
}
[data-theme="light"] .skills-domain--alt .skill-block--highlight {
  background: linear-gradient(135deg, #f6f8fa 0%, rgba(88, 166, 255, 0.07) 100%);
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  .domain-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .skill-cards { grid-template-columns: 1fr; }
  .commerce-service-grid { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .commerce-service-grid { grid-template-columns: 1fr; }
}