/* deadlines.css — «Сроки» (deadlines.html), after styles.css and afisha2.css: the head, «Что · Кого касается ·
   Когда», the chips, the views and the rail are the afisha's own (afisha2.css, main.a2p), shared with «Фестивали»,
   «Выставки» и «Голландский год». This file is only what a deadline needs: the months, a row — until when and how
   many days are left (under a month — red), a big date instead of a picture, what to do, who it is for, the way to
   do it, a heart; «Постеры» as tiles; «Календарь» — only the months that have deadlines, a small month with the
   deadline days in red, beside it the month's deadlines by day, the date said once. Phone first: 760, 1100. */
.dl {
  --dline: rgba(var(--ink), .12);
  --dred: #C8323C;
  --dtile: var(--s1);
}
:root.dark .dl { --dred: #FF6B75; }

/* the list under the chips: a firm rule above it (no strip of months here) */
.dl-cols { margin-top: 24px; border-top: 1.5px solid var(--txt); }
/* under the strip of months the strip's own rule is enough */
.dl .a2-strip + .dl-cols { margin-top: 0; border-top: 0; }

/* a month */
.dl-m { padding: 16px 0 8px; }
.dl-m + .dl-m { margin-top: 12px; border-top: 1.5px solid var(--txt); }
.dl-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--dline); }
.dl-mh h2 { font-size: 21px; font-weight: 500; line-height: 28px; letter-spacing: -.02em; }
.dl-mh h2 span { font-size: 15px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.dl-mh small { font-size: 14px; color: var(--mut); }
.dl-mini, .dl-dh { display: none; }
@media (min-width: 761px) {
  .dl-m { padding: 24px 0 12px; }
  .dl-mh { justify-content: flex-start; }
  .dl-mh h2 { font-size: 26px; line-height: 32px; }
}

/* «Список»: a row */
.dl-r { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "tile w" "tile tx" ". go"; column-gap: 12px; align-items: start; padding: 12px 0 0; border-bottom: 1px solid var(--dline); }
.dl-w { grid-area: w; font-size: 14px; white-space: nowrap; }
.dl-d { font-weight: 600; }
.dl-left:not(:empty)::before { content: " · "; color: var(--mut); }
.dl-left { font-weight: 500; color: var(--mut); }
.dl-left.is-soon { color: var(--dred); }
.dl-tile { grid-area: tile; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; background: var(--dtile); line-height: 1; }
.dl-tile b { font-size: 20px; font-weight: 500; }
.dl-tile i { margin-top: 3px; font-size: 11px; font-style: normal; color: var(--mut); }
.dl-tile small { display: none; }
.dl-tx { grid-area: tx; min-width: 0; }
.dl-tx h3 { font-size: 16px; font-weight: 500; line-height: 21px; }
.dl .au { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--dline); border-radius: 999px; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--txt2); white-space: nowrap; vertical-align: 1px; }
.dl-who { margin-top: 1px; font-size: 14px; color: var(--txt); }
.dl-ds { margin-top: 3px; font-size: 13px; line-height: 17px; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-go { grid-area: go; justify-self: start; display: inline-flex; align-items: center; height: 44px; font-size: 14px; font-weight: 500; color: var(--txt); white-space: nowrap; }
.dl-go:hover { color: var(--acc); }
.dl .hrt { position: absolute; right: -10px; bottom: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--mut); cursor: pointer; transition: color .2s, background .2s; }
.dl .hrt:hover { color: var(--txt); background: rgba(var(--ink), .05); }
.dl .hrt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dl .hrt[aria-pressed="true"] { color: var(--txt); }
.dl .hrt[aria-pressed="true"] svg { fill: currentColor; }
@media (min-width: 761px) {
  .dl-r { grid-template-columns: 132px 116px minmax(0, 1fr) 170px 44px; grid-template-areas: "w tile tx go hrt"; column-gap: 16px; align-items: center; padding: 14px 0; }
  .dl-w { white-space: normal; }
  .dl-d { display: block; }
  .dl-left { display: block; font-size: 13px; }
  .dl-left:not(:empty)::before { content: none; }
  .dl-tile { width: 116px; height: 96px; }
  .dl-tile b { font-size: 40px; letter-spacing: -.03em; }
  .dl-tile i { margin-top: 6px; font-size: 14px; }
  .dl-go { justify-self: end; height: auto; }
  .dl .hrt { position: static; grid-area: hrt; }
  .dl-ds { font-size: 14px; line-height: 20px; }
  .dl-who { font-size: 15px; }
}

