/*
 * Filmpress custom stylesheet entrypoint.
 * Load this file after JA Titan / T4 base styles.
 */

@import url('./tokens.css');
@import url('./base.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./hero.css');
@import url('./responsive.css');

/*
 * Legacy-inspired LIGHT shell.
 *
 * JA Titan contains its own white backgrounds, so changing Filmpress tokens
 * alone is not enough. These selectors make the T4 page shell inherit the
 * pale-blue Filmpress identity while preserving the modern horizontal header
 * and the dark photographic HERO component.
 */
[data-theme="light"] body,
html.light-active body,
body.light-active,
html[data-theme="light"] body,
body[data-theme="light"] {
  background: var(--fp-color-bg) !important;
  color: var(--fp-color-text) !important;
}

[data-theme="light"] .t4-wrapper,
html.light-active .t4-wrapper,
body.light-active .t4-wrapper,
html[data-theme="light"] .t4-wrapper,
body[data-theme="light"] .t4-wrapper,
[data-theme="light"] #t4-main-body,
html.light-active #t4-main-body,
body.light-active #t4-main-body,
[data-theme="light"] .t4-main-body,
html.light-active .t4-main-body,
body.light-active .t4-main-body {
  background: var(--fp-color-bg) !important;
  color: var(--fp-color-text) !important;
}

/* The modern header stays clean and light, like the white masthead of the
 * legacy site, while blue is used around the editorial content. */
[data-theme="light"] .t4-header,
html.light-active .t4-header,
body.light-active .t4-header,
[data-theme="light"] #t4-header,
html.light-active #t4-header,
body.light-active #t4-header {
  background: var(--fp-color-surface-elevated) !important;
  color: var(--fp-color-text) !important;
  border-color: var(--fp-color-border) !important;
}

/* Generic modern Filmpress surfaces. New homepage modules can opt into these
 * classes instead of hardcoding light/dark colours. */
.fp-surface {
  background: var(--fp-color-surface);
  color: var(--fp-color-text);
  border-color: var(--fp-color-border);
}

.fp-surface--elevated {
  background: var(--fp-color-surface-elevated);
}

.fp-editorial-link {
  color: var(--fp-color-link);
}

.fp-editorial-link:hover,
.fp-editorial-link:focus-visible {
  color: var(--fp-color-accent);
}

/*
 * JA Titan footer integration.
 * Keep the existing footer structure, but let it inherit the Filmpress
 * dark/light design tokens instead of staying permanently dark.
 */
.t4-footer,
.t4-footnav,
#t4-footer,
#t4-footnav,
.t4-section.t4-footer,
.t4-section.t4-footnav,
.t4-section.footer {
  background: var(--fp-color-surface) !important;
  color: var(--fp-color-text) !important;
  border-color: var(--fp-color-border) !important;
  transition:
    background-color var(--fp-transition-normal),
    color var(--fp-transition-normal),
    border-color var(--fp-transition-normal);
}

.t4-footer .container,
.t4-footnav .container,
#t4-footer .container,
#t4-footnav .container,
.t4-footer .container-fluid,
.t4-footnav .container-fluid {
  background: transparent !important;
  color: inherit !important;
}

.t4-footer h1,
.t4-footer h2,
.t4-footer h3,
.t4-footer h4,
.t4-footer h5,
.t4-footer h6,
.t4-footnav h1,
.t4-footnav h2,
.t4-footnav h3,
.t4-footnav h4,
.t4-footnav h5,
.t4-footnav h6,
#t4-footer h1,
#t4-footer h2,
#t4-footer h3,
#t4-footer h4,
#t4-footer h5,
#t4-footer h6 {
  color: var(--fp-color-text) !important;
}

.t4-footer,
.t4-footer p,
.t4-footer li,
.t4-footer span,
.t4-footnav,
.t4-footnav p,
.t4-footnav li,
.t4-footnav span,
#t4-footer,
#t4-footer p,
#t4-footer li,
#t4-footer span {
  color: var(--fp-color-text-muted) !important;
}

.t4-footer a,
.t4-footnav a,
#t4-footer a,
#t4-footnav a {
  color: var(--fp-color-text-muted) !important;
}

.t4-footer a:hover,
.t4-footer a:focus-visible,
.t4-footnav a:hover,
.t4-footnav a:focus-visible,
#t4-footer a:hover,
#t4-footer a:focus-visible {
  color: var(--fp-color-accent) !important;
}

.t4-footer input,
.t4-footer textarea,
.t4-footer select,
.t4-footnav input,
.t4-footnav textarea,
.t4-footnav select,
#t4-footer input,
#t4-footer textarea,
#t4-footer select {
  background: var(--fp-color-surface-elevated) !important;
  color: var(--fp-color-text) !important;
  border-color: var(--fp-color-border-strong) !important;
}

