/*
 * FoodX / Shaktisarvo "Why choose Shaktisarvo" bento grid.
 * Rendered by the foodx/why block in templates/front-page.html.
 * All selectors are fx-why-* prefixed to stay clear of the other sections.
 */

.fx-why{
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:8px 0 64px;
}
.fx-why *{ box-sizing:border-box; }
.fx-why-in{ max-width:1360px; width:calc(100% - 40px); margin:0 auto; }

/* ---------------- heading ---------------- */
.fx-why-head{ text-align:center; max-width:640px; margin:0 auto 26px; }
.fx-why-eyebrow{
  margin:0 0 8px; font-size:12px; font-weight:800;
  letter-spacing:.18em; color:#E58E26;
}
.fx-why-title{
  margin:0 0 12px;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:36px; line-height:1.12; color:#1B4D3E;
}
.fx-why-lede{ margin:0; font-size:15px; line-height:1.6; color:#5A6A62; }

/* ---------------- bento grid ---------------- */
.fx-why-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
}
.fx-why-tall{ grid-column:1; grid-row:1 / span 2; }
.fx-why-stat{ grid-column:2; grid-row:1; }
.fx-why-clean{ grid-column:3; grid-row:1; }
.fx-why-chow{ grid-column:2 / span 2; grid-row:2; }
.fx-why-farm{ grid-column:1; grid-row:3; }
.fx-why-flavours{ grid-column:2 / span 2; grid-row:3; }

/* ---------------- card base ---------------- */
.fx-why-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid #EDEFEC; border-radius:20px;
  padding:24px 26px;
  display:flex; flex-direction:column;
}
.fx-why-h{
  margin:0 0 8px;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:24px; line-height:1.15; color:#1B4D3E;
}
.fx-why-h--sm{ font-size:16px; color:#1B2A24; }
.fx-why-p{ margin:0; font-size:13.5px; line-height:1.6; color:#7C8983; }

.fx-why-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.fx-why-icon--green{ background:#EAF4E4; }
.fx-why-icon--amber{ background:#FBEEDD; }

.fx-why-big{
  margin:0 0 4px;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:38px; line-height:1; color:#1B4D3E;
}

/* ---------------- photo cards ---------------- */
.fx-why-tall{
  background:linear-gradient(165deg,#1B4D3E 0%,#173F34 55%,#0F2C24 100%);
  border-color:transparent; min-height:420px;
  justify-content:flex-start;
}
.fx-why-chow{
  background:linear-gradient(115deg,#E58E26 0%,#D97A18 60%,#C56A10 100%);
  border-color:transparent;
  flex-direction:row; align-items:center; gap:24px;
}
.fx-why-tall .fx-why-h,.fx-why-chow .fx-why-h{ color:#fff; }
.fx-why-tall .fx-why-p,.fx-why-chow .fx-why-p{ color:rgba(255,255,255,.78); }
.fx-why-chow-copy{ flex:1; min-width:0; }

.fx-why-tag{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 14px;
  align-self:flex-start;
  background:rgba(255,255,255,.14); color:#DFF3E8;
  border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:6px 13px; font-size:11px; font-weight:800; letter-spacing:.07em;
}
.fx-why-chow .fx-why-tag{ background:rgba(255,255,255,.2); color:#FFF3E0; border-color:rgba(255,255,255,.32); }

.fx-why-photo{
  display:block; margin:auto auto 0; padding-top:24px;
  width:200px; height:200px; object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
}
.fx-why-photo--chow{
  margin:0; padding:0; flex:none;
  width:180px; height:180px;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.3));
}

/* ---------------- flavours card ---------------- */
.fx-why-flavours{
  background:#F7F9F5;
  flex-direction:row; align-items:center; gap:28px;
}
.fx-why-flavours-copy{ flex:1; min-width:0; }
.fx-why-chips{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fx-why-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #E4E9E1; border-radius:999px;
  padding:7px 15px; font-size:13px; font-weight:700; color:#1B2A24;
}
.fx-why-chip-dot{ width:9px; height:9px; border-radius:50%; flex:none; }

.fx-why-cta{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  background:#4CBB17; color:#fff; text-decoration:none;
  border-radius:999px; padding:13px 24px;
  font-size:14px; font-weight:800;
  transition:background .18s,transform .15s;
}
.fx-why-cta:hover,.fx-why-cta:focus-visible{ background:#3FA012; color:#fff; transform:translateY(-2px); }

/* ======================= RESPONSIVE ======================= */
@media (max-width:1000px){
  .fx-why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .fx-why-tall{ grid-column:1; grid-row:1 / span 2; }
  .fx-why-stat{ grid-column:2; grid-row:1; }
  .fx-why-clean{ grid-column:2; grid-row:2; }
  .fx-why-chow{ grid-column:1 / span 2; grid-row:3; }
  .fx-why-farm{ grid-column:1 / span 2; grid-row:4; }
  .fx-why-flavours{ grid-column:1 / span 2; grid-row:5; }
  .fx-why-title{ font-size:30px; }
}

@media (max-width:700px){
  .fx-why-grid{ grid-template-columns:1fr; }
  .fx-why-tall,.fx-why-stat,.fx-why-clean,
  .fx-why-chow,.fx-why-farm,.fx-why-flavours{ grid-column:1; grid-row:auto; }
  .fx-why-tall{ min-height:0; }
  .fx-why-chow,.fx-why-flavours{ flex-direction:column; align-items:flex-start; }
  .fx-why-photo{ width:170px; height:170px; }
  .fx-why-photo--chow{ width:150px; height:150px; margin:18px auto 0; align-self:center; }
  .fx-why-cta{ width:100%; justify-content:center; margin-top:18px; }
}

@media (max-width:560px){
  .fx-why{ padding-bottom:48px; }
  .fx-why-in{ width:calc(100% - 28px); }
  .fx-why-card{ padding:20px 20px; border-radius:18px; }
  .fx-why-title{ font-size:26px; }
  .fx-why-h{ font-size:20px; }
  .fx-why-big{ font-size:32px; }
}

@media (prefers-reduced-motion:reduce){
  .fx-why-cta{ transition:none !important; }
  .fx-why-cta:hover{ transform:none; }
}