/* a tablet: the date line goes over the name, as on a phone — four fixed columns left the words a third of the row */
@media (min-width: 761px) and (max-width: 1100px) {
  .dl-r { grid-template-columns: 96px minmax(0, 1fr) auto 44px; grid-template-areas: "tile w go hrt" "tile tx go hrt"; column-gap: 20px; row-gap: 2px; }
  .dl-w { white-space: nowrap; }
  .dl-d, .dl-left { display: inline; font-size: 14px; }
  .dl-left:not(:empty)::before { content: " · "; }
  .dl-tile { width: 96px; height: 84px; }
  .dl-tile b { font-size: 34px; }
  .dl-tile i { margin-top: 5px; font-size: 13px; }
}

/* «Постеры»: tiles — a big date and the theme instead of a picture */
.dl-list[data-gally-view="posters"] .dl-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-top: 14px; }
.dl-list[data-gally-view="posters"] .dl-r { display: flex; flex-direction: column; padding: 0; border: 0; }
.dl-list[data-gally-view="posters"] .dl-tile { order: -1; position: relative; width: 100%; height: 132px; align-items: flex-start; justify-content: flex-end; padding: 10px 12px; border-radius: 12px; }
.dl-list[data-gally-view="posters"] .dl-tile b { font-size: 46px; letter-spacing: -.04em; }
.dl-list[data-gally-view="posters"] .dl-tile i { margin-top: 4px; font-size: 13px; }
.dl-list[data-gally-view="posters"] .dl-tile small { display: block; position: absolute; left: 10px; top: 10px; padding: 0 7px; border: 1px solid var(--dline); border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--txt2); white-space: nowrap; }
.dl-list[data-gally-view="posters"] .dl-w { margin-top: 8px; font-size: 13px; white-space: normal; }
.dl-list[data-gally-view="posters"] .dl-d { display: block; }
.dl-list[data-gally-view="posters"] .dl-left { display: block; }
.dl-list[data-gally-view="posters"] .dl-left:not(:empty)::before { content: none; }
.dl-list[data-gally-view="posters"] .dl-tx h3 { margin-top: 2px; font-size: 15px; line-height: 20px; }
.dl-list[data-gally-view="posters"] .au, .dl-list[data-gally-view="posters"] .dl-who { display: none; }
.dl-list[data-gally-view="posters"] .dl-go { justify-self: auto; height: 40px; }
.dl-list[data-gally-view="posters"] .hrt { position: absolute; right: 0; top: 0; bottom: auto; }
@media (min-width: 761px) {
  .dl-list[data-gally-view="posters"] .dl-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; padding-top: 20px; }
  .dl-list[data-gally-view="posters"] .dl-tile { height: 178px; padding: 14px 16px; }
  .dl-list[data-gally-view="posters"] .dl-tile b { font-size: 64px; }
  .dl-list[data-gally-view="posters"] .dl-tile i { font-size: 15px; }
  .dl-list[data-gally-view="posters"] .dl-tile small { left: 14px; top: 14px; font-size: 13px; }
  .dl-list[data-gally-view="posters"] .dl-w { margin-top: 12px; font-size: 14px; }
  .dl-list[data-gally-view="posters"] .dl-tx h3 { font-size: 16px; line-height: 21px; }
  .dl-list[data-gally-view="posters"] .au { display: inline-block; }
  .dl-list[data-gally-view="posters"] .dl-who { display: block; font-size: 14px; }
  .dl-list[data-gally-view="posters"] .dl-go { height: auto; margin-top: 8px; }
  .dl-list[data-gally-view="posters"] .hrt { right: 6px; top: 6px; }
}
@media (min-width: 1401px) { .dl-list[data-gally-view="posters"] .dl-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* «Календарь»: only months with deadlines — a small month, the deadline days red, the month's deadlines by day */
.dl-list[data-gally-view="calendar"] .dl-mini { display: block; margin: 12px 0 4px; }
.dl-list[data-gally-view="calendar"] .dl-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--dline); font-size: 17px; font-weight: 500; line-height: 23px; }
.dl-list[data-gally-view="calendar"] .dl-dh span { flex: none; font-size: 13px; font-weight: 500; color: var(--mut); }
.dl-list[data-gally-view="calendar"] .dl-dh span.is-soon { color: var(--dred); }
.dl-list[data-gally-view="calendar"] .dl-w, .dl-list[data-gally-view="calendar"] .dl-tile { display: none; }
.dl-list[data-gally-view="calendar"] .dl-r { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tx" "go"; padding-top: 10px; }
.dl-wd, .dl-cells { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.dl-wd span { padding-bottom: 4px; font-size: 12px; color: var(--mut); }
.dl-wd .w { font-weight: 600; color: var(--txt); }
.dl-cells { position: relative; z-index: 0; }
.dl-cells b { position: relative; height: 40px; font-size: 15px; font-weight: 400; line-height: 40px; color: var(--txt2); }
.dl-cells b.we { color: var(--mut); }
.dl-cells b.td { font-weight: 600; color: var(--acc); }
.dl-cells b.dl-day { font-weight: 600; color: #FFFFFF; }
.dl-cells b.dl-day::before { content: ""; position: absolute; inset: 0; z-index: -1; width: 34px; height: 34px; margin: auto; border-radius: 50%; background: var(--dred); }
:root.dark .dl-cells b.dl-day { color: #0F0F10; }
.dl-cells sup { position: absolute; top: 0; right: 2px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: var(--txt); color: var(--bg); font-size: 10px; font-weight: 600; line-height: 14px; }
@media (min-width: 761px) {
  .dl-list[data-gally-view="calendar"] .dl-m { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "mh mh" "mini items"; column-gap: 56px; }
  .dl-list[data-gally-view="calendar"] .dl-mh { grid-area: mh; border-bottom: 0; }
  .dl-list[data-gally-view="calendar"] .dl-mini { grid-area: mini; align-self: start; margin: 0; }
  .dl-list[data-gally-view="calendar"] .dl-items { grid-area: items; }
  .dl-list[data-gally-view="calendar"] .dl-dh { margin-top: 0; font-size: 18px; }
  .dl-list[data-gally-view="calendar"] .dl-r + .dl-dh { margin-top: 26px; }
  .dl-list[data-gally-view="calendar"] .dl-r { grid-template-columns: minmax(0, 1fr) 170px 44px; grid-template-areas: "tx go hrt"; align-items: center; padding: 12px 0; }
  .dl-cells b { font-size: 14px; }
  .dl-cells b.dl-day::before { width: 32px; height: 32px; }
  .dl-wd span { padding-bottom: 6px; }
}
body:has(.dl .views [data-gally-view="calendar"][aria-pressed="true"]) .a2-rail { display: none; }
body:has(.dl .views [data-gally-view="calendar"][aria-pressed="true"]) .dl-cols { display: block; }

/* nothing left, nothing at all */
.dl-empty { padding: 40px 0; font-size: 17px; color: var(--mut); }
.dl-none { padding: 40px 0; }
.dl-none h2 { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.dl-none p { margin-top: 8px; color: var(--mut); }
.dl-none a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }