/* InstruMentor — Hub-only styles */

/* Hub phase palette */
:root {
  --phase-admin: #d4af37;
  --phase-admin-light: #fdf8e8;
  --phase-admin-border: #e8d68a;
  --phase-pedagogy: #1c7a8c;
  --phase-pedagogy-light: #e6f4f8;
  --phase-pedagogy-border: #76d7c4;
  --phase-beginner: #0b6b5a;
  --phase-beginner-light: #e8f8f2;
  --phase-beginner-border: #82ccb8;
}

/* Override hero subtitle color for hub */
.hero .subtitle { color: rgba(118,215,196,0.9); }

/* Hub hero — organic wave replaces clip-path */
.hero {
  clip-path: none;
  border-bottom: none;
  overflow: visible;
  box-shadow: none;
  padding-bottom: 2.5rem;
  margin-bottom: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(93,173,226,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(118,215,196,0.3) 0%, transparent 50%),
    conic-gradient(from 180deg at 50% 50%, #0b3d4f, #1c7a8c, #0b3d4f);
}
.hero::after { background: rgba(118,215,196,0.06); z-index: 0; }

/* Hub phase header gradients */
.phase-header.ph-admin { background: linear-gradient(135deg, #7a6520, #a08830); }
.phase-header.ph-pedagogy { background: linear-gradient(135deg, var(--primary), var(--primary-mid)); }
.phase-header.ph-beginner { background: linear-gradient(135deg, #0b5b4a, #1c8a6c); }
.phase-header::after { display: none; }

/* Hub phase-zone section coloring */
.phase-admin-zone .section-header { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent); }
.phase-admin-zone .section-header:hover { background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.03)); }
.phase-pedagogy-zone .section-header { border-left-color: var(--primary-mid); background: linear-gradient(90deg, rgba(118,215,196,0.12), transparent); }
.phase-pedagogy-zone .section-header:hover { background: linear-gradient(90deg, rgba(118,215,196,0.22), rgba(118,215,196,0.04)); }
.phase-beginner-zone .section-header { border-left-color: #0b6b5a; background: linear-gradient(90deg, rgba(11,107,90,0.1), transparent); }
.phase-beginner-zone .section-header:hover { background: linear-gradient(90deg, rgba(11,107,90,0.18), rgba(11,107,90,0.03)); }

/* PHASE DOT STEPPER — wayfinding */
.phase-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 2.5rem 0 1rem; padding: 0.5rem 0;
}
.phase-stepper .ps-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border); transition: all 0.3s ease;
  position: relative; cursor: default;
}
.phase-stepper .ps-dot.active { transform: scale(1.25); }
.phase-stepper .ps-dot[data-phase="admin"] { background: var(--phase-admin-border); }
.phase-stepper .ps-dot[data-phase="pedagogy"] { background: var(--phase-pedagogy-border); }
.phase-stepper .ps-dot[data-phase="beginner"] { background: var(--phase-beginner-border); }
.phase-stepper .ps-dot.active[data-phase="admin"] { background: var(--accent); }
.phase-stepper .ps-dot.active[data-phase="pedagogy"] { background: var(--primary-mid); }
.phase-stepper .ps-dot.active[data-phase="beginner"] { background: #0b6b5a; }
.phase-stepper .ps-line { width: 40px; height: 4px; background: var(--border); border-radius: 50%; }
.phase-stepper .ps-label {
  font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-light); position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  opacity: 0; transition: opacity 0.3s;
}
.phase-stepper .ps-dot.active .ps-label { opacity: 1; }

/* CATENARY ARCH DIVIDERS */
.catenary-divider {
  width: 100%; height: 50px; margin: -10px 0 -15px;
  position: relative; z-index: 1;
}
.catenary-divider::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.catenary-divider.admin::before { background: var(--phase-admin-light); }
.catenary-divider.pedagogy::before { background: var(--phase-pedagogy-light); }
.catenary-divider.beginner::before { background: var(--phase-beginner-light); }

