/* ─── Shared Collections Page Styles ─── */
.coll-hero { background: var(--bg-primary); padding-top: calc(var(--nav-height, 70px) + var(--space-14)); padding-bottom: var(--space-12); }
.coll-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-8); }
.coll-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.coll-breadcrumb a:hover { color: var(--accent); }
.coll-breadcrumb span[aria-current] { color: var(--text-primary); font-weight: 600; }
.coll-hero-inner { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-5); }
.coll-device-icon { color: var(--accent); margin-bottom: var(--space-2); }
.coll-icon { width: 48px; height: 48px; stroke-width: 1.5px; }
.coll-hero-inner h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; margin: 0; }
.coll-hero-sub { color: var(--text-secondary); line-height: 1.8; margin: 0; }
.coll-trust-row { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }

/* Services grid */
.coll-services-section { background: var(--bg-secondary); }
.coll-section-title { font-size: var(--text-2xl); margin-bottom: var(--space-8); }
.coll-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.coll-service-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color 0.2s;
}
.coll-service-card:hover { border-color: var(--accent); }
.coll-card--accent { border-left: 3px solid var(--accent); }
.coll-card--gold { border-left: 3px solid var(--gold, #ffd60a); background: rgba(255,204,0,.04); }
.coll-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-bottom: 4px; }
.coll-badge--accent { color: var(--accent); background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.2); }
.coll-badge--gold { color: var(--gold, #ffd60a); background: rgba(255,204,0,.12); border: 1px solid rgba(255,204,0,.3); }
.coll-svc-icon { color: var(--accent); }
.coll-svc-icon--gold { color: var(--gold, #ffd60a); }
.coll-service-card h3 { font-size: var(--text-base); font-weight: 700; margin: 0; color: var(--text-primary); }
.coll-service-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }
.coll-service-card p strong { color: var(--accent); }

/* Models */
.coll-models-section { background: var(--bg-primary); }
.coll-models-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.coll-model {
  font-size: var(--text-sm); font-weight: 600; padding: 6px 14px;
  border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text-primary);
}

/* Location bar */
.coll-location-bar { background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-6) 0; }
.coll-location-inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.coll-location-inner > div { flex: 1; font-size: var(--text-sm); }

/* ── Hero split layout (text + device photo) ── */
.coll-hero-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: center;
}
.coll-hero-wrap .coll-hero-inner { max-width: unset; }

.coll-hero-media {
  width: 360px;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coll-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.coll-hero-photo--contain {
  object-fit: contain;
  padding: 32px;
  background: #f5f5f7;
}
.dark-theme .coll-hero-photo--contain { background: #1c1c1e; }

/* Illustration box — for devices without actual photos */
.coll-hero-illustration {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}
.chi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}
.chi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.18s;
}
.chi-item:hover { border-color: var(--accent); }
.chi-icon { width: 40px; height: 40px; stroke-width: 1.4px; }
.chi-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: center; letter-spacing: 0.02em; }
.chi-item--ps  .chi-icon { color: #006fcd; }
.chi-item--xbox .chi-icon { color: #107c10; }
.chi-item--switch .chi-icon { color: #e4000f; }
.chi-item--ps4  .chi-icon { color: #003087; }
.chi-item--dji  .chi-icon { color: #1e90ff; }
.chi-item--cam  .chi-icon { color: #ff9500; }
.chi-item--mac  .chi-icon { color: #8e8e93; }
.chi-item--watch .chi-icon { color: #af52de; }
.chi-item--tablet .chi-icon { color: #007aff; }
.chi-item--earbuds .chi-icon { color: #34c759; }

/* Service card with photo header */
.coll-svc-photo-wrap {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4) calc(-1 * var(--space-6));
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}
.coll-svc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coll-svc-edu-photo {
  width: 100%;
  border-radius: 10px;
  object-fit: contain;
  max-height: 140px;
  background: #f5f5f7;
  display: block;
}
.dark-theme .coll-svc-edu-photo { background: #2c2c2e; }

/* Past-work portfolio grid */
.coll-portfolio-section { background: var(--bg-secondary); }
.coll-portfolio-sub { color: var(--text-secondary); margin-bottom: var(--space-6); line-height: 1.7; }
.coll-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.coll-port-item {
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card);
  display: flex; flex-direction: column;
  transition: border-color 0.18s;
}
.coll-port-item:hover { border-color: var(--accent); }
.coll-port-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.coll-port-item:hover .coll-port-img { transform: scale(1.04); }
.coll-port-cap {
  padding: 8px 12px; font-size: 11px;
  color: var(--text-secondary); font-weight: 600;
}

/* Screen type comparison edu-photo caption */
.coll-svc-edu-caption {
  font-size: 11px; color: var(--text-tertiary); margin-top: 6px;
}

/* Price/meta note inside a service card */
.coll-svc-note { margin-top: 8px; font-size: .82rem; color: var(--text-tertiary); }

/* Link inside a service card paragraph */
.coll-svc-link { color: var(--accent); }
.coll-svc-link:hover { text-decoration: underline; }

/* Location bar icon and meta text */
.coll-location-icon { color: var(--accent); }
.coll-location-meta { color: var(--text-secondary); margin-left: 8px; }

/* Shared collection page footer */
.coll-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
  text-align: center;
}
.coll-footer-text { font-size: 11px; color: var(--text-secondary); }
.coll-footer-link { color: var(--accent); }

@media (max-width: 900px) {
  .coll-hero-wrap {
    grid-template-columns: 1fr;
  }
  .coll-hero-media {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    order: -1;
  }
  .coll-hero-photo--contain { padding: 20px; }
}
@media (max-width: 600px) {
  .coll-hero-media { height: 200px; }
  .chi-icon { width: 32px; height: 32px; }
}