/* File: assets/css/agency-artists-single.css
 *
 * Styling for the single profile page.
 */


/* Self-hosted font note:
 * The @font-face rule is injected from PHP (only if the local WOFF2 exists),
 * so we don't generate 404s when the font file is not yet installed.
 * See: assets/fonts/README.md
 */

.agency-artist {
  /* Align single layout with block theme global sizes (TT5/child theme) */
  max-width: var(--wp--style--global--content-size, 1180px);
  margin: 0 auto;
  padding-top: var(--wp--preset--spacing--50, 28px);
  padding-bottom: var(--wp--preset--spacing--70, 56px);
  padding-left: var(--wp--style--root--padding-left, 16px);
  padding-right: var(--wp--style--root--padding-right, 16px);

  /*
   * Single page pills
   *
   * We use pills in multiple places (Downloads, Externe Profile, Mitgliedschaften,
   * Skills/Sprachen/Dialekte). To keep the *visual* size consistent, we share a
   * few sizing variables here and re-use them below.
   */
  --agency-pill-icon-size: 22px;
  --agency-pill-padding-y: 6px;
  --agency-pill-padding-x: 10px;
}

.agency-artist__hero {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 24px;
}

@media (max-width: 860px) {
  .agency-artist__hero { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Artist quote / teaser
 *
 * Keep the quote prominent, but visually aligned with the homepage claim:
 * - same general sans-serif type direction as the theme/body copy
 * - no decorative serif font
 * - no italic or engraved text effect
 * ---------------------------------------------------------------------- */
.agency-artist__quote {
  /* Make the quote span the full hero width (both columns). */
  grid-column: 1 / -1;

  /* Centered editorial quote without a surrounding box. */
  margin: 0 auto 14px;
  padding: 0;

  max-width: 62ch;
  text-align: center;

  /* Match the homepage claim more closely. */
  font-family: Manrope, sans-serif;
  font-size: clamp(26px, 2.1vw, 32px);
  line-height: 1.2;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: rgb(17, 17, 17);
  text-shadow: none;
}

.agency-artist__quote-text {
  margin: 0;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.agency-artist__quote-author {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 400;
  color: rgba(0,0,0,0.58);
  text-align: center;
}


@media (max-width: 540px) {
  .agency-artist__quote {
    margin-bottom: 12px;
    font-size: clamp(22px, 5.6vw, 30px);
  }
}

/* Desktop-only: add more breathing room between quote block and hero content.
 *
 * We intentionally use margin on the quote itself (and NOT the hero grid `gap`)
 * to avoid changing spacing between headshot and meta on mobile.
 */
@media (min-width: 861px) {
  .agency-artist__quote {
    margin-bottom: 50px;
  }
}


.agency-artist__headshot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid var(--agency-border);
  object-fit: cover;
}

.agency-artist__headshot--placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  border: 1px solid var(--agency-border);
  background: rgba(0,0,0,0.06);
}

.agency-artist__name {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .agency-artist__name {
    font-size: 2.0625rem;
  }
}

@media (min-width: 1024px) {
  .agency-artist__name {
    font-size: clamp(2.0625rem, 1.98rem + 0.4vw, 2.25rem);
  }
}

/*
 * Name row: artist name with Vita icon aligned to the heading's typographic lines.
 *
 * Why this approach:
 * - `align-items: baseline` aligns the flex items on their baselines instead of
 *   visually centering their boxes.
 * - The icon uses a font-relative height, with `1.75cap` as the preferred value.
 *   This scales the icon against the capital-letter height of the current font.
 * - A proportional `em` fallback is kept for older browsers that do not support `cap`.
 */
.agency-artist__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.agency-artist__vita-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  color: rgba(0,0,0,0.72);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: color 160ms ease, opacity 160ms ease;
}

.agency-artist__vita-link:hover {
  color: rgba(0,0,0,0.88);
  opacity: 0.92;
}

.agency-artist__vita-link:focus {
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 4px;
}

.agency-artist__vita-link-icon {
  width: auto;
  height: 1.5em;
  display: inline-block;
  vertical-align: baseline;
}

