/**
 * Homepage tuning — DEMO-aligned layout and polish.
 * Scoped to .nh-home (main) and .home-page (body). Loaded on site homepage only.
 * Uses nh-* class structure: nh-container, nh-section, nh-card, nh-twoCol, nh-mainCol, nh-sideCol, nh-sectionTitle, nh-cardButton, nh-activitiesGrid.
 */

/* ==========================================================================
   NH design system (scoped to .nh-home) — Step 4D
   Spacing scale: 8 / 16 / 24 / 32 / 48 px
   ========================================================================== */
.nh-home {
  /* Step 4D required variables */
  --container-max: 1200px;
  --radius: 12px;
  --border-subtle: 1px solid rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06);
  --gap-2xs: 12px;
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --gap-xl: 48px;
  /* Aliases for existing nh-* usage */
  --nh-gap-xs: var(--gap-xs);
  --nh-gap-sm: var(--gap-sm);
  --nh-gap-md: var(--gap-md);
  --nh-gap-lg: var(--gap-lg);
  --nh-radius: var(--radius);
  --nh-radius-pill: 9999px;
  --nh-shadow: var(--shadow-soft);
  --nh-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --nh-border: var(--border-subtle);
  --nh-container-max: var(--container-max);
  --nh-section-pad: var(--gap-lg);
  --nh-section-pad-md: var(--gap-xl);
  --nh-container-pad: var(--gap-sm);
  --nh-container-pad-md: var(--gap-md);
  --nh-container-pad-lg: var(--gap-md);
  --nh-sidebar-width: 320px;
  --nh-inner-inline: 16px;
  /* Typography scale */
  --nh-text: #1a1a1a;
  --nh-text-muted: #374151;
  --nh-heading-size: 1.25rem;
  --nh-heading-size-sm: 1.1rem;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nh-text);
}

@media (min-width: 768px) {
  .nh-home {
    --nh-section-pad: var(--gap-xl);
    --nh-container-pad: var(--gap-md);
    --nh-inner-inline: 24px;
  }
}

@media (max-width: 1024px) {
  .nh-home {
    --nh-sidebar-width: 280px;
  }
}

/* Hero-to-first-section: no extra gap (hero-strip already has padding) */
.home-page .hero-strip {
  margin-bottom: 0;
  background: linear-gradient(90deg, var(--brand-g1, #0f5b3a) 0%, var(--brand-g2, #0a7a4b) 100%);
  color: #fff;
  padding: 0.75rem 0;
}

/* Hero strip: vision text marquee — larger, slow scroll, pause on hover/focus */
.home-page .hero-strip__inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
}

.home-page .hero-strip__marquee-wrap {
  overflow: hidden;
  width: 100%;
}

.home-page .hero-strip__marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-size: 1.05rem;
  font-weight: 500;
  animation: nh-hero-strip-scroll 50s linear infinite;
}

.home-page .hero-strip__marquee-wrap:hover .hero-strip__marquee,
.home-page .hero-strip__marquee-wrap:focus-within .hero-strip__marquee {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-strip__marquee {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}

@keyframes nh-hero-strip-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========== Exec section: 3 columns (Mayor | Video | Secretary), nh-* component classes ========== */
.nh-home .nh-execGrid,
.nh-home .tt-exec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: start;
}
/* Mayor (left) larger than Secretary (right): avatar + name weight */
.nh-home .nh-execCard--mayor .tt-exec-personnel__photo,
.nh-home .nh-execCard--mayor .tt-exec-personnel__photo--placeholder {
  max-width: 160px;
  width: 100%;
}
.nh-home .nh-execCard--mayor .tt-exec-personnel__photo--placeholder {
  aspect-ratio: 120 / 156;
  height: auto;
  min-height: 156px;
}
.nh-home .nh-execCard--mayor .tt-exec-personnel__name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--nh-text);
}
.nh-home .nh-execCard--secretary .tt-exec-personnel__photo,
.nh-home .nh-execCard--secretary .tt-exec-personnel__photo--placeholder {
  max-width: 140px;
}
.nh-home .nh-execCard--secretary .tt-exec-personnel__name {
  font-size: 0.98rem;
  font-weight: 700;
}
/* Exec + video cards: consistent radius, shadow, padding (tt-card already base) */
.nh-home .nh-execCard.tt-exec-card,
.nh-home .nh-videoCard.tt-exec-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: var(--border-subtle);
  padding: var(--gap-md);
}
.nh-home .nh-videoCard .tt-exec-video__wrap {
  border-radius: calc(var(--radius) - 2px);
}
.nh-home .nh-videoCard__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}
.nh-home .nh-videoCard__ctas .pill-btn {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  color: #fff;
}
/* Tablet: 2 columns — video full width, then two profiles */
@media (min-width: 768px) {
  .nh-home .nh-execGrid,
  .nh-home .tt-exec-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
  }
  .nh-home .nh-execGrid .tt-exec-card--video,
  .nh-home .tt-exec-grid .tt-exec-card--video {
    grid-column: 1 / -1;
  }
}
/* Desktop: 3 columns — Mayor | Video (wider) | Secretary */
@media (min-width: 1024px) {
  .nh-home .nh-execGrid,
  .nh-home .tt-exec-grid {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: var(--gap-lg);
  }
  .nh-home .nh-execGrid .tt-exec-card--video,
  .nh-home .tt-exec-grid .tt-exec-card--video {
    grid-column: 2;
    order: unset;
  }
  .nh-home .nh-execGrid .tt-exec-card--left,
  .nh-home .tt-exec-grid .tt-exec-card--left {
    grid-column: 1;
    order: unset;
  }
  .nh-home .nh-execGrid .tt-exec-card--right,
  .nh-home .tt-exec-grid .tt-exec-card--right {
    grid-column: 3;
    order: unset;
  }
}

