/*
 * Component styles shared by the site and the block editor.
 *
 * Loaded on the front end and through add_editor_style(), so a block looks the
 * same in both places instead of drifting the way editor.css and main.css did.
 * Only tokens defined in main.css / editor.css are used here.
 */

/* ==========================================================================
   Calendar — full month view

   The grid is a real table so a screen reader announces "Tuesday, 14" for the
   cell it is in. It sits inside the same bordered, flat surface as .card
   elsewhere on the site — a bare table floating on the page background read
   as unfinished next to everything around it. On narrow screens the table
   collapses into a day list and empty days drop out, which is more useful on
   a phone than a sideways scroll.
   ========================================================================== */
.cal-month {
  --cal-line: var(--color-border);
  margin-block: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.cal-month__nav {
  padding: var(--space-lg) var(--space-lg) 0;
}

.cal-month__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: var(--font-heading-weight, 400);
  letter-spacing: var(--tracking-display);
  text-transform: lowercase;
  margin: 0 0 var(--space-md);
}

.cal-month__title--static {
  padding: var(--space-lg) var(--space-lg) 0;
}

.cal-month__nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-text);
}

.cal-month__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.4rem 0.2rem;
}

.cal-month__nav-link:hover,
.cal-month__nav-link:focus-visible {
  color: var(--color-accent);
}

/* The label ("Červen" / "Srpen") is the part safe to drop on the narrowest
   screens — the arrow alone stays a clear, tappable prev/next control. */
@media (max-width: 420px) {
  .cal-month__nav-label {
    display: none;
  }
}

/* ---------- month-jump ---------- */

