/**
 * The shared "Finding the range" block.
 *
 * Used on the membership page and on every single event page, so it must sit
 * sensibly inside both a hand-built page and The Events Calendar's own markup.
 * Everything is scoped under .srpc-loc for that reason.
 */

.srpc-loc {
    margin: var(--srpc-section-gap) 0 0;
}

.srpc-loc-heading {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-xl);
    line-height: var(--srpc-leading-tight);
    color: var(--srpc-navy);
    margin: 0 0 0.8rem;
}

.srpc-loc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}

/* Without a map there is no second column to balance, so the text should not
   stretch to full width and lose its measure. */
.srpc-loc--nomap .srpc-loc-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--srpc-measure);
}

@media (max-width: 760px) {
    .srpc-loc-grid {
        grid-template-columns: 1fr;
    }
}

.srpc-loc-intro,
.srpc-loc-where {
    font-size: var(--srpc-text-md);
    font-weight: 600;
    color: var(--srpc-navy);
    margin: 0 0 0.5rem;
}

.srpc-loc-warn {
    font-size: var(--srpc-text-sm);
    line-height: var(--srpc-leading-body);
    color: var(--srpc-ink-soft);
    margin: 0 0 1rem;
}

/* The road names sit with the warning rather than in their own paragraph: a
   driver reads "unsigned roads, locked gate" and the next thing they need is
   which road. */
.srpc-loc-leg {
    display: block;
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--srpc-navy);
}

/* --- coordinates --- */

.srpc-loc-coords {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.8rem;
    align-items: center;
    border: 1px solid var(--srpc-rule);
    border-radius: var(--srpc-radius);
    background: var(--srpc-surface);
    padding: 0.8rem 1rem;
}

.srpc-loc-coords-label {
    grid-column: 1 / -1;
    font-size: var(--srpc-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--srpc-steel);
}

.srpc-loc-coords-dms {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-md);
    font-weight: 700;
    color: var(--srpc-navy);
    font-variant-numeric: tabular-nums;
}

.srpc-loc-coords-dd {
    grid-column: 1;
    font-size: var(--srpc-text-sm);
    color: var(--srpc-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* Scoped hard. Every global button rule on this site reaches a bare <button>,
   and the gallery tiles taught us that the expensive way. */
.srpc-loc .srpc-loc-copy {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    font-family: var(--srpc-font-body);
    font-size: var(--srpc-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--srpc-navy);
    background: transparent;
    border: 1px solid var(--srpc-navy);
    border-radius: var(--srpc-radius);
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    min-width: 4.6rem;
    line-height: 1.2;
}

.srpc-loc .srpc-loc-copy:hover,
.srpc-loc .srpc-loc-copy:focus-visible {
    background: var(--srpc-navy);
    color: #fff;
}

/* --- links --- */

.srpc-loc-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin: 1rem 0 0;
    font-size: var(--srpc-text-sm);
}

.srpc-loc .srpc-loc-btn {
    display: inline-block;
    font-weight: 700;
    color: #fff;
    background: var(--srpc-orange-deep);
    border-radius: var(--srpc-radius);
    padding: 0.55rem 1.1rem;
    text-decoration: none;
}

.srpc-loc .srpc-loc-btn:hover,
.srpc-loc .srpc-loc-btn:focus-visible {
    background: var(--srpc-navy);
    color: #fff;
}

/* --- click-to-load map --- */

.srpc-loc-map {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--srpc-rule);
    border-radius: var(--srpc-radius);
    overflow: hidden;
    background: var(--srpc-navy-tint);
}

/* height:100% does not resolve against a parent sized by aspect-ratio, so the
   child is positioned against the box instead. */
.srpc-loc-map > iframe,
.srpc-loc .srpc-loc-map-load {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
}

.srpc-loc .srpc-loc-map-load {
    display: grid;
    place-content: center;
    gap: 0.25rem;
    background: transparent;
    cursor: pointer;
    box-shadow: none;
    padding: 1rem;
    text-align: center;
}

.srpc-loc .srpc-loc-map-load:hover,
.srpc-loc .srpc-loc-map-load:focus-visible {
    background: var(--srpc-rule-soft);
}

/* Without this the placeholder is just a large empty grey rectangle, which
   reads as a failed image rather than a deliberate control. */
.srpc-loc-map-pin {
    display: block;
    color: var(--srpc-orange-deep);
    line-height: 0;
    margin: 0 auto 0.1rem;
}

.srpc-loc-map-text {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-md);
    font-weight: 700;
    color: var(--srpc-navy);
}

.srpc-loc-map-note {
    font-size: var(--srpc-text-xs);
    color: var(--srpc-steel);
}