/* ============================================================
   SchoolFMS — Reviews Page (reviews.css)
   ============================================================ */

/* Hero */
.rev-hero {
  background: var(--navy);
  padding: calc(var(--header-h) + 60px) 6% 80px;
  position: relative; overflow: hidden;
}
.rev-hero-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  position: relative; z-index: 1;
}
.rev-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sky); }
.eyebrow-line-white { width: 28px; height: 1.5px; background: var(--sky); flex-shrink: 0; }
.rev-hero-text h1 { font-size: clamp(2.2rem, 3.5vw, 3.2rem); color: var(--white); margin-bottom: 16px; }
.rev-hero-text h1 em { font-style: italic; color: var(--sky); }
.rev-hero-text p { color: rgba(255,255,255,0.5); font-size: 0.93rem; line-height: 1.82; }

/* Rating Panel */
.rating-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 32px; }
.rp-top { display: flex; gap: 24px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: flex-end; }
.rp-score { font-size: 4rem; color: var(--white); line-height: 1; }
.rp-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; margin: 5px 0 4px; }
.rp-label { font-size: 0.72rem; color: rgba(255,255,255,0.38); }
.rp-bars { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rp-row { display: flex; align-items: center; gap: 9px; }
.rp-lbl { font-size: 0.7rem; color: rgba(255,255,255,0.4); width: 8px; }
.rp-track { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; }
.rp-fill { height: 100%; background: var(--gold); border-radius: 10px; animation: barGrow 1s ease 0.4s both; }
.rp-pct { font-size: 0.65rem; color: rgba(255,255,255,0.35); width: 26px; text-align: right; }
.rp-stats { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: center; }
.rp-stat { text-align: center; }
.rp-stat-val { font-size: 1.4rem; color: var(--white); line-height: 1; }
.rp-stat-val span { color: var(--sky); }
.rp-stat-lbl { font-size: 0.65rem; color: rgba(255,255,255,0.38); margin-top: 3px; }
.rp-stat-div { width: 1px; height: 32px; background: rgba(255,255,255,0.08); }

/* Filter Bar */
.filter-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 6%; position: sticky; top: var(--header-h); z-index: 50; }
.filter-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filter-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-pill { padding: 6px 14px; border-radius: 30px; border: 1px solid var(--border); color: var(--gray); font-size: 0.77rem; font-weight: 600; cursor: pointer; transition: all 0.2s; user-select: none; }
.filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.filter-pill.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.sort-select { border: 1px solid var(--border); border-radius: 7px; padding: 7px 12px; font-size: 0.77rem; color: var(--navy); font-family: var(--font-body); background: var(--white); cursor: pointer; outline: none; }

/* Featured */
.rev-featured { padding: 72px 6%; background: var(--white); }
.rev-featured-inner { max-width: 1160px; margin: 0 auto; }
.mb-32 { margin-bottom: 32px; }
.mb-28 { margin-bottom: 28px; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.fq-main { background: var(--navy); padding: 44px; }
.fq-stars { color: var(--gold); font-size: 0.88rem; letter-spacing: 3px; margin-bottom: 20px; }
.fq-text { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: rgba(255,255,255,0.88); line-height: 1.72; margin-bottom: 28px; }
.fq-person { display: flex; align-items: center; gap: 14px; }
.fq-av { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.fq-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--white); }
.fq-role { font-size: 0.72rem; color: rgba(255,255,255,0.42); margin-top: 3px; }
.fq-plan { font-size: 0.62rem; font-weight: 700; color: var(--sky); background: rgba(56,189,248,0.1); padding: 2px 9px; border-radius: 20px; display: inline-block; margin-top: 6px; }
.fq-side { display: flex; flex-direction: column; }
.fq-mini { padding: 30px 34px; border-bottom: 1px solid var(--border); flex: 1; background: var(--white); transition: background 0.2s; }
.fq-mini:last-child { border-bottom: none; }
.fq-mini:hover { background: var(--light); }
.fq-mini-stars { color: var(--gold); font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px; }
.fq-mini-text { font-size: 0.855rem; color: var(--gray); line-height: 1.75; font-style: italic; margin-bottom: 16px; }
.fq-mini-person { display: flex; align-items: center; gap: 10px; }
.fq-mini-av { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.fq-mini-name { font-size: 0.8rem; font-weight: 700; color: var(--navy); font-family: var(--font-display); }
.fq-mini-role { font-size: 0.67rem; color: var(--gray); margin-top: 2px; }

/* Reviews Grid */
.rev-grid-section { padding: 0 6% 80px; background: var(--white); }
.rev-grid-inner { max-width: 1160px; margin: 0 auto; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.rc { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; transition: all 0.25s; }
.rc:hover { background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }
.rc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 2px; }
.rc-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.rc-badge.b { background: rgba(100,116,139,0.08); color: var(--gray); }
.rc-badge.s { background: rgba(26,86,219,0.08); color: var(--blue); }
.rc-badge.g { background: rgba(124,58,237,0.08); color: #7C3AED; }
.rc-text { font-size: 0.845rem; color: var(--gray); line-height: 1.75; flex: 1; margin-bottom: 18px; }
.rc-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.rc-av { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.rc-name { font-size: 0.8rem; font-weight: 700; color: var(--navy); font-family: var(--font-display); }
.rc-meta { font-size: 0.65rem; color: var(--gray); margin-top: 2px; }
.rc-ver { margin-left: auto; font-size: 0.65rem; font-weight: 700; color: var(--green); }

/* Role Section */
.role-section { padding: 80px 6%; background: var(--light); }
.role-inner { max-width: 1160px; margin: 0 auto; }
.role-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.role-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 7px; }
.role-title { font-size: clamp(1.6rem, 2.5vw, 2.1rem); color: var(--navy); }
.role-title em { font-style: italic; color: var(--blue); }
.role-tabs { display: flex; gap: 6px; }
.role-tab { padding: 7px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--white); color: var(--gray); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; user-select: none; }
.role-tab:hover { border-color: var(--navy); color: var(--navy); }
.role-tab.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.role-content { display: none; grid-template-columns: repeat(3,1fr); gap: 14px; }
.role-content.active { display: grid; animation: fadeUp 0.35s ease both; }
.role-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; transition: all 0.25s; }
.role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }
.role-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.role-av { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.role-name { font-family: var(--font-display); font-size: 0.87rem; font-weight: 700; color: var(--navy); }
.role-title-sm { font-size: 0.67rem; color: var(--gray); margin-top: 2px; }
.role-stars { color: var(--gold); font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px; }
.role-card p { font-size: 0.845rem; color: var(--gray); line-height: 1.72; }

/* Responsive */
@media (max-width: 960px) {
  .rev-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .featured-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .role-header { flex-direction: column; align-items: flex-start; }
  .role-content.active { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }