/*
 * 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;
  }
}

/*
 * 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;
  }
}

/* Code components render inside a shadow root, so page styles never reach this tree.
   Everything the section needs is declared here; site design tokens come in through
   inherited CSS custom properties (see tokens.css). */

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

.fkcz-news {
  --fkcz-excerpt-lines: 2;
  --fkcz-radius-media: 0px;

  margin: 0;
  padding-block: clamp(var(--fkcz-space-6), 4vw, var(--fkcz-space-9));
  background-color: var(--fkcz-canvas);
  color: var(--fkcz-text);
  font-family: var(--fkcz-font-body);
  font-size: 1rem;
  line-height: var(--fkcz-leading-body);
}

.fkcz-news__container {
  /* The content column is 75rem by default and the gutter sits outside the max-width. */
  max-width: calc(var(--fkcz-section-container, var(--fkcz-container)) + var(--fkcz-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fkcz-gutter);
}

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

.fkcz-news__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-news__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-news__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-news__view-all:hover {
  color: var(--fkcz-primary);
}

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

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

/* ---------- List ---------- */

.fkcz-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--fkcz-hairline) solid var(--fkcz-divider, var(--fkcz-primary));
}

.fkcz-news__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(var(--fkcz-space-5), 3vw, var(--fkcz-space-9));
  padding-block: clamp(var(--fkcz-space-5), 2vw, var(--fkcz-space-8));
  border-bottom: var(--fkcz-hairline) solid var(--fkcz-divider, var(--fkcz-primary));
  transition: background-color var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-news__item:last-child {
  border-bottom: 0;
}

.fkcz-news__body {
  display: flex;
  flex-direction: column;
  gap: var(--fkcz-space-4);
  /* A skeleton row carries no text, so without this the column collapses to its widest bar. */
  flex: 1;
  min-width: 0;
}

.fkcz-news__date {
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.fkcz-news__headline {
  margin: 0;
  font-family: var(--fkcz-font-display);
  font-size: var(--fkcz-size-headline);
  font-weight: var(--fkcz-weight-display);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.fkcz-news__link {
  color: var(--fkcz-primary);
  text-decoration: none;
  transition: color var(--fkcz-duration) var(--fkcz-ease);
}

/* One link per row in the accessibility tree; the overlay makes the whole row clickable. */
.fkcz-news__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fkcz-news__item:hover .fkcz-news__link {
  color: var(--fkcz-primary-strong);
}

.fkcz-news__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--fkcz-excerpt-lines);
  overflow: hidden;
  margin: 0;
  max-width: 62ch;
  color: var(--fkcz-text);
  font-size: var(--fkcz-size-excerpt);
  line-height: var(--fkcz-leading-body);
}

.fkcz-news__media {
  flex: none;
  width: clamp(180px, 20%, 310px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--fkcz-radius-media);
  background-color: var(--fkcz-surface);
}

.fkcz-news__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-news__item:hover .fkcz-news__image {
  transform: scale(1.03);
}

/* ---------- States ---------- */

.fkcz-news__status {
  padding-block: var(--fkcz-space-9);
  color: var(--fkcz-text-muted);
  font-size: var(--fkcz-size-excerpt);
  text-align: center;
}

.fkcz-news__status--error {
  color: var(--fkcz-primary-strong);
}

.fkcz-news__skeleton {
  display: block;
  border-radius: var(--fkcz-radius);
  background-color: var(--fkcz-surface);
  animation: fkcz-pulse 1.2s var(--fkcz-ease) infinite;
}

.fkcz-news__skeleton--date {
  width: 5.5rem;
  height: var(--fkcz-size-meta);
}

.fkcz-news__skeleton--headline {
  width: min(100%, 32rem);
  height: var(--fkcz-size-headline);
}

.fkcz-news__skeleton--excerpt {
  width: min(100%, 44rem);
  height: calc(var(--fkcz-size-excerpt) * var(--fkcz-leading-body) * 2);
}

.fkcz-news__skeleton--media {
  width: 100%;
  height: 100%;
  border-radius: var(--fkcz-radius-media);
}

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

/* ---------- Pagination ---------- */