.cal-month__jump {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cal-month__jump select {
  appearance: none;
  border: 1px solid var(--color-border-field);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4rem 1.6rem 0.4rem 0.8rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.cal-month__jump select:hover {
  border-color: var(--color-text);
}

.cal-month__jump-submit {
  border: 0;
  background: var(--surface-flat);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

/* ---------- grid ---------- */

.cal-month__scroll {
  overflow-x: auto;
}

.cal-month__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Scoped under .cal-month__table rather than bare .cal-month__cell: a
   generic td/th rule anywhere else in the cascade only needs one extra class
   in its own selector to outrank a single-class selector on specificity —
   exactly what silently happened here once, when a content-table filter
   wrapped this table in .table-scroll and its "td { padding: ... }" rule
   won. Two classes' worth of specificity is what actually holds now. */
.cal-month__table th,
.cal-month__table .cal-month__cell {
  /* Same horizontal padding on both — a header flush with the table edge
     while its day numbers sit indented under it is what made the grid read
     as misaligned. */
  padding: var(--space-sm) var(--space-sm);
}

.cal-month__table th {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
  background: var(--surface-flat);
  border-bottom: 1px solid var(--cal-line);
}

.cal-month__table th abbr {
  text-decoration: none;
  border: 0;
}

.cal-month__table .cal-month__cell {
  vertical-align: top;
  border-bottom: 1px solid var(--cal-line);
  border-right: 1px solid var(--cal-line);
  min-height: 6.5rem;
  height: 6.5rem;
}

.cal-month__table tr:last-child .cal-month__cell {
  border-bottom: 0;
}

.cal-month__cell:last-child {
  border-right: 0;
}

.cal-month__cell--empty {
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.cal-month__daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* Today is a filled dot — the same circle the identity is built from. */
.cal-month__cell.is-today .cal-month__daynum {
  background: var(--color-accent);
  color: var(--color-accent-on, #fff);
  border-radius: var(--radius-dot);
}

.cal-month__cell.has-events .cal-month__daynum {
  /* color: var(--color-text); */
}

.cal-month__events {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-month__event {
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 0.25rem 0.4rem;
  background: var(--surface-flat);
  border-left: 3px solid var(--color-accent);
}

.cal-month__event a {
  color: inherit;
  text-decoration: none;
}

.cal-month__event a:hover {
  text-decoration: underline;
}

.cal-month__event--course {
  border-left-color: var(--color-primary);
}

.cal-month__event--important {
  border-left-color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 14%, #fff);
}

.cal-month__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cal-month .ics-calendar__hint {
  margin: var(--space-md) var(--space-lg) 0;
}

.cal-month .ics-subscribe {
  /* Outside the shorter list view's .ics-calendar__footer here, so the
     divider that normally comes from that wrapper is added directly. */
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 780px) {
  .cal-month__nav {
    padding: var(--space-md) var(--space-md) 0;
  }

  .cal-month__title--static {
    padding: var(--space-md) var(--space-md) 0;
  }

  .cal-month__nav-row {
    padding-bottom: var(--space-md);
  }

  .cal-month__table,
  .cal-month__table tbody,
  .cal-month__table tr,
  .cal-month__table td {
    display: block;
    width: auto;
  }

  .cal-month__table thead {
    display: none;
  }

  /* On a phone an empty square is noise; only days with something on them
     are worth the vertical space. */
  .cal-month__cell--empty,
  .cal-month__cell.is-empty {
    display: none;
  }

  .cal-month__cell {
    height: auto;
    min-height: 0;
    border-right: 0;
    display: flex;
    gap: var(--space-md);
    align-items: baseline;
    padding-inline: var(--space-md);
  }

  .cal-month__events {
    flex: 1;
  }

  .cal-month__event {
    font-size: 0.88rem;
  }

  .cal-month .ics-subscribe {
    padding: var(--space-md);
  }

  .cal-month__jump select {
    font-size: 0.8rem;
  }
}

@media (max-width: 560px) {
  .cal-month__nav-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-sm);
  }

  .cal-month__jump {
    order: 1;
    flex-basis: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Calendar — subscribe
   ========================================================================== */
/*
 * Calendar footer — one compact, left-aligned stack instead of two
 * mismatched columns (a one-line link next to a bordered button with a
 * two-line caption underneath it, competing on a space-between row —
 * that produced the uneven, "broken" look under the event list).
 */
.ics-calendar__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  /* Matches .ics-calendar__item's own padding (main.css) so the footer reads
     as the last row of the same list instead of a separately-inset block
     glued to the card's edge. */
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.ics-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-sm);
  row-gap: 4px;
  width: 100%;
}

.ics-subscribe__button {
  gap: 0.5em;
}

.ics-subscribe__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
  /* No max-width: the note wraps to the sidebar's own width instead of
     breaking mid-sentence at a fixed character count narrower than it. */
  flex-basis: 100%;
}

.ics-subscribe--compact .ics-subscribe__note {
  font-size: 0.76rem;
}

/* The fallback is a text link, including inside a section header whose
 * generic link styles otherwise turn it into a pill split across lines. */
.ics-subscribe .ics-subscribe__note a {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ics-subscribe .ics-subscribe__note a:hover {
  background: none;
  box-shadow: none;
  color: var(--color-text);
}

/* ==========================================================================
   Copy to clipboard
   ========================================================================== */
.susg-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.susg-copy--box {
  padding: var(--space-md);
  background: var(--surface-flat);
  border-left: 3px solid var(--color-accent);
}

.susg-copy__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  flex-basis: 100%;
}

.susg-copy--inline .susg-copy__label {
  flex-basis: auto;
}

.susg-copy__value {
  /* Body font by default — prose like an address reads oddly in monospace.
     .susg-copy--mono opts back in for values where it earns its keep: an
     account number or IČO, where digits lining up actually helps. */
  font-family: inherit;
  font-size: 1rem;
  background: none;
  padding: 0;
  color: var(--color-text);
  word-break: break-word;
  /* A manual line break typed into the field (an address split across two
     lines) is meaningful and should render as one, not collapse into a
     single run of text. */
  white-space: pre-line;
}

.susg-copy--mono .susg-copy__value {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.susg-copy__button {
  flex: none;
}

.susg-copy.is-copied .susg-copy__button {
  background: var(--color-accent);
  color: var(--color-accent-on, #fff);
}

/* ==========================================================================
   Cards
   Equal height comes from the grid: every card stretches to the row and the
   body grows, so footers line up across the row without JavaScript.
   ========================================================================== */
.susg-card-grid {
  display: grid;
  align-items: stretch;
  /* Gap lives in its own custom property so the forced column-count formulas
     below can read the exact value in use — including when a gap modifier
     class changes it — instead of assuming the default. */
  --susg-card-gap: var(--space-lg);
  gap: var(--susg-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--susg-card-min, 260px), 100%), 1fr));
}

.susg-card-grid--gap-sm { --susg-card-gap: var(--space-md); }
.susg-card-grid--gap-lg { --susg-card-gap: var(--space-2xl); }

.susg-card-grid--cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Forced column counts, without a container or media query.
 *
 * A container query here previously tried to answer "is this grid wide
 * enough for N columns" by asking the grid to query *itself* — but an
 * element cannot be both the query container and the thing a @container
 * rule targets; browsers silently refuse to match that, so the override
 * never applied and the grid always fell back to plain auto-fit (1 column
 * in the editor's narrow canvas, however many 260px slots fit on the wide
 * front end — 3, regardless of what "2" was set to).
 *
 * This instead sizes each column to exactly 1/N of the available width
 * (accounting for the gaps between them) via calc(), and lets auto-fit do
 * what it already does well: fit as many tracks of at least that width as
 * the row allows. A track sized at exactly 1/N leaves no room for an N+1th
 * one, so the count is capped at N on any container wide enough for it, and
 * degrades gracefully — fewer, wider columns — on a narrower one, with no
 * query of any kind needed.
 */
.susg-card-grid--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(max(160px, calc(50% - var(--susg-card-gap) / 2)), 1fr));
}

