/* ==========================================================================
   CATEGORY TILES (home page) — a bento mosaic of photo tiles of different sizes, each
   with a frosted-glass label bar: coloured emoji badge, name, live product count, arrow.
   Loaded after style.css and only overrides the category cards. To go back to the
   original cards, remove this file's <link> (css/style.css hides the extra sub-line and
   arrow that js/app.js adds).
   ========================================================================== */

/* ---------- the mosaic ---------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
    grid-auto-flow: dense;                 /* small tiles fill any gap the big ones leave */
    gap: 16px;
}
/* sizes by position (order of the Categories tab):
     1 = big hero (2x2), 3 = tall (1x2), 5 and 9 = wide (2x1), the rest single tiles */
.category-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.category-card:nth-child(3) { grid-row: span 2; }
.category-card:nth-child(5),
.category-card:nth-child(9) { grid-column: span 2; }

/* ---------- a tile ---------- */
.category-card {
    position: relative;
    display: block;
    isolation: isolate;
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    text-align: start;
    background: #0c2340;
    box-shadow: 0 8px 22px rgba(12, 35, 64, 0.18);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.3s ease;
}
.category-card:hover,
.category-card:focus-visible {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.95), 0 22px 40px rgba(0, 105, 113, 0.38);
    outline: none;
}

/* the photo fills the whole tile */
.category-card__image-wrap {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    background: #0c2340;
}
.category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.category-card:hover .category-card__image { transform: scale(1.1); }
/* a category with no photo shows the logo, centred on a light panel */
.category-card__image.img-fallback { object-fit: contain; padding: 14% 14% 30%; background: #fff; }

/* a light fade at the bottom to ground the label bar on any photo */
.category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(6, 24, 47, 0.5) 0%, rgba(6, 24, 47, 0) 45%);
}

/* ---------- the frosted label bar ---------- */
.category-card__name {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    padding-inline-end: 54px;                      /* room for the arrow */
    border-radius: 20px;
    color: #fff;
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(8, 26, 52, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover .category-card__name,
.category-card:focus-visible .category-card__name {
    transform: translateY(-3px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)),
        rgba(8, 26, 52, 0.5);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* each category has its own colour on the emoji badge */
.category-card__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: var(--cat-color, #ffa41c);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-shadow: none;
    transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.category-card:hover .category-card__icon { transform: rotate(-10deg) scale(1.12); }
.category-card[data-cat="chicken"]    { --cat-color: #f4a300; }
.category-card[data-cat="meat"]       { --cat-color: #d62839; }
.category-card[data-cat="dairy"]      { --cat-color: #f2c14e; }
.category-card[data-cat="vegetables"] { --cat-color: #2a9d6f; }
.category-card[data-cat="bakery"]     { --cat-color: #e08b3c; }
.category-card[data-cat="seafood"]    { --cat-color: #1aa7d6; }
.category-card[data-cat="fries"]      { --cat-color: #f2b01e; }
.category-card[data-cat="sauces"]     { --cat-color: #a8552a; }
.category-card[data-cat="desserts"]   { --cat-color: #9b51e0; }
.category-card[data-cat="offers"]     { --cat-color: #ff5a36; }

/* two lines in the bar: the name, then "44 items" */
.category-card__label { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.category-card__title { font-size: 15.5px; font-weight: 900; line-height: 1.25; }
.category-card__sub {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* round arrow button at the end of the bar (white; gold on hover) */
.category-card__go {
    display: block;
    position: absolute;
    z-index: 3;                                    /* above the frosted bar, not blurred by it */
    bottom: 22px;
    inset-inline-end: 22px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, background 0.25s ease;
}
.category-card__go::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -6px;
    border-right: 3px solid #0c2340;
    border-bottom: 3px solid #0c2340;
    transform: rotate(-45deg);                     /* points right */
}
html[dir="rtl"] .category-card__go::before { margin-left: -3px; transform: rotate(135deg); }   /* points left */
.category-card:hover .category-card__go,
.category-card:focus-visible .category-card__go {
    transform: scale(1.12);
    background: linear-gradient(135deg, #ffd166, var(--color-citrus) 60%, #ff7a2f);
}

/* ---------- bigger labels on the bigger tiles ---------- */
.category-card:nth-child(1) .category-card__title { font-size: 28px; }
.category-card:nth-child(1) .category-card__sub { font-size: 14px; }
.category-card:nth-child(1) .category-card__icon { width: 54px; height: 54px; font-size: 27px; }
.category-card:nth-child(1) .category-card__name { padding: 13px 16px; padding-inline-end: 66px; }
.category-card:nth-child(1) .category-card__go { width: 42px; height: 42px; bottom: 28px; inset-inline-end: 28px; }
.category-card:nth-child(3) .category-card__title,
.category-card:nth-child(5) .category-card__title,
.category-card:nth-child(9) .category-card__title { font-size: 19px; }

/* ---------- Offers stands out: gold ring, a sweeping light, a warm bar ---------- */
.category-card[data-cat="offers"] { box-shadow: 0 0 0 3px #ffd166, 0 12px 30px rgba(255, 164, 28, 0.5); }
.category-card[data-cat="offers"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: category-shine 4.5s ease-in-out infinite;
}
.category-card[data-cat="offers"] .category-card__name {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08)),
        rgba(214, 112, 0, 0.55);
    border-color: rgba(255, 224, 150, 0.85);
}
@keyframes category-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }

/* ---------- entrance: tiles rise in one after another (class added by js/app.js) ---------- */
.category-grid--reveal .category-card { opacity: 0; transform: translateY(26px) scale(0.96); }
.category-grid--reveal .category-card.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease calc(var(--i, 0) * 70ms), transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) calc(var(--i, 0) * 70ms), box-shadow 0.3s ease;
}
.category-grid--reveal .category-card.is-in:hover,
.category-grid--reveal .category-card.is-in:focus-visible { transform: translateY(-7px); transition-delay: 0s; }

/* ---------- tablets: 2 columns ---------- */
@media (max-width: 860px) {
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; }
    .category-card { border-radius: 22px; }
    .category-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .category-card:nth-child(3) { grid-row: span 2; }
    .category-card:nth-child(5),
    .category-card:nth-child(9) { grid-column: span 2; }
}

/* ---------- phones: a 2-column mosaic ---------- */
@media (max-width: 640px) {
    .category-grid { grid-auto-rows: 150px; gap: 10px; }
    .category-card__name { inset-inline: 8px; bottom: 8px; gap: 7px; padding: 7px 8px; border-radius: 18px; }
    .category-card__go { display: none; }          /* the whole tile is tappable, so the name gets the room */
    .category-card__icon { width: 32px; height: 32px; font-size: 16px; }
    .category-card__title,
    .category-card:nth-child(3) .category-card__title,
    .category-card:nth-child(5) .category-card__title,
    .category-card:nth-child(9) .category-card__title { font-size: 14.5px; }
    .category-card__sub { font-size: 11px; }
    .category-card:nth-child(1) .category-card__title { font-size: 21px; }
    .category-card:nth-child(1) .category-card__icon { width: 44px; height: 44px; font-size: 22px; }
    .category-card:nth-child(1) .category-card__name { padding: 10px 12px; padding-inline-end: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .category-card, .category-card__image, .category-card__go, .category-card__icon, .category-card__name { transition: none; }
    .category-card[data-cat="offers"]::before { animation: none; }
}