/* Container: centered, max-width, padding */
.nh-home .nh-container,
.nh-home .container,
.nh-home .tt-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nh-container-pad);
  padding-right: var(--nh-container-pad);
}

/* Section wrapper: ONE container + ONE section for homepage consistency */
.nh-home .tt-section {
  padding-top: var(--nh-section-pad);
  padding-bottom: var(--nh-section-pad);
}
/* First section: tighter top so hero-strip connects to content */
.nh-home .tt-section--first {
  padding-top: 1.5rem;
  border-top: none;
}
@media (min-width: 768px) {
  .nh-home .tt-section--first {
    padding-top: 2rem;
  }
}
.nh-home .tt-section--default {
  border-top: 1px solid rgb(226 232 240); /* border-slate-200 */
}
.nh-home .tt-section__header {
  margin-bottom: var(--nh-gap-md);
}
.nh-home .tt-section__title {
  font-size: var(--nh-heading-size);
  font-weight: 700;
  color: var(--nh-text);
  margin: 0;
}
.nh-home .tt-section__subtitle {
  font-size: 0.95rem;
  color: var(--nh-text-muted);
  margin: 0.25rem 0 0;
}

/* Section: reduce huge vertical gaps — padding-block from scale */
.nh-home .nh-section {
  padding-top: var(--nh-section-pad);
  padding-bottom: var(--nh-section-pad);
}

.nh-home .nh-section.exec .exec__container {
  padding-top: var(--nh-section-pad);
  padding-bottom: var(--nh-section-pad);
}

/* Reusable btn (design system) */
.nh-home .nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-2xs) var(--gap-md);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

/* ========== Polish pass: improved vs DEMO — Step 1 gaps ==========
 * 1) Section headers not all pill-style   → B) nh-sectionTitle everywhere
 * 2) Card radius/shadow/padding mixed    → C) unified .nh-card
 * 3) Two-col loose, sidebar uneven      → D) + E) tighten + card-button list
 * 4) No typography scale                 → A) base + heading scale + clamp
 * 5) Backgrounds too strong behind text  → F) surface + lower opacity
 * 6) Buttons/cards no hover              → G) micro-interactions
   ========== A) Typography + hierarchy ========== */
.nh-home .nh-container,
.nh-home .nh-section {
  color: var(--nh-text);
}

.nh-home h2,
.nh-home .nh-sectionTitle {
  font-size: var(--nh-heading-size);
  line-height: 1.3;
  font-weight: 700;
  color: var(--nh-text);
}

.nh-home h3 {
  font-size: var(--nh-heading-size-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--nh-text);
}

.nh-home .announcement-item__title,
.nh-home .activity-card__title {
  margin-bottom: var(--gap-xs);
}

/* Section title: ONE consistent pill badge (Demo-like) */
.nh-home .nh-sectionTitle,
.nh-home .activities__title.nh-sectionTitle,
.nh-home .announcements__title.nh-sectionTitle,
.nh-home .section__heading.nh-sectionTitle,
.nh-home .outside-links__title.nh-sectionTitle,
.nh-home .map-section__title.nh-sectionTitle,
.nh-home .attractions-otop__heading.nh-sectionTitle {
  display: inline-block;
  margin: 0 0 var(--gap-md);
  padding: var(--gap-sm) var(--gap-lg);
  font-size: var(--nh-heading-size);
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border-radius: var(--nh-radius-pill);
  box-shadow: var(--shadow-soft);
  border: var(--border-subtle);
}

