/* ===========================================================================
   AJNARA LE GARDEN — page extras (builds on jkg-page.css + anandita-page.css)
   Three-unit chooser · interactive tower floor picker · cost sheet ·
   payment plans · location cards
   =========================================================================== */

/* ---------- Three unit cards ---------- */
.aj-unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aj-homes .an-twin-media { height: 330px; }
.aj-plan-media { background: #EEF1EE; }
.aj-plan-media img { object-fit: contain !important; object-position: center !important; padding: 16px 16px 62px; transform: none !important; }
.an-twin:hover .aj-plan-media img { transform: scale(1.04) !important; }
.aj-plan-media::after { background: linear-gradient(180deg, rgba(12, 15, 13, 0) 64%, rgba(12, 15, 13, .96)) !important; }
.aj-plan-media .an-twin-no { color: rgba(238, 241, 238, .35); -webkit-text-stroke: 1.2px #B8860B; text-shadow: none; }
.aj-homes .an-twin-body h3 { font-size: clamp(24px, 2.2vw, 30px); }
.aj-homes .an-twin-body h3 em { font-size: .8em; margin-left: 4px; }
.aj-homes .an-twin-price strong { font-size: clamp(24px, 2.1vw, 30px); }

/* ---------- Tower floor picker ---------- */
.aj-picker { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 22px; align-items: start; }
.aj-tower {
    position: relative; padding: 18px 18px 0; border-radius: 26px 26px 18px 18px;
    background: linear-gradient(180deg, rgba(22, 28, 23, .92), rgba(12, 15, 13, .96)); border: 1px solid rgba(255, 255, 255, .08);
    display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.aj-tower::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 23px); pointer-events: none; }
.aj-tower-cap { text-align: center; padding: 2px 0 10px; }
.aj-tower-cap span { font: 400 13px 'Fraunces', Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }
.aj-floor {
    position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
    height: 24px; padding: 0 10px; border-radius: 6px; border: 0; cursor: pointer; text-align: left;
    background: rgba(255, 255, 255, .035); color: #C9CFC8; font: 500 11.5px/1 'Inter', sans-serif;
    transition: background .25s, color .25s, transform .35s var(--ease-lux), box-shadow .3s;
}
.aj-floor b { font: 500 11px 'IBM Plex Mono', monospace; color: var(--text-dim); letter-spacing: .04em; }
.aj-floor i { display: block; height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(212, 175, 55, .5), rgba(212, 175, 55, .15)); width: var(--w); transition: background .3s; }
.aj-floor em { font-style: normal; font-variant-numeric: tabular-nums; }
.aj-floor:hover { background: rgba(212, 175, 55, .1); color: #fff; transform: translateX(4px); }
.aj-floor.is-on { background: var(--grad-gold); color: #0A0D0B; box-shadow: 0 8px 24px rgba(212, 175, 55, .35); transform: translateX(6px) scale(1.02); }
.aj-floor.is-on b { color: #0A0D0B; }
.aj-floor.is-on i { background: rgba(10, 13, 11, .45); }
.aj-floor:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.aj-tower-base { margin: 8px -18px 0; padding: 12px; text-align: center; background: rgba(0, 0, 0, .35); border-top: 1px solid rgba(212, 175, 55, .25); }
.aj-tower-base span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.aj-noscript { font-size: 13px; color: var(--text-dim); padding: 10px 0; }
.aj-est { padding-bottom: 22px; }
.aj-est .an-est-head p b { color: var(--gold-bright); font-weight: 600; }
.aj-seg-tower:empty { display: none; }
.aj-lines { list-style: none; margin: 14px 0 16px; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.aj-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; color: var(--text-dim); }
.aj-lines li b { color: #EEF0ED; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aj-lines li.is-key { color: var(--gold-soft); }
.aj-lines li.is-key b { color: var(--gold-bright); }
.aj-lines li small { display: block; font-size: 11px; color: rgba(167, 176, 167, .75); margin-top: 2px; }
.aj-plan .an-clp-head h3 em { font-style: normal; }

/* ---------- Amenity chips ---------- */
.aj-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.aj-chips span { padding: 9px 15px; border-radius: 999px; font-size: 13px; color: #DDE2DC; background: rgba(255, 255, 255, .03); border: 1px solid rgba(212, 175, 55, .25); }

/* ---------- Location cards ---------- */
.aj-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aj-loc-card {
    position: relative; overflow: hidden; padding: 22px 22px 20px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(22, 28, 23, .85), rgba(14, 18, 15, .85)); border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .4s, transform .5s var(--ease-lux);
}
.aj-loc-card:hover { border-color: rgba(212, 175, 55, .4); transform: translateY(-4px); }
.aj-loc-card b { display: block; font: 400 30px/1.1 'Fraunces', Georgia, serif; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }
.aj-loc-card span { font-size: 14px; color: #D6DBD5; line-height: 1.55; }

/* Brochure band */
.aj-cta { background:
    linear-gradient(100deg, rgba(8, 11, 9, .95) 0%, rgba(8, 11, 9, .8) 55%, rgba(8, 11, 9, .35) 100%),
    url('ajnara/tower-wide.jpg') right 30% / cover !important; }

@media (max-width: 1100px) {
    .aj-unit-grid { grid-template-columns: 1fr 1fr; }
    .aj-unit-grid > :last-child { grid-column: 1 / -1; }
    .aj-picker { grid-template-columns: 1fr; }
    .aj-tower { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px; border-radius: 22px; }
    .aj-tower-cap, .aj-tower-base { grid-column: 1 / -1; }
    .aj-tower-base { margin: 6px -14px -14px; }
    .aj-floor { grid-template-columns: 1fr; height: auto; padding: 8px 6px; text-align: center; gap: 3px; }
    .aj-floor i { display: none; }
}
@media (max-width: 960px) { .aj-loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .aj-unit-grid { grid-template-columns: 1fr; }
    .aj-homes .an-twin-media { height: 280px; }
    .aj-tower { grid-template-columns: repeat(3, 1fr); }
    .aj-loc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .aj-floor, .aj-loc-card { transition: none; } }