/* =========================================================
   GARLIC FLAKES – PAGE SPECIFIC STYLES
   SCOPED CSS (No Conflict With Any Other Page)
   ========================================================= */

/* ===== BASIC PAGE SPACING ===== */
.garlic-flakes-page {
  background: var(--cream);
 .garlic-dried-page {
  background: var(--cream);
  padding-top: 0 !important;
}

}

/* =========================================================
   HERO SECTION
   ========================================================= */
.garlic-flakes-page .hero-golden {
  position: relative;
  width: 100%;
  height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--light);
  background: url("../images/garlic/garlic-flakes-hero.png") center/cover no-repeat;
  overflow: hidden;
}

.garlic-flakes-page .hero-golden::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 28, 46, 0.55),
    rgba(13, 28, 46, 0.35)
  );
  z-index: 0;
}

.garlic-flakes-page .hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 6%;
}

.garlic-flakes-page .hero-golden h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  text-shadow: 0 0 8px rgba(0,0,0,0.35);
}

.garlic-flakes-page .hero-golden p.sub {
  color: #f8f5ef;
  font-size: 18px;
  opacity: 0.95;
}

/* =========================================================
   BASIC TEXT SECTIONS (.section)
   ========================================================= */
.garlic-flakes-page .section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 8%;
  text-align: center;
}

.garlic-flakes-page .section h2 {
  color: var(--gold);
  font-size: 32px;
  margin-bottom: 20px;
}

.garlic-flakes-page .section p,
.garlic-flakes-page .section li {
  font-size: 18px;
  line-height: 1.8;
  color: var(--navy);
}

/* =========================================================
   TWO COLUMN LAYOUT (IMAGE + TEXT)
   ========================================================= */
.garlic-flakes-page .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.garlic-flakes-page .two-col img {
  width: 100%;
  border-radius: 14px;

}

/* Mobile */
@media (max-width: 900px) {
  .garlic-flakes-page .two-col {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* =========================================================
   APPLICATIONS (Image Right)
   ========================================================= */
.garlic-flakes-page .applications-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 80px 10%;
}

.garlic-flakes-page .applications-section .feature-text {
  flex: 1;
}

.garlic-flakes-page .applications-section .feature-image {
  flex: 1;
  text-align: right;
}

.garlic-flakes-page .applications-section img {
  width: 90%;
  max-width: 420px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .garlic-flakes-page .applications-section {
    padding: 50px 5%;
  }


  .garlic-flakes-page .applications-section img {
    margin: 0 auto;
  }

  .garlic-flakes-page .applications-section .feature-image {
  text-align: center;
}

}
/* ===== FIX TEXT STYLE FOR APPLICATIONS (Garlic Flakes Page) ===== */
.garlic-flakes-page .applications-section .feature-text h2 {
  color: var(--gold);
  font-size: 32px;
  margin-bottom: 15px;
  font-weight: 700;
}

.garlic-flakes-page .applications-section .feature-text p,
.garlic-flakes-page .applications-section .feature-text li {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   PACKAGING SECTION (Parallax)
   ========================================================= */
.garlic-flakes-page #packaging-flakes {
  position: relative;
  background-image: url("../images/garlic/background-flakes.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* --- پارالاکس واقعی --- */
  background-attachment: fixed;

  padding: 120px 10%;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.garlic-flakes-page #packaging-flakes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13,20,30,0.55);
  z-index: 0;
}

.garlic-flakes-page #packaging-flakes-text {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: auto;
}

.garlic-flakes-page #packaging-flakes-text h2 {
  font-size: 34px;
  margin-bottom: 15px;
  color: var(--gold); 
/* اگر متغیر نداشتی: #C6A25A */

}

.garlic-flakes-page #packaging-flakes-text p {
  font-size: 18px;
  line-height: 1.8;
}

/* ===== MOBILE FIX (Parallax is disabled on phones automatically) ===== */
@media (max-width: 768px) {
  .garlic-flakes-page #packaging-flakes {
    background-attachment: scroll; /* جلوگیری از باگ موبایل */
    padding: 80px 5%;
  }
}

/* =========================================================
   GALLERY SECTION – FIXED 3 COLUMNS
   ========================================================= */

.garlic-flakes-page .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* دقیقاً ۳ ستون */
  gap: 25px;
  margin-top: 40px;
  padding: 0 8%;
}

.garlic-flakes-page .gallery img,
.garlic-flakes-page .gallery video {
  width: 100%;
  height: 280px;          /* ارتفاع استاندارد */
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ————— Mobile ————— */
@media (max-width: 768px) {
  .garlic-flakes-page .gallery {
    grid-template-columns: 1fr;  /* روی موبایل یک ستونه */
    gap: 20px;
    padding: 0 5%;
  }

  .garlic-flakes-page .gallery img,
  .garlic-flakes-page .gallery video {
    height: 220px;
  }
}

/* =========================================================
   RESPONSIVE GLOBAL FIXES
   ========================================================= */
@media (max-width: 768px) {
  .garlic-flakes-page .hero-golden {
    height: 50vh;
  }
}