/* =========================
   ABOUT PAGE (Professional)
========================= */

*,
*::before,
*::after { box-sizing: border-box; }

.about-hero{
  padding: 120px 8% 70px;
  background:
    linear-gradient(135deg, rgba(31,93,58,.88), rgba(200,138,26,.60)),
    url("/assets/images/honey-1.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.about-hero::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}

.about-hero .hero-content{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 18px 16px;
}

.about-hero h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: .2px;
}

.about-hero p{
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.9;
  font-size: 16px;
  opacity: .95;
}

/* ===== Section wrapper ===== */
.about-section{
  padding: 70px 8%;
  background: #fdfbf7;
  display: grid;
  gap: 22px;
}

/* ===== Card base ===== */
.about-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  padding: 26px 24px;
}

.about-card h2{
  margin: 0 0 12px;
  font-size: 20px;
  color: #1f5d3a;
  font-weight: 900;
}

.about-card p{
  margin: 0 0 12px;
  color: #444;
  line-height: 1.9;
  font-size: 15px;
}
.about-card p:last-child{ margin-bottom: 0; }

/* ===== Card with image layout ===== */
.about-card.with-image{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* image | text (RTL friendly) */
  gap: 18px;
  align-items: center;
}

.about-card.with-image .about-image{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #f6f6f6;
  aspect-ratio: 4 / 3;
}

.about-card.with-image .about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Small highlights (optional) ===== */
.about-highlights{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.highlight{
  background: linear-gradient(180deg, #fff, #fbfbfb);
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
  text-align: center;
}

.highlight .num{
  font-size: 22px;
  font-weight: 900;
  color: #c88a1a;
  margin-bottom: 6px;
}

.highlight .label{
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}

/* ===== Gallery ===== */
.about-gallery{
  padding: 0 8% 85px;
  background: #fdfbf7;
}

.about-gallery h2{
  text-align: center;
  margin: 10px 0 18px;
  color: #1f5d3a;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gallery-grid img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover:hover){
  .gallery-grid img:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.10);
  }
}

/* ===== Tablet ===== */
@media (max-width: 992px){
  .about-hero{ padding: 110px 6% 60px; }
  .about-section{ padding: 60px 6%; }
  .about-gallery{ padding: 0 6% 75px; }

  .about-card.with-image{
    grid-template-columns: 1fr;
  }

  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-grid img{ height: 200px; }

  .about-highlights{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  .about-hero{ padding: 90px 5% 45px; }
  .about-section{ padding: 45px 5%; gap: 16px; }
  .about-gallery{ padding: 0 5% 65px; }

  .about-card{ padding: 20px 16px; border-radius: 16px; }
  .about-card h2{ font-size: 18px; }
  .about-card p{ font-size: 14px; }

  .gallery-grid{
    grid-template-columns: 1fr;
  }
  .gallery-grid img{ height: 210px; }

  .about-highlights{
    grid-template-columns: 1fr;
  }
}