/*
 * HakuStudio
 * Filmpress.sk redesign & custom implementation.
 *
 * Unified article detail presentation.
 * Keeps the article at the compact reading width used by the original
 * Filmpress layout while preserving one responsive hero image.
 */

.fp-article-detail {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

.fp-article-detail__hero,
.fp-article-detail__body {
  width: 100%;
  min-width: 0;
}

.com-content-article .fp-article-hero,
.item-page .fp-article-hero {
  display: block;
  float: none !important;
  clear: both;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(18px, 2vw, 28px) 0 clamp(22px, 2.4vw, 34px) !important;
  overflow: hidden;
}

.com-content-article .fp-article-hero img,
.item-page .fp-article-hero img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  object-fit: unset !important;
}

.com-content-article .fp-article-hero .caption,
.item-page .fp-article-hero .caption {
  margin-top: 7px;
  color: var(--fp-color-text-muted, #b7b7b7);
  font-size: .76rem;
  line-height: 1.35;
  text-align: center;
}

/* article-media.js marks only an in-body image whose URL matches the hero. */
.com-content-article .fp-article-duplicate-media,
.item-page .fp-article-duplicate-media {
  display: none !important;
}

/*
 * Legacy Filmoví distribútori page.
 * JA Titan keeps the component inside a narrow Bootstrap column. JS marks this
 * one legacy article from its heading, then the containing column can expand to
 * the full main row and the article itself can sit visibly in the page centre.
 */
body.fp-distributors-page #t4-main-body .row > [class*="col-"],
body.fp-distributors-page .t4-main-body .row > [class*="col-"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.fp-distributors-page .fp-article-detail--distributors {
  width: min(100%, 940px) !important;
  max-width: 940px !important;
  margin-inline: auto !important;
  padding-inline: clamp(18px, 2.4vw, 34px) !important;
}

body.fp-distributors-page .fp-article-detail--distributors table {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

@media (max-width: 767px) {
  .fp-article-detail {
    max-width: none;
  }

  body.fp-distributors-page .fp-article-detail--distributors {
    padding-inline: 0 !important;
  }
}