@supports (height: 1cap) {
  .agency-artist__vita-link-icon {
    height: 1.75cap;
  }
}

@media (max-width: 640px) {
  .agency-artist__name-row {
    gap: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-artist__vita-link {
    transition: none;
  }
}

/*
 * Divider zwischen Name und Facts.
 *
 * Hinweis zur Kaskade:
 * Das Child-Theme setzt auf Darsteller-Seiten ein globales `hr { margin: 0; }`.
 * Damit unser gewünschter Abstand trotzdem greift, ergänzen wir weiter unten
 * eine spezifischere Regel (`body.single-darsteller hr.agency-artist__divider`).
 */
.agency-artist__divider {
  border: 0;
  border-top: 1px solid rgb(128, 128, 128);
  margin: 14px 0 18px;
}

@media (max-width: 540px) {
  .agency-artist__divider {
    margin: 12px 0 16px;
  }
}

/*
 * Höhere Spezifität, um Theme-Reset `body.single-darsteller hr { margin: 0; }`
 * sicher zu übersteuern.
 */
body.single-darsteller hr.agency-artist__divider {
  margin: 14px 0 18px;
}

@media (max-width: 540px) {
  body.single-darsteller hr.agency-artist__divider {
    margin: 12px 0 16px;
  }
}

.agency-artist__aka { color: var(--agency-muted); margin-bottom: 12px; }

.agency-artist__facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 14px;
}

@media (max-width: 540px) {
  .agency-artist__facts { grid-template-columns: 1fr; }
}

.agency-artist__fact dt {
  font-weight: 300;
  /* Labels slightly smaller than before for a lighter, more refined look. */
  font-size: 11px;
  color: var(--agency-muted);
  margin: 0 0 2px;

  /* Match the archive filter label vibe (uppercase + subtle spacing). */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agency-artist__fact dd {
  /* Body values (e.g. "männlich", "Bariton", "25–40", "181 cm") */
  margin: 0;
  font-size: 18px;
}

.agency-artist__primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 16px;
}

