/* ============================================
   Ölkə detail səhifəsi (UK template)
   ============================================ */

/* cd-content is a flex container so its children (rendered panels) inherit
   the same gap as shell-level panels. Without this, render panels stack
   tightly with 0px gap because they're not direct children of .shell. */
#cd-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* Match shell's gap so cd-content seam is invisible */
  margin-top: var(--gap);
}

/* ===== Breadcrumb ===== */
.cd-breadcrumb {
  margin: 32px 80px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--ink);
  opacity: 0.7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cd-breadcrumb a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 200ms;
}
.cd-breadcrumb a:hover { opacity: 1; color: var(--brand); }
.bc-sep { opacity: 0.4; }
.bc-current { color: var(--brand); font-weight: 600; opacity: 1; }

/* ===== Hero ===== */
.cd-hero-panel { padding-bottom: 0; }
.cd-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 40px 80px 80px;
  position: relative;
  z-index: 2;
}
.cd-flag {
  font-size: 3.5rem;
  display: inline-block;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}
.cd-headline {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.cd-headline .ink, .cd-headline .mute { display: block; }
.cd-lede {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  margin-bottom: 28px;
  max-width: 540px;
}
.cd-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cd-hero-pills .cluster-pill {
  background: #fff;
  border: 1px solid var(--border-soft);
}

.cd-hero-image {
  position: relative;
  height: 440px;
  border-radius: 32px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(26, 26, 77, 0.2);
}
.cd-hero-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.cd-hero-stats {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  z-index: 2;
}
.cd-stat {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.cd-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cd-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.75;
  margin-top: 4px;
  font-weight: 500;
}

/* ===== Why panel ===== */
.cd-why-panel { background: var(--inner); }
.cd-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cd-why-text h2 { margin: 16px 0 24px; }
.cd-why-text h2 .ink, .cd-why-text h2 .mute { display: block; }
.cd-why-text p {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.8;
  margin: 0 0 16px;
}
.cd-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cd-why-list li {
  background: #fff;
  border-radius: 22px;
  padding: 22px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
  transition: transform 240ms var(--ease-out);
}
.cd-why-list li:hover { transform: translateY(-3px); }
.cd-why-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-why-list h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 6px;
}
.cd-why-list p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* ===== Quick facts grid ===== */
.cd-quick-panel { background: var(--inner-2); }
.cd-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.cd-quick-card {
  background: #fff;
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.cd-quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(26, 26, 77, 0.12);
}
.cd-quick-icon {
  font-size: 1.75rem;
  margin-bottom: 14px;
}
.cd-quick-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cd-quick-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cd-quick-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  opacity: 0.6;
}

