/* Экран month.html (T-007): страница месяца и галерея месяца.
   Только @layer screens, только токены, классы .month-… */
@layer screens {
  .month-h {
    margin-bottom: var(--space-3);
    font-size: calc(var(--fs-lg) * var(--font-display-scale));
    display: flex; align-items: center; gap: var(--space-3);
  }
  .month-h::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }

  /* ---------- Визуал: большая цифра месяца + фото месяца ---------- */
  .month-visual { gap: var(--space-6); }
  .month-hero { position: relative; display: grid; justify-items: center; padding-top: var(--space-2); }
  .month-hero__num {
    position: absolute; z-index: 0;
    left: 0; top: -0.1em;
    font-family: var(--font-display); font-weight: var(--font-display-weight); font-style: var(--font-display-style);
    font-size: calc(var(--fs-3xl) * 2.6 * var(--font-display-scale));
    line-height: 0.8;
    color: var(--color-secondary-soft);
    pointer-events: none;
  }
  .month-hero__photo { position: relative; z-index: 1; width: min(76%, 360px); }
  .month-badge {
    position: absolute; z-index: 3;
    top: var(--space-3); left: var(--space-3);
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 28px; padding: 2px var(--space-3) 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-page);
    color: var(--color-secondary-ink);
    font-size: var(--fs-xs); font-weight: 700;
    box-shadow: var(--shadow-sm);
  }
  .month-badge svg { width: 16px; height: 16px; fill: currentColor; }
  .month-badge--sm { padding: 0; width: 28px; justify-content: center; top: var(--space-2); left: var(--space-2); }
  /* Скотч Scrapbook сверху — бейдж уводим ниже, чтобы не спорил */
  :root[data-theme="scrapbook"] .month-hero__photo .month-badge { top: var(--space-5); }

  /* «Ты уже умеешь» */
  .month-skills { width: 100%; }
  .month-skills__list { display: grid; gap: var(--space-2); }
  .month-skills__item { display: flex; align-items: center; gap: var(--space-3); line-height: 1.35; }
  .month-skills__mark {
    display: grid; place-items: center; flex: none;
    width: 26px; height: 26px;
    border-radius: var(--radius-pill);
    border: 1.5px dashed var(--color-line-strong);
  }
  .month-skills__item.is-done .month-skills__mark { border: 0; background: var(--color-accent); color: var(--color-on-accent); }
  .month-skills__mark svg { width: 16px; height: 16px; }
  .month-skills__item:not(.is-done) { color: var(--color-ink-muted); }
  .month-skills__soon { margin-left: auto; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-2); font-size: var(--fs-xs); color: var(--color-ink-muted); }
  .month-more { margin-top: var(--space-2); padding-inline: var(--space-2); }

  /* ---------- Текст ---------- */
  .month-text { gap: var(--space-5); }
  .month-title { font-size: calc(var(--fs-2xl) * var(--font-display-scale)); margin-bottom: var(--space-2); }
  .month-now { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 600; }
  .month-intro { color: var(--color-secondary-ink); margin-top: calc(var(--space-3) * -1); }

  /* Воспоминания — короткая лента внутри месяца */
  .month-mems { display: grid; gap: var(--space-3); }
  .month-mem {
    position: relative;
    display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--color-line);
  }
  .month-mem:last-child { border-bottom: 0; padding-bottom: 0; }
  .month-mem__date { font-family: var(--font-hand); font-style: var(--font-hand-style); font-size: calc(var(--fs-base) * var(--font-display-scale)); color: var(--color-secondary-ink); line-height: 1.5; white-space: nowrap; }

  /* Первые события месяца — ссылки на карточки главы «Первые разы» */
  .month-firsts { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
  .month-first {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-card);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    color: var(--color-ink); text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .month-first:hover { transform: translateY(-2px); }
  .month-first__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-page); color: var(--color-accent-ink); }
  .month-first__icon svg { width: 20px; height: 20px; }
  .month-first__title { display: block; font-weight: 700; line-height: 1.2; }
  .month-first__date { display: block; font-size: var(--fs-xs); color: var(--color-ink-muted); }

  /* Любимое: игрушка, песня, еда, место */
  .month-favs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .month-fav {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    background: var(--color-secondary-soft);
  }
  .month-fav dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-ink); }
  .month-fav dt svg { width: 18px; height: 18px; }
  .month-fav dd { margin: var(--space-1) 0 0; font-family: var(--font-hand); font-style: var(--font-hand-style); font-size: calc(var(--fs-base) * var(--font-display-scale)); line-height: 1.3; color: var(--color-ink); }

  .month-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* ---------- Галерея месяца ---------- */
  .month-gallery { display: flex; flex-direction: column; gap: var(--space-5); }
  .month-gallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
  .month-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--space-3);
  }
  .month-gallery__item { position: relative; min-width: 0; }
  .month-gallery__item figure { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 6px; }
  .month-gallery__item .ph {
    aspect-ratio: 1; flex: 1;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .month-gallery__item .ph::after { inset: 22%; }
  .month-gallery__item--tall { grid-row: span 2; }
  .month-gallery__item--tall .ph { aspect-ratio: auto; min-height: 0; }
  .month-gallery__item--wide { grid-column: span 2; }
  .month-gallery__item--wide .ph { aspect-ratio: 2 / 1; }
  .month-gallery__item figcaption {
    font-family: var(--font-hand); font-style: var(--font-hand-style);
    font-size: calc(var(--fs-sm) * var(--font-display-scale));
    line-height: 1.2; color: var(--color-ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .month-gallery__item.is-main .ph { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
  /* Scrapbook: снимки чуть вразнобой, как вклеенные */
  :root[data-theme="scrapbook"] .month-gallery__item:nth-child(3n+1) figure { rotate: -1.2deg; }
  :root[data-theme="scrapbook"] .month-gallery__item:nth-child(3n+2) figure { rotate: 0.9deg; }
  .month-gallery__add .empty-slot { width: 100%; height: 100%; min-height: 120px; aspect-ratio: auto; gap: var(--space-2); align-content: center; font-size: var(--fs-sm); }
  .month-gallery__add .empty-slot:hover { background: var(--color-accent-soft); color: var(--color-accent-ink); }
  .month-gallery__add svg { width: 28px; height: 28px; }
  .month-gallery__more { text-align: center; }

  @media (min-width: 640px) {
    .month-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .month-firsts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .month-visual { justify-content: flex-start; }
    .month-text { justify-content: flex-start; }
    .month-gallery__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .month-firsts { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 1200px) {
    .month-firsts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .month-first { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); }
  }
  @media (max-width: 899px) {
    .month-hero__photo { width: min(70%, 300px); }
  }
}