.susg-card-grid--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(max(160px, calc(100% / 3 - var(--susg-card-gap) * 2 / 3)), 1fr));
}

.susg-card-grid--cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(max(160px, calc(25% - var(--susg-card-gap) * 3 / 4)), 1fr));
}

.susg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.susg-card__media {
  margin: 0;
  background: var(--surface-flat);
  overflow: hidden;
}

.susg-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.susg-card--ratio-4-3 .susg-card__media { aspect-ratio: 4 / 3; }
.susg-card--ratio-16-9 .susg-card__media { aspect-ratio: 16 / 9; }
.susg-card--ratio-1-1 .susg-card__media { aspect-ratio: 1 / 1; }
.susg-card--ratio-3-4 .susg-card__media { aspect-ratio: 3 / 4; }

.susg-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.susg-card__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--font-heading-weight, 400);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.susg-card__text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.susg-card__text > :last-child { margin-bottom: 0; }

.susg-card__footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

/* A linked card: one link in the tab order, named by the title, stretched over
   the whole card. Wrapping the entire card in an anchor instead would make the
   screen reader read the body text as the link name. */
.susg-card__link {
  color: inherit;
  text-decoration: none;
}

.susg-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.susg-card--linked:hover {
  border-color: var(--color-accent);
}

.susg-card--linked:hover .susg-card__title {
  color: var(--color-accent);
}

.susg-card--linked:has(.susg-card__link:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.susg-card__placeholder {
  width: 100%;
  min-height: 8rem;
  justify-content: center;
}

/* ==========================================================================
   Map
   ========================================================================== */
.susg-map {
  position: relative;
  background: var(--surface-flat);
}

.susg-map iframe {
  display: block;
  width: 100%;
  border: 0;
}

.susg-map__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-xl);
  border: 1px dashed var(--color-border-strong);
}

.susg-map__consent-text {
  margin: 0;
  max-width: 46ch;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.susg-map__fallback {
  margin: 0;
  font-size: 0.85rem;
}

/* ==========================================================================
   Native core/button styles
   Patterns emit real button blocks with these styles instead of raw HTML, so a
   redactor edits a call to action the ordinary way and still gets the school's
   button. Everything is derived from tokens — nothing is restated here.
   ========================================================================== */
.wp-block-button__link,
.wp-block-button .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

.wp-block-button.is-style-susg-accent .wp-block-button__link {
  background: var(--color-accent);
  color: var(--color-accent-on, #fff);
}

.wp-block-button.is-style-susg-accent .wp-block-button__link:hover,
.wp-block-button.is-style-susg-accent .wp-block-button__link:focus {
  background: var(--color-accent-hover);
  color: var(--color-accent-on, #fff);
}

/* The quiet variant: a tonal surface rather than an outline, so it sits flat
   against the page instead of drawing a second ring next to the focus ring. */
.wp-block-button.is-style-susg-outline .wp-block-button__link {
  background: var(--surface-flat);
  color: var(--color-text);
}

.wp-block-button.is-style-susg-outline .wp-block-button__link:hover,
.wp-block-button.is-style-susg-outline .wp-block-button__link:focus {
  background: var(--surface-flat-strong);
  color: var(--color-text);
}

/* An arrow that belongs to the design rather than being typed into the label,
   so the text stays translatable and the arrow stays out of the accessible name. */
.wp-block-button.is-style-susg-outline .wp-block-button__link::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
}

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Document list — category group headings. */
.document-list__group-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--font-heading-weight, 400);
  margin: var(--space-lg) 0 var(--space-md);
}

.document-list > .document-list__group-title:first-child {
  margin-top: 0;
}

/* Single document card block — a standalone card is meant to sit inline in
   content, not stretch to the full measure of a wide page like the archive
   grid does. */
.susg-document-card .card--document {
  max-width: 26rem;
}

/* ==========================================================================
   Termín card — susg/upcoming-terminy
   Was rendering with .card--termin / .card__tags / .badge--termin-type and a
   button class of "btn btn--outline" — none of which had any CSS anywhere in
   the theme (the button class didn't even match the site's own convention,
   "button--outline"), so it fell back to bare, unstyled paragraphs.
   ========================================================================== */
.card--termin {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.termin-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.termin-card__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--surface-flat);
  color: var(--color-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

.termin-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.termin-card__title a {
  color: inherit;
  text-decoration: none;
}

.termin-card__title a:hover {
  color: var(--color-accent);
}

.termin-card__date {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  font-size: 0.92rem;
}

.termin-card__location {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.termin-card__location svg {
  flex: none;
  opacity: 0.7;
}

.termin-card__register {
  margin: 0.5rem 0 0;
}