/* ===== Cost of living ===== */
.cd-cost-panel { background: var(--inner); }
.cd-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.cd-cost-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}
.cd-cost-icon {
  grid-row: 1 / span 3;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-cost-cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.7;
}
.cd-cost-amount {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cd-cost-bar {
  grid-column: 2;
  height: 4px;
  background: var(--inner-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.cd-cost-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.cd-cost-total {
  background: linear-gradient(135deg, #fff 0%, #F8F7F0 100%);
  border: 2px solid rgba(91, 79, 207, 0.15);
}
.cd-cost-note {
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  opacity: 0.6;
  font-style: italic;
}

/* ===== Visa & work ===== */
.cd-visa-panel { background: var(--inner-2); }
.cd-visa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.cd-visa-card {
  background: #fff;
  border-radius: 26px;
  padding: 32px 32px;
  box-shadow: 0 6px 20px rgba(26, 26, 77, 0.08);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.cd-visa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(26, 26, 77, 0.14);
}
.cd-visa-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.cd-visa-tag.tag-purple { background: var(--brand-soft); color: var(--brand); }
.cd-visa-tag.tag-green { background: rgba(34, 197, 94, 0.12); color: #22C55E; }
.cd-visa-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.cd-visa-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-visa-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.85;
  padding-left: 22px;
  position: relative;
}
.cd-visa-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.cd-visa-list strong {
  color: var(--ink);
  font-weight: 600;
  opacity: 1;
}

/* ===== Employment opportunities ===== */
.cd-employ-panel { background: var(--inner); }
.cd-employ-list {
  margin-top: 40px;
  background: #fff;
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 6px 20px rgba(26, 26, 77, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cd-employ-row {
  display: grid;
  grid-template-columns: 220px 1fr 130px;
  gap: 20px;
  align-items: center;
}
.cd-employ-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.cd-employ-bar {
  height: 10px;
  background: var(--inner);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.cd-employ-bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width 600ms var(--ease-out);
}
.cd-employ-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  text-align: center;
  white-space: nowrap;
}
.cd-badge-high { background: rgba(34, 197, 94, 0.12); color: #16A34A; }
.cd-badge-mid  { background: rgba(251, 146, 60, 0.12); color: #EA580C; }
.cd-badge-low  { background: rgba(239, 68, 68, 0.12); color: #DC2626; }

/* ===== Student life ===== */
.cd-life-panel { background: var(--inner-2); }
.cd-life-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.cd-life-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
}
.cd-life-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--brand);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.cd-life-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.cd-life-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* ===== Cities grid ===== */
.cd-cities-panel { background: var(--inner); }
.cd-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.cd-city-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.cd-city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(26, 26, 77, 0.14);
}
.cd-city-image {
  position: relative;
  height: 160px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  padding: 14px;
}
.cd-city-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.cd-city-rank {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
/* City placeholders — will be replaced with real photos when uploaded */
.cd-city-london     { background: linear-gradient(135deg, #1B365D 0%, #C8102E 100%); }
.cd-city-oxford     { background: linear-gradient(135deg, #002147 0%, #4A90A4 100%); }
.cd-city-cambridge  { background: linear-gradient(135deg, #A3C1AD 0%, #002147 100%); }
.cd-city-manchester { background: linear-gradient(135deg, #6E0F1A 0%, #C8102E 100%); }
.cd-city-edinburgh  { background: linear-gradient(135deg, #003D5B 0%, #6B8E9F 100%); }
.cd-city-glasgow    { background: linear-gradient(135deg, #1F4E79 0%, #5B9BD5 100%); }
.cd-city-birmingham { background: linear-gradient(135deg, #002A5C 0%, #BA0C2F 100%); }
.cd-city-bristol    { background: linear-gradient(135deg, #5C2D91 0%, #FB923C 100%); }

.cd-city-body {
  padding: 18px 20px 22px;
  flex: 1 1 auto;
}
.cd-city-body h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.cd-city-body p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 12px;
}
.cd-city-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.55;
}

/* ===== Top universities list ===== */
.cd-unis-panel { background: var(--inner-2); }
.cd-unis-list {
  margin-top: 40px;
  background: #fff;
  border-radius: 24px;
  padding: 12px 0;
  box-shadow: 0 6px 20px rgba(26, 26, 77, 0.08);
}
.cd-uni-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 200ms, transform 200ms;
  text-decoration: none;
  color: inherit;
}
.cd-uni-row:last-child { border-bottom: none; }
.cd-uni-row:hover { background: var(--inner); }
.cd-uni-row.is-clickable { cursor: pointer; }
.cd-uni-row.is-clickable:hover { background: var(--brand-soft); }

/* Logo block — colored square with initials + tiny rank badge */
.cd-uni-logo {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.08) 100%);
  background-blend-mode: overlay;
}
/* Image variant: white card hosting transparent PNG; subtle border */
.cd-uni-logo--img {
  background: #fff;
  background-image: none;
  border: 1px solid rgba(26, 26, 77, 0.08);
  padding: 6px;
  box-sizing: border-box;
}
.cd-uni-logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cd-uni-logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.cd-uni-logo-rank {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  border: 1.5px solid var(--inner);
}
/* Legacy rank circle (no longer used in new render but kept for fallback) */
.cd-uni-rank {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-uni-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.cd-uni-loc {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  opacity: 0.6;
}
.cd-uni-tags {
  display: flex;
  gap: 6px;
}
.cd-uni-arrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  color: var(--ink);
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  margin-left: 4px;
  flex-shrink: 0;
}
.cd-uni-row.is-clickable:hover .cd-uni-arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--brand);
}

/* ===== DTP (Dövlət Təqaüd Proqramı) badge & note ===== */
.cd-uni-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cd-uni-name-line .cd-uni-name {
  margin-bottom: 0;
}
.cd-uni-dtp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #FCD34D;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}
.cd-uni-dtp svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.cd-uni-row.is-dtp {
  position: relative;
}
.cd-unis-dtp-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px !important;
  padding: 8px 14px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: 999px;
  color: #78350F !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  width: fit-content;
}
.cd-unis-dtp-note strong {
  color: #92400E;
  font-weight: 700;
}
.cd-unis-dtp-note svg {
  width: 14px;
  height: 14px;
  color: #D97706;
  flex-shrink: 0;
}

/* ===== How we help ===== */
.cd-help-panel { background: var(--inner); }
.cd-help-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.cd-help-step {
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 4px 14px rgba(26, 26, 77, 0.06);
  transition: transform 240ms var(--ease-out);
}
.cd-help-step:hover { transform: translateY(-4px); }
.cd-help-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--brand);
  opacity: 0.2;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
}
.cd-help-step h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.cd-help-step p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1100px) {
  .cd-quick-grid,
  .cd-cost-grid,
  .cd-help-steps,
  .cd-life-grid { grid-template-columns: repeat(2, 1fr); }
  .cd-cities-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .cd-breadcrumb { margin-left: 50px; margin-right: 50px; }
  .cd-hero { grid-template-columns: 1fr; gap: 40px; padding: 30px 50px 60px; }
  .cd-hero-image { height: 360px; }
  .cd-why-grid { grid-template-columns: 1fr; gap: 32px; }
  .cd-visa-grid { grid-template-columns: 1fr; }
  .cd-employ-row { grid-template-columns: 180px 1fr 110px; gap: 14px; }
  .cd-cities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cd-breadcrumb { margin-left: 28px; margin-right: 28px; font-size: 0.75rem; }
  .cd-hero { padding: 24px 28px 40px; gap: 32px; }
  .cd-flag { font-size: 2.75rem; }
  .cd-hero-image { height: 280px; border-radius: 22px; }
  .cd-hero-stats { left: 14px; right: 14px; bottom: 14px; gap: 8px; }
  .cd-stat { padding: 10px 8px; }
  .cd-stat-num { font-size: 1.125rem; }
  .cd-stat-label { font-size: 0.625rem; }

  .cd-quick-grid,
  .cd-cost-grid,
  .cd-help-steps,
  .cd-life-grid,
  .cd-cities-grid { grid-template-columns: 1fr; }

  .cd-employ-list { padding: 20px 22px; }
  .cd-employ-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cd-employ-bar { order: 3; }
  .cd-employ-badge { order: 2; justify-self: start; }

  .cd-uni-row { padding: 14px 18px; gap: 12px; }
  .cd-uni-name { font-size: 0.9375rem; }
  .cd-uni-tags { display: none; } /* hide on mobile to keep row compact */
  .cd-uni-logo { width: 48px; height: 48px; border-radius: 12px; }
  .cd-uni-logo-text { font-size: 1rem; }
  .cd-uni-logo-rank { width: 18px; height: 18px; font-size: 0.625rem; top: -4px; right: -4px; }
  .cd-uni-arrow { display: none; }

  .cd-cost-card { grid-template-columns: 44px 1fr; }
  .cd-cost-icon { width: 44px; height: 44px; font-size: 1.25rem; }
  .cd-cost-amount { font-size: 1rem; }

  .cd-visa-card { padding: 24px 24px; }
}

/* ===== Loading + Error states ===== */
.cd-loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  opacity: 0.7;
}
.cd-loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: cd-spin 720ms linear infinite;
}
@keyframes cd-spin {
  to { transform: rotate(360deg); }
}

.cd-error-state {
  background: var(--inner);
  min-height: 100vh;
  padding: 80px 0;
}

/* When header is not inside a panel (olke.html dynamic page),
   give it a margin so it doesn't sit flush against the viewport edge */
.header-floating {
  margin: 24px 80px 0;
  background: #fff;
}
@media (max-width: 1024px) {
  .header-floating { margin: 16px 50px 0; }
}
@media (max-width: 700px) {
  .header-floating { margin: 12px 28px 0; }
}

/* ============================================
   Universitetlər siyahısı — şəhər-şəhər (edvoy üslubu)
   ============================================ */

/* City card → clickable when has universities (now a <button>) */
.cd-city-card-clickable {
  background: #fff;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* <button> intrinsically centers its content vertically; in a stretched
     grid row this pushes the image down and leaves a white "shelf" above it
     on shorter cards. Flex column locks the image to the top instead. */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  /* Reset focus to a brand-aware ring instead of browser default */
  outline: none;
}
.cd-city-card-clickable:focus-visible {
  box-shadow: 0 0 0 3px rgba(91, 79, 207, 0.4), 0 4px 14px rgba(26, 26, 77, 0.06);
}
.cd-city-card-clickable .cd-city-image {
  transition: transform 480ms var(--ease-out);
}
.cd-city-card-clickable:hover .cd-city-image { transform: scale(1.04); }

/* Open state — strong visual indicator */
.cd-city-card-clickable.is-open {
  box-shadow: 0 0 0 2px var(--brand), 0 16px 32px rgba(91, 79, 207, 0.20);
  transform: translateY(-3px);
}

.cd-city-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--brand-soft, rgba(91, 79, 207, 0.08));
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  transition: background 200ms var(--ease-out);
}
.cd-city-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 280ms var(--ease-out);
}
.cd-city-card-clickable:hover .cd-city-arrow {
  background: rgba(91, 79, 207, 0.16);
}
.cd-city-card-clickable.is-open .cd-city-arrow {
  background: var(--brand-gradient);
  color: #fff;
}
.cd-city-card-clickable.is-open .cd-city-arrow svg {
  transform: rotate(180deg);
}

/* ============================================
   City accordion: inline universities panel
   that opens beneath the clicked city card.
   It spans the full width of the cities grid.
   ============================================ */
.cd-city-unis-panel {
  grid-column: 1 / -1;            /* full width within the grid */
  background: linear-gradient(180deg, var(--brand-soft, #F4F0FF) 0%, #FAF8FF 100%);
  border-radius: 22px;
  padding: 0 28px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 380ms var(--ease-out),
              opacity 240ms ease-out,
              padding 380ms var(--ease-out),
              margin 380ms var(--ease-out);
  margin: 0;
}
.cd-city-unis-panel.is-open {
  max-height: 2400px;             /* generous ceiling, browser will use real height */
  opacity: 1;
  padding: 28px;
  margin-top: -8px;               /* visually connects to card above */
}

.cd-city-unis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(91, 79, 207, 0.15);
}
.cd-city-unis-head h4 {
  font-family: 'Bricolage Grotesque', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.cd-city-unis-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--brand-gradient);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Grid of university cards inside the accordion */
.cd-city-unis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Individual uni card — same DNA as universities listing page */
.cd-city-uni-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(26, 26, 77, 0.05);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.cd-city-uni-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(26, 26, 77, 0.12);
}
.cd-city-uni-logo {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.08) 100%);
  background-blend-mode: overlay;
  flex-shrink: 0;
}
/* Image variant: white card hosting transparent PNG; subtle border */
.cd-city-uni-logo--img {
  background: #fff;
  background-image: none;
  border: 1px solid rgba(26, 26, 77, 0.08);
  padding: 5px;
  box-sizing: border-box;
  text-shadow: none;
}
.cd-city-uni-logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cd-city-uni-info {
  min-width: 0;
}
.cd-city-uni-info h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 3px;
  line-height: 1.25;
}
.cd-city-uni-info p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.6;
  margin: 0;
}
.cd-city-uni-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  opacity: 0.4;
  transition: transform 240ms var(--ease-out), opacity 240ms;
}
.cd-city-uni-card:hover .cd-city-uni-arrow {
  opacity: 1;
  color: var(--brand);
  transform: translateX(3px);
}

/* ============================================
   EXPANDED university card — used when the
   university entry has researched data fields
   (programs, fields, tuition, QS rank, etc.)
   ============================================ */

/* When at least one expanded card exists, the grid shifts to a wider
   minmax so the rich content has room to breathe. */
.cd-city-unis-grid:has(.cd-city-uni-card--expanded) {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.cd-city-uni-card--expanded {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  /* override the grid layout used by compact cards */
  grid-template-columns: none;
}
.cd-city-uni-card--expanded:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 26, 77, 0.14);
}

