/*
 * [td_ach] (inc/shortcode-achievements.php). Mirrors AchievementCard.tsx,
 * MedalBadge.tsx, IndividualCard.tsx and GymnastDetail.tsx. The card frames,
 * grids, overlay container and headings are Elementor elements (global
 * classes td-ach-* / td-ind-* / td-gym-*); this file only styles the
 * shortcode's own markup. md: = 768px.
 */

/* MedalBadge: absolute top-3 right-3 z-10 w-10 h-10 bg-dark/80 backdrop-blur-sm shadow-lg rounded-full text-lg */
.td-ach-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(17, 17, 17, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Card image: fill + object-cover, zoom on card hover (td-ach-card) */
.td-ach-media__img,
.elementor img.td-ach-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.td-ach-card:hover .td-ach-media__img {
  transform: scale(1.05);
}

.td-ach-media__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-ach-media__ghost span {
  font-family: "Play", sans-serif;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(17, 17, 17, 0.06);
}

/* Overlay contents (container = Elementor td-ach-overlay) */
.td-ach-ov {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: flex-end;
}

.td-ach-ov p {
  margin: 0;
}

.td-ach-ov__loc,
.td-ach-ov__age,
.td-ach-ov__cat {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem !important;
}

.td-ach-ov__loc {
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-ach-ov__age {
  color: rgba(255, 255, 255, 0.8);
}

.td-ach-ov__cat {
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem !important;
}

.td-ach-ov__finals {
  margin-bottom: 0.5rem;
}

.td-ach-ov__fh {
  margin-bottom: 0.375rem !important;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-ach-ov__finals ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-ach-ov__finals li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.td-ach-ov__finals li + li {
  margin-top: 0.25rem;
}

.td-ach-ov__app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: #fff;
}

.td-ach-ov__app span:last-child {
  text-transform: capitalize;
}

.td-ach-ov__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
}

.td-ach-ov__dot--gold { background: #E8B923; }
.td-ach-ov__dot--silver { background: #B8BCC3; }
.td-ach-ov__dot--bronze { background: #C77B47; }

.td-ach-ov__rank {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.td-ach-ov__team {
  margin-top: auto;
}

.td-ach-ov__bar {
  width: 1.5rem;
  height: 1px;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.3);
}

.td-ach-ov__team p {
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 300;
  color: #fff;
}

@media (min-width: 768px) {
  .td-ach-ov__loc,
  .td-ach-ov__age,
  .td-ach-ov__cat,
  .td-ach-ov__finals li {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .td-ach-ov__fh,
  .td-ach-ov__rank {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Info: placement font-display text-lg md:text-xl text-pink uppercase mb-2 */
.td-ach-placement {
  margin: 0 0 0.5rem;
  font-family: "Play", sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  color: #E8247C;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .td-ach-placement {
    font-size: 1.25rem;
  }
}

/* year: text-xs font-light text-muted uppercase tracking-wider mt-3 block */
.td-ach-year {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 300;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* SectionStrip count subtitle */
.td-ach-count {
  font: inherit;
  color: inherit;
}

/* IndividualCard: category tag absolute top-3 left-3 z-[2] text-[0.55rem] semibold uppercase tracking-wider px-2.5 py-0.5 rounded-sm */
.td-ind-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.125rem 0.625rem;
  border-radius: 0.125rem;
  font-size: 0.55rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-ind-tag--medalist { background: #E8247C; }
.td-ind-tag--finalist { background: #8B2FC9; }

/* Portrait: fill + object-contain (card and detail frame) */
.td-ind-portrait__img,
.elementor img.td-ind-portrait__img { /* beats Elementor's `.elementor img { height: auto }` */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.td-ind-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-family: "Play", sans-serif;
  font-weight: 800;
  font-size: clamp(8rem, 20vw, 12rem);
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(135deg, #E8247C, #8B2FC9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.06;
  transition: opacity 0.5s;
}

.td-ind-card:hover .td-ind-ghost {
  opacity: 0.1;
}

/* Meta row: flex items-center gap-3 */
.td-ind-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.td-ind-born {
  font-size: 0.7rem;
  line-height: 1.5;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.td-ind-chip {
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.6rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.td-ind-chip--pink { background: rgba(232, 36, 124, 0.15); color: #E8247C; }
.td-ind-chip--purple { background: rgba(139, 47, 201, 0.12); color: #8B2FC9; }
.td-ind-chip--muted { background: rgba(17, 17, 17, 0.06); color: #666; }

/* (body h1: beats the kit's .elementor-kit-N h1 typography) GymnastDetail name: font-display text-[clamp(2.5rem,7vw,5rem)] uppercase text-dark leading-[0.9] */
body h1.td-gym-name {
  margin: 0;
  font-family: "Play", sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.9;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: #111;
}

.td-gym-name__last {
  color: #E8247C;
}

.td-gym-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 36, 124, 0.07), rgba(139, 47, 201, 0.07));
}

.td-gym-ghost span {
  font-family: "Play", sans-serif;
  font-weight: 800;
  font-size: clamp(8rem, 20vw, 14rem);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  background: linear-gradient(135deg, #E8247C, #8B2FC9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.08;
}

/* Bio list: li flex items-start gap-2 py-2.5 border-b border-dark/[0.08] last:border-b-0 text-[0.88rem] leading-relaxed */
.td-gym-bio {
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-gym-bio li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.88rem;
  line-height: 1.625;
  color: #111;
}

.td-gym-bio li:last-child {
  border-bottom: 0;
}

.td-gym-bio__dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 0.55rem;
  border-radius: 9999px;
  background: #E8247C;
}

.td-gym-bio__medal {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Coach: mt-10 pt-6 border-t-2 border-dark/[0.08] */
.td-gym-coach {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(17, 17, 17, 0.08);
}

.td-gym-coach__label {
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.5;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.td-gym-coach__name {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.75rem;
}