/**
 * ShopKart Category Grid — Frontend Styles
 *
 * All visual values that the widget exposes as Elementor controls
 * are pushed via Elementor's `selectors` option, so this file just
 * provides structural defaults + the overlay gradient + hover states.
 */

.sksa-cg {
  /* CSS variables overridden inline by Elementor controls */
  --sksa-cg-overlay-h: 35%;
  --sksa-cg-overlay-o: 0.92;
  width: 100%;
  box-sizing: border-box;
}

/* ============ GRID ============ */

.sksa-cg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* default desktop, overridden by widget */
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sksa-cg-tile-wrap {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ TILE ============ */

.sksa-cg-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: #efe9e0; /* fallback while image loads */
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sksa-cg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover: tile lift (gated by .is-lift class) */
.sksa-cg-grid.is-lift .sksa-cg-tile:hover {
  transform: translateY(-3px);
}

/* Hover: image zoom (gated by .is-zoom class) */
.sksa-cg-grid.is-zoom .sksa-cg-tile:hover .sksa-cg-img {
  transform: scale(1.07);
}

/* ============ DARK FADE OVERLAY ============
   11-stop gradient with exponential decay tail in the top region — the
   approach to alpha 0 is gradual enough that the boundary at the top of
   the overlay is genuinely imperceptible. All stops are proportional to
   --sksa-cg-overlay-h so the fade always fits within the selected zone. */
.sksa-cg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--sksa-cg-overlay-o))                                                    0%,
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.91))   calc(var(--sksa-cg-overlay-h) * 0.25),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.72))   calc(var(--sksa-cg-overlay-h) * 0.50),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.48))   calc(var(--sksa-cg-overlay-h) * 0.65),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.28))   calc(var(--sksa-cg-overlay-h) * 0.75),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.14))   calc(var(--sksa-cg-overlay-h) * 0.83),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.06))   calc(var(--sksa-cg-overlay-h) * 0.89),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.025))  calc(var(--sksa-cg-overlay-h) * 0.93),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.008))  calc(var(--sksa-cg-overlay-h) * 0.96),
    rgba(0, 0, 0, calc(var(--sksa-cg-overlay-o) * 0.002))  calc(var(--sksa-cg-overlay-h) * 0.98),
    rgba(0, 0, 0, 0)                                                       var(--sksa-cg-overlay-h)
  );
}

/* ============ TITLE ============
   Defaults below are overridden by Elementor's typography group control.
   `padding-bottom` and `color` are set by individual controls via
   selectors → so just provide structural defaults here. */
.sksa-cg-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 22px;
  text-align: center;
  color: #ffffff;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.25;
  margin: 0;
  display: block;
  pointer-events: none;
}

/* ============ ACCESSIBILITY / FOCUS ============ */

.sksa-cg-tile:focus-visible {
  outline: 2px solid #c9a063;
  outline-offset: 3px;
}