/*
 * Single film page (single.php for sf16…sf26).
 *
 * Layout: container → main.entry-content → article. We keep the article
 * narrow for readability and let the thumbnail break out to a wider band.
 *
 * All sections style the existing markup (no PHP changes required); the
 * "Director" / "Press kit" labels are inserted via ::before so we don't
 * have to touch the templates.
 */

.main.post {
  padding: var(--sf-space-10) 0 var(--sf-space-16);
}

.main.post .entry-content {
  max-width: 860px;
  margin: 0 auto;
}

.main.post article {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-10);
}

/* ---------- Thumbnail ---------- */

.main.post .entry-thumbnail {
  margin: 0;
  position: relative;
  border-radius: var(--sf-radius-md);
  overflow: hidden;
  box-shadow: var(--sf-shadow-md);
}

.main.post .entry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.main.post .image-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sf-space-4) var(--sf-space-5);
  font-size: var(--sf-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

/* ---------- Meta block (where / og title / film-meta / credit) ---------- */

.main.post .meta {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-4);
  padding: var(--sf-space-7) var(--sf-space-8);
  background: var(--sf-color-bg-muted);
  border-left: 4px solid var(--sf-color-accent);
  border-radius: var(--sf-radius-md);
}

/* Where / Location-time line */
.main.post .meta .where {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  font-size: var(--sf-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-color-accent);
}

.main.post .meta .where::before {
  content: "▸";
  font-size: 0.9em;
  opacity: 0.7;
}

/* Title block (HR title / Original title) */
.main.post .meta .og {
  margin: 0;
}

.main.post .meta .og h2 {
  margin: 0;
  font-family: var(--sf-font-display);
  font-size: clamp(1.6rem, 3.2vw, var(--sf-text-3xl));
  line-height: 1.05;
  color: var(--sf-color-text);
  letter-spacing: -0.005em;
}

/* Film meta — country, year, runtime — rendered as a typographic strip */
.main.post .meta .film-meta {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
  line-height: 1.4;
  color: var(--sf-color-text);
  border-top: 1px solid var(--sf-color-border);
  padding-top: var(--sf-space-3);
}

/* Film credit — line-by-line credits (cast, dop, editor, ...) */
.main.post .meta .film-credit {
  font-size: var(--sf-text-sm);
  line-height: 1.65;
  color: var(--sf-color-text-muted);
  border-top: 1px solid var(--sf-color-border);
  padding-top: var(--sf-space-3);
}

.main.post .meta .film-credit br {
  display: block;
  content: "";
  margin-top: 4px;
}

/* ---------- Body content ---------- */

.main.post .entry-text {
  font-size: var(--sf-text-md);
  line-height: var(--sf-leading-normal);
  color: var(--sf-color-text);
}

.main.post .entry-text p {
  margin: 0 0 var(--sf-space-4);
}

.main.post .entry-text p:last-child  { margin-bottom: 0; }

.main.post .entry-text a {
  color: var(--sf-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--sf-duration-fast) var(--sf-ease);
}

.main.post .entry-text a:hover {
  text-decoration-color: transparent;
}

.main.post .entry-text blockquote {
  margin: var(--sf-space-6) 0;
  padding: var(--sf-space-4) var(--sf-space-6);
  border-left: 3px solid var(--sf-color-accent);
  background: var(--sf-color-bg-muted);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  line-height: 1.4;
  color: var(--sf-color-text);
}

.main.post .entry-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sf-radius-sm);
  margin: var(--sf-space-4) 0;
}

/* ---------- Press kit button ---------- */

.main.post .press-kit {
  margin: 0;
}

.main.post .press-kit a {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3) var(--sf-space-5);
  font-size: var(--sf-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--sf-color-text);
  color: var(--sf-white);
  border-radius: var(--sf-radius-pill);
  text-decoration: none;
  transition: background var(--sf-duration-fast) var(--sf-ease),
              transform var(--sf-duration-fast) var(--sf-ease);
}

.main.post .press-kit a::before {
  content: "↓";
  font-size: 1.1em;
  font-weight: 700;
}

.main.post .press-kit a:hover {
  background: var(--sf-color-accent);
  transform: translateY(-1px);
}

.main.post .press-kit i {
  display: none; /* hide legacy fa icon, use ::before arrow */
}

/* ---------- Director block ---------- */

.main.post .entry-director {
  position: relative;
  margin: 0;
  padding: var(--sf-space-7) var(--sf-space-8) var(--sf-space-7) var(--sf-space-10);
  background: var(--sf-color-bg-muted);
  border-radius: var(--sf-radius-md);
  font-size: var(--sf-text-md);
  line-height: var(--sf-leading-normal);
  color: var(--sf-color-text);
}

.main.post .entry-director::before {
  content: attr(data-label);
  position: absolute;
  top: var(--sf-space-3);
  left: var(--sf-space-3);
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-color-accent);
}

/* Default label via :lang / fallback */
.main.post .entry-director:not([data-label])::before {
  content: "Director";
}

.main.post .entry-director :first-child {
  margin-top: 0;
}

.main.post .entry-director :last-child {
  margin-bottom: 0;
}

.main.post .entry-director strong:first-child {
  display: inline-block;
  margin-bottom: var(--sf-space-1);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-xl);
  font-weight: 700;
  color: var(--sf-color-accent);
  letter-spacing: 0.005em;
}

.main.post .entry-director p {
  margin: 0 0 var(--sf-space-3);
}

.main.post .entry-director p:last-child {
  margin-bottom: 0;
}

/* ---------- Mobile adjustments ---------- */

@media (max-width: 720px) {
  .main.post {
    padding: var(--sf-space-6) 0 var(--sf-space-12);
  }

  .main.post article {
    gap: var(--sf-space-6);
  }

  .main.post .meta {
    padding: var(--sf-space-5) var(--sf-space-5);
  }

  .main.post .entry-director {
    padding: var(--sf-space-6) var(--sf-space-5) var(--sf-space-5) var(--sf-space-7);
  }
}