/* Экран firsts.html (T-007): глава «Первые разы» и карточка события.
   Только @layer screens, только токены, классы .firsts-… и .first-… */
@layer screens {
  /* ---------- Обзор главы ---------- */
  .firsts { display: flex; flex-direction: column; gap: var(--space-5); }
  .firsts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .firsts-head__text { min-width: 0; }
  .firsts-head__lead { color: var(--color-secondary-ink); margin-top: var(--space-1); }

  /* Кольцо прогресса 3 из 12 */
  .firsts-progress { position: relative; flex: none; width: 84px; height: 84px; }
  .firsts-progress svg { width: 100%; height: 100%; rotate: -90deg; }
  .firsts-progress circle { fill: none; stroke-width: 5; }
  .firsts-progress__track { stroke: var(--color-line); }
  .firsts-progress__fill { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: var(--done) 12; }
  .firsts-progress__value {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: var(--color-ink-muted); line-height: 1.1;
  }
  .firsts-progress__value b { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: calc(var(--fs-xl) * var(--font-display-scale)); color: var(--color-accent-ink); }

  .firsts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .firsts-grid > li { min-width: 0; display: flex; }

  .firsts-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%;
    min-height: 132px;
    padding: var(--space-3);
    text-align: left;
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
    text-decoration: none;
    rotate: var(--tilt-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background-color var(--dur-fast);
  }
  .firsts-grid > li:nth-child(even) .firsts-card { rotate: calc(var(--tilt-card) * -1); }
  .firsts-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .firsts-card__photo { width: calc(100% + 2 * var(--space-3)); margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .firsts-card__photo::after { inset: 18%; }
  .firsts-card__icon {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
  }
  .firsts-card__icon svg { width: 20px; height: 20px; }
  /* У заполненной карточки иконка «сидит» на краю фото */
  .firsts-card__photo + .firsts-card__icon { position: absolute; top: calc(var(--space-3) + 2px); right: var(--space-3); background: var(--color-page); box-shadow: var(--shadow-sm); }
  .firsts-card__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-secondary-ink); }
  .firsts-card__title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: calc(var(--fs-lg) * var(--font-display-scale)); line-height: 1.15; }
  .firsts-card__date { margin-top: auto; padding-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-ink-muted); line-height: 1.3; }

  /* Пустая карточка: пунктир, без тени, «+» в углу */
  .firsts-card--empty, .firsts-card--own {
    background: color-mix(in srgb, var(--color-surface) 45%, transparent);
    border: 1.5px dashed var(--color-line-strong);
    box-shadow: none;
  }
  .firsts-card--empty .firsts-card__icon { background: transparent; border: 1px solid var(--color-line-strong); color: var(--color-ink-muted); }
  .firsts-card--empty .firsts-card__title { color: var(--color-ink-muted); }
  .firsts-card--empty:hover, .firsts-card--own:hover { background: var(--color-accent-soft); }
  .firsts-card__plus {
    position: absolute; top: var(--space-3); right: var(--space-3);
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-accent); color: var(--color-on-accent);
  }
  .firsts-card__plus svg { width: 18px; height: 18px; }
  .firsts-card--own { justify-content: center; align-items: center; text-align: center; }
  .firsts-card--own .firsts-card__plus { position: static; width: 40px; height: 40px; margin-bottom: var(--space-2); }
  .firsts-card--own .firsts-card__date { margin-top: var(--space-1); }

  /* ---------- Карточка события ---------- */
  .first-page { background: radial-gradient(70% 45% at 0% 0%, var(--color-accent-soft), transparent 70%), var(--texture-page), var(--color-page); }
  .first-visual { position: relative; display: flex; align-items: center; justify-content: center; }
  .first-photo { width: min(76%, 360px); }
  .first-photo-mini { position: absolute; right: 6%; bottom: 4%; width: min(30%, 150px); }
  .first-kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-ink); }
  .first-kicker__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-secondary-soft); }
  .first-kicker__icon svg { width: 20px; height: 20px; }
  .first-title { font-size: calc(var(--fs-2xl) * var(--font-display-scale)); }
  .first-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .first-empty-art { width: min(100%, 360px); }
  .first-empty { min-height: 0; padding-block: var(--space-5); border-top: 1px solid var(--color-line); }

  @media (min-width: 640px) {
    .firsts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .firsts-head { align-items: flex-end; }
    .firsts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
    .firsts-progress { width: 104px; height: 104px; }
  }
  @media (min-width: 1200px) {
    .firsts-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  @media (max-width: 899px) {
    .first-photo { width: min(70%, 300px); }
    .first-visual .first-empty-art { width: 100%; }
  }
}
@layer screens {
  /* Пустая карточка: пунктирное «место для фото» тех же пропорций, что у заполненной */
  .firsts-card__slot {
    display: grid; place-items: center;
    width: calc(100% + 2 * var(--space-3));
    aspect-ratio: 16 / 9;
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    border-bottom: 1.5px dashed var(--color-line);
    color: var(--color-ink-muted);
  }
  .firsts-card__slot svg { width: 36px; height: 36px; stroke-width: 1.4; opacity: 0.8; }
}
@layer screens {
  /* Кольцо прогресса не должно спорить с декором угла страницы */
  @media (min-width: 900px) { .firsts-progress { margin-right: calc(var(--decor-corner-size) * 0.55); } }
  @media (max-width: 899px) { .firsts-head { flex-direction: column; align-items: flex-start; } .firsts-progress { width: 72px; height: 72px; } }
}