/*
 * Filmpress Press servis timeline tables.
 * Scoped only to the Press servis category/timeline preview.
 * Article detail pages are intentionally untouched.
 */

/*
 * The real problem was not the table itself. JA Titan keeps the whole timeline
 * article/listing column narrow. Make the Press servis timeline use the same
 * available component width as the recommended-content block above it.
 */
@media (min-width: 768px) {
  .timeline-article:has(.fp-press-service-table-intro) {
    display: block !important;
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) > .com-content-category--timeline {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-group {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-group > .timeline-date {
    grid-column: 1 !important;
    width: 110px !important;
    max-width: 110px !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-group > .timeline-items {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-item:has(.fp-press-service-table-intro) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-item > .wrap-content:has(.fp-press-service-table-intro) {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-item > .wrap-content:has(.fp-press-service-table-intro) > .item-image,
  .timeline-article:has(.fp-press-service-table-intro) .timeline-item > .wrap-content:has(.fp-press-service-table-intro) > figure.item-image {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    margin-right: 16px !important;
  }

  .timeline-article:has(.fp-press-service-table-intro) .timeline-item > .wrap-content:has(.fp-press-service-table-intro) > .item-content {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

.com-content-category--timeline .fp-press-service-table-intro {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  margin: 6px 0 10px !important;
}

.com-content-category--timeline .fp-press-service-table-intro table {
  display: table !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 6px 0 8px !important;
  border: 1px solid #21465c !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.com-content-category--timeline .fp-press-service-table-intro table thead,
.com-content-category--timeline .fp-press-service-table-intro table tbody,
.com-content-category--timeline .fp-press-service-table-intro table tfoot,
.com-content-category--timeline .fp-press-service-table-intro table tr,
.com-content-category--timeline .fp-press-service-table-intro table th,
.com-content-category--timeline .fp-press-service-table-intro table td {
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* Desktop: one table row stays visually on one line. */
@media (min-width: 768px) {
  .com-content-category--timeline .fp-press-service-table-intro table th,
  .com-content-category--timeline .fp-press-service-table-intro table td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 2px 6px !important;
    border: 0 !important;
    vertical-align: top !important;
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
  }

  .com-content-category--timeline .fp-press-service-table-intro table tr > :first-child {
    min-width: 105px !important;
    padding-left: 2px !important;
    white-space: nowrap !important;
  }
}

.com-content-category--timeline .fp-press-service-table-intro p {
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 !important;
}

.com-content-category--timeline .fp-press-service-table-intro figure,
.com-content-category--timeline .fp-press-service-table-intro picture,
.com-content-category--timeline .fp-press-service-table-intro img {
  display: none !important;
}

@media (max-width: 767px) {
  .com-content-category--timeline .fp-press-service-table-intro,
  .com-content-category--timeline .fp-press-service-table-intro table,
  .com-content-category--timeline .fp-press-service-table-intro p {
    width: 100% !important;
    max-width: 100% !important;
  }

  .com-content-category--timeline .fp-press-service-table-intro table {
    font-size: .78rem !important;
  }

  .com-content-category--timeline .fp-press-service-table-intro table th,
  .com-content-category--timeline .fp-press-service-table-intro table td {
    white-space: normal !important;
  }
}