/* ==========================================================================
   SunTeam v2 — ecosystem banner grid (home + unit landings)
   ========================================================================== */
.eco { padding: 22px 0 8px; }
.eco-head { display: flex; justify-content: flex-start; margin-bottom: 14px; }
.eco-grid { display: grid; gap: 16px; }
.eco-grid + .eco-grid { margin-top: 16px; }
.eco-a { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.eco-b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eco-tile { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--surface-sunk); box-shadow: var(--sh-1); align-self: stretch; isolation: isolate; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.eco-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.eco-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
a.eco-tile:hover img { transform: scale(1.04); }
/* group 1: 8 + 4, then 6 + 6 (aspect ratios of the original banners) */
.eco-shopino { grid-column: span 8; aspect-ratio: 3251 / 1780; }
.eco-media { grid-column: span 4; aspect-ratio: 1584 / 1772; }
.eco-leaders, .eco-persian { grid-column: span 6; aspect-ratio: 2439 / 888; }
/* group 2: large tile over two rows + square tiles, then wide + two squares */
.b-loyalty { grid-column: span 2; grid-row: span 2; }
.b-sq { aspect-ratio: 1168 / 1022; }
.b-charity { grid-column: span 2; aspect-ratio: 2439 / 1022; }
.eco-go { position: absolute; bottom: 12px; left: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(17,19,24,.85); color: #fff; opacity: 0; transform: scale(.8); transition: all .3s var(--ease); }
a.eco-tile:hover .eco-go { opacity: 1; transform: none; }
.eco-soon { position: absolute; bottom: 12px; left: 12px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.88); backdrop-filter: blur(6px); font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); box-shadow: var(--sh-1); }
.eco-soon { transition: opacity .25s; }
a.eco-tile:hover .eco-soon { opacity: 0; }
@media (max-width: 760px) {
  .eco-grid { gap: 10px; }
  .eco-grid + .eco-grid { margin-top: 10px; }
  .eco-tile { border-radius: 16px; align-self: start; }
  .eco-a { grid-template-columns: 1fr 1fr; }
  .eco-shopino { grid-column: span 2; }
  .eco-media { grid-column: span 2; aspect-ratio: 1584 / 1772; }
  .eco-leaders, .eco-persian { grid-column: span 2; }
  .eco-b { grid-template-columns: 1fr 1fr; }
  .b-loyalty { grid-column: span 2; grid-row: auto; aspect-ratio: 2439 / 2126; }
  .b-charity { grid-column: span 2; }
}
.eco-tile.is-current { box-shadow: 0 0 0 3px var(--sun-400), var(--sh-2); }
.eco-here { position: absolute; top: 12px; right: 12px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--sun-400); color: #111318; font-size: var(--fs-xs); font-weight: 800; box-shadow: var(--sh-1); }