/* ============================================================
   MAQBARA-E-MUSIAN LOCATOR
   Page-scoped stylesheet for the Maqbara-e-Musian map and list on
   family.html, loaded only by that page. Follows the apply-map.css and
   apply-steps.css convention rather than growing styles.css by another
   block that eight pages download and never use.

   Every class here is maq- prefixed. Checked against styles.css before
   use: all 25 were free. Note the deliberate distance from the map-
   prefix, which apply-map.css already owns for the apply road map.
   ============================================================ */

/* ------------------------------------------------------------
   BANNER HERO
   The section title and intro sit OVER the Bahishti Maqbarah photograph
   (on request). Full-bleed like the site's other photo bands; a dark
   gradient scrim carries the white text. The image keeps object-fit:
   cover so the band crops rather than squashing the photo.
   ------------------------------------------------------------ */
.maq-banner-hero {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

.maq-banner {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    margin: 0;
}

/* Even scrim across the whole image, so the title and intro read wherever they sit. The text is
   centred both ways (below), not pinned to the base, so a uniform wash suits it better than a
   bottom-weighted one. */
.maq-banner-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 46, 46, 0.58);
}

/* Centred on ALL sides - the caption fills the banner and centres its contents both horizontally
   and vertically. */
.maq-banner-caption {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

/* Large, to match the banner. clamp so it scales down cleanly on a phone. */
.maq-banner-title {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.15;
    margin: 0 0 14px;
}

/* ------------------------------------------------------------
   SECTION INTRO
   Now the banner subtitle - centred, white, over the scrim. Applied
   alongside .about-lead rather than by changing it, because .about-lead
   has max-width: 720px with no auto margin and is used three more times
   on musian.html, where nothing was asked to move.
   ------------------------------------------------------------ */
.maq-intro {
    margin-inline: auto;
    margin-bottom: 0;
    max-width: 40rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .maq-banner { height: 300px; }
    .maq-banner-caption { padding: 20px; }
}

/* ------------------------------------------------------------
   THE MAP
   Carries the hidden attribute in the markup and is revealed by
   js/maqbara.js once Leaflet is confirmed present. So a visitor with no
   JavaScript, a blocked CDN, or a failed integrity check sees no empty
   grey box: they get the location list below, which holds every fact the
   map popups hold. The map is an enhancement, never the only copy.
   ------------------------------------------------------------ */

/* Subtitle above the locator, introducing the regional list/map. Centred to sit with the
   banner title above it; a touch more prominent than the address text below. */
.maq-map-subtitle {
    max-width: 640px;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-body);
}

.maq-map {
    height: 480px;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    /* Leaflet panes stack above most things; keep the map under the
       sticky header rather than punching through it. */
    z-index: 0;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .maq-map {
        height: 360px;
    }
}

/* Leaflet draws its own controls and attribution. Bring them closer to
   the site's type without fighting the library. */
.maq-map .leaflet-container {
    font-family: var(--font-body);
}

.maq-map .leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.maq-map .leaflet-popup-content {
    margin: 16px 18px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   MARKERS
   Drawn with a divIcon and styled here, so there is no marker image to
   ship and no colour written into the JavaScript. The classic teardrop:
   a square with three rounded corners, rotated.
   ------------------------------------------------------------ */
.maq-pin {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid var(--surface-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.maq-pin--jamaat {
    background: var(--accent-gold);
}

.maq-pin--third {
    background: var(--primary);
}

/* Leaflet gives markers keyboard focus. Make that visible, and undo the
   rotation on the ring so the outline is not a diamond. */
.leaflet-marker-icon:focus-visible {
    outline: 3px solid var(--accent-gold-light);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   LEGEND
   In the markup rather than injected, so it reads as a key to the list
   tags as well as to the map pins.
   ------------------------------------------------------------ */
.maq-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: center;
    margin-bottom: 28px;
    padding: 0;
    list-style: none;
}

.maq-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--text-body);
}

.maq-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.maq-swatch--jamaat {
    background: var(--accent-gold);
}

.maq-swatch--third {
    background: var(--primary);
}

/* ------------------------------------------------------------
   THE LIST
   Always visible, never collapsed behind the map. Someone who needs an
   address at a difficult moment should not have to work a map to reach
   it, and on a phone the list is the faster path.
   ------------------------------------------------------------ */
.maq-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.maq-item {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--border-light);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-xs);
}

/* The left edge repeats the pin colour, so scanning the list and
   scanning the map use the same cue. */
.maq-item[data-ownership="jamaat"] {
    border-left-color: var(--accent-gold);
}

.maq-item[data-ownership="third"] {
    border-left-color: var(--primary);
}

.maq-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 10px;
}

.maq-jamaat {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin: 0;
}

/* Ownership is stated in words, not by colour alone. */
.maq-tag {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.maq-tag--jamaat {
    background: var(--accent-gold-muted);
    color: #7a6320;
}

.maq-tag--third {
    background: rgba(26, 74, 74, 0.1);
    color: var(--primary);
}

.maq-name {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

/* The address is now the last line in a card (the Musian/Gravesites/Tombstones facts were removed on
   request), so it carries no trailing margin - it would otherwise leave a gap at the card foot. */
.maq-address {
    margin: 0;
    font-size: 0.94rem;
}

/* ------------------------------------------------------------
   POPUPS
   Built as real DOM by maqbara.js, never as an HTML string, so no
   address or cemetery name is ever parsed as markup.
   ------------------------------------------------------------ */
.maq-popup-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--primary-dark);
    margin: 0 0 2px;
}

.maq-popup-row {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-body);
}