/* ============================================
   Povezani kursevi i gradovi
   templates/part/courses-cities.twig
   Padajuće kartice u stilu i bojama course-overview.css.
   ============================================ */

.ccs {
  --ccs-surface: var(--white);
  --ccs-line: rgba(65, 133, 170, 0.18);
  --ccs-field: #c9ced8;
  --ccs-text: var(--grey-olive);
  --ccs-muted: var(--grey-clay);

  background: var(--white);
}

.ccs-list {
  display: grid;
  gap: 0.85rem;
}

.ccs-card {
  --ccs-accent: var(--blue-classic);
  --ccs-accent-soft: var(--blue-faint);

  position: relative;
  border: 1px solid var(--ccs-line);
  background: var(--ccs-surface);
  box-shadow: 0 10px 26px rgba(13, 14, 18, 0.05);
  scroll-margin-top: 6rem;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.ccs-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--ccs-accent);
  content: "";
}

.ccs-card:nth-child(2n) {
  --ccs-accent: var(--orange-dark);
  --ccs-accent-soft: rgba(255, 115, 25, 0.12);
}

.ccs-card:hover {
  border-color: color-mix(in srgb, var(--ccs-accent) 42%, var(--white));
  box-shadow: 0 16px 34px rgba(13, 14, 18, 0.09);
}

.ccs-head-row {
  margin: 0;
}

.ccs-toggle {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 1.1rem 1.1rem 1.1rem 1.35rem;
  border: 0;
  background: transparent;
  color: var(--grey-olive);
  text-align: left;
}

.ccs-toggle:focus-visible {
  outline: 2px solid var(--ccs-accent);
  outline-offset: -2px;
}

.ccs-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ccs-accent-soft);
  color: var(--ccs-accent);
  font-size: 1.1rem;
}

.ccs-card-title {
  flex: 1 1 0;
  font-family: var(--h-font), system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

.ccs-count {
  order: 4;
  flex: 1 0 100%;
  padding-left: 3.65rem;
  color: var(--ccs-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.ccs-count::before {
  content: attr(data-count);
}

.ccs-chev {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ccs-accent-soft);
  transition: transform 0.25s ease;
}

.ccs-chev::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ccs-accent);
  border-bottom: 2px solid var(--ccs-accent);
  content: "";
  transform: translate(-50%, -70%) rotate(45deg);
}

.ccs-toggle:not(.collapsed) .ccs-chev {
  transform: rotate(180deg);
}

.ccs-body {
  padding: 0.25rem 1.35rem 1.4rem;
  color: var(--ccs-text);
}

.ccs-card-lead {
  margin-bottom: 1rem;
  color: var(--ccs-muted);
}

/* ---- Povezani kursevi ---- */
/* Obični linkovi; podvlačenje pri prelazu je sajtovsko `.hover-me` iz shell.css. */
.ccs-courses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccs-courses a {
  padding: 0.2rem 0;
  color: var(--grey-olive);
  font-weight: 600;
  transition: color 0.2s ease;
}

.ccs-courses a i {
  margin-right: 0.35rem;
  color: var(--ccs-accent);
  font-size: 0.85rem;
}

.ccs-courses a:hover,
.ccs-courses a:focus-visible {
  color: var(--ccs-accent);
}

/* ---- Gradovi ---- */
.ccs-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 380px;
  margin-bottom: 1.25rem;
  padding: 0 1rem;
  border: 1px solid var(--ccs-field);
  border-radius: 100px;
  background: var(--white);
  color: var(--ccs-muted);
}

.ccs-filter:focus-within {
  border-color: var(--ccs-accent);
}

.ccs-filter-input {
  width: 100%;
  padding: 0.65rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--grey-olive);
}

.ccs-filter-input::placeholder {
  color: var(--ccs-muted);
}

.ccs-sub + .ccs-sub {
  margin-top: 1.25rem;
}

.ccs-sub-label {
  margin-bottom: 0.5rem;
  color: var(--ccs-muted);
  font-family: var(--h-font), system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ccs-sub-label span {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  border-radius: 100px;
  background: var(--ccs-accent-soft);
  color: var(--ccs-accent);
  letter-spacing: 0;
}

.ccs-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccs-links a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ccs-text);
  text-decoration: none;
}

.ccs-links a:hover,
.ccs-links a:focus-visible {
  color: var(--ccs-accent);
}

.ccs-sub.is-muted .ccs-links a {
  color: var(--ccs-muted);
}

.ccs-sub.is-muted .ccs-links a:hover {
  color: var(--ccs-accent);
}

.ccs-empty {
  margin: 0.5rem 0 0;
  color: var(--ccs-muted);
}

/* ---- Oblici nastave (part/course-group-types.twig) ---- */
.ccg-grid {
  display: grid;
  gap: 0.85rem;
}

.ccg-model {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--ccs-line);
  border-top: 3px solid var(--ccs-accent);
  background: var(--white);
}

.ccg-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--grey-olive);
  font-family: var(--h-font), system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.ccg-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ccs-accent-soft);
  color: var(--ccs-accent);
  font-size: 0.95rem;
}

/* dl je samo omotač — redovi su direktna deca mreže modela (subgrid ispod). */
.ccg-rows {
  display: contents;
}

.ccg-row {
  padding-top: 0.65rem;
  border-top: 1px solid var(--ccs-line);
}

.ccg-row dt {
  margin-bottom: 0.2rem;
  color: var(--ccs-muted);
  font-family: var(--h-font), system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ccg-row dd {
  margin: 0;
  color: var(--ccs-text);
}

.ccg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ccg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  background: var(--ccs-accent-soft);
  color: var(--ccs-accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.ccg-chip.is-off {
  background: transparent;
  color: var(--ccs-muted);
  font-weight: 600;
}

.ccg-formats {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.ccg-format {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--ccs-accent-soft);
}

.ccg-format .ccg-icon {
  background: var(--white);
}

.ccg-format-title {
  margin: 0 0 0.15rem;
  color: var(--grey-olive);
  font-weight: 800;
}

.ccg-format-text {
  margin: 0;
  color: var(--ccs-text);
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  .ccs-courses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .ccs-toggle {
    flex-wrap: nowrap;
  }

  .ccs-count {
    order: 0;
    flex: 0 0 auto;
    padding-left: 0;
  }

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

  /* Isti red poređenja u istoj visini u sve tri kolone. */
  .ccg-model {
    grid-row: span var(--ccg-span);
    grid-template-rows: subgrid;
  }

  .ccg-formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .ccs-toggle {
    padding: 1.35rem 1.4rem 1.35rem 1.6rem;
  }

  .ccs-card-title {
    font-size: 1.3rem;
  }

  .ccs-body {
    padding: 0.25rem 1.4rem 1.6rem 1.6rem;
  }

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

  .ccs-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccs-card,
  .ccs-chev,
  .ccs-courses a {
    transition: none;
  }
}