/* «Отрывной календарь» Журнала: листок дня (resources/views/journal/partials/calendar-*.blade.php), страница
   раздела с сеткой месяцев (journal/calendar.blade.php), плашка «В Отрывном календаре» у обычных статей.
   Подключается поверх journal.css; цвет раздела — --accent. */

/* --- листок в правой колонке --- */
.j-cal-sheet {
    position: relative; margin-bottom: 28px; padding: 22px 18px 0; text-align: center;
    background: #fff; border: 1px solid var(--hair); box-shadow: 0 6px 0 -3px #fff, 0 6px 0 -2px var(--hair), 0 12px 0 -6px #fff, 0 12px 0 -5px var(--hair);
}
.j-cal-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--accent); }
.j-cal-sheet-rings { position: absolute; top: -7px; left: 0; right: 0; display: flex; justify-content: center; gap: 90px; }
.j-cal-sheet-rings i { width: 10px; height: 20px; border-radius: 6px; background: #fbf9f5; border: 2px solid #8a8375; }
.j-cal-sheet-month { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.j-cal-sheet-day { font-family: var(--serif-display); font-size: 104px; font-weight: 900; line-height: 1; color: var(--ink); }
.j-cal-sheet-weekday { margin-top: 4px; font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--ink-2); }
.j-cal-sheet-foot {
    display: flex; justify-content: space-between; gap: 8px; margin: 18px -18px 0; padding: 10px 14px;
    border-top: 1px dashed var(--hair); font-size: 12px; color: var(--muted);
}

/* --- вычисляемый блок под шапкой --- */
.j-cal-day {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: start;
    margin-top: 28px; margin-bottom: 8px;
}
.j-cal-day > * { min-width: 0; }
.j-cal-day-main { max-width: 760px; padding: 16px 20px; background: var(--paper-2); }
.j-cal-day-now { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.j-cal-day-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.j-cal-day-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.j-cal-day-years div { padding: 8px 12px; background: #fff; border: 1px solid var(--hair); text-align: center; }
.j-cal-day-years dt { font-size: 12px; font-weight: 700; color: var(--accent); }
.j-cal-day-years dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.j-cal-day-tool { grid-column: 1 / -1; justify-self: start; font-size: 14px; font-weight: 700; color: var(--accent) !important; }
.j-cal-day-tool:hover { text-decoration: underline; }

/* «сколько лет назад» у года в списке событий */
.j-cal-ago {
    display: inline-block; margin: 0 4px 0 8px; padding: 1px 7px; border-radius: 10px; vertical-align: 2px;
    background: var(--paper-2); font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;
}

/* --- пазлы к дню --- */
.j-cal-puzzles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.j-cal-puzzle { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.j-cal-puzzle img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.j-cal-puzzle span { font-size: 14px; font-weight: 600; line-height: 1.35; }
.j-cal-puzzle:hover span { color: var(--accent); }

/* --- соседние листки --- */
.j-cal-pager {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    margin-top: 48px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.j-cal-pager a { text-decoration: none; }
.j-cal-pager-prev, .j-cal-pager-next { display: flex; flex-direction: column; gap: 2px; }
.j-cal-pager-prev { grid-column: 1; }
.j-cal-pager-next { grid-column: 3; text-align: right; }
.j-cal-pager span { font-size: 13px; color: var(--muted); }
.j-cal-pager b { font-family: var(--serif-display); font-size: 24px; }
.j-cal-pager a:hover b { color: var(--accent); }
.j-cal-pager-all { grid-column: 2; font-size: 14px; font-weight: 700; color: var(--accent) !important; }

/* --- плашка у обычной статьи --- */
.j-cal-plaque {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 28px; padding: 12px 16px;
    border-left: 4px solid #b5651d; background: #fff; font-family: var(--serif); font-size: 17px;
}
.j-cal-plaque-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b5651d; }
.j-cal-plaque a { border-bottom: 1px solid var(--hair); }
.j-cal-plaque a:hover { color: #b5651d !important; border-bottom-color: #b5651d; }
.j-cal-plaque span[aria-hidden] { color: var(--muted); }

/* --- страница раздела --- */
.j-cal-today { margin-top: 32px; }
.j-cal-today-label { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.j-cal-today-empty { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--ink-2); }
.j-cal-today-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 18px; font-family: var(--serif); font-size: 18px; }
.j-cal-today-next span { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.j-cal-today-next a { border-bottom: 1px solid var(--hair); }
.j-cal-today-next a:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }

.j-cal-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.j-cal-month-title { margin: 0 0 10px; font-family: var(--serif-display); font-size: 22px; font-weight: 800; }
.j-cal-month-title a { color: inherit; text-decoration: none; }
.j-cal-month-title a:hover { color: var(--accent, #b5651d); }
.j-cal-month-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.j-cal-month-days li a, .j-cal-month-days li span {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: 13px;
}
.j-cal-month-days li span { color: #b9b2a5; }
.j-cal-month-days li.is-ready a { background: var(--accent); color: #fff !important; font-weight: 700; text-decoration: none; }
.j-cal-month-days li.is-ready a:hover { filter: brightness(1.12); }
.j-cal-month-days li.is-today a, .j-cal-month-days li.is-today span { outline: 2px solid var(--ink); outline-offset: -2px; color: var(--ink); font-weight: 700; }
.j-cal-month-days li.is-today.is-ready a { color: #fff !important; }

@media (max-width: 1080px) {
    .j-cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .j-cal-day { grid-template-columns: 1fr; }
    .j-cal-sheet { max-width: 320px; margin-left: auto; margin-right: auto; }
    .j-cal-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .j-cal-months { grid-template-columns: 1fr; }
    .j-cal-pager { grid-template-columns: 1fr 1fr; }
    .j-cal-pager-all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
    .j-cal-pager b { font-size: 20px; }
}
.j-cal-all-names { margin-top: 12px; font-weight: 600; }
.j-cal-all-names a { color: var(--accent, #b5651d); text-decoration: none; }
.j-cal-all-names a:hover { text-decoration: underline; }