/* The daily calendar is deliberately generous on desktop: each photograph has
 * room to breathe and the selected day's story reads as an editorial spread. */
@media (min-width: 768px) {
  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) {
    height: clamp(540px, 43vw, 620px);
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene {
    padding: 31px 20px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene .tsf-date {
    font-size: 11px;
    letter-spacing: 1.35px;
    margin-bottom: 12px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene strong {
    font-size: 17px;
    line-height: 1.02;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene:hover {
    flex: 5.3 1 0;
    padding: 34px 28px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene:hover strong {
    font-size: 23px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-calendar-scene:hover .tsf-scene-detail {
    font-size: 15px;
    line-height: 1.48;
    margin-top: 23px;
    max-height: 170px;
    width: min(340px, 100%);
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-focused:not(.is-open) .tsf-calendar-scene.is-selected {
    padding: 42px 48px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-focused:not(.is-open) .tsf-calendar-scene.is-selected strong {
    font-size: clamp(29px, 3vw, 43px);
    line-height: .98;
    max-width: 14ch;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected {
    /* Keep the selected photograph genuinely visible while the editorial
     * panel opens at the right.  The opening card is wider than the rests,
     * so its title has enough measure to read naturally. */
    background-size: 55% 100%;
    flex: 14 1 0;
    justify-content: center;
    padding: 42px 45% 42px 34px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected::before {
    width: 55%;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel {
    padding: 42px 38px;
    width: 45%;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene:not(.is-selected) {
    flex: .5 1 0;
    min-width: 30px;
    padding-left: 6px;
    padding-right: 6px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected strong {
    font-size: 21px;
    line-height: 1.06;
    max-width: 19ch;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-detail {
    margin-top: 18px;
    max-width: 29ch;
    width: 100%;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-scene-panel b {
    font-size: 16px;
    line-height: 1.5;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) .tsf-scene-panel em {
    font-size: 13px;
    line-height: 1.6;
    max-width: 540px;
  }

  /* Once the story is completely open, the selected day becomes an editorial
   * spread. Keeping the neighbouring slivers visible was taking width away
   * from the photograph and clipping its composition. */
  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open {
    height: clamp(440px, 34vw, 560px);
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene:not(.is-selected) {
    flex: 0 0 0;
    min-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
    transform: none;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    flex: 1 1 100%;
    padding: 34px 41% 34px 38px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected::before {
    width: 62%;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel {
    justify-content: center;
    padding-bottom: 42px;
    padding-top: 42px;
    width: 41%;
  }

  /* The reading panel is a complete half of the card, not a caption.  Give
   * its hierarchy enough presence and centre the content in its vertical
   * space so the upper and lower margins feel deliberately balanced. */
  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel i {
    font-size: 10px;
    margin-bottom: 19px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel b {
    font-size: 18px;
    line-height: 1.42;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel em {
    font-size: 14px;
    line-height: 1.58;
    margin-top: 17px;
  }
}

/* On phones, opening a day turns it into a fuller visual card rather than
 * leaving it at the same compact rail size.  This selector covers both the
 * homepage calendar and the dedicated dates page. */
@media (max-width: 767px) {
  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase) {
    transition: height .6s cubic-bezier(.2,.65,.25,1);
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open {
    height: clamp(620px, 78vh, 700px);
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected {
    flex: 0 0 92%;
    padding: 30px;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-detail {
    max-height: 170px;
  }
}

/* The divide between the photograph and the reading panel is one continuous
 * San Fermín red rule on both desktop calendars. */
@media (min-width: 768px) {
  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel {
    border-left: 4px solid var(--red, #c6192e);
    box-sizing: border-box;
  }

  :is([data-dates-calendar-showcase], .tsf-calendar-lab:not(.tsf-dates-calendar) .tsf-calendar-showcase).is-open .tsf-calendar-scene.is-selected .tsf-scene-panel::before {
    display: none;
  }
}