/* =============================================================================
   Partners directory - Partners/Index[.ar].cshtml + Partners/_PartnerCard.cshtml
   Shared by both language views so the two can never drift stylistically.
   Tokens mirror css/en/styles.scss ($primary #41beff, $secondary #010101) and
   css/submissions.css - no palette is invented here.
   Logical properties (margin-inline-*, padding-inline-*) throughout so the
   Arabic RTL view needs no overrides beyond the one mirrored arrow.
   ========================================================================== */

.partners {
    --pt-surface: #fff;
    --pt-border: #e6edf3;
    --pt-ink: #101828;
    --pt-muted: #667085;
    --pt-primary: #41beff;
    --pt-navy: #020f33;

    --pt-radius: 20px;
    --pt-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .18);
    --pt-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 20px 44px -18px rgba(16, 24, 40, .30);
}

/* ------------------------------------------------------------ city chips -- */
.partners__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-end: 32px;
}

.partners__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 16px;
    border: 1px solid var(--pt-border);
    border-radius: 999px;
    background: var(--pt-surface);
    color: var(--pt-ink);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.partners__chip:hover {
    border-color: var(--pt-primary);
    color: var(--pt-navy);
}

.partners__chip:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

.partners__chip.is-active {
    background: var(--pt-navy);
    border-color: var(--pt-navy);
    color: #fff;
}

.partners__chip-count {
    margin-inline-start: 8px;
    color: var(--pt-muted);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
}

.partners__chip.is-active .partners__chip-count { color: rgba(255, 255, 255, .65); }

/* ------------------------------------------------------------------ grid -- */
.partners__grid {
    display: grid;
    /* 280px is deliberate: it is the widest min that still fits 3 tracks inside
       the .col-xl-10 column (~926px) - 300px drops the page to 2-up. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 28px 24px;
    /* Cards stretch to the tallest in the row (grid default) on purpose: ragged
       bottoms plus a mixed media aspect made the grid read as broken. Uniform
       card height + one media aspect keeps every title on the same baseline. */
}

/* ------------------------------------------------------------------ card -- */
.partners__card {
    display: flex;
    flex-direction: column;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--pt-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* display:flex would otherwise beat the [hidden] the chip filter sets. */
.partners__card[hidden] { display: none; }

/* Only a card that actually goes somewhere gets the clickable affordances. */
.partners__card--linked:hover,
.partners__card--linked:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--pt-shadow-hover);
    border-color: rgba(65, 190, 255, .55);
}

.partners__card--linked:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 3px;
}

.partners__card--linked:active { transform: translateY(-1px); }

/* ----------------------------------------------------------------- media -- */
.partners__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f6f9;
}

.partners__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.partners__card--linked:hover .partners__img,
.partners__card--linked:focus-visible .partners__img { transform: scale(1.04); }

/* .partners__media--empty is a styling hook for picture-less leads. It must keep
   the same aspect-ratio as a real photo - a shorter placeholder knocks every
   title in the row off its baseline and the grid reads as broken. */

/* No picture on the lead - initial on a brand wash instead of a broken frame.
   Navy at low opacity rather than solid brand blue: it sits back as a texture
   instead of shouting for attention next to real photography. */
.partners__img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dceffc 0%, #eff7fd 55%, #f7fbfe 100%);
    color: rgba(2, 15, 51, .32);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ------------------------------------------------------------------ body -- */
.partners__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.partners__name {
    margin: 0;
    color: var(--pt-navy);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.partners__place {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pt-navy);
    font-size: .8125rem;
    font-weight: 500;
}

.partners__pin {
    flex: 0 0 auto;
    color: var(--pt-primary);
}

.partners__address {
    margin: 0;
    color: var(--pt-muted);
    font-size: .8125rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------- maps bar -- */
.partners__maps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: auto;
    padding: 13px 20px;
    border-block-start: 1px solid var(--pt-border);
    color: var(--pt-muted);
    font-size: .8125rem;
    font-weight: 600;
    transition: color .2s ease, background-color .2s ease;
}

.partners__card--linked:hover .partners__maps,
.partners__card--linked:focus-visible .partners__maps {
    background: rgba(65, 190, 255, .08);
    color: var(--pt-primary);
}

.partners__maps-icon {
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.partners__card--linked:hover .partners__maps-icon,
.partners__card--linked:focus-visible .partners__maps-icon { transform: translate(2px, -2px); }

/* Diagonal arrow points away from the text in RTL too. */
[dir="rtl"] .partners__maps-icon { transform: scaleX(-1); }

[dir="rtl"] .partners__card--linked:hover .partners__maps-icon,
[dir="rtl"] .partners__card--linked:focus-visible .partners__maps-icon { transform: scaleX(-1) translate(2px, -2px); }

/* ----------------------------------------------------------- empty states -- */
.partners__noresults,
.partners__empty {
    margin: 0;
    padding-block: 48px;
    text-align: center;
    color: var(--pt-muted);
    font-size: .9375rem;
}

.partners__noresults[hidden] { display: none; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 575.98px) {
    .partners__grid { gap: 20px; }
    .partners__body { padding: 16px 16px 18px; }
    .partners__maps { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .partners__card,
    .partners__img,
    .partners__maps,
    .partners__maps-icon,
    .partners__chip {
        transition: none;
    }

    .partners__card--linked:hover,
    .partners__card--linked:focus-visible { transform: none; }

    .partners__card--linked:hover .partners__img,
    .partners__card--linked:focus-visible .partners__img { transform: none; }
}