/* Potencial Deportivo — final planning calendar presentation layer. */

.plan-page .plan-calendar {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.plan-page .plan-day-column {
  flex: 1 0 calc((100% - 6px) / 7) !important;
  width: auto !important;
  min-width: 155px !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Mobile browsers can fail to decode WebP nested inside SVG <image>. */
.plan-page .plan-session-card.is-sport-cycling .plan-session-visual {
  content: url('/planning/cycling.svg') !important;
}

.plan-page .plan-session-card.is-sport-strength .plan-session-visual {
  content: url('/planning/strength.svg') !important;
}

@media (max-width: 760px) {
  .plan-page .plan-calendar {
    scroll-snap-type: x proximity;
  }

  .plan-page .plan-day-column {
    flex: 0 0 calc(100vw - 58px) !important;
    width: calc(100vw - 58px) !important;
    min-width: calc(100vw - 58px) !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 390px) {
  .plan-page .plan-day-column {
    flex-basis: calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
  }
}