/* ============================================================================
   Catalogy — service landing (home) additions.

   `app.css` is the design's own bundle, kept byte-for-byte so the page renders
   exactly as it was designed. Everything the app needs on top of it — the LTR
   mirror of the design's physical-side decorations and the visit-count pulse —
   lives here so the bundle stays replaceable.
   ========================================================================== */

/* ── Section rhythm ──────────────────────────────────────────────────────────
   `app.css` is an atomic build: it carries only the utilities the mockup
   happened to use, so any spacing class it never emitted silently does nothing.
   The landing's vertical rhythm therefore lives here, on the page's own
   landmarks, where regenerating that bundle cannot drop it.

   A flex column also gives every joint the same measured gap instead of
   whatever the adjacent sections' own margins happen to collapse to. */
.home-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 68px);
}

/* The hero carries a little padding of its own on top of the shared gap: it is
   the one section meant to read as open space. */
.home-hero {
    padding-block: clamp(8px, 2vw, 26px);
}

/* ── Service grid: six tiles ─────────────────────────────────────────────────
   The bundle was drawn for five. Its four-column desktop grid leaves the sixth
   tile alone on a row beneath the 2x2 featured card, so the breakpoint drops to
   three columns: featured (2x2) plus five singles closes a 3x3 exactly.

   On a phone the two-column grid has the same problem one row lower, so the
   last tile runs full width and the grid is bookended by two wide cards. */
@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-card--full {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {

    .service-card--wide,
    .service-card--full {
        grid-column: span 2;
    }
}

/* A band, not a stretched square: the full-width tile lays its icon, text and
   arrow out in a row, so it stays short whatever the column count. */
.service-card--full {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 0;
}

.service-card--full h3 {
    margin-top: 0;
}

.service-card--full .service-arrow {
    position: static;
    margin-inline-start: auto;
    flex: none;
}

/* ── Sweets tone ─────────────────────────────────────────────────────────────
   The mockup shipped five palettes and drew the rose one for cosmetics, which
   now has its tile back. Sweets takes this amber, closer to the brand gold and
   a better read for حلويات than rose was. */
.tone-sweets .service-icon {
    color: #9c6f1c;
    background: linear-gradient(135deg, #fbeed0, #eed49a);
}

/* Delivery is the courier's own tile, so it wears the brand blue rather than
   one of the five catalogue palettes. */
.tone-delivery .service-icon {
    color: #2b6382;
    background: linear-gradient(135deg, #dbe9f4, #b2cde2);
}

/* ── LTR mirror ──────────────────────────────────────────────────────────────
   The bundle positions its decorations with physical `left`/`right` because it
   was built RTL-only. English readers get the same composition mirrored. */
[dir="ltr"] .gold-circle { right: auto; left: -35px; }
[dir="ltr"] .white-circle { left: auto; right: 15%; }
[dir="ltr"] .service-arrow { left: auto; right: 20px; transform: scaleX(-1); }
[dir="ltr"] .journey-dot { right: auto; left: 0; }
[dir="ltr"] .journey-delivery { right: auto; left: -2px; }
[dir="ltr"] .footer-gold { left: auto; right: -50px; }
[dir="ltr"] .text-right { text-align: left; }

/* ── Visit-count pulse ───────────────────────────────────────────────────────
   Today's homepage visits lead, the all-time total trails behind. Sits under
   the wordmark in the brand header, so it is painted on the panel gradient. */
.home-pulse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 700;
    color: #ffffffb8;
}

.home-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #7bd88f;
    box-shadow: 0 0 0 4px #7bd88f33;
    flex: none;
}

.home-pulse-total {
    padding-inline-start: 6px;
    border-inline-start: 1px solid #ffffff33;
    color: #ffffff80;
    font-weight: 500;
}

/* ── Directory shortcut ──────────────────────────────────────────────────────
   The service grid is the primary way in; this keeps the full merchant
   directory one tap away from the landing. */
.directory-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #123a5c;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    transition: all .2s;
}

.directory-link:hover {
    background: #2f6fa8;
    transform: translateY(-2px);
}