/* INSTRUMENT FAMILY GRID — Gaudí Pebble Cards */
.family-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  margin: 1.5rem 0 2.5rem; align-items: start;
}
.family-card {
  aspect-ratio: 3 / 4; padding: 2rem 1.2rem 1.4rem;
  text-decoration: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 2px solid transparent;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative; overflow: visible; cursor: pointer;
  box-shadow: 0 6px 20px rgba(11,61,79,0.08);
}
/* Organic pebble shapes — each family gets a unique silhouette */
.family-card.woodwind {
  border-radius: 50% 50% 48% 52% / 38% 38% 62% 62%;
  background: linear-gradient(170deg, rgba(41,128,185,0.08) 0%, rgba(11,61,79,0.03) 100%);
  border-color: rgba(41,128,185,0.2);
}
.family-card.brass {
  border-radius: 48% 52% 50% 50% / 40% 40% 60% 60%;
  background: linear-gradient(170deg, rgba(212,175,55,0.08) 0%, rgba(139,105,20,0.03) 100%);
  border-color: rgba(212,175,55,0.25);
}
.family-card.percussion {
  border-radius: 50% 50% 45% 55% / 42% 42% 58% 58%;
  background: linear-gradient(170deg, rgba(192,57,43,0.06) 0%, rgba(123,36,28,0.02) 100%);
  border-color: rgba(192,57,43,0.15);
}
.family-card.strings {
  border-radius: 52% 48% 50% 50% / 38% 38% 62% 62%;
  background: linear-gradient(170deg, rgba(11,107,90,0.08) 0%, rgba(10,74,63,0.03) 100%);
  border-color: rgba(11,107,90,0.2);
}
/* Subtle stagger — much less dramatic */
.family-card:nth-child(2) { transform: translateY(10px); }
.family-card:nth-child(4) { transform: translateY(6px); }
.family-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(212,175,55,0.15);
  border-color: var(--accent);
}
.family-card:nth-child(2):hover { transform: translateY(6px) scale(1.02); }
.family-card:nth-child(4):hover { transform: translateY(2px) scale(1.02); }
/* Card text content */
.family-card .fc-content {
  padding: 0; text-align: center; width: 100%; position: relative; z-index: 1;
}
.family-card .fc-icon { display: none; }
.family-card .fc-name {
  font-family: var(--font-accent); font-weight: 400; font-size: 1.3rem;
  letter-spacing: 0.02em; margin-bottom: 0.35rem; display: block;
}
.family-card.woodwind .fc-name { color: var(--family-woodwind); }
.family-card.brass .fc-name { color: #8b6914; }
.family-card.percussion .fc-name { color: var(--family-percussion); }
.family-card.strings .fc-name { color: var(--family-strings); }
.family-card .fc-instruments {
  font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-light);
  line-height: 1.6; display: block;
}
/* Instrument links inside pebble */
.family-card .fc-links {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06); width: 100%;
}
.family-card .fc-links a {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; padding: 0.25rem 0; transition: color 0.15s;
  display: block; text-align: center;
}
.family-card.woodwind .fc-links a { color: var(--family-woodwind); }
.family-card.brass .fc-links a { color: #8b6914; }
.family-card.percussion .fc-links a { color: var(--family-percussion); }
.family-card.strings .fc-links a { color: var(--family-strings); }
.family-card .fc-links a:hover { text-decoration: underline; }
.family-card .fc-status {
  font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 1px; margin-top: 0.4rem; opacity: 0.6;
}
.family-card.woodwind .fc-status { color: var(--family-woodwind); }
.family-card.brass .fc-status { color: #8b6914; }
.family-card.percussion .fc-status { color: var(--family-percussion); }
.family-card.strings .fc-status { color: var(--family-strings); }
/* Trencadís mosaic texture overlay — inherits border-radius from parent */
.family-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg at 30% 70%, rgba(56,120,168,0.3) 0deg 40deg, transparent 40deg 120deg, rgba(196,154,26,0.2) 120deg 160deg, transparent 160deg 360deg),
    conic-gradient(from 180deg at 70% 30%, rgba(74,138,85,0.2) 0deg 30deg, transparent 30deg 360deg);
}

/* Pebble card responsive */
@media (max-width: 900px) {
  .family-card { flex: 0 0 calc(50% - 0.75rem); min-height: 260px; }
  .family-card:nth-child(2) { transform: translateY(8px); }
  .family-card:nth-child(3) { transform: translateY(-4px); }
  .family-card:nth-child(4) { transform: translateY(6px); }
}
@media (max-width: 600px) {
  .family-grid { gap: 1rem; }
  .family-card { flex: 0 0 calc(50% - 0.5rem); min-height: 240px; }
  .family-card .fc-name { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .family-card { flex: 0 0 100%; min-height: 220px; flex-direction: row; }
  .family-card .fc-content { text-align: left; padding: 1rem; }
  .family-card:nth-child(n) { transform: none; }
}

/* Hub phase-number — CSS organic dot (replaces emoji) */
.phase-header .phase-number:empty {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.3);
  width: 1.8rem; height: 1.8rem;
  border-radius: 50% 40% 55% 45% / 45% 50% 40% 55%;
  position: relative;
}
.phase-header .phase-number:empty::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
}

/* TRENCADIS — Broken tile mosaic texture */
.mosaic-hero {
  background:
    conic-gradient(from 0deg at 30% 70%, rgba(56,120,168,0.08) 0deg 60deg, transparent 60deg 120deg, rgba(196,154,26,0.06) 120deg 180deg, transparent 180deg 360deg),
    conic-gradient(from 180deg at 70% 30%, rgba(196,86,58,0.06) 0deg 45deg, transparent 45deg 135deg, rgba(74,138,85,0.05) 135deg 225deg, transparent 225deg 360deg),
    linear-gradient(135deg, #3d2b1f, #5a3d2a, #6b4c3b);
}
.mosaic-subtle {
  background:
    conic-gradient(from 45deg at 25% 75%, rgba(196,154,26,0.04) 0deg 30deg, transparent 30deg 360deg),
    conic-gradient(from 200deg at 75% 25%, rgba(56,120,168,0.03) 0deg 30deg, transparent 30deg 360deg),
    var(--section-bg);
}

/* Hub-specific phase cluster style */
.phase-cluster .pc-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1rem; text-transform: none; letter-spacing: 0;
}

/* Hub p margin override */
p { margin-bottom: 1.5rem; }

/* Hub footer with rainbow bar */
.footer { border-top: none; padding: 2.5rem; position: relative; }
.footer p strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 4px;
  background: linear-gradient(90deg,
    var(--family-woodwind) 0%, var(--family-woodwind) 25%,
    var(--family-brass) 25%, var(--family-brass) 50%,
    var(--family-percussion) 50%, var(--family-percussion) 75%,
    var(--family-strings) 75%, var(--family-strings) 100%);
  border-radius: 4px;
}