/*
 * HakuStudio
 * Filmpress.sk redesign & custom implementation.
 * @author HakuStudio
 *
 * Responsive featured block used by timeline category layouts.
 * The right-hand stories share the same total height as the lead story.
 */

/*
 * The lead story already renders its Joomla intro/full image above the text.
 * Older articles can also contain that same image inside introtext. Hide only
 * images coming from the intro content so the lead story never shows it twice.
 */
.timeline-highlight .main-item .blog-item > :not(.item-image):not(.item-meta):not(.item-title) img,
.timeline-highlight .main-item .blog-item > img {
  display: none !important;
}

@media (min-width: 992px) {
  .timeline-highlight .highlight-layout {
    align-items: stretch;
  }

  .timeline-highlight .highlight-layout > .main-item,
  .timeline-highlight .highlight-layout > .other-item {
    min-width: 0;
  }

  .timeline-highlight .highlight-layout > .other-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .timeline-highlight .other-item > .blog-item {
    display: grid !important;
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    flex: 1 1 0;
    min-height: 0;
    gap: clamp(14px, 1.2vw, 22px);
    align-items: stretch;
    margin: 0;
    padding: clamp(14px, 1.25vw, 20px) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--fp-color-border, rgba(255, 255, 255, .12));
  }

  .timeline-highlight .other-item > .blog-item:first-child {
    padding-top: 0;
  }

  .timeline-highlight .other-item > .blog-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .timeline-highlight .other-item .item-image.ratio {
    --bs-aspect-ratio: 0;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 7px;
  }

  .timeline-highlight .other-item .item-image.ratio::before {
    display: none;
  }

  .timeline-highlight .other-item .item-image.ratio > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .timeline-highlight .other-item .item-content {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .timeline-highlight .other-item .item-title {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .timeline-highlight .other-item .article-info {
    flex: 0 0 auto;
  }

  .timeline-highlight .other-item .item-readmore {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

@media (max-width: 991px) {
  .timeline-highlight .highlight-layout > .other-item {
    height: auto !important;
  }

  .timeline-highlight .other-item > .blog-item {
    min-height: 0;
  }
}

/*
 * Mobile lead/hero card: widen only the visual frame around the existing
 * content. The original image size, text width, typography and spacing stay
 * untouched; the pseudo-element simply extends the frame outward.
 */
@media (max-width: 767px) {
  .timeline-highlight .main-item,
  .timeline-highlight .main-item > .blog-item,
  .timeline-highlight .other-item,
  .timeline-highlight .other-item > .blog-item {
    overflow: visible !important;
  }

  .timeline-highlight .main-item > .blog-item,
  .timeline-highlight .other-item > .blog-item {
    position: relative !important;
    isolation: isolate;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .timeline-highlight .main-item > .blog-item::before,
  .timeline-highlight .other-item > .blog-item::before {
    content: "";
    position: absolute;
    inset: -10px -12px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(25, 91, 128, .34);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    box-sizing: border-box;
  }

  /* Keep the original spacing between the secondary featured stories while
   * giving each one its own independent frame. */
  .timeline-highlight .other-item > .blog-item + .blog-item {
    margin-top: 24px !important;
  }

  html[data-theme="dark"] .timeline-highlight .main-item > .blog-item::before,
  html.dark-active .timeline-highlight .main-item > .blog-item::before,
  body[data-theme="dark"] .timeline-highlight .main-item > .blog-item::before,
  body.dark-active .timeline-highlight .main-item > .blog-item::before,
  html[data-theme="dark"] .timeline-highlight .other-item > .blog-item::before,
  html.dark-active .timeline-highlight .other-item > .blog-item::before,
  body[data-theme="dark"] .timeline-highlight .other-item > .blog-item::before,
  body.dark-active .timeline-highlight .other-item > .blog-item::before {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .045);
  }
}