/* Header row: logo + name + type badge + summary */
.cd-uni-header {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
}
.cd-uni-header-text {
  min-width: 0;
}
.cd-uni-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cd-uni-header-text h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
}
.cd-uni-summary {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

/* Type badge (Public / Private) */
.cd-uni-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cd-uni-type--public {
  background: rgba(34, 197, 94, 0.12);
  color: #047857;
}
.cd-uni-type--private {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
}

/* Field tags (Engineering, Architecture, etc.) */
.cd-uni-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cd-uni-field {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand-soft, rgba(91, 79, 207, 0.08));
  color: var(--brand);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Stats row (Founded, QS rank, Tuition) */
.cd-uni-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(26, 26, 77, 0.07);
  border-bottom: 1px solid rgba(26, 26, 77, 0.07);
}
.cd-uni-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cd-uni-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cd-uni-stat-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-uni-stat--qs .cd-uni-stat-value {
  color: var(--brand);
}
.cd-uni-stat--tuition .cd-uni-stat-value {
  font-size: 0.8125rem;
}

/* Special "highlight" note */
.cd-uni-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0;
  font-weight: 500;
  border: 1px solid #FCD34D;
}

/* Programs list */
.cd-uni-programs-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.cd-uni-programs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-uni-program {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.4;
}
.cd-uni-program-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 30px;
  text-align: center;
}
.cd-uni-program-level--bsc {
  background: rgba(56, 189, 248, 0.15);
  color: #0369a1;
}
.cd-uni-program-level--msc {
  background: rgba(91, 79, 207, 0.13);
  color: var(--brand);
}
.cd-uni-program-name {
  flex: 1;
}

