/* ==========================================================================
   Page: branches  (site/branches/index — the only branch page)
   --------------------------------------------------------------------------
   .br-jump      city chips in the page header (jump to a card)
   .br-country   a country: accent dot · name · count · 7-line rule
   .br-card      full branch card (#slug anchor): photo, city + .br-status,
                 address/phones, expandable week hours (.br-hours), actions;
                 the و rings in the country accent open on hover
   ========================================================================== */

/* ── Status pill ─────────────────────────────────────────────────────────── */
.br-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3em 0.9em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
}
.br-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-deep); }
.br-status.is-open { border-color: var(--second); color: var(--second-text); }
.br-status.is-open::before { background: var(--second); box-shadow: 0 0 0 3px var(--second-tint-strong); }

/* ── Header chips ────────────────────────────────────────────────────────── */
.br-jump { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.br-jump__chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 40px; padding: 0.4em 1.1em;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--card); color: var(--ink);
    font-size: var(--fs-sm); text-decoration: none;
    transition: border-color var(--dur) var(--ease-out);
}
.br-jump__chip:hover { color: var(--ink); border-color: var(--ink); }

/* ── Countries ───────────────────────────────────────────────────────────── */
.br-countries { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.br-country__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.br-country__name { font-size: var(--fs-2xl); }
.br-country__count { color: var(--ink-faint); font-size: var(--fs-sm); white-space: nowrap; }
.br-country__rule { flex: 1; min-width: 40px; }

.br-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }   /* cards in a row share one height */

/* ── Card ────────────────────────────────────────────────────────────────── */
.br-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--card);
    scroll-margin-top: calc(var(--header-h) + var(--space-6));
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.br-card:hover { border-color: var(--ink); }
.br-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

.br-card__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--accent); background: var(--panel); }
.br-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.br-card:hover .br-card__photo img { scale: 1.05; }

.br-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
.br-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.br-card__city { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.2; }

.br-card__info { display: grid; gap: var(--space-2); min-height: 4.6em; align-content: start; font-size: var(--fs-sm); }
.br-card__info li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-soft); line-height: 1.7; }
.br-card__info .icon { margin-top: 0.3em; color: var(--second-text); }
.br-card__info a { color: var(--ink); text-decoration: none; }
.br-card__info a:hover { color: var(--second-text); }

/* Hours — native <details>, today in the summary */
.br-hours { border-block: 1px solid var(--line); }
.br-hours summary {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 44px; cursor: pointer; list-style: none;
    font-size: var(--fs-sm);
}
.br-hours summary::-webkit-details-marker { display: none; }
.br-hours summary .icon { color: var(--second-text); }
.br-hours__today { flex: 1; }
.br-hours__more { color: var(--ink-faint); font-size: var(--fs-xs); }
.br-hours__chev { color: var(--ink-faint) !important; transition: transform var(--dur) var(--ease-out); }
.br-hours[open] .br-hours__chev { transform: rotate(180deg); }
.br-week { display: grid; padding-bottom: var(--space-3); font-size: var(--fs-sm); }
.br-week li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.35em 0.6em; border-radius: var(--r-sm); }
.br-week li.is-today { background: var(--panel); font-weight: 600; }
.br-week li.is-closed bdi { color: var(--ink-faint); }
.br-closures__label { margin-top: var(--space-2); color: var(--ink-faint); font-size: var(--fs-xs); }
.br-closures { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); font-size: var(--fs-sm); }
.br-closures li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

.br-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }   /* buttons line up at the bottom */

/* the و rings in the country accent, peeking from the corner under the photo */
.br-card__rings { position: absolute; z-index: -1; inset-inline-end: -64px; bottom: -64px; width: 150px; height: 150px; pointer-events: none; }
.br-card__rings i {
    position: absolute;
    inset: calc(var(--k, 0) * 16px);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    opacity: 0.45;
    transform: scale(0.85);
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--k, 0) * 60ms);
}
.br-card__rings i:nth-child(2) { --k: 1; }
.br-card__rings i:nth-child(3) { --k: 2; }
.br-card:hover .br-card__rings i { transform: scale(1.12); opacity: 0.9; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) { .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  {
    .br-grid { grid-template-columns: 1fr; }
    .br-country__rule { display: none; }
    .br-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
    .br-jump__chip { flex-shrink: 0; }
    .br-card__actions .btn { flex: 1; }
}