/**
 * Home v2 — Modern Farm-to-Table styles
 * All styles scoped under .iof-home-v2 to avoid theme conflicts.
 *
 * Built with CSS Grid + Flexbox, mobile-first responsive.
 * No dependency on WPBakery / tagDiv responsive grid.
 */

/* ============================================================
   Design Tokens (CSS variables)
   ============================================================ */
.iof-home-v2 {
  /* Brand greens */
  --iof-green-900: #2d4a25;
  --iof-green-700: #446c3a;
  --iof-green-500: #6b9456;
  --iof-green-300: #a8c4a2;
  --iof-green-100: #e8f0e3;

  /* Accents */
  --iof-cream:     #faf7f0;
  --iof-earth:     #8b6f47;
  --iof-coral:     #e8794d;

  /* Social */
  --iof-line:      #06c755;
  --iof-shopee:    #ee4d2d;
  --iof-fb:        #1877f2;

  /* Neutrals */
  --iof-text:      #1a1a1a;
  --iof-text-soft: #555;
  --iof-border:    #e5e5e5;
  --iof-white:     #ffffff;

  /* Spacing (8px scale) */
  --iof-sp-1: 8px;   --iof-sp-2: 16px;   --iof-sp-3: 24px;
  --iof-sp-4: 32px;  --iof-sp-5: 48px;   --iof-sp-6: 64px;
  --iof-sp-7: 96px;  --iof-sp-8: 128px;

  /* Radius + Shadow */
  --iof-r-sm: 8px;
  --iof-r-md: 16px;
  --iof-r-lg: 24px;
  --iof-shadow-soft: 0 4px 16px rgba(0,0,0,0.06);
  --iof-shadow-card: 0 8px 30px rgba(68,108,58,0.12);
  --iof-shadow-hover: 0 16px 50px rgba(68,108,58,0.22);

  /* Container */
  --iof-container: 1200px;
  --iof-container-narrow: 840px;

  /* Reset for the inner */
  color: var(--iof-text);
  font-family: 'Sarabun', sans-serif;
  line-height: 1.7;
}

/* Global heading color — every h1/h2/h3/h4 inside home-v2 = brand green-900 */
.iof-home-v2 h1,
.iof-home-v2 h2,
.iof-home-v2 h3,
.iof-home-v2 h4 {
  color: var(--iof-green-900);
}
/* Hero is on dark overlay — keep white */
.iof-home-v2 .iof-hero h1,
.iof-home-v2 .iof-hero__title {
  color: var(--iof-white);
}

/* Override Newspaper main wrap padding to allow full-bleed sections */
.page-template-page-home-v2 #td-outer-wrap .td-main-content-wrap {
  background: var(--iof-cream);
}
.page-template-page-home-v2 .tdc-content-wrap,
.page-template-page-home-v2 .wpb-content-wrapper {
  max-width: none !important;
  padding: 0 !important;
}

/* ============================================================
   Containers
   ============================================================ */
.iof-home-v2 .iof-container {
  max-width: var(--iof-container);
  margin: 0 auto;
  padding: 0 var(--iof-sp-3);
  width: 100%;
}
.iof-home-v2 .iof-container--narrow {
  max-width: var(--iof-container-narrow);
}

/* ============================================================
   Section heads
   ============================================================ */
.iof-home-v2 .iof-section__head {
  margin-bottom: var(--iof-sp-6);
}
.iof-home-v2 .iof-section__head--center {
  text-align: center;
}
.iof-home-v2 .iof-section__eyebrow {
  display: inline-block;
  font-family: 'Sarabun', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--iof-green-700);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  margin-bottom: var(--iof-sp-2);
  position: relative;
}
.iof-home-v2 .iof-section__head--center .iof-section__eyebrow::before,
.iof-home-v2 .iof-section__head--center .iof-section__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--iof-green-500);
  vertical-align: middle;
  margin: 0 12px;
  border-radius: 2px;
}
.iof-home-v2 .iof-section__title {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  color: var(--iof-green-900);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
}
.iof-home-v2 .iof-section__head--center .iof-section__title {
  position: relative;
  padding-bottom: var(--iof-sp-3);
}
.iof-home-v2 .iof-section__head--center .iof-section__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--iof-green-700), var(--iof-green-500));
  border-radius: 4px;
  margin: var(--iof-sp-3) auto 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.iof-home-v2 .iof-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--iof-sp-1);
  padding: 14px 28px;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--iof-r-sm);
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}
.iof-home-v2 .iof-btn--primary {
  background: var(--iof-green-700);
  color: var(--iof-white);
}
.iof-home-v2 .iof-btn--primary:hover {
  background: var(--iof-green-900);
  transform: translateY(-2px);
  box-shadow: var(--iof-shadow-card);
}
.iof-home-v2 .iof-btn--outline {
  border-color: var(--iof-white);
  color: var(--iof-white);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}