.nh-home .nh-sectionTitle--center {
  display: block;
  text-align: center;
}

/* Clamp long titles in cards/lists to 2 lines */
.nh-home .announcement-item__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* ========== C) Card system unification ========== */
.nh-home .nh-card,
.nh-home .announcements-two-col__module.nh-card,
.nh-home .activity-card.nh-card,
.nh-home .attractions-otop__card {
  background: #fff;
  border: var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.nh-home .nh-card,
.nh-home .announcements-two-col__module.nh-card {
  padding: var(--gap-md);
}

.nh-home .activity-card.nh-card {
  padding: 0;
  overflow: hidden;
}

.nh-home .attractions-otop__card {
  padding: 0;
  overflow: hidden;
}

/* Card hover lift (desktop only) */
@media (hover: hover) {
  .nh-home .nh-card:hover,
  .nh-home .announcements-two-col__module.nh-card:hover,
  .nh-home .activity-card.nh-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .nh-home .activity-card.nh-card:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}

/* Two-column layout: content left, sidebar right (Step 4D) */
.nh-home .nh-twoCol {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .nh-home .nh-twoCol {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .nh-home .nh-twoCol {
    grid-template-columns: 1fr var(--nh-sidebar-width);
    align-items: start;
  }
}

.nh-home .nh-mainCol {
  min-width: 0;
}

.nh-home .nh-sideCol {
  width: 100%;
}

@media (min-width: 992px) {
  .nh-home .nh-sideCol {
    width: var(--nh-sidebar-width);
    max-width: 100%;
  }
}

/* Sidebar quick links: uniform width, padding, hover lift (Step 4D) */
.nh-home .nh-sidebar,
.nh-home .nh-sidebarQuickLinks {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.nh-home .nh-cardButton,
.nh-home .nh-quickLink {
  display: block;
  width: 100%;
  background: #fff;
  border: var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--gap-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nh-home .nh-cardButton:hover,
.nh-home .nh-quickLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.nh-home .nh-cardButton img,
.nh-home .nh-quickLink img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Activities grid: Step 4D — 4/3/2/1 columns, gap from scale */
.nh-home .nh-grid,
.nh-home .nh-activitiesGrid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .nh-home .nh-grid,
  .nh-home .nh-activitiesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .nh-home .nh-grid,
  .nh-home .nh-activitiesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .nh-home .nh-grid,
  .nh-home .nh-activitiesGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
  }
}

@media (min-width: 1200px) {
  .nh-home .nh-grid,
  .nh-home .nh-activitiesGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card image: fixed aspect ratio, cover, rounded (Step 4D) */
.nh-home .nh-card-image,
.nh-home .nh-card .activity-card__img-wrap,
.nh-home .activity-card.nh-card .activity-card__img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0f4ed;
  border-radius: calc(var(--radius) - 2px);
}

.nh-home .nh-card-image img,
.nh-home .activity-card.nh-card .activity-card__img-wrap img,
.nh-home .activity-card.nh-card .activity-card__img-wrap .activity-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Home activities: image top rounded only, bottom straight */
.home-page .activity-card.nh-card .activity-card__img-wrap {
  border-radius: 0;
}

/* Title clamp: 2 lines for equal card heights */
.nh-home .activity-card.nh-card .activity-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* ========== E-Service: ONE cohesive feature zone (nh-eservice) ========== */
.nh-home .nh-eserviceSurface {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--gap-lg);
  position: relative;
  z-index: 1;
}

.nh-home .nh-eserviceHeader {
  margin-bottom: var(--gap-md);
}

.nh-home .nh-eserviceHeader .nh-sectionTitle {
  margin-bottom: 0;
}

.nh-home .nh-eserviceGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: center;
}

