/* ==========================================================================
   Agerli — listings layer (unit cards, grid, no-JS filters)
   Owns every .ag-unit-* / .ag-units-* rule. Nothing here belongs in style.css.

   - Logical properties only, so RTL (Arabic default) mirrors for free.
   - Fixed aspect-ratio media boxes: zero layout shift while photos load.
   - Interactive targets are >= 44px; focus is always visible.
   - Colours come from the theme custom properties defined in style.css.
   ========================================================================== */

.ag-units { display: block; }

/* Screen-reader-only text used to give the card link a full accessible name. */
.ag-unit-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ag-unit-ico { flex: 0 0 auto; display: block; }

/* ── Filters ─────────────────────────────────────────────────────────── */

.ag-units-filters {
    background: var(--bg-light, #F5F7FA);
    border: 1px solid var(--navy-08, rgba(13,27,61,.08));
    border-radius: var(--radius-lg, 12px);
    padding: 16px;
    margin-block-end: 20px;
}

.ag-units-filters__title {
    margin: 0 0 12px;
    font-family: var(--font-display, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy, #0D1B3D);
}

.ag-units-filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 12px;
    align-items: end;
}

.ag-units-filters__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-align: start;
}

.ag-units-filters__field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2D3748;
    line-height: 1.4;
}

.ag-units-filters__field select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--navy, #0D1B3D);
    background: #fff;
    border: 1.5px solid var(--navy-30, rgba(13,27,61,.30));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #2D3748 50%), linear-gradient(135deg, #2D3748 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 16px center, right 10px center;
    background-repeat: no-repeat;
}

[dir="rtl"] .ag-units-filters__field select {
    background-position: left 10px center, left 16px center;
    background-image: linear-gradient(45deg, #2D3748 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #2D3748 50%);
    padding-inline-start: 12px;
    padding-inline-end: 30px;
}

.ag-units-filters__field select:focus-visible,
.ag-units-filters__submit:focus-visible,
.ag-units-filters__reset:focus-visible,
.ag-unit-card__link:focus-visible,
.ag-unit-card__wa:focus-visible,
.ag-units-empty__reset:focus-visible {
    outline: 3px solid #0D1B3D;
    outline-offset: 2px;
    border-radius: var(--radius-md, 8px);
}

.ag-units-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ag-units-filters__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F2937;
    background: var(--gold, #F5A623);
    border: 0;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}
.ag-units-filters__submit:hover { filter: brightness(1.04); transform: translateY(-1px); }

.ag-units-filters__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1F4E45;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ag-units-filters__reset:hover { color: #0D1B3D; }

/* ── Results count ───────────────────────────────────────────────────── */

.ag-units-count {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2D3748;
}

/* ── Grid ────────────────────────────────────────────────────────────── */

.ag-units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 20px;
    align-items: stretch;
}

/* ── Card ────────────────────────────────────────────────────────────── */

.ag-unit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--navy-15, rgba(13,27,61,.15));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(13,27,61,.08));
    transition: box-shadow .25s ease, transform .25s ease;
}
.ag-unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 8px 32px rgba(13,27,61,.10)); }
.ag-unit-card:focus-within { box-shadow: var(--shadow-lg, 0 8px 32px rgba(13,27,61,.10)); }

/* Fixed ratio box: the photo can never shift the layout while it loads. */
.ag-unit-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-cream, #EEF2F7);
    overflow: hidden;
}
.ag-unit-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.ag-unit-card:hover .ag-unit-card__media img { transform: scale(1.04); }

.ag-unit-card__flag {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: #0D1B3D;
    border-radius: var(--radius-full, 50px);
}

.ag-unit-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.ag-unit-card__price {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.35;
    color: #0D1B3D;
    overflow-wrap: anywhere;
}

.ag-unit-card__title {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: #0D1B3D;
    overflow-wrap: anywhere;
}

