/* Creators (/artists) — Kakadu people template (C07/C10/C13/C17/C19).
   Spacing: section 120/80/40 (kernel --sec-y), gaps 20/40/80, radius 40 -> 20 on phone. */

/* ---------- C07 hero, Display H1 variant + stats + banner ---------- */
.ar-hero .lead { max-width: 758px; }
.ar-hero h1 { overflow-wrap: break-word; hyphens: manual; }
/* Display H1 is 48/48 on phone (Kakadu type scale / C07), not the home H1's 56.
   The longest unbreakable DE/FR words ("Creator:innen,", "correspondent") are ~7.6em wide and
   would spill past the 20px gutters at 375: those locales scale down to fit the column (cqi). */
.ar-hero > .container, .ar-platforms > .container { container-type: inline-size; }
@media (max-width: 767.98px) {
  .ar-hero .t-h1 { font-size: 48px; }
  .ar-hero .t-h1:is(:lang(de), :lang(fr)) { font-size: min(48px, calc(100cqi / 7.7)); }
  .ar-split h2:lang(de) { font-size: min(40px, calc(100cqi / 7.5)); }
}

/* stats: three hairline-topped cells (C31 rules, Kakadu stat rows). Hero text -> stats 80 / 80 / 60 (D / T / M),
   stats -> banner 120 / 80 / 60: the hero->media step of /ueber-uns, /soon and /leistungen. */
.ar-stats { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); text-align: left; }
.ar-stats li { position: relative; padding-top: 20px; overflow-wrap: break-word; }
.ar-stats li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid currentColor; }
.ar-banner { margin-top: 120px; }

/* ---------- C10 rotating platform H2 | intro + topic tags ---------- */
.ar-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ar-split h2 { min-width: 0; overflow-wrap: break-word; }
.ar-platforms-body { display: flex; flex-direction: column; gap: 40px; max-width: 593px; }
.ar-topics-label { font-family: var(--font-body-strong); font-weight: 700; margin-bottom: 20px; }
.ar-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-tags li { padding: 10px 20px; border-radius: 40px; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- roster: C17 creator cards ---------- */
.ar-card { position: relative; container-type: inline-size; }
.ar-card .well img { object-position: 50% 30%; }
/* platform chips over the photo (C06 chip: ink, cream glyph; hover ink-80) */
.ar-chips { position: absolute; z-index: 2; top: 30px; left: 30px; right: 30px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.ar-chip {
  pointer-events: auto; width: 40px; height: 40px; border-radius: 40px; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-80);
  transition: background-color 400ms var(--spring-b02);
}
.ar-chip:hover { background: var(--ink-80); }
/* the chip sits on a photo of any brightness: two-tone ring (cream inside, ink outside) */
.ar-card .ar-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--cream-80), 0 0 0 2px var(--cream); }
.ar-chip svg { width: 18px; height: 18px; }
.ar-reach { overflow-wrap: break-word; }
/* the sedcard pill is the card link: its ::after stretches over the whole card (chips sit above it) */
.ar-foot { display: flex; padding: 0 10px 10px; }
.ar-cta { position: static; }
.ar-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.ar-card:has(.ar-cta:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.ar-cta:focus-visible { outline: none; }

/* desktop hover (C17, Kakadu person-card motion): the well shrinks by x0.826 (429 -> 354.5 at 1440) and the freed strip
   reveals the pill (opacity .001->1, y 20->0, 200ms ease-framer); card height stays constant.
   Heights use the card's content width (100cqi = well width) so both lengths interpolate linearly.
   The 20px rise is a margin, not a transform: a transformed pill would become the containing block
   of its own ::after and the whole-card link would shrink to the pill until the hover settled. */
@media (hover: hover) and (min-width: 1280px) {
  .ar-card .well { aspect-ratio: auto; height: calc(100cqi * 429 / 342); transition: height 200ms var(--ease-framer); }
  .ar-foot { height: 0; padding: 0 10px; align-items: flex-start; transition: height 200ms var(--ease-framer); }
  .ar-foot .btn { margin-top: 30px; opacity: .001; }
  /* strip = x0.174 of the well, but never less than the pill + 10px (65): at 1280 the ratio alone
     gives 63.8 and the pill would cut into the card padding */
  .ar-card:is(:hover, :focus-within) .well { height: calc(100cqi * 429 / 342 - max(65px, 100cqi * 74.5 / 342)); }
  .ar-card:is(:hover, :focus-within) .ar-foot { height: max(65px, 100cqi * 74.5 / 342); }
  .ar-card:is(:hover, :focus-within) .ar-foot .btn {
    margin-top: 10px; opacity: 1;
    transition: opacity 200ms var(--ease-framer), margin-top 200ms var(--ease-framer), background-color 400ms var(--spring-b02), padding-right 400ms var(--spring-b02);
  }
}
@media (max-width: 1279.98px) {
  .ar-card .well img { object-position: 50% 25%; }
  .ar-chips { top: 30px; left: 30px; }
}
@media (max-width: 767.98px) {
  .ar-chips { top: 20px; left: 20px; right: 20px; }
  .ar-chip { width: 44px; height: 44px; } /* 44×44 touch target */
  .ar-foot { padding: 0 10px 10px; }
}

/* ---------- C13 statement ---------- */
.ar-statement .statement { text-wrap: balance; }

/* ---------- for creators: outlined card closing the roster grid (C18 language) ----------
   span-dN / span-tN = cells left in the last row (computed from the creator count).
   Its own inline-size container: when it only gets one column the row stacks. */
.ar-join { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ar-join.span-d1 { grid-column: span 1; }
.ar-join.span-d2 { grid-column: span 2; }
.ar-join.span-d3 { grid-column: 1 / -1; }
.ar-join h3 { max-width: 948px; overflow-wrap: break-word; }
.ar-join-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.ar-join-row p { max-width: 593px; }
.ar-join-row .btn { flex: none; }
@container (max-width: 560px) {
  .ar-join h3 { font-size: 40px; }
  .ar-join-row { flex-direction: column; align-items: flex-start; gap: 40px; }
}

/* ---------- for brands: value card ---------- */
.ar-collab { padding-top: 0; }
.ar-brands { container-type: inline-size; min-height: 480px; display: flex; flex-direction: column; justify-content: space-between; gap: 80px; }
.ar-brands h2 { max-width: 948px; overflow-wrap: break-word; }
.ar-brands-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.ar-brands-row p { max-width: 593px; }
.ar-brands-row .btn { flex: none; }

/* ---------- tablet ---------- */
@media (max-width: 1279.98px) {
  .ar-stats { grid-template-columns: minmax(0, 1fr); }
  .ar-banner { margin-top: 80px; }
  .ar-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ar-brands { min-height: 400px; }
  .ar-join.span-t1 { grid-column: span 1; }
  .ar-join.span-t2 { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  .ar-stats { margin-top: 60px; row-gap: 20px; } /* hairline -> own text 20 = previous text -> hairline 20 */
  .ar-banner { margin-top: 60px; }
  .ar-tags li { padding: 8px 16px; }
  .ar-brands { min-height: 0; gap: 40px; }
  /* FR "l’adéquation," is ~8.2em wide: fit it to the card instead of chopping the word */
  .ar-brands h2:lang(fr) { font-size: min(40px, calc(100cqi / 8.4)); }
  .ar-join.ar-join { grid-column: auto; margin-top: 20px; gap: 30px; }
  .ar-join h3 { font-size: 28px; }
  .ar-brands-row, .ar-join-row { flex-direction: column; align-items: flex-start; gap: 40px; }
}