/* Banner (left column) */
.nh-home .nh-eserviceLeft .eservice__banner-block {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0;
  border: var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.nh-home .nh-eserviceLeft .eservice__banner-img {
  max-width: 100%;
  height: auto;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .nh-home .nh-eserviceLeft .eservice__banner-img {
    max-height: 260px;
  }
}

/* Center: LINE/QR + icons grid */
.nh-home .nh-eserviceCenter {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.nh-home .nh-eserviceIcons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.nh-home .nh-eserviceRight .eservice__stack-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Icon mini-cards (center 4 + right 2) */
.nh-home .nh-iconCard {
  background: #fff;
  border: var(--border-subtle);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 110px;
  justify-content: center;
  text-decoration: none;
  color: var(--nh-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nh-home .nh-iconCard .service-btn__icon,
.nh-home .nh-iconCard .service-btn__icon img,
.nh-home .nh-iconCard .service-btn__icon svg,
.nh-home .nh-iconCard .service-btn__bg img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.nh-home .nh-iconCard .service-btn__label {
  margin-top: var(--gap-xs);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (hover: hover) {
  .nh-home .nh-iconCard:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

/* Phone: constrain width, center */
.nh-home .nh-eserviceRight .eservice-phone__img,
.nh-home .nh-eserviceRight .eservice-phone .eservice-phone__img--placeholder {
  max-width: 200px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media (min-width: 768px) {
  .nh-home .nh-eserviceRight .eservice-phone__img {
    max-width: 240px;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1025px) {
  .nh-home .nh-eserviceGrid {
    grid-template-columns: 1.3fr 0.9fr 1.1fr;
    gap: var(--gap-md);
  }
}

/* Tablet: 2 columns — banner full width, center+right side by side */
@media (min-width: 769px) and (max-width: 1024px) {
  .nh-home .nh-eserviceGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left left" "center right";
  }
  .nh-home .nh-eserviceLeft { grid-area: left; }
  .nh-home .nh-eserviceCenter { grid-area: center; }
  .nh-home .nh-eserviceRight { grid-area: right; }
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .nh-home .nh-eserviceGrid {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
  .nh-home .nh-eserviceSurface {
    padding: var(--gap-md);
  }
}

/* E-Service section: reduce decorative bg dominance (no .eservice__bg in Blade; section may have parent bg) */
.nh-home .nh-eservice .eservice-line__rice {
  opacity: 0.7;
}

/* Background calming: lower opacity so content stands out, identity kept */
.nh-home .section.activities .activities__bg {
  opacity: 0.06;
}

.nh-home .announcements-two-col__bg {
  opacity: 0.4;
}

.nh-home .exec__bamboo {
  opacity: 0.75;
}

.nh-home .map-section__bg {
  opacity: 0.5;
}

.nh-home .attractions-otop__bg {
  opacity: 0.25;
}

@media (min-width: 1024px) {
  .nh-home .eservice__grid {
    grid-template-columns: minmax(260px, 0.6fr) minmax(280px, 1fr);
    gap: var(--nh-gap-lg);
  }
}

/* ========== 3) Map section: frame + gradient overlay + nh-surface ========== */
.nh-home .map-section--demo .map-section__inner {
  max-width: var(--nh-container-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--nh-section-pad) var(--nh-container-pad);
}

.nh-home .map-section__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.nh-home .map-section--demo .map-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.45) 100%
  );
  pointer-events: none;
}

.nh-home .map-section__surface {
  position: relative;
  z-index: 1;
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-md);
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius);
  box-shadow: none;
}

.nh-home .map-section__surface .nh-sectionTitle {
  margin-bottom: 0;
}

.nh-home .map-section__wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

/* ========== 4) Outside links: surface, reduced padding, logos aligned ========== */
.nh-home .outside-links.nh-section {
  padding-top: var(--gap-md);
  padding-bottom: var(--gap-md);
}

.nh-home .outside-links__inner.nh-surface {
  padding: var(--gap-md) var(--gap-lg);
}

.nh-home .outside-links__title.nh-sectionTitle {
  margin-bottom: var(--gap-sm);
}

.nh-home .outside-links__track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
}
.nh-home .outside-links__track-wrap::-webkit-scrollbar {
  display: none;
}
.nh-home .outside-links__track-wrap {
  scrollbar-width: none;
}

.nh-home .outside-links__track {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: nowrap;
}

.nh-home .outside-links__item {
  flex-shrink: 0;
  display: block;
}

.nh-home .outside-links__img {
  width: clamp(80px, 12vw, 140px);
  height: auto;
  max-height: 80px;
  object-fit: contain;
  display: block;
}

.nh-home .outside-links__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: #ffffff;
  color: var(--brand-g1, #0f5b3a);
  cursor: pointer;
}
.nh-home .outside-links__arrowIcon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .nh-home .outside-links__arrow {
    width: 32px;
    height: 32px;
  }
}

/* ========== 5) Attractions/OTOP: surface, consistent cards + buttons ========== */
.nh-home .attractions-otop__inner.nh-surface {
  padding: var(--gap-lg);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.nh-home .attractions-otop__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap-lg);
}

@media (min-width: 768px) {
  .nh-home .attractions-otop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nh-home .attractions-otop__heading.nh-sectionTitle {
  margin-bottom: var(--gap-md);
}

.nh-home .attractions-otop__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
}

