/* Full-screen chapter scrolling for phones, tablets and shorter desktop windows. */
@media (max-width: 900px), (max-height: 900px) {
  html {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
  }

  body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .page {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  .panel-inner {
    min-height: 0 !important;
  }

  .panel,
  .kv-panel {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    scroll-margin-top: 0;
  }

  .timeline-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-3) !important;
    padding-top: 0 !important;
  }

  .timeline-track::before {
    display: none !important;
  }

  .timeline-track .milestone {
    position: relative;
    height: 104px;
    min-height: 104px;
    overflow: hidden;
    padding: var(--space-4) var(--space-3) var(--space-3) !important;
    border: var(--rule-thin) solid var(--color-rule) !important;
    border-top: 2px solid var(--color-brand) !important;
    border-radius: var(--radius-control) !important;
    background: linear-gradient(150deg, var(--color-paper) 0%, var(--color-brand-wash) 100%) !important;
    box-shadow: var(--shadow-milestone);
    text-align: left !important;
  }

  .timeline-track .milestone:nth-child(3n) {
    border-top-color: var(--color-gold) !important;
  }

  .timeline-track .milestone-dot {
    display: block !important;
    top: var(--space-4) !important;
    right: var(--space-3) !important;
    left: auto !important;
    width: 8px !important;
    height: 8px !important;
    transform: none !important;
    border: 0 !important;
    background: var(--color-brand) !important;
    box-shadow: 0 0 0 4px var(--color-brand-soft) !important;
  }

  .timeline-track .milestone:nth-child(3n) .milestone-dot {
    background: var(--color-gold) !important;
    box-shadow: 0 0 0 4px var(--color-warning-soft) !important;
  }

  .timeline-track .milestone-year {
    display: block;
    padding-right: var(--space-5);
  }

  .timeline-track .milestone p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 600px) {
  .news-panel .panel-inner {
    flex: 0 0 calc(100% - 70px) !important;
    height: calc(100% - 70px) !important;
    padding-top: 76px !important;
    padding-bottom: var(--space-2) !important;
    justify-content: center !important;
  }
}

@media (max-width: 600px) and (max-height: 620px) {
  .timeline-panel .timeline-layout {
    height: 100% !important;
    min-height: 0 !important;
    padding: 76px var(--space-3) var(--space-2) !important;
  }

  .timeline-panel .timeline-overview,
  .timeline-panel .brand-pillars,
  .timeline-panel .timeline-kicker,
  .timeline-panel .timeline-track {
    margin-top: var(--space-2) !important;
  }

  .timeline-panel .timeline-track {
    gap: var(--space-2) !important;
  }

  .news-panel .panel-inner {
    flex-basis: calc(100% - 60px) !important;
    height: calc(100% - 60px) !important;
    padding-top: 60px !important;
    padding-bottom: var(--space-1) !important;
    justify-content: flex-start !important;
  }

  .news-panel .section-heading .eyebrow,
  .news-panel .section-heading .lead {
    display: none !important;
  }

  .news-panel .section-heading .title-xl {
    font-size: 24px !important;
  }

  .news-panel .news-layout {
    gap: var(--space-1) !important;
    margin-top: var(--space-2) !important;
  }

  .news-panel .featured-news {
    min-height: 150px !important;
  }

  .news-panel .featured-copy {
    padding-top: var(--space-3) !important;
  }

  .news-panel .featured-copy h3 {
    font-size: 15px !important;
  }

  .news-panel .featured-copy .btn {
    top: 98px !important;
    min-height: 34px !important;
  }

  .news-panel .news-list {
    gap: var(--space-1) !important;
  }

  .news-panel .news-item {
    min-height: 46px !important;
  }

  #homepage-news-more {
    min-height: 34px !important;
  }

  .bekari-footer-inline-inner {
    min-height: 60px !important;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .timeline-panel .timeline-layout {
    height: 100% !important;
    min-height: 0 !important;
    padding: 64px var(--space-4) var(--space-2) !important;
  }

  .timeline-panel .timeline-layout > .section-heading,
  .timeline-panel .timeline-overview {
    display: none !important;
  }

  .timeline-panel .timeline-kicker {
    margin-top: 0 !important;
  }

  .timeline-panel .timeline-track {
    gap: var(--space-2) !important;
    margin-top: var(--space-2) !important;
  }
}