/*
 * HakuStudio
 * Filmpress.sk – shared timeline consistency layer.
 *
 * Old Filmpress articles contain many different inline styles and image sizes.
 * This stylesheet normalises every article rendered by the timeline layout so
 * Recenzie/Stream year archives keep the same visual structure.
 */

.timeline-article .com-content-category--timeline .timeline-item > .wrap-content {
  box-sizing: border-box;
}

.timeline-article .com-content-category--timeline .timeline-item > .wrap-content > .item-content {
  min-width: 0;
}

/* Keep article titles exactly as entered in Joomla and give every archive the
 * same heading scale, regardless of the legacy article markup. */
.timeline-article .com-content-category--timeline .timeline-item .page-header,
.timeline-article .com-content-category--timeline .timeline-item .page-header *,
.timeline-article .com-content-category--timeline .timeline-item .item-title,
.timeline-article .com-content-category--timeline .timeline-item .item-title *,
.timeline-article .com-content-category--timeline .timeline-item h2,
.timeline-article .com-content-category--timeline .timeline-item h2 *,
.timeline-article .com-content-category--timeline .timeline-item h3,
.timeline-article .com-content-category--timeline .timeline-item h3 * {
  text-transform: none !important;
}

.timeline-article .com-content-category--timeline .timeline-item .page-header,
.timeline-article .com-content-category--timeline .timeline-item .item-title,
.timeline-article .com-content-category--timeline .timeline-item h2,
.timeline-article .com-content-category--timeline .timeline-item h3 {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
}

.timeline-article .com-content-category--timeline .fp-timeline-byline {
  margin: 3px 0 7px !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

/* Legacy introtexts can contain black text, custom font sizes, floats and old
 * editor styles. Reset only the preview area, while preserving bold/italic
 * emphasis written by the author. */
.timeline-article .com-content-category--timeline .timeline-item__intro {
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 0 !important;
  color: var(--fp-color-text) !important;
  font-family: var(--fp-font-body) !important;
  font-size: .94rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  background: transparent !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro p,
.timeline-article .com-content-category--timeline .timeline-item__intro div,
.timeline-article .com-content-category--timeline .timeline-item__intro span,
.timeline-article .com-content-category--timeline .timeline-item__intro font {
  width: auto !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: .65em !important;
  float: none !important;
  color: inherit !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro strong,
.timeline-article .com-content-category--timeline .timeline-item__intro b {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700 !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro em,
.timeline-article .com-content-category--timeline .timeline-item__intro i {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro > :first-child {
  margin-top: 0 !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro > :last-child {
  margin-bottom: 0 !important;
}

.timeline-article .com-content-category--timeline .timeline-item__intro img,
.timeline-article .com-content-category--timeline .timeline-item__intro picture,
.timeline-article .com-content-category--timeline .timeline-item__intro figure {
  display: none !important;
}

/* One thumbnail geometry for every year. Old source images are cropped rather
 * than stretched, so portrait, 4:3 and widescreen uploads align identically. */
@media (min-width: 768px) {
  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: start !important;
  }

  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content > .item-image,
  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content > figure.item-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    aspect-ratio: 16 / 9 !important;
  }

  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content > .item-image img,
  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content > figure.item-image img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .timeline-article .com-content-category--timeline .timeline-item > .wrap-content > .item-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Do not fight the existing Filmpress mobile card design. Only inherit the
 * typography cleanup above; layout remains controlled by timeline.css. */
@media (max-width: 767px) {
  .timeline-article .com-content-category--timeline .timeline-item .page-header,
  .timeline-article .com-content-category--timeline .timeline-item .item-title,
  .timeline-article .com-content-category--timeline .timeline-item h2,
  .timeline-article .com-content-category--timeline .timeline-item h3 {
    font-size: inherit !important;
  }
}