.nh-home .attractions-otop__card {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.nh-home .attractions-otop__card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nh-home .attractions-otop__card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.nh-home .attractions-otop__card-more.nh-btn,
.nh-home .attractions-otop__card-more.pill-btn {
  margin-top: var(--gap-sm);
  align-self: center;
}

.nh-home .announcements__more {
  margin-top: var(--gap-sm);
  margin-bottom: 0;
}

/* Step 4E — Normalize whitespace: consistent section padding (no huge gaps) */
.nh-home .section {
  padding-top: var(--gap-md);
  padding-bottom: var(--gap-md);
}

@media (min-width: 768px) {
  .nh-home .section {
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
  }
}

.nh-home .activities__header {
  margin-bottom: var(--gap-md);
}

/* ========== 1) Activities: header row + ดูทั้งหมด aligned, tight spacing ========== */
.nh-home .activities__inner.nh-surface {
  padding: var(--gap-lg);
}

.nh-home .activities__header--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}

.nh-home .activities__header-left {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.nh-home .activities__header--row .nh-sectionTitle {
  margin-bottom: 0;
}

.nh-home .activities__more--header {
  margin: 0;
  flex-shrink: 0;
}

.nh-home .activities__grid {
  margin-bottom: 0;
}

.nh-home .nh-grid.nh-activitiesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-md);
}

.nh-home .activity-card.nh-card .activity-card__img-wrap {
  aspect-ratio: 16 / 10;
}

/* ========== Middle two-column block (nh-mid): cohesive surface + card stack + uniform buttons ========== */
.nh-home .nh-midSurface {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--gap-lg);
  position: relative;
  z-index: 1;
}

.nh-home .nh-midCols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: start;
}

@media (min-width: 1024px) {
  .nh-home .nh-midCols {
    grid-template-columns: 1fr 320px;
  }
}

.nh-home .nh-midMain {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  min-width: 0;
}

.nh-home .nh-mid .nh-block {
  padding: var(--gap-md);
}

.nh-home .nh-mid .nh-block .announcements__list,
.nh-home .nh-mid .nh-block .announcements__header {
  margin-bottom: 0;
}

.nh-home .nh-mid .nh-blockTitle {
  margin-bottom: var(--gap-sm);
}

