/* ==========================================================================
   COMPONENT: Find Us Card
   Displayed in the dark-green hero section on the homepage.
   A cream-on-green contrast card — bold, premium, highly readable.
   ========================================================================== */

/* ------------------------------------------------------------------
   CARD WRAPPER
   Sits inside .hero__inner (flex, centred). Cream background on the
   dark green hero section for maximum contrast and visual impact.
------------------------------------------------------------------ */
.find-us-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    max-width: 32rem;
    padding: var(--sp-8) var(--sp-10);
    background-color: var(--color-cream);
    color: var(--color-green);
    border-radius: var(--radius-card);
    border: 3px solid var(--color-yellow);
    box-shadow:
        0 0 0 6px rgba(245, 183, 49, 0.18),
        0 24px 48px rgba(0, 0, 0, 0.35);
    text-align: center;
}

/* ------------------------------------------------------------------
   STATUS BADGE
   Pill-shaped label positioned above the location name.
   Three colour states: open (yellow), closed (muted red), special (orange).
------------------------------------------------------------------ */
.find-us-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 1.1em;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
}

/* Dot indicator before each status badge */
.find-us-card__status::before {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.find-us-card__status.status--open {
    background-color: var(--color-yellow);
    color: var(--color-green);
}

.find-us-card__status.status--closed {
    background-color: #fde8e8;
    color: #8b1c1c;
}

.find-us-card__status.status--special {
    background-color: #fff0d4;
    color: #7a4500;
}

/* ------------------------------------------------------------------
   LOCATION NAME
   Large display type — the hero of the card.
------------------------------------------------------------------ */
.find-us-card__location {
    color: inherit;
    margin-block: var(--sp-2) 0;
    max-width: 20ch;
    line-height: 0.95;
}

/* ------------------------------------------------------------------
   ADDRESS & HOURS  (eyebrow style, slightly muted)
------------------------------------------------------------------ */
.find-us-card__address,
.find-us-card__hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    color: inherit;
    opacity: 0.85;
    margin-top: 0;
}

/* Inline SVG icon used alongside address / hours */
.find-us-card__icon {
    display: inline-block;
    flex-shrink: 0;
    opacity: 0.8;
}

/* ------------------------------------------------------------------
   SPECIAL NOTE
   Italic, slightly smaller body text for optional one-liner updates.
------------------------------------------------------------------ */
.find-us-card__note {
    font-size: 0.9rem;
    font-style: italic;
    color: inherit;
    opacity: 0.9;
    padding: var(--sp-3) var(--sp-4);
    background-color: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--color-yellow);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    text-align: left;
    width: 100%;
}

/* ------------------------------------------------------------------
   CLOSED MESSAGE
   Shown instead of the directions button when status = "Closed Today".
------------------------------------------------------------------ */
.find-us-card__closed-message {
    color: #8b1c1c;
    opacity: 0.85;
    padding-block: var(--sp-2);
}

.find-us-card__instagram-link {
    color: #8b1c1c;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--t-fast);
}
.find-us-card__instagram-link:hover {
    opacity: 0.75;
}

/* ------------------------------------------------------------------
   DIRECTIONS BUTTON
   The .btn.btn--yellow styles from main.css handle most of the look.
   We just centre it and add a small top spacer.
------------------------------------------------------------------ */
.find-us-card__directions {
    margin-top: var(--sp-2);
    justify-content: center;
}

.find-us-card__directions svg {
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   DIVIDER BETWEEN ROWS
   A subtle hairline between the address block and the note/CTA area.
------------------------------------------------------------------ */
.find-us-card__hours + .find-us-card__note,
.find-us-card__hours + .find-us-card__closed-message,
.find-us-card__hours + .find-us-card__directions {
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(245, 240, 232, 0.15);
    width: 100%;
}

/* ------------------------------------------------------------------
   RESPONSIVE — NARROW SCREENS
   On mobile the card stretches edge-to-edge inside the container,
   padding is tightened, and font sizes inherit the clamp() scale.
------------------------------------------------------------------ */
@media (max-width: 47.9rem) {
    .find-us-card {
        max-width: 100%;
        padding: var(--sp-6) var(--sp-6);
        border-radius: calc(var(--radius-card) * 0.75);
    }

    .find-us-card__note {
        font-size: 0.85rem;
    }
}

/* ------------------------------------------------------------------
   REDUCED MOTION — disable the subtle box-shadow glow pulse
   (no animation defined here, but kept for future keyframe reference)
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .find-us-card {
        transition: none;
    }
}