/* WszystkieKina — city repertory view.
 *
 * The header row and every film's own grid must describe the SAME columns, otherwise the
 * dates drift away from the day cells they label. Both read the tokens below, so there is
 * exactly one definition of the schedule's column widths.
 */

:root {
  --line: #ddd;
  --panel: #f5f5f5;
  --panel-soft: #fafafa;
  --ink: #1c1c1c;
  --muted: #4a4a4a;
  --link: #0a4d8c;

  /* poster column + cinema-name column = the label block the header shares */
  --poster-col: 150px;
  --cinema-col: 200px;
  --label-col: calc(var(--poster-col) + var(--cinema-col));
  --day-col: minmax(0, 1fr);

  --day-pad: 10px;
  --day-gap: 5px;
  --time-size: 14px;
}

body {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #ffffff;
}

/* Keyboard focus has to be visible everywhere. */
:focus { outline: 2px solid var(--link); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.filter-toggle:focus-visible,
.screening-link:focus-visible { outline-offset: 1px; }

/* --- the schedule grid --------------------------------------------------- */

.main-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  /* no min-width: fit-content — the grid may never force the document wider */
}

/* --- header row ---------------------------------------------------------- */

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10; /* above the sticky posters and everything else in the grid */
  display: grid;
  grid-template-columns: var(--label-col) repeat(8, var(--day-col));
  min-height: 40px;
  align-items: center;
  background: var(--panel);
  border-bottom: 2px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  font-weight: bold;
  text-align: center;
}

.header-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.combined-header { gap: 10px; }
.home-button { color: var(--link); font-weight: bold; text-decoration: none; }
.city-title { margin: 0; font-size: 14px; font-weight: bold; }

/* Only one rendering of each date is in the layout at a time; the others are
   really absent, so assistive tech never hears three copies. A date that will not
   fit its column wraps instead of being cut off. */
.header-date { display: none; font-size: 13px; overflow-wrap: break-word; }
.header-date--short { display: inline; }

@media (min-width: 1300px) {
  .header-date--short { display: none; }
  .header-date--medium { display: inline; font-size: 12px; }
  .header-item { padding: 8px 5px; }
}

@media (min-width: 2100px) {
  .header-date--medium { display: none; }
  .header-date--long { display: inline; font-size: 13px; }
}

/* --- filter bar ---------------------------------------------------------- */

.filter-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 40px;
  padding: 8px 12px;
  box-sizing: border-box;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.filter-label { font-size: 14px; font-weight: 600; }

.filter-container { position: relative; }

.filter-toggle {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.filter-toggle:hover { background: #f0f0f0; border-color: #bbb; }

.filter-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 32px));
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

.filter-dropdown.open { display: block; }

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.filter-item:hover { background: var(--panel); }

.movie-search-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
  margin-left: auto;
}

.movie-search-label { font-size: 14px; font-weight: 600; }

.movie-search-input {
  flex: 1 1 120px;
  min-width: 90px;
  max-width: 260px;
  height: 24px;
  padding: 2px 8px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.no-movies-message {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.no-movies-message p { margin: 0; }

/* --- one row per film ---------------------------------------------------- */

.movie-row {
  display: grid;
  grid-template-columns: var(--poster-col) auto;
  border-bottom: 1px solid var(--line);
}

.poster-cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
}

.movie-poster {
  position: sticky;
  top: 42px;
  z-index: 1; /* below the sticky date header */
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(160deg, var(--from), var(--to));
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
}

/* The film's own grid. Its day columns are the ones the header row is labelling. */
.content-cell {
  display: grid;
  grid-template-columns: var(--cinema-col) repeat(8, var(--day-col));
  box-sizing: border-box;
  background: var(--panel-soft);
}

.movie-title {
  grid-column: 1 / -1;
  padding: 10px 20px;
  box-sizing: border-box;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.movie-title-text { margin: 0; font-size: 1rem; font-weight: bold; }
.movie-title-text a { color: inherit; text-decoration: none; }
.movie-title-text a:hover { text-decoration: underline; }

.movie-info-line {
  margin-top: 4px;
  font-size: .85em;
  color: var(--muted);
}

.cinema-info {
  display: flex;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.day-cell {
  display: flex;
  flex-wrap: wrap;            /* times wrap inside their own column, never into the next day */
  justify-content: center;
  align-items: flex-start;
  gap: var(--day-gap);
  min-width: 0;
  padding: var(--day-pad);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--line);
}

/* The day name carried inside each cell; only shown by the stacked layout. */
.day-label { display: none; }

.seance {
  flex: 0 1 auto;
  min-width: 0;
  height: 20px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.seance a {
  font-size: var(--time-size);
  color: var(--link);
  text-decoration: none;
}

.screening-link { position: relative; display: inline-block; }

/* display:none rather than visibility:hidden: an invisible-but-laid-out tooltip would
   still widen the document's scrollable area and give the page a sideways scrollbar. */
.tags-tooltip {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 200px;
  padding: 4px 8px;
  background: #333;
  color: #ffffff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.screening-link:hover .tags-tooltip,
.screening-link:focus-visible .tags-tooltip { display: block; }

/* The last day column of a cinema line: hang the tooltip to the left of its time so it
   cannot reach past the right edge of the page. */
.day-cell--last .tags-tooltip { left: auto; right: 0; transform: none; }

/* --- medium widths: same table, tighter columns -------------------------- */

@media (max-width: 1099px) {
  :root {
    --poster-col: 110px;
    --cinema-col: 140px;
    --day-pad: 6px;
    --day-gap: 4px;
    --time-size: 13px;
  }

  .header-item { padding: 6px 2px; }
  .header-date { font-size: 11px; }
  .combined-header { gap: 8px; }
  .home-button { font-size: 12px; }
  .city-title { font-size: 12px; }
  .poster-cell { padding: 8px; }
  .cinema-info { padding: 10px; font-size: 13px; }
  .movie-title { padding: 8px 12px; }
}

/* --- narrow widths: the same rows, stacked instead of 8 columns ---------- */

@media (max-width: 779px) {
  body { padding: 12px; }

  /* No day columns left to label, so the sticky bar keeps the city title only. */
  .sticky-header { grid-template-columns: 1fr; min-height: 36px; }
  .header-item--day { display: none; }
  .combined-header { justify-content: flex-start; padding: 8px 10px; }
  .city-title { font-size: 14px; }
  .home-button { font-size: 13px; }

  .movie-row { grid-template-columns: 92px 1fr; }
  .poster-cell { padding: 8px 6px; }
  .movie-poster { position: static; }

  .content-cell { grid-template-columns: 1fr; }

  .cinema-info {
    grid-column: 1 / -1;
    padding: 8px 10px;
    font-weight: 600;
    background: #ececec;
    border-right: 0;
  }

  .day-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
    align-items: baseline;
    gap: 4px 10px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
  }

  /* Every cell spans the page here, so every tooltip is hung to the left of its time. */
  .tags-tooltip { left: auto; right: 0; transform: none; max-width: 132px; white-space: normal; }

  .day-label {
    display: block;
    flex: 0 0 84px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }

  /* A day with no screenings has nothing to say in the stacked layout. */
  .day-cell[data-empty="true"] { display: none; }
}