/* ═══════════════════════════════════════════════════════════
   INSIGHT / ความรู้ PAGE — page-specific styles only.
   Header, footer, buttons, colors, .section, .reveal etc. all come
   from the shared ../css/styles.css (same file the homepage and the
   other pages use), so layout/margins/buttons stay identical.

   Gallery content (titles/images/copy) is placeholder — swap in the
   real brief once confirmed.
   ═══════════════════════════════════════════════════════════ */

/* Keep the current nav item ("ความรู้") visibly active while on this page */
.nav-item.current > .nav-link { color: var(--navy); }
.nav-item.current > .nav-link::after { transform: scaleX(1); }

/* ── PAGE HERO — same pattern as the other Service pages ── */
.page-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%!important;
  object-fit: cover;
  object-position: center;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(34,149,196,.92) 0%,
    rgba(34,149,196,.62) 32%,
    rgba(34,149,196,.18) 62%,
    rgba(34,149,196,0) 85%);
}
.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 64px 48px;
  width: 100%;
}
.page-hero-title {
  font-family: var(--displayfont);
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  letter-spacing: .3px;
}
@media (max-width: 960px) {
  .page-hero { height: 320px; }
  .page-hero-content { padding: 0 32px 32px; }
}
@media (max-width: 600px) {
  .page-hero { height: 260px; }
  .page-hero-content { padding: 0 24px 24px; }
}

/* ── GALLERY — static 4-up row (no carousel), Article/Webinar/Podcast/News.
   Full-bleed soft blue gradient background (per reference image),
   content itself capped at the site's standard 1400px width inside
   it. Hovering a panel expands it (flex-grow trick) while the others
   compress; a brand-cyan tint washes over the photo and the corner is
   cut the same way the site's buttons are. ── */
#insight-gallery {
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(150,198,235,.5) 0%, rgba(150,198,235,0) 55%),
    linear-gradient(180deg, #EAF4FC 0%, #FFFFFF 60%);
}
.gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-row {
  display: flex;
  gap: 6px;
  height: 520px;
}
.gallery-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  /* diagonal-cut corner, same device as .btn-primary / .view-all */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  transition: flex 0.55s var(--ease);
}
.gallery-panel:hover { flex: 2.3; }
.gallery-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.gallery-panel:hover img { transform: scale(1.05); }

/* brand-cyan filter that washes in on hover */
.gallery-panel-tint {
  position: absolute;
  inset: 0;
  background: rgba(37,150,190,.45);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.gallery-panel:hover .gallery-panel-tint { opacity: 1; }

.gallery-panel-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(21,36,74,.85) 0%, rgba(37,150,190,.45) 45%, rgba(37,150,190,0) 78%);
  pointer-events: none;
}
.gallery-panel-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.gallery-panel-eyebrow {
  display: block;
  font-family: var(--sans-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}
.gallery-panel-title {
  font-family: var(--displayfont);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
.gallery-panel-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  background: var(--cyan);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background .25s var(--ease);
}
.gallery-panel-btn:hover { background: var(--navy); }

@media (max-width: 900px) {
  .gallery-row { height: 420px; }
}
@media (max-width: 700px) {
  .gallery-row { flex-direction: column; height: auto; gap: 12px; }
  .gallery-panel { flex: none; height: 220px; }
  .gallery-panel:hover { flex: none; }
}
@media (max-width: 600px) {
  .gallery-panel-title { font-size: 22px; }
}