/* Juan Pablo II 70. Built on alcazar-genil.css (.ag-*); only what this promotion adds. */

/* Typologies: the plan of one home on top, then the homes of that type. */
.jp-type { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.jp-type__plan {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 26px 26px 48px; border-bottom: 1px solid var(--ag-line);
    background: var(--brand-beige); text-decoration: none;
}
.jp-type__plan img { display: block; width: auto; max-width: 100%; height: 340px; object-fit: contain; }
.jp-type__plan:hover .ag-type__zoom { text-decoration: underline; text-underline-offset: 4px; }
.jp-type .ag-type__features li { justify-content: flex-start; }
.jp-type__homes { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jp-unit__row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 12px 14px 12px 12px; border: 1px solid var(--ag-line); background: rgba(255, 255, 255, .5);
    color: var(--brand-anthracite); text-decoration: none; transition: background .25s ease, border-color .25s ease;
}
.jp-unit__key {
    display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--brand-anthracite);
    font-size: 18px; font-weight: 400; transition: background .25s ease, color .25s ease;
}
.jp-unit__area { font-size: 17px; font-variant-numeric: tabular-nums; }
.jp-unit__area small { color: var(--ag-label); font-size: 12px; }
.jp-unit__go { color: var(--ag-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
a.jp-unit__row:hover, a.jp-unit__row:focus-visible { border-color: var(--brand-anthracite); background: var(--brand-paper); }
a.jp-unit__row:hover .jp-unit__key, a.jp-unit__row:focus-visible .jp-unit__key { background: var(--brand-anthracite); color: var(--brand-paper); }
a.jp-unit__row:hover .jp-unit__go { color: var(--brand-anthracite); }
.jp-unit.is-reserved .jp-unit__row { background: transparent; color: var(--ag-label); }
.jp-unit.is-reserved .jp-unit__key { border-color: var(--brand-anthracite); background: var(--brand-anthracite); color: var(--brand-paper); }

/* Plan: the built area sits under each letter; the card repeats it. */
.jp-unit__m2 { fill: var(--brand-anthracite); fill-opacity: .72; font-size: 30px; letter-spacing: .02em; pointer-events: none; filter: url(#agHalo); }
.ag-plan.is-armed:not(.is-in) .jp-unit__m2 { opacity: 0; }
.ag-plan.is-in .jp-unit__m2 { animation: ag-fade .7s ease backwards; animation-delay: calc(var(--i) * 60ms + 600ms); }
.ag-plan.is-focusing .ag-unit:not(.is-active) .jp-unit__m2 { opacity: .4; }
.ag-plan-card__area { margin: 4px 0 0; color: var(--brand-anthracite); font-size: 15px; font-variant-numeric: tabular-nums; }
.jp-floor { max-width: 1100px; }

.jp-page .ag-map { min-height: 420px; }

@media (max-width: 700px) {
    .jp-type__plan { padding: 18px 14px 44px; }
    .jp-type__plan img { height: auto; max-height: 280px; }
    .jp-page .ag-plan { width: 820px; }
}
@media (max-width: 600px) {
    .jp-page .ag-map { min-height: 340px; }
    .jp-unit__row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
    .jp-unit__key { width: 40px; height: 40px; font-size: 16px; }
    .jp-unit__area { font-size: 15px; }
}

/* Intro film framing. Its text sits between 10 % and 78 % of the frame.
   Desktop: film and hero photo start under the opaque header, cropped from the
   bottom, so «min a pie» is never hidden on short laptop screens. Phone: a little
   to the left, so the home cards keep their left edge, and only the main button
   during the film. Film and photo share the crop, so the fade between them is exact. */
.jp-page .ag-hero__media,
.jp-page .ag-film { top: 72px; }
.jp-page .ag-hero__media img,
.jp-page .ag-film__video { object-position: center 20%; }
@media (max-width: 700px) {
    .jp-page .ag-hero__media,
    .jp-page .ag-film { top: 0; }
    .jp-page .ag-hero__media img,
    .jp-page .ag-film__video { object-position: 32% 20%; }
    :is(.ag-film-pending .jp-page .ag-hero, .jp-page .ag-hero.is-film:not(.is-film-ending)) .ag-hero__actions .ag-link { display: none; }
}