.fkcz-news__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fkcz-space-1);
  margin-top: clamp(var(--fkcz-space-7), 4vw, var(--fkcz-space-9));
}

.fkcz-news__pages {
  display: flex;
  align-items: center;
  gap: var(--fkcz-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fkcz-news__page,
.fkcz-news__arrow {
  appearance: none;
  border: 0;
  /*
   * The browser's own button padding is 1px 6px, which leaves the arrow's 14px glyph wider than
   * its 12px content box; grid then drops it at the start edge instead of centring it, and the
   * chevron sits 1px off to one side. Reset it so the box the glyph is centred in is the button.
   */
  padding: 0;
  background: none;
  font-family: var(--fkcz-font-display);
  cursor: pointer;
  transition:
    color var(--fkcz-duration) var(--fkcz-ease),
    background-color var(--fkcz-duration) var(--fkcz-ease),
    opacity var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-news__arrow {
  position: relative;
  display: grid;
  place-items: center;
  /* Never squeezed: the pager gives up page numbers to fit, never the controls that turn pages. */
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--fkcz-radius-control);
  background-color: var(--fkcz-primary);
  color: var(--fkcz-on-primary);
}

.fkcz-news__arrow:hover:not(:disabled) {
  background-color: var(--fkcz-primary-strong);
}

.fkcz-news__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fkcz-news__page {
  padding-inline: var(--fkcz-space-1);
  color: var(--fkcz-primary);
  font-size: var(--fkcz-size-page-number);
  line-height: 1;
  text-decoration: none;
  transition: color var(--fkcz-duration) var(--fkcz-ease);
}

.fkcz-news__page:hover {
  color: var(--fkcz-surface-strong);
}

/* The current page is the only one carrying weight, so it reads as "you are here". */
.fkcz-news__page[aria-current="page"] {
  font-weight: 700;
  cursor: default;
}

.fkcz-news__ellipsis {
  color: var(--fkcz-text-muted);
  font-size: var(--fkcz-size-page-number);
  line-height: var(--fkcz-leading-display);
  user-select: none;
}

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

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

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

@media (max-width: 991px) {
  /* No hover state on a touch screen: it sticks after a tap. */
  .fkcz-news__page:hover {
    color: var(--fkcz-primary);
  }

  .fkcz-news__item {
    gap: var(--fkcz-space-6);
  }
}

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

  .fkcz-news__item {
    flex-direction: column;
    /* In column direction align-items controls width; stretch keeps text from overflowing. */
    align-items: stretch;
    gap: var(--fkcz-space-4);
  }

  /* The design drops the thumbnail at this width; the headline carries the row. */
  .fkcz-news__media {
    display: none;
  }

  /*
   * The arrow stays 1.5rem, but its hit area grows to 44px so a thumb can land on it.
   */
  .fkcz-news__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 44px;
    height: 44px;
  }

  /*
   * The full 44px square is traded for the row: seven numbers plus two arrows do not fit across a
   * phone at 44px each. The height stays 44px, the width narrows, and `space-evenly` keeps roughly
   * 38px between centres — short of the guideline and the price of one row instead of two.
   */
  .fkcz-news__page {
    min-width: 2rem;
    min-height: 44px;
    display: grid;
    place-items: center;
  }

  /*
   * One row at every width. Nothing wraps: the component measures the row and drops page numbers
   * until it fits, so a second line never appears.
   *
   * The row takes the full width with an arrow pinned to each end and the numbers spread between
   * them — the arrows are the two things a thumb reaches for, so they belong at the edges where
   * they are easiest to hit.
   */
  .fkcz-news__pagination {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--fkcz-space-1);
  }

  .fkcz-news__pages {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    min-width: 0;
    gap: 0;
  }

  /* Smaller type and tighter sides, so five pages and the last one fit between the arrows. */
  .fkcz-news__page,
  .fkcz-news__ellipsis {
    font-size: 1rem;
  }

  .fkcz-news__page {
    padding-inline: 0.25rem;
  }
}

@media (max-width: 479px) {
  .fkcz-news__excerpt {
    max-width: none;
  }
}

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

  .fkcz-news__item:hover .fkcz-news__image {
    transform: none;
  }
}