/* Purpose:
Implements Issue #479's mobile-first Browse cards with a photo-first hierarchy inspired by the successful AllTrails browsing pattern, plus Issue #523's explicit location-recovery feedback.

Responsibilities:
- Present genuine approved RBO location imagery above reviewed location intelligence when imagery actually exists.
- Keep complete location names, complete short descriptions, distance/nearby status, and intel-gap counts readable on a phone.
- Give real location photography useful visual weight without reserving a fake blank photo panel for locations that have no approved image.
- Render approved Field Report imagery with the same crop behavior as maintained card photography.
- Keep location-permission failures visibly distinct and make the retry action obvious.
- Never clip, line-clamp, or force-nowrap reviewed card text.

Boundaries:
Presentation only. Location facts, gap counts, distance ranking, nearby eligibility, imagery eligibility, permission state, and navigation targets remain owned by reviewed application data.

Key decisions and invariants:
Cards remain location-first rather than task-first, real imagery sits above text, an image-less location collapses its fallback media region instead of showing an oversized dark placeholder, distance and nearby status stay visually subordinate to the place identity, location recovery is visible without blocking ordinary discovery, reviewed summaries and gap indicators wrap instead of clipping, and responsive styling must preserve one obvious whole-card navigation target.
*/
.location-discovery {
    margin-top: 18px;
}

.location-discovery > h1 {
    max-width: 100%;
    margin: 0;
    color: #fffaf1;
    font-size: clamp(1.9rem, 7.8vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.location-discovery-subtitle {
    max-width: 620px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    line-height: 1.45;
}

.location-discovery-sort-status {
    max-width: 620px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: .78rem;
    line-height: 1.35;
}

.location-discovery-sort-status a {
    color: #eac15f;
    font-weight: 760;
}

.location-discovery-sort-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    margin-top: .28rem;
    border-radius: 50%;
    background: #eac15f;
    box-shadow: 0 0 0 3px rgba(234, 193, 95, 0.10);
}

.location-discovery-location-warning {
    max-width: 620px;
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(234, 193, 95, 0.42);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(234, 193, 95, 0.08);
    font-size: .84rem;
    line-height: 1.4;
}

.location-discovery-location-warning strong {
    color: #fffaf1;
    font-size: .9rem;
}

.location-discovery-location-retry {
    width: fit-content;
    min-height: 38px;
    margin-top: 2px;
    padding: 7px 12px;
    border: 1px solid rgba(234, 193, 95, 0.62);
    border-radius: 999px;
    color: #fffaf1;
    background: rgba(234, 193, 95, 0.14);
    font: inherit;
    font-weight: 780;
    cursor: pointer;
}

.location-discovery-location-retry:focus-visible {
    outline: 3px solid var(--rbo-orange);
    outline-offset: 2px;
}

.location-discovery-location-retry:disabled {
    cursor: wait;
    opacity: .58;
}

.location-card-list {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 16px;
}

.location-card.field-task-card {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(238, 206, 122, 0.34);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(238, 206, 122, 0.07), transparent 34%),
        linear-gradient(145deg, #141a31, #090c1c 78%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.location-card:active {
    transform: scale(0.992);
}

.location-card:focus-visible {
    outline: 3px solid var(--rbo-orange);
    outline-offset: 3px;
}

.location-card-media {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 82% 15%, rgba(238, 206, 122, 0.16), transparent 34%),
        linear-gradient(145deg, #1b2240, #0a0e21 72%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.location-card-media.field-task-place-fallback {
    display: none;
}

.location-card-media.field-task-place-photo {
    background-image:
        linear-gradient(180deg, rgba(5, 7, 24, 0.01), rgba(5, 7, 24, 0.08)),
        var(--field-task-photo);
}

.location-card-photo-set-badge {
  position:absolute;
  right:.6rem;
  bottom:.55rem;
  padding:.18rem .42rem;
  border-radius:999px;
  background:rgba(8,20,28,.78);
  color:#f6fbff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.01em;
}

.location-card-field-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.location-card-content {
    min-width: 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding: 17px 18px 19px;
    overflow: visible !important;
}

.location-card-title {
    max-width: 100%;
    margin: 0;
    overflow: visible;
    color: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    font-weight: 790;
    line-height: 1.08;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
    white-space: normal;
    text-shadow: none;
}

.location-card-summary {
    display: block !important;
    max-width: 100%;
    margin: 8px 0 13px;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(.86rem, 3.4vw, .96rem);
    font-weight: 450;
    line-height: 1.38;
}

.location-card-nearby {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 250, 241, 0.22);
    border-radius: 999px;
    color: #fffaf1;
    background: rgba(255, 255, 255, 0.07);
    font-size: .69rem;
    font-weight: 780;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.location-card-gaps {
    max-width: 100%;
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0;
    color: var(--rbo-orange);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .10em;
    line-height: 1.22;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible !important;
}

.location-card-gap-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.location-card-gap-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: .74rem;
    line-height: 1;
}

@media (min-width: 760px) {
    .location-discovery {
        margin-top: 24px;
    }

    .location-discovery > h1 {
        max-width: 14ch;
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        line-height: 1;
    }

    .location-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
}