/* ============================================================
   Elementor App Tiles — app-tiles.css
   Inherits Elementor / WordPress global typography & colours
   via CSS custom properties set in the Elementor Kit.
   ============================================================ */

/* ── Grid container ───────────────────────────────────────── */
.eat-grid {
  --eat-cols: 5;
  --eat-gap: 24px;

  display: grid;
  grid-template-columns: repeat(var(--eat-cols), 1fr);
  gap: var(--eat-gap);
  box-sizing: border-box;
  width: 100%;
}

/* ── Responsive breakpoints (Elementor also injects its own
      breakpoint styles via selectors, these are safe fallbacks) */
@media (max-width: 1024px) {
  .eat-grid { --eat-cols: 4; }
}
@media (max-width: 767px) {
  .eat-grid { --eat-cols: 3; }
}
@media (max-width: 480px) {
  .eat-grid { --eat-cols: 3; }
}

/* ── Individual tile ──────────────────────────────────────── */
.eat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

/* ── Icon shell ───────────────────────────────────────────── */
.eat-icon {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 22%;            /* iOS default; overridden by Elementor controls */
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Fluid mode: fill the grid column */
.eat-icon--fluid {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ── Hover scale (class toggled by widget option) ─────────── */
.eat-tile--hoverable:hover .eat-icon {
  transform: scale(1.08);
}

/* ── Tap bounce (mobile) ──────────────────────────────────── */
.eat-tile--bounce:active .eat-icon {
  animation: eat-bounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes eat-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.88); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── Background span (for gradient / svg tiles) ───────────── */
.eat-icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* ── Photo / image icon ───────────────────────────────────── */
.eat-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* autocrop to fill square */
  object-position: center center;
  display: block;
}

/* ── SVG / font-icon inner ───────────────────────────────── */
.eat-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 55%;         /* relative to icon size; overridden by control */
  line-height: 1;
  pointer-events: none;
}

.eat-icon-inner svg,
.eat-icon-inner i {
  width: 1em;
  height: 1em;
  font-size: inherit;
  fill: currentColor;
}

/* Gradient text label (emoji / symbol fallback) */
.eat-gradient-text {
  font-size: 45%;
  font-weight: 700;
}

/* ── Notification badge ───────────────────────────────────── */
.eat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: #FF3B30;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
  line-height: 1;
  /* Inherit font from Elementor kit */
  font-family: var(--e-global-typography-accent-font-family, inherit);
}

/* ── App label ─────────────────────────────────────────────── */
.eat-label {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;

  /* Inherit Elementor global text colour & font */
  color: var(--e-global-color-text, #333333);
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-weight: var(--e-global-typography-text-font-weight, 400);
}

/* ── Dark-mode awareness ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .eat-label {
    color: var(--e-global-color-text, #e0e0e0);
  }
  .eat-badge {
    box-shadow: 0 0 0 2px #1c1c1e;
  }
}

/* ── Elementor editor preview shims ──────────────────────── */
.elementor-editor-active .eat-tile {
  pointer-events: none;   /* prevent navigation inside editor */
}