.iof-home-v2 .iof-btn--outline:hover {
  background: var(--iof-white);
  color: var(--iof-green-900);
}

/* When .iof-btn--outline is on cream background, invert colors */
.iof-home-v2 .iof-products__more .iof-btn--outline,
.iof-home-v2 .iof-articles__more .iof-btn--outline,
.iof-home-v2 .iof-map__info .iof-btn--outline {
  border-color: var(--iof-green-700);
  color: var(--iof-green-700);
  background: transparent;
  backdrop-filter: none;
}
.iof-home-v2 .iof-products__more .iof-btn--outline:hover,
.iof-home-v2 .iof-articles__more .iof-btn--outline:hover,
.iof-home-v2 .iof-map__info .iof-btn--outline:hover {
  background: var(--iof-green-700);
  color: var(--iof-white);
}

/* ============================================================
   1. HERO SLIDER
   ============================================================ */
.iof-home-v2 .iof-hero {
  position: relative;
  height: clamp(480px, 75vh, 720px);
  overflow: hidden;
  margin: 0 calc(50% - 50vw); /* full-bleed */
  width: 100vw;
}
.iof-home-v2 .iof-hero__slides {
  position: absolute;
  inset: 0;
}
.iof-home-v2 .iof-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.iof-home-v2 .iof-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.iof-home-v2 .iof-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(45,74,37,0.85) 0%,
    rgba(45,74,37,0.65) 35%,
    rgba(45,74,37,0.25) 65%,
    rgba(45,74,37,0.05) 100%);
}
.iof-home-v2 .iof-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
.iof-home-v2 .iof-hero__text {
  max-width: 600px;
  color: var(--iof-white);
}
.iof-home-v2 .iof-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: 'Sarabun', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: var(--iof-sp-3);
}
.iof-home-v2 .iof-hero__title {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--iof-sp-3) 0;
  color: var(--iof-white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.iof-home-v2 .iof-hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  margin: 0 0 var(--iof-sp-4) 0;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.35);
  font-weight: 500;
}
.iof-home-v2 .iof-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iof-sp-2);
}
.iof-home-v2 .iof-hero__dots {
  position: absolute;
  bottom: var(--iof-sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--iof-sp-1);
  z-index: 5;
}
.iof-home-v2 .iof-hero__dot {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.iof-home-v2 .iof-hero__dot:hover { background: rgba(255,255,255,0.7); }
.iof-home-v2 .iof-hero__dot.is-active {
  background: var(--iof-white);
  width: 56px;
}

/* ============================================================
   2. TRUST STRIP
   ============================================================ */
.iof-home-v2 .iof-trust {
  background: var(--iof-white);
  padding: var(--iof-sp-4) 0;
  border-bottom: 1px solid var(--iof-border);
}
.iof-home-v2 .iof-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iof-sp-3);
}
.iof-home-v2 .iof-trust__item {
  display: flex;
  align-items: center;
  gap: var(--iof-sp-2);
}
.iof-home-v2 .iof-trust__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--iof-green-100);
  color: var(--iof-green-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.iof-home-v2 .iof-trust__text strong {
  display: block;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--iof-green-900);
  line-height: 1.2;
}
.iof-home-v2 .iof-trust__text span {
  font-size: 13px;
  color: var(--iof-text-soft);
}

/* ============================================================
   3. CATEGORIES
   ============================================================ */
