/* Loaded only by the language previews. Desktop calendar styling is unchanged. */
@media (max-width: 809px) {
  #main #calendar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #main #calendar > [data-framer-name="Wrapper"],
  #main #calendar [data-framer-name="Calendar Stack"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  #main #calendar [data-framer-name="Calendar Stack"] > .ssr-variant > div {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #main #calendar [data-framer-name="Phone"].ptc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px !important;
  }

  /* Give the date its own full-width row above the wrapping ranking badges. */
  #main #calendar [data-framer-name="Phone"] .framer-49pwr {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #main #calendar [data-framer-name="Phone"] .framer-1m65xi4,
  #main #calendar [data-framer-name="Phone"] .calendar-tags-wrap {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main #calendar [data-framer-name="Phone"] .framer-1m65xi4 p {
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main #calendar [data-framer-name="Phone"] p.calendar-tags {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    gap: 7px !important;
  }

  #main #calendar [data-framer-name="Phone"] .calendar-tags > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Keep a predictable arrow target while allowing long event titles to wrap. */
  #main #calendar [data-framer-name="Phone"] .framer-1u0lgq1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 16px !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #main #calendar [data-framer-name="Phone"] .framer-15e6ikr {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: normal !important;
  }

  #main #calendar [data-framer-name="Phone"] h4 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #main #calendar [data-framer-name="Phone"] .framer-ujl3nw-container,
  #main #calendar [data-framer-name="Phone"] .framer-ujl3nw-container > a {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }
}