/* Fantasy Bosses Inc — shared real-image League Films rails. */
[hidden] { display: none !important; }

.lf-shell {
  --lf-accent: #ff8200;
  --lf-ink: #07101f;
  --lf-panel: #0b1b32;
  --lf-paper: #f7fafd;
  position: relative;
  overflow: hidden;
  background: var(--lf-ink);
  color: var(--lf-paper);
}

.lf-shell__inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(64px, 8vw, 112px) 0; }
.lf-shell__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36rem); gap: 28px; align-items: end; margin-bottom: 28px; }
.lf-shell__head h2 { margin: 6px 0 0; color: var(--lf-paper); font-family: "Big Shoulders Display", sans-serif; font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .88; text-transform: uppercase; }
.lf-shell__head p { margin: 0; color: #a9bed5; line-height: 1.65; }
.lf-eyebrow { color: var(--lf-accent); font-family: "IBM Plex Mono", monospace; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }

.lf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.lf-card {
  position: relative;
  grid-column: span 4;
  min-height: 290px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 3px;
  background: #101827;
  color: #fff;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}
.lf-card--wide { grid-column: span 6; min-height: 340px; }
.lf-card--hero { grid-column: span 8; min-height: 430px; }
.lf-card--tall { grid-column: span 4; min-height: 430px; }
.lf-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 520ms ease; }
.lf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 8, 16, .04) 28%, rgba(3, 8, 16, .9) 100%); }
.lf-card__copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: grid; gap: 5px; padding: 20px; }
.lf-card__copy strong { color: #fff; font-family: "Big Shoulders Display", sans-serif; font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: .94; text-transform: uppercase; }
.lf-card__copy small { color: #c6d6e7; font-family: "IBM Plex Mono", monospace; font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.lf-card:hover img, .lf-card:focus-visible img { transform: scale(1.03); filter: saturate(1.08) contrast(1.03); }
.lf-card:hover, .lf-card:focus-visible { border-color: var(--lf-accent); outline: none; }

.lf-home {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 0 clamp(34px, 6vw, 56px);
}
.lf-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; color: #d8e4f0; }
.lf-home__head strong { color: #fff; font-family: "Big Shoulders Display", sans-serif; font-size: clamp(1.55rem, 3vw, 2.4rem); text-transform: uppercase; }
.lf-home__head a { color: #ff9d3e; font-family: "IBM Plex Mono", monospace; font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; }
.lf-home__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 30%); gap: 10px; overflow-x: auto; padding: 0 0 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lf-home .lf-card { grid-column: auto; min-height: clamp(250px, 30vw, 390px); scroll-snap-align: start; }
.lf-home .lf-card:first-child { grid-column: auto; }

.lf-inline-image { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; background: #101827; }
.lf-inline-image img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 860px) {
  .lf-shell__head { grid-template-columns: 1fr; }
  .lf-card, .lf-card--wide { grid-column: span 6; }
  .lf-card--hero, .lf-card--tall { grid-column: span 6; min-height: 360px; }
  .lf-home__rail { grid-auto-columns: minmax(240px, 70%); }
}

@media (max-width: 580px) {
  .lf-shell__inner { width: min(100% - 24px, 1180px); padding: 58px 0; }
  .lf-grid { grid-template-columns: 1fr; }
  .lf-card, .lf-card--wide, .lf-card--hero, .lf-card--tall { grid-column: auto; min-height: 330px; }
  .lf-home { width: calc(100% - 24px); }
  .lf-home__head { align-items: flex-start; flex-direction: column; }
  .lf-home__rail { grid-auto-columns: 86%; }
}

@media (prefers-reduced-motion: reduce) { .lf-card img { transition: none; } }