/* icon on the portrait instead of the old "certified" badge */
.portrait > img.icon-seal { position: absolute; bottom: -22px; inset-inline-end: 22px; width: 68px; height: 68px; border-radius: 50%; background: #fff; object-fit: cover; aspect-ratio: 1 / 1; box-shadow: 0 12px 30px rgba(20,34,61,.3), 0 0 0 5px rgba(18,165,148,.35); }

/* training topics under the buttons */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 34em; }
.tags span { padding: 7px 15px; border-radius: 999px; background: rgba(18,165,148,.12); border: 1px solid rgba(18,165,148,.35); color: var(--accent-dark); font-size: 14px; font-weight: 600; transition: background .2s, transform .2s; }
.tags span:hover { background: rgba(18,165,148,.22); transform: translateY(-2px); }

/* who the training is for */
.aud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.aud span { padding: 8px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 600; }
.aud span:nth-child(2) { background: var(--accent-dark); }
.aud span:nth-child(3) { background: var(--gold); color: #3a2c0c; }

/* training gallery */
.gallery { grid-template-columns: 1fr 1fr; }
.gallery figure.wide { grid-column: 1 / -1; }
.gallery figure img { height: 320px; max-height: none; }
.gallery figure.wide img { height: auto; max-height: 460px; }

/* AI section photo */
.ai-photo { margin: 50px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ai-photo img { width: 100%; max-height: 520px; object-fit: cover; object-position: center 40%; transition: transform .8s; }
.ai-photo:hover img { transform: scale(1.03); }
.use.gold { border-inline-start-color: var(--gold); }

/* speaking section */
.speak img { max-height: 560px; object-fit: cover; }
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.moments figure { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 16px 40px rgba(20,34,61,.16); }
.moments img { width: 100%; height: 380px; object-fit: cover; object-position: center 30%; transition: transform .6s; }
.moments figure:hover img { transform: scale(1.05); }

/* photo album: cities ribbon + scrolling photos */
#album { overflow: hidden; padding-bottom: 70px; }
.cities, .album { direction: ltr; overflow: hidden; }
.cities { margin-top: 34px; padding: 14px 0; background: #fff; border-block: 1px solid var(--line); }
.cities-track { display: flex; width: max-content; animation: slide 50s linear infinite reverse; }
.cities-track span { display: flex; align-items: center; flex: none; font-family: Georgia, "Times New Roman", serif; font-size: 26px; color: var(--navy); white-space: nowrap; }
.cities-track span::after { content: "\2726"; color: var(--gold); font-size: 14px; margin: 0 28px; }
.album { margin-top: 26px; }
.album-track { display: flex; width: max-content; animation: slide var(--dur, 50s) linear infinite; }
.album:hover .album-track { animation-play-state: paused; }
.album figure { margin: 0 18px 0 0; flex: none; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(20,34,61,.18); background: #fff; }
.album img { height: 380px; width: auto; max-width: none; display: block; }
@keyframes slide { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .cities, .album { overflow-x: auto; }
  .cities-track, .album-track { animation: none; }
  .dup { display: none !important; }
}

@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery figure img { height: 260px; }
  .moments { grid-template-columns: 1fr; }
  .moments img { height: 300px; }
  .portrait > img.icon-seal { width: 56px; height: 56px; bottom: -16px; }
  .album img { height: 260px; }
  .cities-track span { font-size: 21px; }
}