/* ─── Page header ─── */
.pg-head       { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.25rem; }
.pg-head-icon  { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.pg-head-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.4px; margin: 0; color: var(--text); }
.pg-head-sub   { font-size: 0.83rem; color: var(--text-2); margin: 2px 0 0; }

/* ─── Stats strip ─── */
.free-strip {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: 1rem 1.375rem;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  margin-bottom: 1.75rem;
}
.strip-stat      { display: flex; align-items: center; gap: 0.625rem; }
.strip-stat-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--brand); flex-shrink: 0; }
.strip-stat-val  { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.strip-stat-lbl  { font-size: 0.74rem; color: var(--text-2); }
.strip-divider   { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* ─── Tab switcher ─── */
.fv-tabs {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.75rem;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 0.375rem;
  width: fit-content;
}
.fv-tab {
  padding: 0.55rem 1.5rem; border-radius: 9px; border: none;
  background: transparent; font-size: 0.875rem; font-weight: 700;
  color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.fv-tab i { font-size: 1rem; }
.fv-tab.active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fv-tab-content        { display: none; }
.fv-tab-content.active { display: block; }

/* ─── Section row ─── */
.section-row       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.section-row-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-2); }
.section-row-count { font-size: 0.78rem; color: var(--text-2); }

/* ─── Card grid ─── */
.fv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ─── Video card ─── */
.fvcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s;
}
.fvcard:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 36px rgba(24, 89, 167, 0.13);
  transform: translateY(-3px);
  color: var(--text);
}

/* Thumbnail */
.fvcard-thumb {
  aspect-ratio: 16 / 9;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.fvcard-thumb-bg  { position: absolute; inset: 0; z-index: 0; }
.fvcard-emoji     { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 2.75rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.fvcard-thumb-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.35s var(--ease);
}

/* Play overlay */
.fvcard-play {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(15, 23, 42, 0.38);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.fvcard:hover .fvcard-play { opacity: 1; }
.play-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(24, 89, 167, 0.45);
  transition: transform 0.2s;
}
.fvcard:hover .play-circle { transform: scale(1.1); }
.play-circle i { color: #fff; font-size: 1.2rem; margin-left: 3px; }

/* FREE badge */
.free-badge {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: var(--teal); color: #fff;
  font-size: 0.68rem; font-weight: 800;
  padding: 0.22rem 0.6rem; border-radius: var(--r-full);
  letter-spacing: 0.3px;
}

/* Card body */
.fvcard-body  { padding: 0.875rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.fvcard-title { font-size: 0.92rem; font-weight: 700; color: var(--text); letter-spacing: -0.2px; margin: 0; }
.fvcard-sub   { font-size: 0.76rem; color: var(--text-2); display: flex; align-items: center; gap: 0.35rem; }
.fvcard-sub i { font-size: 0.7rem; }

/* ─── Empty state ─── */
.fv-empty       { text-align: center; padding: 3rem 1rem; }
.fv-empty i     { font-size: 2.5rem; color: var(--text-3); display: block; margin-bottom: 1rem; }
.fv-empty-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.375rem; }
.fv-empty-sub   { font-size: 0.83rem; color: var(--text-2); }

/* ─── Responsive ─── */
@media (max-width: 1199.98px) { .fv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) {
  .fv-grid    { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .fv-tabs    { width: 100%; }
  .fv-tab     { flex: 1; justify-content: center; }
  .free-strip { gap: 1rem; }
  .strip-divider { display: none; }
}
@media (max-width: 575.98px) {
  .fv-grid       { gap: 0.625rem 0.5rem; }
  .fvcard-body   { padding: 0.75rem 0.875rem 0.875rem; }
  .fvcard-title  { font-size: 0.85rem; }
}