.iof-home-v2 .iof-categories {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-cream);
}
.iof-home-v2 .iof-categories__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--iof-sp-4);
}
/* PROMISE block — sits between Categories and Products with breathing room */
.iof-home-v2 .iof-promise {
  padding: var(--iof-sp-6) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-promise__card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--iof-sp-5) var(--iof-sp-5) var(--iof-sp-5) var(--iof-sp-6);
  background: linear-gradient(135deg, var(--iof-green-100) 0%, var(--iof-cream) 100%);
  border-radius: var(--iof-r-lg);
  border-left: 5px solid var(--iof-green-700);
  text-align: center;
}
.iof-home-v2 .iof-promise__icon {
  position: absolute;
  top: -10px;
  left: var(--iof-sp-4);
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: var(--iof-green-500);
  opacity: 0.4;
  font-weight: 700;
  pointer-events: none;
}
.iof-home-v2 .iof-promise__text {
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--iof-green-900);
  line-height: 1.9;
  margin: 0;
}
.iof-home-v2 .iof-promise__text strong {
  color: var(--iof-green-700);
  font-weight: 700;
}
.iof-home-v2 .iof-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--iof-white);
  border-radius: var(--iof-r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 8px 30px rgba(68,108,58,0.08);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(168, 196, 162, 0.2);
}
.iof-home-v2 a.iof-cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06), 0 18px 50px rgba(68,108,58,0.22);
}
.iof-home-v2 .iof-cat-card--static {
  cursor: default;
}
.iof-home-v2 .iof-cat-card__img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--iof-green-100);
}
.iof-home-v2 .iof-cat-card__body {
  position: relative;
  padding: var(--iof-sp-4) var(--iof-sp-4) var(--iof-sp-4);
}
.iof-home-v2 .iof-cat-card__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--iof-sp-4);
  width: 40px;
  height: 3px;
  background: var(--iof-green-700);
  border-radius: 2px;
}
.iof-home-v2 .iof-cat-card__body h3 {
  font-family: 'Sarabun', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--iof-green-900);
  line-height: 1.3;
  margin: var(--iof-sp-2) 0 var(--iof-sp-2) 0;
  letter-spacing: -0.2px;
}
.iof-home-v2 .iof-cat-card__body p {
  font-size: 15px;
  color: var(--iof-text);
  margin: 0;
  line-height: 1.75;
}
.iof-home-v2 .iof-cat-card__link {
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  color: var(--iof-green-700);
  font-size: 14px;
}

/* ============================================================
   4. PRODUCTS
   ============================================================ */
.iof-home-v2 .iof-products {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iof-sp-3);
  margin-bottom: var(--iof-sp-5);
}
.iof-home-v2 .iof-prod-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--iof-r-md);
  overflow: hidden;
  background: var(--iof-cream);
  transition: all 0.3s ease;
}
.iof-home-v2 .iof-prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--iof-shadow-card);
}
.iof-home-v2 .iof-prod-card__img {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--iof-green-100);
}
.iof-home-v2 .iof-prod-card__body {
  padding: var(--iof-sp-2);
}
.iof-home-v2 .iof-prod-card__title {
  font-family: 'Sarabun', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--iof-text);
  margin: 0 0 var(--iof-sp-1) 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.iof-home-v2 .iof-prod-card__price {
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--iof-coral);
  margin-bottom: var(--iof-sp-1);
}
.iof-home-v2 .iof-prod-card__price .woocommerce-Price-amount {
  font-weight: 700;
}
.iof-home-v2 .iof-prod-card__cta {
  font-size: 13px;
  color: var(--iof-green-700);
  font-weight: 500;
}
.iof-home-v2 .iof-products__more {
  text-align: center;
}

/* ============================================================
   5. STORY
   ============================================================ */
.iof-home-v2 .iof-story {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-cream);
}
.iof-home-v2 .iof-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--iof-sp-5);
  align-items: center;
}
.iof-home-v2 .iof-story__title {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--iof-green-900);
  margin: var(--iof-sp-2) 0 var(--iof-sp-1);
}
.iof-home-v2 .iof-story__subtitle {
  font-family: 'Prompt', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.2px;
  color: var(--iof-green-700);
  margin: 0 0 var(--iof-sp-4) !important;
  text-transform: uppercase;
  padding-bottom: var(--iof-sp-2);
  border-bottom: 2px solid var(--iof-green-300);
  display: inline-block;
}
.iof-home-v2 .iof-story__text p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--iof-text);
  margin: var(--iof-sp-2) 0;
}
.iof-home-v2 .iof-story__lead {
  font-size: 18px !important;
  font-weight: 500;
  color: var(--iof-text) !important;
  line-height: 1.75 !important;
}
.iof-home-v2 .iof-story__quote {
  font-family: 'Sarabun', sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  color: var(--iof-green-700);
  border-left: 4px solid var(--iof-green-500);
  padding-left: var(--iof-sp-3);
  margin-top: var(--iof-sp-3) !important;
}

/* ============================================================
   6. WHY (4 pillars)
   ============================================================ */