.t4-footer input::placeholder,
.t4-footer textarea::placeholder,
.t4-footnav input::placeholder,
.t4-footnav textarea::placeholder,
#t4-footer input::placeholder,
#t4-footer textarea::placeholder {
  color: var(--fp-color-text-subtle) !important;
}

.t4-footer hr,
.t4-footnav hr,
#t4-footer hr,
#t4-footnav hr,
.t4-footer .border-top,
.t4-footer .border-bottom,
.t4-footnav .border-top,
.t4-footnav .border-bottom {
  border-color: var(--fp-color-border) !important;
}

.t4-footer .bg-dark,
.t4-footnav .bg-dark,
#t4-footer .bg-dark,
#t4-footnav .bg-dark {
  background: transparent !important;
}

/* Shared five-star rating used by review cards and review slides. */
.fp-rating {
  --fp-rating-percent: 0%;
  position: relative;
  display: inline-block;
  width: max-content;
  color: rgba(255, 255, 255, .30);
  font-family: Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}

.fp-rating__base {
  display: block;
}

.fp-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--fp-rating-percent);
  overflow: hidden;
  color: var(--fp-color-accent);
  white-space: nowrap;
}

.fp-hero-slide__rating {
  margin-top: -1px;
  font-size: clamp(1.02rem, 1.3vw, 1.32rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/*
 * Homepage latest articles grid.
 * Four newest Recenzie + Stream articles directly under the HERO.
 * Compact editorial image cards, inspired by the Filmpress homepage concept.
 */
.fp-latest {
  width: 100%;
  max-width: var(--fp-container);
  margin-inline: auto;
  padding-block: clamp(8px, .7vw, 12px) clamp(20px, 1.8vw, 30px);
}

.fp-latest__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, .85vw, 15px);
}

.fp-latest-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 11.2;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #050505;
}

.fp-latest-card__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.fp-latest-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fp-transition-normal);
}

.fp-latest-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, .94) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .06) 72%);
  transition: background var(--fp-transition-normal);
}

.fp-latest-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 1.3vw, 22px);
}

.fp-latest-card__category {
  position: absolute;
  top: clamp(13px, 1vw, 19px);
  left: clamp(16px, 1.3vw, 22px);
  color: #f0443d;
  font-size: clamp(.7rem, .64vw, .8rem);
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}

.fp-latest-card__rating {
  margin-bottom: 9px;
  font-size: clamp(.86rem, .82vw, 1.02rem);
}

.fp-latest-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.05rem, 1.2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.16;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .68);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fp-latest-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
  margin-top: 13px;
}

.fp-latest-card__cta {
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fp-latest-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(255, 255, 255, .62);
  font-size: .69rem;
  line-height: 1.2;
}

/* Prominent variant used automatically by the Rozhovory module. */
.fp-latest--interviews {
  padding-top: 10px;
  padding-bottom: 8px;
}

.fp-latest--interviews .fp-latest__grid {
  gap: clamp(12px, .9vw, 16px);
}

.fp-latest--interviews .fp-latest-card {
  aspect-ratio: 16 / 14.5;
}

.fp-latest--interviews .fp-latest-card__content {
  padding: clamp(15px, 1.1vw, 19px);
}

.fp-latest--interviews .fp-latest-card__category {
  top: clamp(12px, .85vw, 15px);
  left: clamp(14px, 1.05vw, 18px);
  font-size: clamp(.66rem, .58vw, .74rem);
}

.fp-latest--interviews .fp-latest-card__title {
  font-size: clamp(.98rem, 1vw, 1.16rem);
  line-height: 1.16;
  -webkit-line-clamp: 3;
}

.fp-latest--interviews .fp-latest-card__footer {
  gap: 6px 10px;
  margin-top: 10px;
}

.fp-latest--interviews .fp-latest-card__cta {
  font-size: .7rem;
}

.fp-latest--interviews .fp-latest-card__meta {
  gap: 5px;
  font-size: .66rem;
}

/* The category cards follow interviews in the shared homepage 9/12 column. */
.fp-home-sticky-row .fp-category-panels {
  padding-top: 8px;
}

.fp-latest-card__link:hover .fp-latest-card__image,
.fp-latest-card__link:focus-visible .fp-latest-card__image {
  transform: scale(1.045);
}

.fp-latest-card__link:hover .fp-latest-card__overlay,
.fp-latest-card__link:focus-visible .fp-latest-card__overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .20) 34%, rgba(0, 0, 0, .90) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .03) 72%);
}

.fp-latest-card__link:hover .fp-latest-card__cta,
.fp-latest-card__link:focus-visible .fp-latest-card__cta {
  color: #ff4a43;
}

