/* ============================================================
 * Hanlin Theme — Custom Utilities (extends theme.json)
 * ============================================================
 * Most styling is driven by theme.json + WP block library.
 * This file holds only the bits that don't fit in theme.json:
 *  - Hero overlays & gradients
 *  - Tonal-layer cards / hover states
 *  - Stat number count-up animation
 *  - Bento / grid utilities
 *  - Side rail interactions
 *  - Print styles
 * ========================================================== */

/* ---------- Hero overlays ---------- */
.hanlin-hero { position: relative; overflow: hidden; }
.hanlin-hero-overlay--primary {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 122, 156, 0.85) 0%, rgba(0, 67, 59, 0.55) 60%, transparent 100%);
}
.hanlin-hero-overlay--blue {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 67, 59, 0.85) 0%, rgba(164, 16, 52, 0.6) 100%);
}

/* ---------- Tonal cards (DESIGN.md 推荐写法,而非 floating shadow) ---------- */
.hanlin-tonal-card {
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hanlin-tonal-card:hover {
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-2px);
}

.hanlin-tonal-card--accent {
  border-top: 4px solid var(--wp--preset--color--primary);
}
.hanlin-tonal-card--accent-blue {
  border-top: 4px solid var(--wp--preset--color--secondary);
}
.hanlin-tonal-card--accent-teal {
  border-top: 4px solid var(--wp--preset--color--tertiary);
}

/* ---------- Stat number count-up (used by interactions.js) ---------- */
.hanlin-stat-number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--primary);
}
.hanlin-stat-number--blue  { color: var(--wp--preset--color--secondary); }
.hanlin-stat-number--teal  { color: var(--wp--preset--color--tertiary); }
.hanlin-stat-number--white { color: #ffffff; }

/* ---------- Bento grid ---------- */
.hanlin-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(280px, auto));
  gap: 24px;
}
.hanlin-bento__hero    { grid-column: span 2; grid-row: span 2; }
.hanlin-bento__wide    { grid-column: span 2; }
.hanlin-bento__square  { grid-column: span 1; }

@media (max-width: 1024px) {
  .hanlin-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hanlin-bento__hero { grid-column: span 2; grid-row: span 1; }
  .hanlin-bento__wide { grid-column: span 2; }
}

/* ---------- Offer wall (15-image grid) ---------- */
.hanlin-offer-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.hanlin-offer-wall img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 4px; transition: transform 0.3s ease;
}
.hanlin-offer-wall img:hover { transform: scale(1.04); }

@media (max-width: 768px) {
  .hanlin-offer-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Comparison table (普高 vs 翰林) ---------- */
.hanlin-compare {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--wp--preset--color--outline-variant);
  background: var(--wp--preset--color--surface-container-lowest);
}
.hanlin-compare th, .hanlin-compare td {
  padding: 16px; text-align: center;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.hanlin-compare th {
  background: var(--wp--preset--color--surface-container-high);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
}
.hanlin-compare tr.hanlin-compare__highlight {
  background: rgba(0, 122, 156, 0.04);
}
.hanlin-compare td:first-child { text-align: left; font-weight: 600; }

/* ---------- Side rail interactions (controlled by interactions.js) ---------- */
.hanlin-side-rail__btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px; cursor: pointer; text-decoration: none;
  color: var(--wp--preset--color--on-surface-variant);
  border-radius: 4px; transition: background 0.2s, color 0.2s;
}
.hanlin-side-rail__btn:hover {
  background: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--on-primary-container);
}
.hanlin-side-rail__btn--primary {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}

/* ---------- Anchor nav (赛事/课程详情页) ---------- */
.hanlin-anchor-nav {
  position: sticky; top: 80px; z-index: 30;
  background: var(--wp--preset--color--surface-container-lowest);
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  padding: 12px 0;
}
.hanlin-anchor-nav ul {
  display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.hanlin-anchor-nav a {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant); text-decoration: none;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.hanlin-anchor-nav a.is-active,
.hanlin-anchor-nav a:hover {
  color: var(--wp--preset--color--primary);
  border-bottom-color: var(--wp--preset--color--primary);
}

/* ---------- Print ---------- */
@media print {
  .hanlin-side-rail, .hanlin-cta-bar,
  .hanlin-anchor-nav { display: none !important; }
  body { background: #ffffff !important; color: #000000 !important; }
}