/* ============================================================
   COMPONENT — Hero (main hero + detail hero)
   ============================================================ */

/* Main hero — Premium Light with green glow */
.hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--gradient-hero-bg);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 116, 75, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 116, 75, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 13pt; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-kicker::before { content: ""; width: 30px; height: 2px; background: var(--primary); }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(29pt, 5vw, 45pt);
  line-height: 1.05; margin-bottom: 20px;
  color: var(--text-strong);
}
.hero .lead {
  font-size: var(--fs-body-sm); color: #2d4239;
  max-width: 620px; margin-bottom: 28px;
}

.hero-meta {
  display: flex; gap: 36px; flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(0, 116, 75, 0.15);
  border-bottom: 1px solid rgba(0, 116, 75, 0.15);
  margin-bottom: 24px;
}
.hero-meta > div {
  font-size: 13pt; color: var(--text-muted);
  font-family: var(--font-heading); font-weight: 500;
}
.hero-meta strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20pt; color: var(--primary-dark);
  line-height: 1; margin-bottom: 4px;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* 2-column hero with poster */
.hero-split .container {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 48px; align-items: center;
}
@media (max-width: 1000px) {
  .hero-split .container { grid-template-columns: 1fr; }
}

.hero-poster {
  aspect-ratio: 4 / 5; max-width: 440px; margin-left: auto;
  position: relative;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--gradient-primary);
  box-shadow: 0 28px 70px rgba(0, 116, 75, 0.3);
  display: flex; align-items: flex-end; padding: 28px;
}
.hero-poster::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 50%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5));
}
.hero-poster .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  background: #fff; color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 23pt; padding-left: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  cursor: pointer;
}
.hero-poster .info { position: relative; z-index: 2; color: #fff; }
.hero-poster .info .tag {
  font-family: var(--font-heading);
  font-size: 12pt; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--secondary-yellow);
  font-weight: 700; margin-bottom: 10px;
}
.hero-poster .info h4 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 17pt; margin-bottom: 4px; line-height: 1.2;
}
.hero-poster .info small { opacity: 0.9; font-family: var(--font-heading); font-size: 13pt; }

/* Detail hero — for list + detail pages */
.detail-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(0, 168, 107, 0.22), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(103, 163, 59, 0.15), transparent 55%),
    var(--gradient-soft);
  padding: 48px 0 72px;
  border-bottom: 1px solid var(--line);
}
.detail-hero h1 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(23pt, 3vw, 30pt);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}
.detail-hero .breadcrumb,
.detail-hero .breadcrumb a { color: var(--text-muted); padding: 0 0 12px; }
.detail-hero .breadcrumb a:hover { color: var(--primary); }
/* คำโปรยใต้หัวเรื่อง — ขยายอ่านง่ายขึ้น */
.detail-hero > .container > p,
.detail-hero p.t-body-sm {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.detail-hero .detail-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 14pt; color: #40504a;
}
.detail-hero .detail-meta strong { color: var(--text-strong); font-weight: 700; }

.detail-layout {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 32px;
  margin-top: -48px; position: relative; z-index: 1;
}
@media (max-width: 1000px) {
  .detail-layout { grid-template-columns: 1fr; }
}
.detail-main, .detail-side {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 28px; border: 1px solid var(--line);
  box-shadow: 0 10px 32px rgba(0, 116, 75, 0.08);
}