.fp-latest-card__link:focus-visible {
  outline: 2px solid var(--fp-color-focus);
  outline-offset: -3px;
}

/*
 * Editorial article tables.
 * Applied automatically to tables inserted into Joomla article content, including
 * Press Servis calendars. Existing editor markup does not need a custom class.
 */
.com-content-article [itemprop="articleBody"] table,
.item-page [itemprop="articleBody"] table,
.com-content-article .article-content table,
.item-page .article-content table {
  width: 100% !important;
  max-width: 100%;
  margin: clamp(18px, 2vw, 28px) 0;
  overflow: hidden;
  border: 1px solid var(--fp-color-border-strong, rgba(255, 255, 255, .16)) !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--fp-color-surface, #111) !important;
  color: var(--fp-color-text, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  font-size: clamp(.88rem, .9vw, 1rem);
  line-height: 1.45;
}

.com-content-article [itemprop="articleBody"] table th,
.com-content-article [itemprop="articleBody"] table td,
.item-page [itemprop="articleBody"] table th,
.item-page [itemprop="articleBody"] table td,
.com-content-article .article-content table th,
.com-content-article .article-content table td,
.item-page .article-content table th,
.item-page .article-content table td {
  padding: 10px 14px !important;
  vertical-align: top;
  overflow-wrap: anywhere;
  border: 0 !important;
  border-bottom: 1px solid var(--fp-color-border, rgba(255, 255, 255, .09)) !important;
  background: transparent !important;
  color: inherit;
}

.com-content-article [itemprop="articleBody"] table thead th,
.item-page [itemprop="articleBody"] table thead th,
.com-content-article .article-content table thead th,
.item-page .article-content table thead th {
  background: color-mix(in srgb, var(--fp-color-accent, #e21a1a) 16%, var(--fp-color-surface, #111)) !important;
  color: var(--fp-color-text, #fff);
  font-weight: 800;
  text-align: left;
}

.com-content-article [itemprop="articleBody"] table tbody tr:nth-child(even) td,
.item-page [itemprop="articleBody"] table tbody tr:nth-child(even) td,
.com-content-article .article-content table tbody tr:nth-child(even) td,
.item-page .article-content table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fp-color-surface-elevated, #1a1a1a) 60%, transparent) !important;
}

.com-content-article [itemprop="articleBody"] table tbody tr:hover td,
.item-page [itemprop="articleBody"] table tbody tr:hover td,
.com-content-article .article-content table tbody tr:hover td,
.item-page .article-content table tbody tr:hover td {
  background: color-mix(in srgb, var(--fp-color-accent, #e21a1a) 7%, var(--fp-color-surface, #111)) !important;
}

.com-content-article [itemprop="articleBody"] table tr:last-child > *,
.item-page [itemprop="articleBody"] table tr:last-child > *,
.com-content-article .article-content table tr:last-child > *,
.item-page .article-content table tr:last-child > * {
  border-bottom: 0 !important;
}

.com-content-article [itemprop="articleBody"] table td:first-child,
.item-page [itemprop="articleBody"] table td:first-child,
.com-content-article .article-content table td:first-child,
.item-page .article-content table td:first-child {
  min-width: 105px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .com-content-article [itemprop="articleBody"] table,
  .item-page [itemprop="articleBody"] table,
  .com-content-article .article-content table,
  .item-page .article-content table {
    font-size: .84rem;
  }

  .com-content-article [itemprop="articleBody"] table th,
  .com-content-article [itemprop="articleBody"] table td,
  .item-page [itemprop="articleBody"] table th,
  .item-page [itemprop="articleBody"] table td,
  .com-content-article .article-content table th,
  .com-content-article .article-content table td,
  .item-page .article-content table th,
  .item-page .article-content table td {
    padding: 8px 9px !important;
  }

  .com-content-article [itemprop="articleBody"] table td:first-child,
  .item-page [itemprop="articleBody"] table td:first-child,
  .com-content-article .article-content table td:first-child,
  .item-page .article-content table td:first-child {
    min-width: 82px;
  }
}

@media (max-width: 1199px) {
  .fp-latest-card__meta {
    display: none;
  }
}

@media (max-width: 991px) {
  .fp-latest {
    padding-top: 8px;
  }

  .fp-latest__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-latest-card {
    aspect-ratio: 16 / 10.5;
  }
}

@media (max-width: 575px) {
  .fp-latest {
    padding-block: 8px 20px;
  }

  .fp-latest__grid {
    grid-template-columns: 1fr;
  }

  .fp-latest-card {
    aspect-ratio: 16 / 10;
  }

  .fp-latest-card__title {
    font-size: 1.2rem;
  }

  .fp-latest-card__meta {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-latest-card__image,
  .fp-latest-card__overlay {
    transition: none;
  }
}