/* ==========================================================================
   Visit Us Component
   ========================================================================== */

.visit-section {
    margin-top: 8rem;
    /* Space from previous section */
    margin-bottom: 8rem;
    width: 100%;
    position: relative;
    padding: 0 2rem;
    /* Container padding */
}

/* Container Wrapper */
.visit-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* --- Content Column (Right on Desktop) --- */
.visit-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.visit-content h2 {
    font-family: 'Poetsen One', 'Trebuchet MS', Verdana, sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
    color: var(--primary-009);
    margin: 0;
}

.visit-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    /* Removed border */
    padding: 1rem 0;
    /* Adjusted padding since border is gone */
}

.visit-hours-list li {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--neutral-004);
    line-height: 1.5;
}

/* Button Group */
.visit-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
}

/* Address Button Style overrides */
.visit-actions .btn-minimal--dark {
    font-weight: 600;
    /* Ensure bold per sketch looks */
    padding-left: 0;
    /* Resetting might differ based on button base style */
    /* If it loses padding when becoming outline on hover or similar, we should ensure it has standard padding or none if it's text-only link style */
    /* User said "address button when turned into outline button doesn't seem to have any left padding... maybe don't need to change the button into outline button" */
    /* The btn-minimal is text-only with underline. If user sees "outline button", they might mean a specific state or maybe I misunderstood the "outline" part. */
    /* But the main issue is "no spacing between label and edge". */
    /* Actually base .btn-minimal has padding-bottom but 0 side padding usually? */
    /* Let's re-read buttons.css. */
    /* .btn-minimal { padding-bottom: 0.25rem; ... } */
    /* Wait, I don't see any 'outline' transformation here unless user is referring to a hover state I added? */
    /* Ah, maybe they mean the visual look. */
    /* User: "maybe don't need to change the button into outline button" */
    /* I will just remove the padding-left: 0 override and let it behave normally, or ensure it aligns with the text above. */
    /* If I remove padding-left: 0, it will just be the default behavior which is fine. */
    /* ACTUALLY, checking buttons.css, .btn-minimal has gap: 0.5rem. */
    /* If I remove the padding-left: 0, it will be standard. */
    /* Let's just remove this specific override block entirely or keep font-weight. */
    padding-left: 0;
    /* Keeping alignment flush left with text */
}


/* --- Image Column (Left on Desktop) --- */
.visit-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.visit-image img {
    width: 100%;
    height: auto;
    border-radius: 4rem;
    object-fit: cover;
    aspect-ratio: 1/1;
    /* Square box per sketch */
    /* Removed border */
    /* Wait, sketch shows a box with X inside. Usually that means placeholder. 
       But user said "check image to understand structure". 
       The sketch shows a box with X on the left. 
       I will use an actual image but keep the border radius. 
       Wait, sketch shows border radius on the image box. 
    */
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .visit-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Stacked: Content Top, Image Bottom */
    .visit-content {
        order: 1;
        align-items: center;
        text-align: center;
    }

    .visit-hours-list {
        align-items: center;
        /* Center list text */
        text-align: center;
    }

    .visit-actions {
        align-items: center;
    }

    .visit-image {
        order: 2;
    }

    .visit-image img {
        max-height: 400px;
        /* Constrain height */
        width: auto;
        max-width: 100%;
    }

    /* Full-width buttons on tablet/mobile */
    .visit-actions {
        width: 100%;
        max-width: 500px;
    }

    .visit-actions .btn-primary {
        display: flex;
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
}

/* Full-width buttons on small mobile - match follow buttons */
@media screen and (max-width: 480px) {
    .visit-actions {
        max-width: none;
    }

    .visit-actions .btn-primary {
        max-width: none;
    }
}