/* Announcements list: compact rows */
.nh-home .nh-mid .announcement-item {
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nh-home .nh-mid .announcement-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.nh-home .nh-mid .announcement-item__link {
  padding: var(--gap-xs) 0;
}

.nh-home .nh-mid .announcement-item__title {
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nh-home .nh-mid .announcement-item__date {
  font-size: 0.85rem;
  color: var(--nh-text-muted);
}

.nh-home .nh-mid .announcement-item__thumb {
  flex-shrink: 0;
}

.nh-home .nh-mid .announcement-item__thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Quick links as uniform card buttons (nh-midCardButton) */
.nh-home .nh-midSide .nh-cardButton.nh-midCardButton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-sm);
  background: #fff;
  border: var(--border-subtle);
  border-radius: 16px;
  padding: 14px 12px;
  min-height: 78px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nh-home .nh-midSide .nh-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.nh-home .nh-midSide .nh-cardButton.nh-midCardButton img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (hover: hover) {
  .nh-home .nh-midSide .nh-cardButton.nh-midCardButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 1024px) {
  .nh-home .nh-midCols {
    grid-template-columns: 1fr var(--nh-sidebar-width);
  }
}

@media (max-width: 768px) {
  .nh-home .nh-midCols {
    grid-template-columns: 1fr;
  }
  .nh-home .nh-midSurface {
    padding: var(--gap-md);
  }
  .nh-home .nh-midSide .nh-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
}

/* ========== D) Two-column: tighten and align (legacy classes still used) ========== */
.nh-home .nh-twoCol {
  align-items: start;
  gap: var(--gap-lg);
}

.nh-home .announcements-two-col__left {
  gap: var(--gap-md);
}

/* Two-col: treasury banner inside card — radius + overflow */
.nh-home .announcements-two-col__banner-wrap {
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  margin-top: 0;
}

.nh-home .announcements-two-col__banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.nh-home .announcements-two-col__banner-placeholder {
  border-radius: calc(var(--radius) - 2px);
}

/* Announcements + e-GP lists: consistent spacing between items */
.nh-home .announcements__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nh-home .announcement-item {
  margin-bottom: 0;
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nh-home .announcement-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nh-home .announcement-item__link {
  padding: var(--gap-sm) 0;
}

.nh-home .announcements__list--egp .announcement-item__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thumb: no stretch */
.nh-home .announcement-item__thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.nh-home .nh-sideCol {
  width: 100%;
  max-width: var(--nh-sidebar-width);
}

@media (min-width: 1024px) {
  .nh-home .nh-sideCol {
    width: var(--nh-sidebar-width);
    min-width: 300px;
  }
}

/* ========== E) Sidebar quick links: uniform card-button list ========== */
.nh-home .nh-sidebar .nh-cardButton {
  width: 100%;
  min-height: 56px;
  padding: var(--gap-sm) var(--gap-md);
  margin-bottom: var(--gap-sm);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  border-radius: var(--radius);
  border: var(--border-subtle);
  box-shadow: var(--shadow-soft);
  background: #fff;
  text-decoration: none;
  color: var(--nh-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.nh-home .nh-sidebar .nh-cardButton:last-child {
  margin-bottom: 0;
}

.nh-home .nh-sidebar .nh-cardButton img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (hover: hover) {
  .nh-home .nh-sidebar .nh-cardButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    filter: brightness(1.02);
  }
}

/* ========== F) Section surface (calm content over textured bg) ========== */
.nh-home .nh-surface {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  position: relative;
  z-index: 1;
}

.nh-home .announcements-two-col__inner.nh-surface {
  padding: var(--gap-lg);
}

.nh-home .activities__inner.nh-surface {
  padding: var(--gap-lg);
}

/* ========== G) Micro-interactions: button hover (desktop) ========== */
@media (hover: hover) {
  .nh-home .pill-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  .nh-home a.pill-btn {
    transition: filter 0.2s ease, box-shadow 0.2s ease;
  }
}

.nh-home .announcements__more {
  margin-top: var(--gap-sm);
  margin-bottom: 0;
}

.nh-home .activities__more {
  margin-top: var(--gap-md);
  margin-bottom: 0;
}

/* Mobile: 16px container padding, no overflow-x */
@media (max-width: 767px) {
  .nh-home .nh-container,
  .nh-home .container {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }

  .nh-home .pill-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   1) Design tokens (legacy .home-page — keep for compatibility)
   ========================================================================== */
.home-page {
  --home-gap-xs: 6px;
  --home-gap-sm: 12px;
  --home-gap-md: 20px;
  --home-gap-lg: 28px;
  --home-section-pad: 28px;
  --home-section-pad-md: 36px;
  --home-section-pad-lg: 44px;
  --home-radius: 10px;
  --home-radius-pill: 9999px;
  --home-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --home-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --home-border: 1px solid rgba(0, 0, 0, 0.08);
  --home-container-max: 1160px;
  --home-container-pad: 16px;
  --home-container-pad-md: 20px;
  --home-container-pad-lg: 24px;
  --home-sidebar-width: 280px;
}

@media (min-width: 768px) {
  .home-page {
    --home-section-pad: var(--home-section-pad-md);
    --home-container-pad: var(--home-container-pad-md);
  }
}

@media (min-width: 1024px) {
  .home-page {
    --home-section-pad: var(--home-section-pad-lg);
    --home-container-pad: var(--home-container-pad-lg);
  }
}

/* ==========================================================================
   2) Centered container (all homepage sections)
   ========================================================================== */
.home-page .nh-home__inner .container,
.home-page .frontpage .container {
  max-width: var(--home-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--home-container-pad);
  padding-right: var(--home-container-pad);
}

.home-page .nh-home__inner .exec__inner .container {
  max-width: var(--home-container-max);
  padding-left: var(--home-container-pad);
  padding-right: var(--home-container-pad);
}

/* Prevent horizontal overflow on small screens */
.home-page .frontpage {
  overflow-x: hidden;
}

/* ==========================================================================
   3) Section spacing — compact vertical rhythm
   ========================================================================== */
.home-page .section {
  padding-top: var(--home-section-pad);
  padding-bottom: var(--home-section-pad);
}

.home-page .section.exec .exec__container {
  padding-top: var(--home-section-pad);
  padding-bottom: var(--home-section-pad);
}

/* ==========================================================================
   4) Section headers — pill/label style, strong hierarchy
   ========================================================================== */
.home-page .activities__title,
.home-page .announcements__title,
.home-page .section__heading,
.home-page .outside-links__title {
  display: inline-block;
  margin: 0 0 var(--home-gap-md);
  padding: var(--home-gap-sm) var(--home-gap-lg);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border-radius: var(--home-radius-pill);
  box-shadow: var(--home-shadow);
  border: var(--home-border);
}

.home-page .announcements-two-col__module .announcements__title {
  font-size: 1.05rem;
  padding: var(--home-gap-xs) var(--home-gap-md);
}

.home-page .announcements__header .announcements__title,
.home-page .announcements-two-col__module .announcements__header .announcements__title {
  margin-bottom: var(--home-gap-sm);
}

/* ==========================================================================
   5) Card system — white, border, shadow, radius, padding
   ========================================================================== */
.home-page .activity-card,
.home-page .announcements-two-col__module,
.home-page .exec-profile__plaque {
  background: #fff;
  border: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
}

.home-page .activity-card {
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .home-page .activity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow-hover);
  }
}

.home-page .announcements-two-col__module {
  padding: var(--home-gap-md);
}

.home-page .activity-card__body {
  padding: var(--home-gap-md);
}

.home-page .activity-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  font-size: 1rem;
}