.ag-unit-card__link { color: inherit; text-decoration: none; }
.ag-unit-card__link:hover { color: #0F766E; text-decoration: underline; text-underline-offset: 3px; }
/* One card = one link: the anchor stretches over the whole card. */
.ag-unit-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ag-unit-card__loc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #4A5568;
    overflow-wrap: anywhere;
}
.ag-unit-card__loc .ag-unit-ico { margin-block-start: 2px; color: #4A5568; }

.ag-unit-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.ag-unit-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #2D3748;
    white-space: nowrap;
}
.ag-unit-card__facts .ag-unit-ico { color: #0F766E; }

.ag-unit-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
}
.ag-unit-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.6;
    color: #1F4E45;
    background: rgba(15, 118, 110, .10);
    border-radius: var(--radius-full, 50px);
}
.ag-unit-tag .ag-unit-ico { color: #1F4E45; }

.ag-unit-card__wa {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-block-start: auto;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    /* Darker than the theme's --whatsapp-btn so white 14.7px text clears
       4.5:1 (measured 5.45:1 here vs 4.33:1 on #128C3E). */
    background: #0F7A35;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.ag-unit-card__wa:hover { background: #0C6E30; color: #fff; transform: translateY(-1px); }

/* ── Empty state ─────────────────────────────────────────────────────── */

.ag-units-empty {
    padding: 32px 20px;
    text-align: center;
    background: var(--bg-light, #F5F7FA);
    border: 1px solid var(--navy-15, rgba(13,27,61,.15));
    border-radius: var(--radius-lg, 12px);
}
.ag-units-empty__title {
    margin: 0 0 8px;
    font-family: var(--font-display, sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: #0D1B3D;
}
.ag-units-empty__text {
    max-width: 56ch;
    margin: 0 auto 18px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2D3748;
}
.ag-units-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.ag-units-empty__wa { min-width: 200px; }
.ag-units-empty__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0D1B3D;
    background: #fff;
    border: 1.5px solid var(--navy-30, rgba(13,27,61,.30));
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
}
.ag-units-empty__reset:hover { background: #EEF2F7; color: #0D1B3D; }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ag-units-filters { padding: 14px; }
    .ag-units-filters__row { grid-template-columns: 1fr; }
    .ag-units-filters__actions { flex-direction: column; align-items: stretch; }
    .ag-units-filters__submit,
    .ag-units-filters__reset { width: 100%; }
    .ag-units-grid { gap: 16px; }
    .ag-unit-card__price { font-size: 1.12rem; }
}

/* ── Motion preference ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ag-unit-card,
    .ag-unit-card__media img,
    .ag-unit-card__wa,
    .ag-units-filters__submit { transition: none; }
    .ag-unit-card:hover { transform: none; }
    .ag-unit-card:hover .ag-unit-card__media img { transform: none; }
    .ag-unit-card__wa:hover,
    .ag-units-filters__submit:hover { transform: none; }
}

/* ── Forced colours / high contrast ──────────────────────────────────── */

@media (forced-colors: active) {
    .ag-unit-card { border: 1px solid CanvasText; }
    .ag-unit-tag,
    .ag-unit-card__flag { border: 1px solid CanvasText; }
}

/* ── Pagination ─────────────────────────────────────────────────────────────
   Server-rendered links, not a JS widget: every page must stay reachable by a
   crawler and by AI retrieval bots that never execute scripts. */
.ag-units-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-block-start: 32px;
}

.ag-units-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--navy-08, rgba(13, 27, 61, 0.12));
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    color: var(--navy, #0D1B3D);
    background: #fff;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.ag-units-pager__link:hover { background: var(--bg-cream, #F7F4EE); }

.ag-units-pager__link:focus-visible {
    outline: 3px solid var(--navy, #0D1B3D);
    outline-offset: 2px;
}

.ag-units-pager__link.is-current {
    background: var(--navy, #0D1B3D);
    border-color: var(--navy, #0D1B3D);
    color: #fff;
}

.ag-units-pager__meta {
    margin-block-start: 12px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--navy-70, #4A5578);
}

@media (max-width: 380px) {
    .ag-units-pager { gap: 6px; }
    .ag-units-pager__link { min-width: 40px; padding-inline: 10px; font-size: 0.88rem; }
}