/* Footer with action links — pushed to the bottom of the card so all
   cards in the grid align their action row at the same vertical level,
   regardless of how much content (note, programs) is above. */
.cd-uni-footer {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  padding-top: 4px;
  margin-top: auto;
}
.cd-uni-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 180ms var(--ease-out);
}
.cd-uni-link--primary {
  background: var(--ink);
  color: #fff;
}
.cd-uni-link--primary:hover {
  background: var(--brand-gradient);
}
.cd-uni-link--external {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(26, 26, 77, 0.18);
}
.cd-uni-link--external:hover {
  border-color: var(--ink);
  background: rgba(26, 26, 77, 0.04);
}

/* Reduce motion: instant open/close */
@media (prefers-reduced-motion: reduce) {
  .cd-city-unis-panel {
    transition: none;
  }
  .cd-city-card-clickable .cd-city-image,
  .cd-city-arrow svg,
  .cd-city-uni-card {
    transition: none;
  }
}

@media (max-width: 700px) {
  .cd-city-unis-panel { padding: 0 18px; }
  .cd-city-unis-panel.is-open { padding: 22px 18px; }
  .cd-city-unis-head h4 { font-size: 1.25rem; }
  .cd-city-unis-grid { grid-template-columns: 1fr; }
  .cd-city-unis-grid:has(.cd-city-uni-card--expanded) {
    grid-template-columns: 1fr;
  }
  .cd-city-uni-card--expanded {
    padding: 16px 18px;
  }
  .cd-uni-stats {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}

/* ===== Universities flat panel ===== */
.cd-unis-flat-panel {
  background: var(--inner);
}

.cd-unis-by-city {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cd-unis-city-group {
  scroll-margin-top: 24px;
}

.cd-unis-city-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.cd-unis-city-head h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cd-unis-city-count {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--mute);
}

/* Edvoy-style flat university cards */
.cd-unis-flat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.cd-uni-flat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 220ms var(--ease);
}
.cd-uni-flat-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(91, 79, 207, 0.15);
}

.cd-uni-flat-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.cd-uni-flat-info {
  flex: 1;
  min-width: 0;
}
.cd-uni-flat-info h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.3;
}
.cd-uni-flat-info p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--mute);
}

.cd-uni-flat-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: var(--brand);
  opacity: 0.5;
  transition: all 200ms var(--ease);
  flex-shrink: 0;
}
.cd-uni-flat-card:hover .cd-uni-flat-arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .cd-unis-flat-grid { grid-template-columns: 1fr; }
  .cd-unis-by-city { gap: 36px; }
  .cd-unis-city-head h3 { font-size: 1.25rem; }
}