.iof-home-v2 .iof-why {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-green-100);
}
.iof-home-v2 .iof-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--iof-sp-3);
}
.iof-home-v2 .iof-why__card {
  background: var(--iof-white);
  padding: var(--iof-sp-4) var(--iof-sp-3);
  border-radius: var(--iof-r-md);
  text-align: center;
  box-shadow: var(--iof-shadow-soft);
  transition: transform 0.3s ease;
}
.iof-home-v2 .iof-why__card:hover { transform: translateY(-4px); }
.iof-home-v2 .iof-why__icon {
  font-size: 48px;
  margin-bottom: var(--iof-sp-2);
  line-height: 1;
}
.iof-home-v2 .iof-why__card h3 {
  font-family: 'Sarabun', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--iof-green-900);
  margin: 0 0 var(--iof-sp-2) 0;
}
.iof-home-v2 .iof-why__card p {
  font-size: 15px;
  color: var(--iof-text-soft);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   7. PROCESS
   ============================================================ */
.iof-home-v2 .iof-process {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iof-sp-3);
  position: relative;
}
.iof-home-v2 .iof-process__step {
  text-align: center;
  padding: 0 var(--iof-sp-2);
  position: relative;
}
.iof-home-v2 .iof-process__num {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--iof-sp-3);
  background: var(--iof-green-700);
  color: var(--iof-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sarabun', sans-serif;
  font-size: 28px;
  font-weight: 700;
}
.iof-home-v2 .iof-process__step h3 {
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--iof-green-900);
  margin: 0 0 var(--iof-sp-1) 0;
}
.iof-home-v2 .iof-process__step p {
  font-size: 14px;
  color: var(--iof-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   3a. LATEST NEWS — dynamic from news-activities category
   ============================================================ */
.iof-home-v2 .iof-news {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--iof-sp-4);
}
.iof-home-v2 .iof-news-card {
  display: flex;
  flex-direction: column;
  background: var(--iof-white);
  border-radius: var(--iof-r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 8px 30px rgba(68,108,58,0.08);
  border: 1px solid rgba(168, 196, 162, 0.2);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.iof-home-v2 .iof-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06), 0 18px 50px rgba(68,108,58,0.22);
}
.iof-home-v2 .iof-news-card__img {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--iof-green-100);
}
.iof-home-v2 .iof-news-card__body {
  padding: var(--iof-sp-3) var(--iof-sp-4) var(--iof-sp-4);
}
.iof-home-v2 .iof-news-card__date {
  display: inline-block;
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--iof-green-700);
  text-transform: uppercase;
  margin-bottom: var(--iof-sp-2);
  background: var(--iof-green-100);
  padding: 4px 12px;
  border-radius: 100px;
}
.iof-home-v2 .iof-news-card__title {
  font-family: 'Sarabun', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--iof-green-900);
  line-height: 1.35;
  margin: 0 0 var(--iof-sp-2) 0;
  letter-spacing: -0.2px;
}
.iof-home-v2 .iof-news-card__excerpt {
  font-size: 14px;
  color: var(--iof-text);
  line-height: 1.7;
  margin: 0 0 var(--iof-sp-2) 0;
}
.iof-home-v2 .iof-news-card__link {
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
  color: var(--iof-green-700);
  font-size: 14px;
}
.iof-home-v2 .iof-news__more {
  text-align: center;
  margin-top: var(--iof-sp-5);
}

/* ============================================================
   9. ARTICLES
   ============================================================ */
.iof-home-v2 .iof-articles {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--iof-sp-3);
  margin-bottom: var(--iof-sp-5);
}
.iof-home-v2 .iof-article-card {
  display: flex;
  flex-direction: column;
  background: var(--iof-cream);
  border-radius: var(--iof-r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}
.iof-home-v2 .iof-article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--iof-shadow-card);
}
.iof-home-v2 .iof-article-card__img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--iof-green-100);
}
.iof-home-v2 .iof-article-card__body {
  padding: var(--iof-sp-3);
}
.iof-home-v2 .iof-article-card__body h3 {
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--iof-green-900);
  margin: 0 0 var(--iof-sp-1) 0;
  line-height: 1.3;
}
.iof-home-v2 .iof-article-card__body p {
  font-size: 14px;
  color: var(--iof-text-soft);
  margin: 0 0 var(--iof-sp-2) 0;
  line-height: 1.6;
}
.iof-home-v2 .iof-article-card__link {
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  color: var(--iof-green-700);
  font-size: 14px;
}
.iof-home-v2 .iof-articles__more {
  text-align: center;
}

/* ============================================================
   10. FAQ
   ============================================================ */
