/* =============================================================================
   fanflix.css — FanFlix page styles
   Sections: #hero, #video-section, #pagination
   ============================================================================= */

/* ── HERO ───────────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 800px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  will-change: transform;
}
.hero-bg picture,
.hero-bg img,
.hero-bg video {
  display: block;
  width: 100%; height: 100%;
}
.hero-bg img,
.hero-bg video {
  object-fit: cover; object-position: center top;
}
.hero-youtube {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-width: 177.78vh; min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
.hero-poster {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  padding-bottom: 80px;
  padding-left: var(--pp); padding-right: var(--pp);
  max-width: 1920px; margin: 0 auto; width: 100%;
}
.hero-tag {
  font-size: 16px; font-weight: 700; color: white;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 19px;
}
.hero-h1 {
  font-size: clamp(28px, 3.33vw, 48px); font-weight: 800; color: white;
  line-height: 1.15; max-width: 845px;
}

.hero-bg--flix { background-image: url('https://www.figma.com/api/mcp/asset/9aa48a41-6935-40d1-8720-3719b90ec966'); }

/* ── VIDEO GRID ─────────────────────────────────────────────────────────────── */
#video-section { background: white; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.video-card {
  position: relative;
  aspect-ratio: 384 / 520;
  border-radius: var(--rl); overflow: hidden;
  background: var(--g01); cursor: pointer;
}
.video-card:hover .video-card__thumb  { transform: scale(1.04); }
.video-card:hover .video-card__player { background: rgba(255,255,255,.85); }
.video-card__thumb {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.video-card__overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.9) 100%);
}
.video-card__media {
  position: absolute; inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  border: 0; background: #000;
}
.video-card__media--file {
  object-fit: cover;
}
.video-card__player {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), transform var(--t); overflow: hidden;
  cursor: pointer; z-index: 5;
}
.video-card__player[disabled] { opacity: .45; cursor: not-allowed; }
.video-card__play-icon {
  width: 0; height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid var(--preto);
  margin-left: 5px;
}
.video-card__pause-icon {
  display: none;
  width: 18px; height: 24px;
  border-left: 6px solid var(--preto);
  border-right: 6px solid var(--preto);
}
.video-card.is-playing .video-card__player {
  top: 24px; right: 24px; left: auto;
  transform: none;
  width: 48px; height: 48px;
}
.video-card.is-playing .video-card__play-icon { display: none; }
.video-card.is-playing .video-card__pause-icon { display: block; }
.video-card.is-playing .video-card__thumb,
.video-card.is-playing .video-card__overlay,
.video-card.is-playing .video-card__tag,
.video-card.is-playing .video-card__content {
  opacity: 0;
  pointer-events: none;
}
.video-card__tag {
  position: absolute; top: 24px; left: 32px;
  z-index: 4;
  background: var(--v); color: white;
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  padding: 8px 12px; border-radius: var(--r); line-height: 1.2;
}
.video-card__content { position: absolute; z-index: 4; bottom: 32px; left: 32px; right: 32px; }
.video-card__title {
  font-size: 32px; font-weight: 700; color: white;
  line-height: 1.2; margin-bottom: 15px;
}
.video-card__views { font-size: 16px; font-weight: 300; color: white; line-height: 1.4; }

/* ── PAGINATION ─────────────────────────────────────────────────────────────── */

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .video-card__title   { font-size: 24px; }
}
@media (max-width: 900px) {
  #hero { height: 560px; }
}
@media (max-width: 640px) {
  #hero          { height: 420px; }
  .hero-h1       { font-size: 28px; }
  .video-grid    { grid-template-columns: 1fr; }
  .video-card__title      { font-size: 22px; }
}