.home-page .activity-card__desc {
  line-height: 1.5;
  font-size: 0.9rem;
}

/* ==========================================================================
   6) Button design system — unified height, radius, hover
   ========================================================================== */
.home-page .pill-btn,
.home-page a.service-btn {
  min-height: 42px;
  padding: 0.5rem 1.25rem;
  border-radius: var(--home-radius);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .home-page .pill-btn:hover,
  .home-page a.service-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--home-shadow-hover);
  }
}

/* ==========================================================================
   7) Exec + Video — horizontal block, reduced gaps
   ========================================================================== */
.home-page .exec__grid {
  gap: var(--home-gap-md);
}

.home-page .exec-profile__plaque {
  padding: var(--home-gap-sm) var(--home-gap-md);
  min-height: 64px;
}

.home-page .exec-video__wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
}

.home-page .exec-video__wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

@media (min-width: 1024px) {
  .home-page .exec__grid {
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--home-gap-lg);
  }
}

/* Left exec (mayor) slightly larger than right — power dynamic */
.home-page .exec-profile--mayor .exec-profile__photo,
.home-page .exec-profile--mayor .exec-profile__photo--placeholder {
  width: 220px;
  max-height: 286px;
}
.home-page .exec-profile--mayor .exec-profile__photo--placeholder {
  height: 286px;
}
.home-page .exec-profile--mayor .exec-profile__plaque {
  max-width: 374px;
}

/* ==========================================================================
   8) E-Service — balanced grid, tighter spacing
   ========================================================================== */
.home-page .eservice__grid {
  gap: var(--home-gap-md);
  align-items: center;
}

.home-page .eservice__service-grid--four {
  gap: var(--home-gap-sm);
}

.home-page .eservice-phone {
  max-width: 280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .home-page .eservice__grid {
    grid-template-columns: minmax(260px, 0.6fr) minmax(280px, 1fr);
    gap: var(--home-gap-lg);
  }
  .home-page .eservice-phone {
    max-width: 300px;
  }
}

/* ==========================================================================
   9) Activities — responsive grid, consistent thumbnails
   ========================================================================== */
.home-page .activities__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.home-page .activities__header {
  margin-bottom: var(--home-gap-md);
}

.home-page .activities__grid {
  gap: var(--home-gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .home-page .activities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-page .activities__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--home-gap-lg);
  }
}

.home-page .activity-card__img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0f4ed;
}

.home-page .activity-card__img,
.home-page .activity-card__img--placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-page .activity-card__img-shell {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.home-page .activity-card__divider {
  height: 3px;
  background: var(--primary-600, var(--color-primary-green-dark));
}

.home-page .activity-card__date-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  background: var(--primary-600, var(--color-primary-green-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-page .activities__more {
  margin-top: var(--home-gap-md);
  margin-bottom: 0;
}


/* ==========================================================================
   Homepage container standard + announcements background cleanup
   ========================================================================== */
.home-page {
  --tt-container-max: 1200px;
}

/* Keep this block transparent (remove pale green fill layer) */
.home-page .announcements-two-col__bg {
  background: transparent !important;
}
/* ==========================================================================
   10) Two-column middle — content left, quick-link sidebar right
   ========================================================================== */
.home-page .announcements-two-col__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.home-page .announcements-two-col__grid {
  gap: var(--home-gap-lg);
  grid-template-columns: 1fr;
}

.home-page .announcements-two-col__left {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap-lg);
}

@media (min-width: 992px) {
  .home-page .announcements-two-col__grid {
    grid-template-columns: minmax(0, 1fr) var(--home-sidebar-width);
    align-items: start;
    gap: var(--home-gap-lg);
  }
}

/* Announcement list items — compact */
.home-page .announcement-item {
  padding: var(--home-gap-xs) 0;
}

.home-page .announcement-item__title {
  line-height: 1.4;
  font-size: 0.95rem;
}

.home-page .announcement-item__content--textOnly {
  border-left: none;
  padding-left: 0;
}

.home-page .announcement-item__link {
  padding-left: var(--gap-md);
  padding-right: var(--gap-md);
}

.home-page .announcement-item__date-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-600, var(--color-primary-green-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-page .announcements__more {
  margin-top: var(--home-gap-sm);
  margin-bottom: 0;
}

/* ==========================================================================
   11) Quick links sidebar — fixed width, card buttons, hover lift
   ========================================================================== */
.home-page .announcements-two-col__right {
  width: 100%;
}

.home-page .side-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap-sm);
}

@media (min-width: 992px) {
  .home-page .side-buttons {
    width: var(--home-sidebar-width);
    max-width: 100%;
  }
}

.home-page .side-buttons__item {
  display: block;
  width: 100%;
  background: #fff;
  border: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .home-page .side-buttons__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--home-shadow-hover);
  }
}

