/*
 * FKCZ design tokens.
 *
 * Values are verified against the live Webflow site (site id 65081db7408d9fa0370f04a9)
 * via the Webflow MCP style/variable/font tools — see DESIGN-TOKENS.md.
 *
 * Every color falls back to the Webflow site variable first (`var(--red-300, ...)`),
 * so a component installed on the site inherits the site's own tokens and still
 * renders correctly in the local playground where those variables do not exist.
 */

.fkcz-theme {
  /* Palette — Webflow site variables with literal fallbacks */
  --fkcz-primary: var(--red-300, #ff0000);
  --fkcz-primary-strong: var(--red-400, #af0000);
  --fkcz-primary-deep: var(--red-500, #7a0000);
  --fkcz-surface: var(--red-100, #ffdcdc);
  --fkcz-surface-strong: var(--red-200, #ffaeae);
  --fkcz-canvas: var(--neutral, #ffffff);
  --fkcz-text: var(--black, #000000);
  --fkcz-text-muted: #6b6b6b;
  --fkcz-border-muted: var(--neutral-200, #9d9d9d);
  --fkcz-on-primary: var(--neutral, #ffffff);
  --fkcz-gold: var(--gold-200, #db9e4d);
  --fkcz-gold-strong: var(--gold-300, #93590c);
  /* Sampled from the source mockups; the site has no variable for either. */
  --fkcz-avatar-bg: var(--red-200, #ffaeae);

  /* Typography — site uses Cofopeshka for display, Inter for body.
     Three cuts, each with its own job: 260 for section headings, 550 for headlines and teams,
     75 for a player's surname. */
  --fkcz-font-display: "Cofopeshka 550", "Cofopeshka 75", "Archivo Narrow", "Arial Narrow", Impact, sans-serif;
  --fkcz-font-heading: "Cofopeshka 260", "Cofopeshka 550", "Archivo Narrow", "Arial Narrow", Impact, sans-serif;
  --fkcz-font-surname: "Cofopeshka 75", "Cofopeshka 550", "Archivo Narrow", "Arial Narrow", Impact, sans-serif;
  --fkcz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fkcz-weight-display: 900;
  --fkcz-leading-display: 1;
  --fkcz-leading-body: 1.5;

  /* Type scale — fluid, tuned so a 2560px viewport lands on the site's computed sizes */
  --fkcz-size-section-title: 3.375rem;
  --fkcz-size-headline: clamp(1.5rem, 1.41vw, 2.25rem);
  --fkcz-size-excerpt: clamp(1.125rem, 1.09vw, 1.75rem);
  --fkcz-size-meta: clamp(0.875rem, 0.63vw, 1rem);
  --fkcz-size-link: clamp(1rem, 0.7vw, 1.125rem);
  --fkcz-size-page-number: 1.25rem;
  --fkcz-size-surname: 2.5rem;
  /* Larger than a section title: empty-state headline. */
  --fkcz-size-display: clamp(2rem, 2.15vw, 3.4rem);
  --fkcz-size-body: clamp(1rem, 0.78vw, 1.25rem);
  --fkcz-size-label: clamp(0.75rem, 0.55vw, 0.875rem);

  /* Spacing scale — 4px grid: 8,12,16,20,28,32,40,52,68 */
  --fkcz-space-1: 8px;
  --fkcz-space-2: 12px;
  --fkcz-space-3: 16px;
  --fkcz-space-4: 20px;
  --fkcz-space-5: 28px;
  --fkcz-space-6: 32px;
  --fkcz-space-7: 40px;
  --fkcz-space-8: 52px;
  --fkcz-space-9: 68px;

  /* Layout */
  --fkcz-container: 75rem;
  --fkcz-gutter: clamp(20px, 4vw, var(--fkcz-space-9));

  /* Shape — 8px is the brief's radius; controls match the site's .pagination-button (6px) */
  --fkcz-radius: 8px;
  --fkcz-radius-control: 6px;
  --fkcz-hairline: 1px;

  /* Motion — site transitions run 250ms / 300ms ease */
  --fkcz-duration-fast: 0.2s;
  --fkcz-duration: 0.25s;
  --fkcz-ease: ease;
  /* Entry motion: long enough to read as deliberate, short enough not to be waited on. */
  --fkcz-duration-reveal: 0.45s;
  --fkcz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fkcz-reveal-rise: 0.75rem;
  --fkcz-reveal-delay: calc(var(--fkcz-reveal-index, 0) * 60ms);

  /* Focus — the brief specifies no ring; a visible ring is kept for keyboard access */
  --fkcz-focus-width: 2px;
  --fkcz-focus-offset: 3px;
}

/*
 * The site's own breakpoints, not fluid clamps: the heading and the surname step at 991 and 767
 * exactly as the Webflow classes do.
 */
@media (max-width: 991px) {
  .fkcz-theme {
    --fkcz-size-section-title: 1.875rem;
  }
}

@media (max-width: 767px) {
  .fkcz-theme {
    --fkcz-size-surname: 2.25rem;
  }
}

/* Shared chrome for every section component: outer band, content column, header, show-more.
   Each component renders in its own shadow root, so this is imported per component. */

.fkcz-section,
.fkcz-section *,
.fkcz-section *::before,
.fkcz-section *::after {
  box-sizing: border-box;
}

.fkcz-section {
  margin: 0;
  color: var(--fkcz-text);
  font-family: var(--fkcz-font-body);
  font-size: 1rem;
  line-height: var(--fkcz-leading-body);
}

.fkcz-section__container {
  /* The Designer field sets the content width; the gutter sits outside it. */
  max-width: calc(var(--fkcz-section-container, 75rem) + var(--fkcz-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fkcz-gutter);
}

/* ---------- Header ---------- */

.fkcz-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fkcz-space-4);
  margin-bottom: clamp(var(--fkcz-space-5), 2.5vw, var(--fkcz-space-8));
}

.fkcz-section__title {
  margin: 0;
  color: var(--fkcz-primary);
  font-family: var(--fkcz-font-heading);
  font-size: var(--fkcz-size-section-title);
  font-weight: var(--fkcz-weight-display);
  line-height: var(--fkcz-leading-display);
  text-transform: uppercase;
}

.fkcz-section__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--fkcz-space-1);
  flex: none;
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-link);
  text-decoration: none;
  transition: color var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-section__view-all:hover {
  color: var(--fkcz-primary);
}

.fkcz-section__view-all-icon {
  flex: none;
  transition: transform var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-section__view-all:hover .fkcz-section__view-all-icon {
  transform: translateX(2px);
}

/* ---------- Show more ---------- */

.fkcz-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--fkcz-space-6), 3vw, var(--fkcz-space-9));
}

.fkcz-show-more {
  appearance: none;
  padding: 0 var(--fkcz-space-2) var(--fkcz-space-2);
  border: 0;
  border-bottom: var(--fkcz-hairline) solid currentColor;
  background: none;
  color: var(--fkcz-primary);
  font-family: var(--fkcz-font-display);
  font-size: var(--fkcz-size-link);
  font-weight: var(--fkcz-weight-display);
  letter-spacing: 0.06em;
  line-height: var(--fkcz-leading-display);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-show-more:hover {
  color: var(--fkcz-primary-strong);
}

.fkcz-show-more[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Shared states ---------- */

.fkcz-section__status {
  padding-block: var(--fkcz-space-7);
  color: var(--fkcz-text-muted);
  font-size: var(--fkcz-size-body);
  text-align: center;
}

/* Visible to screen readers only. */
.fkcz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Loading ---------- */

/*
 * Skeletons take the shape of the rows they stand in for, so the layout does not jump when the
 * real content lands. A spinner would say "waiting"; this says "a list is coming".
 */
.fkcz-skeleton {
  display: block;
  border-radius: var(--fkcz-radius);
  background-color: var(--fkcz-surface);
  animation: fkcz-skeleton-pulse 1.2s var(--fkcz-ease) infinite;
}

.fkcz-skeleton--circle {
  border-radius: 50%;
  background-color: var(--fkcz-avatar-bg);
}

@keyframes fkcz-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fkcz-skeleton {
    animation: none;
  }
}

/* ---------- Focus ---------- */

.fkcz-section a:focus-visible,
.fkcz-section button:focus-visible,
.fkcz-section input:focus-visible {
  outline: var(--fkcz-focus-width) solid var(--fkcz-primary-strong);
  outline-offset: var(--fkcz-focus-offset);
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .fkcz-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fkcz-space-3);
  }

  .fkcz-show-more {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fkcz-section *,
  .fkcz-section *::before,
  .fkcz-section *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*
 * Rows fade and rise as they enter the viewport, and again for rows that "show more" appends or a
 * new page brings in. `transform` and `opacity` only, so it stays on the compositor, and there is
 * no scroll listener — entry is detected with an IntersectionObserver (`useReveal.ts`).
 *
 * The hidden start state is scoped to `.fkcz-reveal-ready`, which the hook adds only once it holds
 * an observer that can take it away again. No observer, no script, or motion turned down: the rows
 * are simply visible.
 */
.fkcz-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--fkcz-reveal-rise), 0);
  transition:
    opacity var(--fkcz-duration-reveal) var(--fkcz-ease-out) var(--fkcz-reveal-delay),
    transform var(--fkcz-duration-reveal) var(--fkcz-ease-out) var(--fkcz-reveal-delay);
  will-change: opacity, transform;
}

.fkcz-reveal-ready [data-reveal].fkcz-reveal-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fkcz-reveal-ready [data-reveal],
  .fkcz-reveal-ready [data-reveal].fkcz-reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.fkcz-matches__list {
  display: flex;
  flex-direction: column;
  /* The band colour shows through as the divider between cards. */
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fkcz-matches__item {
  position: relative;
  overflow: hidden;
  background-color: var(--fkcz-canvas);
}

.fkcz-matches__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "comp when venue"
    "home dots away";
  align-items: center;
  column-gap: clamp(var(--fkcz-space-4), 2vw, var(--fkcz-space-7));
  row-gap: clamp(var(--fkcz-space-1), 0.8vw, var(--fkcz-space-3));
  padding: clamp(var(--fkcz-space-5), 2vw, var(--fkcz-space-7))
    clamp(var(--fkcz-space-4), 2.5vw, var(--fkcz-space-9));
  color: inherit;
}

/* Every cell sits above the watermark. */
.fkcz-matches__card > *:not(.fkcz-matches__watermark) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.fkcz-matches__competition {
  grid-area: comp;
}

.fkcz-matches__venue {
  grid-area: venue;
  justify-self: end;
  text-align: right;
}

.fkcz-matches__team--home {
  grid-area: home;
}

.fkcz-matches__team--away {
  grid-area: away;
  justify-self: end;
  text-align: right;
}

/*
 * The competition badge behind the card. Nothing is drawn where a competition has no badge.
 * Geometry from the Designer build:
 * 20rem square, contained, pulled 5% off the left edge and 10% down, greyed and faded so the
 * teams stay readable over it. `.fkcz-matches__item` clips, so the overhang is cropped.
 */
.fkcz-matches__watermark {
  position: absolute;
  inset: 10% auto auto -5%;
  width: 20rem;
  height: 20rem;
  object-fit: contain;
  opacity: 0.2;
  filter: grayscale(1);
  pointer-events: none;
}

.fkcz-matches__competition {
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-meta);
  line-height: 1.2;
}

.fkcz-matches__venue {
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-label);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

/*
 * Club names, taken from the Designer's own `.heading-s.font-cofopeshka-0.search-team-name`:
 * Cofopeshka 75 at 700 (the combo class overrides the heading's Cofopeshka 260 / 900), 3rem,
 * line-height 1em. The size is a clamp rather than a flat 3rem so the name still fits a phone —
 * 4vw reaches the design's 3rem at the 1200px content column and holds there above it.
 */
.fkcz-matches__team {
  color: var(--fkcz-text);
  font-family: var(--fkcz-font-surname);
  font-size: clamp(1.375rem, 4vw, 3rem);
  font-weight: 700;
  line-height: var(--fkcz-leading-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.fkcz-matches__when {
  grid-area: when;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--fkcz-space-2);
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fkcz-matches__when-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fkcz-primary);
}

/*
 * A played match puts its result where a fixture puts the two dots — same grid cell, so the card
 * keeps one layout whether or not the match has been kicked off. Gold, like the dots it replaces.
 */
.fkcz-matches__score {
  grid-area: dots;
  justify-self: center;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  color: var(--fkcz-gold);
  font-family: var(--fkcz-font-display);
  /* Same ramp as the names on either side, so the middle of the row never reads as smaller. */
  font-size: clamp(1.375rem, 4vw, 3rem);
  font-weight: var(--fkcz-weight-display);
  line-height: var(--fkcz-leading-display);
  /* Digits of unequal width would shift the colon off the card's centre line. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fkcz-matches__score-separator {
  opacity: 0.65;
}

.fkcz-matches__versus {
  grid-area: dots;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fkcz-matches__versus span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--fkcz-gold);
}

@media (max-width: 767px) {
  /*
   * The card keeps its three columns; only the meta row changes. Competition on the left,
   * kick-off on the right, then the two teams with the dots between them. The venue is dropped —
   * the design does not show it at this width.
   */
  .fkcz-matches__card {
    grid-template-areas:
      "comp .    when"
      "home dots away";
    column-gap: var(--fkcz-space-3);
    padding: var(--fkcz-space-4);
  }

  .fkcz-matches__when {
    justify-self: end;
  }

  .fkcz-matches__venue {
    display: none;
  }

  /* 20rem is wider than the card at this width, which would wash the whole row out. */
  .fkcz-matches__watermark {
    inset: 50% auto auto -8%;
    translate: 0 -50%;
    width: 11rem;
    height: 11rem;
  }
}

/*
 * The Designer reserves 18rem for each name so the two of them stay level and the result sits on
 * the card's centre line. Only from 992px up: below that 2 x 18rem is wider than the card, and the
 * `min-width: 0` reset above (which the grid needs so long names wrap instead of pushing out) is
 * why this has to be selected through the card.
 */
@media (min-width: 992px) {
  .fkcz-matches__card > .fkcz-matches__team {
    min-width: 18rem;
  }
}

/* Skeleton card: the meta row, then the two team slots. */
.fkcz-matches__skeleton-meta {
  grid-area: comp;
  width: min(45%, 16rem);
  height: var(--fkcz-size-meta);
}

.fkcz-matches__skeleton-team {
  grid-area: home;
  width: min(80%, 14rem);
  height: clamp(1.375rem, 4vw, 3rem);
}

.fkcz-matches__skeleton-team--away {
  grid-area: away;
  justify-self: end;
}