.iof-home-v2 .iof-faq {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-green-100);
}
.iof-home-v2 .iof-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--iof-sp-1);
}
.iof-home-v2 .iof-faq__item {
  background: var(--iof-white);
  border-radius: var(--iof-r-sm);
  overflow: hidden;
  box-shadow: var(--iof-shadow-soft);
}
.iof-home-v2 .iof-faq__item summary {
  padding: var(--iof-sp-3);
  font-family: 'Sarabun', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--iof-green-900);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--iof-sp-5);
}
.iof-home-v2 .iof-faq__item summary::-webkit-details-marker { display: none; }
.iof-home-v2 .iof-faq__item summary::after {
  content: '+';
  position: absolute;
  right: var(--iof-sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--iof-green-100);
  color: var(--iof-green-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.iof-home-v2 .iof-faq__item[open] summary::after {
  content: '−';
  background: var(--iof-green-700);
  color: var(--iof-white);
}
.iof-home-v2 .iof-faq__a {
  padding: 0 var(--iof-sp-3) var(--iof-sp-3) var(--iof-sp-3);
  font-size: 15px;
  color: var(--iof-text-soft);
  line-height: 1.7;
}

.iof-home-v2 .iof-story__video { width: 100%; }

/* ============================================================
   11. CONTACT
   ============================================================ */
.iof-home-v2 .iof-contact {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-white);
}
.iof-home-v2 .iof-contact__sub {
  font-size: 16px;
  color: var(--iof-text-soft);
  margin-top: var(--iof-sp-2);
}
.iof-home-v2 .iof-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iof-sp-2);
}
.iof-home-v2 .iof-contact__btn {
  display: flex;
  align-items: center;
  gap: var(--iof-sp-2);
  padding: var(--iof-sp-3);
  border-radius: var(--iof-r-md);
  text-decoration: none;
  color: var(--iof-white);
  transition: all 0.2s ease;
}
.iof-home-v2 .iof-contact__btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--iof-shadow-hover);
}
.iof-home-v2 .iof-contact__btn-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--iof-white);
}
.iof-home-v2 .iof-contact__btn-text strong {
  display: block;
  font-family: 'Sarabun', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 2px;
  color: var(--iof-white);
}
.iof-home-v2 .iof-contact__btn-text span {
  font-size: 13px;
  opacity: 0.9;
  color: var(--iof-white);
}
.iof-home-v2 .iof-contact__btn--line   { background: var(--iof-line); }
.iof-home-v2 .iof-contact__btn--fb     { background: var(--iof-fb); }
.iof-home-v2 .iof-contact__btn--shopee { background: var(--iof-shopee); }
.iof-home-v2 .iof-contact__btn--tel    { background: var(--iof-green-900); }

/* ============================================================
   12. MAP + Address
   ============================================================ */
.iof-home-v2 .iof-map {
  padding: var(--iof-sp-7) 0;
  background: var(--iof-cream);
}
.iof-home-v2 .iof-map__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--iof-sp-5);
  align-items: center;
}
.iof-home-v2 .iof-map__address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  margin: var(--iof-sp-3) 0;
  color: var(--iof-text);
}
.iof-home-v2 .iof-map__details {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--iof-sp-4) 0;
}
.iof-home-v2 .iof-map__details li {
  padding: var(--iof-sp-1) 0;
  border-bottom: 1px solid var(--iof-border);
}
.iof-home-v2 .iof-map__details strong {
  color: var(--iof-green-700);
  display: inline-block;
  min-width: 80px;
  font-family: 'Sarabun', sans-serif;
}
.iof-home-v2 .iof-map__details a {
  color: var(--iof-text);
  text-decoration: none;
}
.iof-home-v2 .iof-map__details a:hover { color: var(--iof-green-700); }

/* ============================================================
   Responsive — tablet & mobile
   ============================================================ */
@media (max-width: 1024px) {
  .iof-home-v2 .iof-story__grid,
  .iof-home-v2 .iof-map__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .iof-home-v2 .iof-hero { height: clamp(420px, 80vh, 560px); }
  .iof-home-v2 .iof-hero__title { font-size: clamp(28px, 7vw, 42px); }
  .iof-home-v2 .iof-hero__overlay {
    background: linear-gradient(180deg, rgba(45,74,37,0.4) 0%, rgba(45,74,37,0.85) 80%);
  }
  .iof-home-v2 .iof-hero__text { max-width: 100%; }
  .iof-home-v2 section { padding-left: var(--iof-sp-2); padding-right: var(--iof-sp-2); }
  .iof-home-v2 .iof-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .iof-home-v2 .iof-process__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .iof-home-v2 .iof-trust__grid { grid-template-columns: 1fr; }
  .iof-home-v2 .iof-process__steps { grid-template-columns: 1fr; }
  .iof-home-v2 .iof-categories__grid,
  .iof-home-v2 .iof-products__grid,
  .iof-home-v2 .iof-articles__grid,
  .iof-home-v2 .iof-news__grid {
    grid-template-columns: 1fr;
  }
}