.home-page .side-buttons__img {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.home-page .side-buttons__placeholder {
  display: block;
  padding: var(--home-gap-md);
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

/* ==========================================================================
   12) Map, outside links, contact — consistent section padding
   ========================================================================== */
.home-page .map-section--demo .map-section__inner {
  padding: var(--home-section-pad) var(--home-container-pad);
  max-width: var(--home-container-max);
  margin-left: auto;
  margin-right: auto;
}

.home-page .outside-links__inner,
.home-page .contact-section .container {
  padding-top: var(--home-section-pad);
  padding-bottom: var(--home-section-pad);
}

.home-page .contact-section .container {
  max-width: var(--home-container-max);
}

/* ==========================================================================
   13) Hero — full width, content below in container (unchanged structure)
   ========================================================================== */
.home-page .hero.fullbleed {
  min-height: 260px;
}

@media (min-width: 768px) {
  .home-page .hero.fullbleed {
    min-height: 360px;
  }
}

@media (min-width: 1024px) {
  .home-page .hero.fullbleed {
    min-height: 420px;
  }
}

.home-page .hero__img,
.home-page .hero__slide .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-page .hero-strip__inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ==========================================================================
   14) Mobile — 16px padding, full-width buttons, no overflow
   ========================================================================== */
@media (max-width: 767px) {
  .home-page .home-content .container,
  .home-page .frontpage .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-page .side-buttons__item {
    width: 100%;
  }

  .home-page .pill-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .home-page .activities__grid {
    gap: var(--home-gap-md);
  }
}

/* ==========================================================================
   15) Backgrounds — subtle, don’t overpower content
   ========================================================================== */
.home-page .announcements-two-col__bg {
  opacity: 0.6;
}

.home-page .section.activities .activities__bg {
  opacity: 0.06;
}

/* ==========================================================================
   QA checklist — Homepage hero + exec (e-gov polish)
   ==========================================================================
   [ ] Hero strip: bar color dark green (--brand-g1 / --brand-g2); no hotline CTA
   [ ] Hero strip: vision text marquee — slow scroll, readable; pause on hover/focus
   [ ] Hero strip: prefers-reduced-motion → static text, no animation
   [ ] Hero strip: empty vision_text → neutral line (no "ตั้งค่าในระบบจัดการ")
   [ ] Exec: no "แนะนำ" section header
   [ ] Exec: desktop 3 columns — Mayor (left) | Video (center) | Secretary (right)
   [ ] Exec: Mayor card larger (avatar, name size/weight) than Secretary
   [ ] Exec: Video card has two CTAs — "สารจากนายก", "คำแถลงนโยบายของผู้บริหาร" (real links, not #)
   [ ] Exec: No placeholder copy ("ตั้งค่าในระบบ", "ตัวอย่าง..."); neutral text or hide when empty
   [ ] Exec: Tablet — video full width then 2 cols; Mobile — 1 col order: video, mayor, secretary
   [ ] Font: Mitr only (no Sarabun on public homepage)
   [ ] Container: exec uses same tt-container width/alignment as other sections
   ========================================================================== */
/* ==========================================================================
   14) Horizontal padding normalization (single container rhythm)
   Keep vertical breathing, remove inner left/right padding on target sections.
   ========================================================================== */
.home-page .activities__inner.nh-surface,
.home-page .outside-links__inner.nh-surface,
.home-page .attractions-otop__inner.nh-surface,
.home-page .map-section__surface {
  padding-left: var(--nh-inner-inline);
  padding-right: var(--nh-inner-inline);
}

.home-page .map-section--demo .map-section__inner {
  padding-left: var(--nh-inner-inline);
  padding-right: var(--nh-inner-inline);
}