/* ==========================================================================
   O'Dance Holiday — Crète 2027 · Professeurs page (professeurs.html). Scoped under .odp.
   ========================================================================== */
@font-face { font-family: "ODP Barlow"; src: url("fonts/barlow-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODP Barlow"; src: url("fonts/barlow-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ODP Barlow Semi"; src: url("fonts/barlow-semi-condensed-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ODP Barlow Semi"; src: url("fonts/barlow-semi-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODP Marck"; src: url("fonts/marck-script.woff") format("woff"); font-weight: 400; font-display: swap; }

.odp {
  --odp-navy: #0b3c9a;
  --odp-text: #24406f;
  --odp-line: #e1eaf6;
  --odp-yellow: #fdd535;
  --odp-pink: #e5197f;
  --odp-gutter: clamp(16px, 4vw, 48px);       /* same as the top menu */
  background: linear-gradient(180deg, #eef5fd 0%, #ffffff 34%);
  color: var(--odp-text);
  font-family: "ODP Barlow", system-ui, sans-serif;
  padding-block: 28px 34px;
}
.odp *, .odp *::before, .odp *::after { box-sizing: border-box; }
.odp :where(h1, h2, p, ul) { margin: 0; padding: 0; }
.odp ul { list-style: none; }

.odp__inner { max-width: 1500px; margin: 0 auto; padding: 0 var(--odp-gutter); }   /* same width as the menu */

.odp__head { text-align: center; max-width: 760px; margin: 0 auto; }
.odp__eyebrow { font-family: "ODP Marck", cursive; font-size: 28px; line-height: 1; color: #1f5fb4; }
.odp__title {
  margin-top: 0;
  font-family: "ODP Barlow Semi", sans-serif; font-weight: 800;
  font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: .005em;
  text-transform: uppercase; color: var(--odp-navy);
}
.odp__lead { margin-top: 12px; font-size: 17px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }

.odp__grid {
  max-width: 1320px; margin: 24px auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ---------- ProfessorCard: the O'Dance Holiday / Crète 2027 artwork is the card ---------- */
.odp-card { margin: 0; }
.odp-card__link { display: block; color: inherit; text-decoration: none; border-radius: 14px; }
.odp-card__link:focus-visible { outline: 3px solid #1f5fb4; outline-offset: 4px; }
.odp-card__art {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;                 /* original artwork ratio (1254 × 1254) */
  border-radius: 14px; overflow: hidden;
  background: #3fb4f5;
  box-shadow: 0 10px 26px rgba(11, 60, 140, .16), 0 1px 3px rgba(11, 60, 140, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.odp-card__link:hover .odp-card__art, .odp-card:hover .odp-card__art { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 60, 140, .22); }
.odp-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The central circle of the artwork — the only place the portrait appears */
.odp-card__portrait {
  position: absolute;
  left: 27.59%; top: 29.27%; width: 43.94%; height: 44.74%;
  border-radius: 50%; overflow: hidden;
  isolation: isolate;
}
.odp-card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;   /* keeps faces in frame */
  display: block;
}
.odp-card__photo { opacity: 0; transition: opacity .3s ease; }
.odp-card__portrait.has-photo .odp-card__photo { opacity: 1; }

/* Name + discipline: real text, lower part of the circle, over the photo */
.odp-card__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 9% 5% 13%;
  display: grid; gap: .2em; justify-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(8, 36, 104, 0) 0%, rgba(8, 36, 104, .62) 38%, rgba(8, 36, 104, .86) 100%);
}
.odp-card__name {
  margin: 0;
  font-family: "ODP Barlow Semi", sans-serif; font-weight: 800;
  font-size: 5.6cqw; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 20, 70, .45);
  text-wrap: balance;
}
.odp-card__discipline {
  margin: 0;
  font-family: "ODP Barlow Semi", sans-serif; font-weight: 700;
  font-size: 3.4cqw; line-height: 1.2; letter-spacing: .01em;
  color: #fdd535;
}
.odp-card__country { margin: 0; font-family: "ODP Barlow", sans-serif; font-weight: 500; font-size: 2.7cqw; color: rgba(255, 255, 255, .9); }

/* Optional short bio, shown under the card only when it is filled in */
.odp-card__bio { margin: 10px 4px 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--odp-text); text-align: center; }

.odp__cta {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px;
}
.odp__cta p { font-size: 17px; font-weight: 500; }
.odp__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-family: "ODP Barlow Semi", sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.odp__btn svg { width: 12px; height: 12px; flex: none; }
.odp__btn--primary { background: var(--odp-yellow); color: #0a2a6b; box-shadow: 0 5px 14px rgba(10, 42, 107, .16); }
.odp__btn--primary:hover { background: #ffe066; transform: translateY(-1px); }
.odp__btn--ghost { border: 1.5px solid var(--odp-navy); color: var(--odp-navy); background: #fff; }
.odp__btn--ghost:hover { background: var(--odp-navy); color: #fff; }
.odp__btn:focus-visible { outline: 3px solid #1f5fb4; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .odp-card__photo,
  .odp-card__art, .odp__btn { transition: none; }
  .odp-card__link:hover .odp-card__art, .odp-card:hover .odp-card__art, .odp__btn:hover { transform: none; }
}
@media (max-width: 1179.98px) {
  .odp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; gap: 16px; }
}
@media (max-width: 600px) {
  .odp__grid { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .odp__lead { font-size: 16px; }
}
@media (max-width: 480px) {
  .odp__btn { width: 100%; }
  .odp__cta p { width: 100%; text-align: center; }
}