.agency-artist__label {
  display: block;
  font-weight: 300;
  /* On the single page we intentionally use a slightly larger label size
   * than on the archive filter UI (which stays at 10px).
   */
  font-size: 11px;
  /* Align label color with other single labels (dt) */
  color: var(--agency-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Section headings that should look like labels (e.g. "Externe Profile", "Mitgliedschaften"). */
.agency-artist__label--section {
  font-weight: 300;
  /* Smaller gap between label-heading and its pill row. */
  margin: 0 0 5px;
}

/* Add vertical rhythm between consecutive label sections (Externe Profile -> Mitgliedschaften). */
.agency-artist__casting + .agency-artist__casting {
  margin-top: 14px;
}

.agency-artist__casting--homepage .agency-artist__label--section {
  margin-bottom: 2px;
}

.agency-artist__homepage-link {
  display: inline-block;
  font-size: 15px;
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.agency-artist__homepage-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.agency-artist__homepage-link:focus-visible {
  outline: 2px solid rgba(0,0,0,0.2);
  outline-offset: 3px;
}

.agency-artist__section-title {
  margin: 0 0 12px;
  font-size: 18px;
}

/* Caps headings (used in the Skills box and its sub-groups, plus the Gallery).
 * We keep the semantic heading levels (h2/h3) in the markup, but align the
 * visual styling to a compact, filter-label-like look.
 */
.agency-artist__caps-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--agency-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.agency-artist__links { margin: 0; padding-left: 18px; }
.agency-artist__links li { margin: 6px 0; }

/* External profile links (casting platforms + social). */
.agency-artist__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Union icons/badges (Mitgliedschaften) */
.agency-artist__union-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agency-union {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--agency-pill-padding-y) var(--agency-pill-padding-x);
  border: 1px solid var(--agency-border);
  border-radius: 999px;
  background: rgba(0,0,0,0.02);
  line-height: 1;
}

.agency-union__icon {
  width: var(--agency-pill-icon-size);
  height: var(--agency-pill-icon-size);
  object-fit: contain;
  border-radius: 4px;
  flex: 0 0 auto;
}

.agency-union__name { font-size: 13px; }


/* Make profile links look like union pills (entire pill clickable). */
.agency-union--link {
  text-decoration: none;
  color: inherit;
}
.agency-union--link:focus {
  outline: 2px solid rgba(0,0,0,0.2);
  outline-offset: 2px;
}


/* Profile link pills: same subtle hover as download pill. */
.agency-union--link {
  transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.agency-union--link:hover {
  background-color: rgba(0,0,0,0.04);
}
@media (prefers-reduced-motion: reduce) {
  .agency-union--link { transition: none; }
}

/* Download pill (Vita PDF): subtle hover with fade-in (only this pill). */
.agency-union--download {
  transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.agency-union--download:hover {
  background-color: rgba(0,0,0,0.04);
}
@media (prefers-reduced-motion: reduce) {
  .agency-union--download { transition: none; }
}

/* Small icon inside buttons (e.g. Vita PDF). */
.agency-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.agency-link-icon {
  /* Match the union badge icon size so pills feel consistent in height. */
  width: var(--agency-pill-icon-size);
  height: var(--agency-pill-icon-size);
  border-radius: 3px;
  flex: 0 0 auto;
}

/*
 * Make the skill/language/dialect pills breathe a little more so their height
 * aligns better with the pill rhythm of the profile link and union pills.
 *
 * We scope this to the single template to keep the archive/card styling intact.
 */
.agency-artist .agency-tag {
  padding: calc(var(--agency-pill-padding-y) + 1px) calc(var(--agency-pill-padding-x) + 2px);
}

/* Empty-state copy inside the skills section should read as quiet helper text,
 * not as full-size body copy. We keep it clearly readable, but smaller than
 * the profile fact values and slightly larger than the pill labels.
 */
.agency-artist__section--skills > .agency-muted {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.agency-artist__grid {
  display: grid;
  gap: 18px;
}

.agency-artist__section {
  border: 1px solid var(--agency-border);
  border-radius: var(--agency-radius);
  padding: 16px;
}

.agency-artist__subgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
@media (max-width: 640px) {
  .agency-artist__subgrid { grid-template-columns: 1fr; }
}

.agency-artist__subheading { margin: 0 0 8px; font-size: 14px; color: var(--agency-muted); }

.agency-artist__kv {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
@media (max-width: 520px) {
  .agency-artist__kv { grid-template-columns: 1fr; }
}
.agency-artist__kv dt {
  font-size: 11px;
  color: var(--agency-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agency-artist__kv dd { margin: 0; }

.agency-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 1024px) {
  .agency-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.agency-gallery a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--agency-border);
  background: rgba(0,0,0,0.05);
}

.agency-gallery__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.agency-prod-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}

.agency-prod-filter__label { color: var(--agency-muted); font-size: 13px; }

.agency-chip-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--agency-border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.agency-chip-btn.is-active {
  background: rgba(0,0,0,0.9);
  border-color: rgba(0,0,0,0.9);
  color: #fff;
}

.agency-credits { display: grid; gap: 12px; }
.agency-credit { border: 1px solid var(--agency-border); border-radius: 14px; padding: 12px; }
.agency-credit__title { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.agency-credit__role { color: var(--agency-muted); }
.agency-credit__meta { margin-top: 6px; color: var(--agency-muted); font-size: 13px; }
.agency-credit__creatives { margin-top: 8px; font-size: 13px; color: var(--agency-muted); display: grid; gap: 3px; }
.agency-credit__desc { margin-top: 10px; }

.agency-training { display: grid; gap: 12px; }
.agency-train { border: 1px solid var(--agency-border); border-radius: 14px; padding: 12px; }
.agency-train__header { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.agency-train__years { color: var(--agency-muted); font-size: 13px; }
.agency-train__line { margin-top: 6px; color: var(--agency-muted); }

.agency-artist__footer { margin-top: 18px; }
.agency-backlink { text-decoration: none; color: inherit; }