/* ==============================================================================
   FEATURED BLOCK
   ============================================================================== */

/* The call of the day, first on the home (templates/blocks/featured.html):
   the paper card of the events block, so it reads as part of the same
   page, with the poster and the date carrying the weight instead of a
   louder colour. Only tokens, no colour of its own: every pair below was
   already measured AA in tokens.css (violet text and slate labels on the
   paper, the slate button with its text). */
.block-featured {
  background: var(--paper-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--spacing-lg);
}

/* On a phone the poster takes the whole column but never more than most
   of the screen's height: object-fit contain keeps a tall poster whole,
   letterboxed on the paper, rather than cropping its lettering. */
.featured__poster {
  display: block;
  justify-self: center;
}

.featured__poster img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* minmax(0, 1fr) in the wide grid and min-width here: a long word in the
   title or the place must wrap inside its column, never widen the page. */
.featured__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

/* «Hoy», «Mañana» or the weekday, small and in capitals, the slate of the
   events' labels (4.8:1 on the paper). */
.featured__kicker {
  margin: 0;
  color: var(--button-bg);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.featured__when {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xs);
}

/* The date is the loudest thing on the right: the day at the hero's
   title size, the month and the year beside it, in the serious serif. */
.featured__date {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  font-family: var(--font-title-serious);
  color: var(--text-primary);
}

/* tabular-nums and line-height 1 keep the big day from pushing the time
   down a line it does not need. */
.featured__day {
  font-size: var(--font-size-hero);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.featured__month {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* The time in the slate, like an event's .event__time. */
.featured__time {
  color: var(--button-bg);
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* One of the headings in the serious serif without capitals (ADR-034, by
   Juan's own request for this block). The body:not(.admin) prefix
   matches the specificity of main.css's uppercase rule, as hero.css and
   cards.css do. */
body:not(.admin) .featured__title {
  margin: 0;
  font-family: var(--font-title-serious);
  font-weight: 600;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
}

.featured__place {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.featured__pin {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  color: var(--button-bg);
}

.featured__text > :first-child {
  margin-top: 0;
}

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

.featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

/* The second button is outlined: the slate border is a non-text edge
   (4.8:1 on the paper light, above the 3:1 it needs) and the label is
   the body's violet on the paper, the pair every paragraph already
   passes in both themes. The 2px border is taken back from the padding
   so both buttons stand the same height. The doubled class outweighs
   .btn's own border: none, which _buttons.css sets later in the cascade. */
.btn.featured__secondary {
  border: 2px solid var(--button-bg);
  background: transparent;
  color: var(--text-primary);
  padding: calc(var(--spacing-sm) - 2px) calc(var(--spacing-md) - 2px);
}

.btn.featured__secondary:hover {
  background: var(--button-bg-hover);
}

/* --------------------------------------------------------------------------
   The calendar sheet: the left column when the call has no poster
   -------------------------------------------------------------------------- */

/* The same sheet as an event's tile (events.css), only big, so the call
   without a poster still has something to look at first and reads as part
   of the same set of calendars. Its palette is the tile's, copied here
   rather than shared, so events.css stays as it is. sobria, the site's
   skin, swaps it for its near-white page in skins.css, on the same rule
   as the tile. Measured on 14 October 2026 for sobria: ink 12.5:1 and
   weekday 6.5:1 on the sheet's page, which does not change with the
   theme; the band is the buttons' pair, 5.1:1 light and 6.1:1 dark. The
   lilac edge is decoration (2.3:1 on the light card, 5.0:1 on the dark
   one) and the shadow does the lift, as on the tile. The defaults below
   (ink 14.5:1, weekday 6.3:1) only show in a skin without its own. */
.featured__sheet {
  --calendar-paper: #f1e6e1;
  --calendar-ink: #2b0f12;
  --calendar-muted: #6b4a4d;
  --calendar-band: var(--button-bg);
  --calendar-band-ink: var(--button-text);
  --calendar-edge: #c9a9a4;
  --sheet-side: 8rem;

  justify-self: center;
  display: flex;
  flex-direction: column;
  width: var(--sheet-side);
  height: var(--sheet-side);
  overflow: hidden;
  border: 1px solid var(--calendar-edge);
  border-radius: var(--radius-lg);
  background: var(--calendar-paper);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* The band carries the whole month («octubre»), which a 4.5rem tile has
   no room for; nowrap and the small tracking keep even «septiembre» on
   one line at the phone's 8rem. */
.featured__band {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--calendar-band);
  color: var(--calendar-band-ink);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The day fills what the band and the weekday leave, in the serious serif
   of the block's title, so the sheet and the heading beside it match. */
.featured__sheet-day {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--calendar-ink);
  font-family: var(--font-title-serious);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.featured__sheet-weekday {
  padding-bottom: var(--spacing-sm);
  color: var(--calendar-muted);
  font-size: 0.95rem;
  line-height: 1.2;
}

/* From 768 px the poster sits on the left at its own width (22rem at
   most) and the text fills the rest, centred on the poster's height. */
@media (min-width: 768px) {
  .block-featured {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .block-featured--poster {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-xl);
  }

  .featured__poster {
    justify-self: start;
    max-width: 22rem;
    width: 100%;
  }

  .featured__poster img {
    max-height: none;
  }

  /* Without a poster the same two columns, the first one narrower: the
     sheet at 9.5rem centred in 14rem, so the text starts about where it
     would beside a poster without a wide empty margin. */
  .block-featured--sheet {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-xl);
  }

  .featured__sheet {
    --sheet-side: 9.5rem;
  }

  .featured__sheet-day {
    font-size: 4.25rem;
  }
}