/*
 * inLouth Info Card — Stylesheet v1.4
 * Brand palette: Dark green #2B8356 | Mid green #B8D2C4 | Light green #D4E3DB
 *
 * Edit the custom properties below to restyle every card on the site at once.
 */

/* ============================================================
   CSS Custom Properties — change here to restyle everything
   ============================================================ */
:root {
    --iic-color-primary:        #2B8356;
    --iic-color-primary-hover:  #226845;
    --iic-color-mid:            #B8D2C4;
    --iic-color-light:          #D4E3DB;
    --iic-color-text:           #1a1a1a;
    --iic-color-text-muted:     #5a6a62;
    --iic-color-bg:             #ffffff;
    --iic-color-border:         #D4E3DB;
    --iic-color-facebook:       #1877f2;
    --iic-color-instagram:      #e1306c;

    --iic-border-radius:        12px;
    --iic-border-width:         1.5px;
    --iic-shadow:               0 2px 12px rgba(43, 131, 86, 0.10), 0 1px 3px rgba(0,0,0,0.06);
    --iic-shadow-hover:         0 6px 24px rgba(43, 131, 86, 0.16), 0 2px 6px rgba(0,0,0,0.08);
    --iic-padding:              1.5rem;
    --iic-gap:                  0.75rem;
    --iic-image-height:         160px;
    --iic-font-base:            inherit;
    --iic-heading-size:         1.5rem;
    --iic-address-size:         0.875rem;
    --iic-blurb-size:           0.9rem;
    --iic-badge-size:           0.75rem;
    --iic-distance-size:        0.78rem;
    --iic-btn-radius:           8px;
    --iic-icon-size:            1em;
}


/* ============================================================
   Card wrapper
   ============================================================ */
.iic-card {
    font-family:    var(--iic-font-base);
    background:     var(--iic-color-bg);
    border:         var(--iic-border-width) solid var(--iic-color-border);
    border-radius:  var(--iic-border-radius);
    box-shadow:     var(--iic-shadow);
    max-width:      840px;
    overflow:       hidden;
    transition:     box-shadow 0.2s ease;
    margin-bottom:  1.5rem;
    box-sizing:     border-box;
}

.iic-card:hover {
    box-shadow: var(--iic-shadow-hover);
}


/* ============================================================
   Image banner
   ============================================================ */
.iic-image {
    width:    100%;
    height:   var(--iic-image-height);
    overflow: hidden;
    display:  block;
}

.iic-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}


/* ============================================================
   Body (everything below the image)
   ============================================================ */
.iic-body {
    padding:        var(--iic-padding);
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
}


/* ============================================================
   Distance meta
   ============================================================ */
.iic-distance {
    font-size:      var(--iic-distance-size);
    color:          var(--iic-color-text-muted);
    font-weight:    500;
    letter-spacing: 0.02em;
    margin:         0 0 0.1rem;
    text-transform: none;
}


/* ============================================================
   Badge / pill
   ============================================================ */
.iic-badge {
    display:        inline-flex;
    align-items:    center;
    background:     var(--iic-color-light);
    color:          var(--iic-color-primary);
    font-size:      var(--iic-badge-size);
    font-weight:    600;
    letter-spacing: 0.03em;
    padding:        0.3em 0.85em;
    border-radius:  999px;
    border:         1px solid var(--iic-color-mid);
    width:          fit-content;
    line-height:    1.4;
}


/* ============================================================
   Heading
   ============================================================ */
.iic-card .iic-heading {
    font-size:   var(--iic-heading-size);
    font-weight: 700;
    color:       var(--iic-color-text);
    margin:      0.25rem 0 0;
    line-height: 1.3;
}


/* ============================================================
   Address
   ============================================================ */
.iic-address {
    font-size:   var(--iic-address-size);
    color:       var(--iic-color-text-muted);
    margin:      0;
    line-height: 1.5;
}


/* ============================================================
   Blurb
   ============================================================ */
.iic-blurb {
    font-size:   var(--iic-blurb-size);
    color:       var(--iic-color-text);
    margin:      0;
    line-height: 1.6;
}


/* ============================================================
   Open times
   ============================================================ */
.iic-open-times {
    display:     flex;
    align-items: flex-start;
    gap:         0.6em;
    margin:      0.1rem 0 0;
}

.iic-open-times__icon {
    width:       1.1em;
    height:      1.1em;
    color:       var(--iic-color-primary);
    flex-shrink: 0;
    margin-top:  0.15em;
}

.iic-open-times__body {
    display:        flex;
    flex-direction: column;
    gap:            0.1em;
}

.iic-open-times__label {
    font-size:   var(--iic-address-size);
    font-weight: 600;
    color:       var(--iic-color-primary);
    line-height: 1.4;
}

.iic-open-times__line {
    font-size:   var(--iic-address-size);
    color:       var(--iic-color-text);
    line-height: 1.5;
}


/* ============================================================
   Internal link
   ============================================================ */
.iic-internal-link {
    font-size:   var(--iic-blurb-size);
    margin:      0.1rem 0 0;
    line-height: 1.5;
}

.iic-internal-link a {
    color:                 var(--iic-color-primary);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

.iic-internal-link a:hover {
    color: var(--iic-color-primary-hover);
}


/* ============================================================
   Actions
   ============================================================ */
.iic-actions {
    display:        flex;
    flex-direction: column;
    gap:            var(--iic-gap);
    margin-top:     0.5rem;
}

/* Side-by-side on wider screens */
@media (min-width: 500px) {
    .iic-actions {
        flex-direction: row;
        flex-wrap:      wrap;
    }

    /* Phone, website, email, map — stretch to equal widths */
    .iic-actions .iic-btn--primary,
    .iic-actions .iic-btn--secondary {
        flex:      1 1 0;
        min-width: 0;
    }

    /* Social buttons stay auto-width */
    .iic-actions .iic-btn--facebook,
    .iic-actions .iic-btn--instagram {
        flex: 0 0 auto;
    }
}


/* ============================================================
   Buttons — shared base
   ============================================================ */
.iic-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5em;
    font-size:       0.9rem;
    font-weight:     600;
    padding:         0.65em 1.1em;
    border-radius:   var(--iic-btn-radius);
    text-decoration: none;
    transition:      background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    cursor:          pointer;
    line-height:     1.3;
    white-space:     nowrap;
}

/* Primary — solid green (phone) */
.iic-btn--primary {
    background: var(--iic-color-primary);
    color:      #ffffff;
    border:     2px solid var(--iic-color-primary);
}

.iic-btn--primary:hover,
.iic-btn--primary:focus-visible {
    background:   var(--iic-color-primary-hover);
    border-color: var(--iic-color-primary-hover);
    color:        #ffffff;
    box-shadow:   0 3px 10px rgba(43, 131, 86, 0.25);
}

/* Secondary — outlined (website, email, map) */
.iic-btn--secondary {
    background: transparent;
    color:      var(--iic-color-primary);
    border:     2px solid var(--iic-color-primary);
}

.iic-btn--secondary:hover,
.iic-btn--secondary:focus-visible {
    background:   var(--iic-color-light);
    border-color: var(--iic-color-primary);
    color:        var(--iic-color-primary);
}

/* Facebook */
.iic-btn--facebook {
    background: transparent;
    color:      var(--iic-color-facebook);
    border:     2px solid var(--iic-color-facebook);
}

.iic-btn--facebook:hover,
.iic-btn--facebook:focus-visible {
    background: #e8f0fd;
    color:      var(--iic-color-facebook);
}

/* Instagram */
.iic-btn--instagram {
    background: transparent;
    color:      var(--iic-color-instagram);
    border:     2px solid var(--iic-color-instagram);
}

.iic-btn--instagram:hover,
.iic-btn--instagram:focus-visible {
    background: #fce8f0;
    color:      var(--iic-color-instagram);
}


/* ============================================================
   Icons inside buttons
   ============================================================ */
.iic-btn .iic-icon {
    width:          var(--iic-icon-size);
    height:         var(--iic-icon-size);
    flex-shrink:    0;
    display:        inline-block;
    vertical-align: middle;
}


/* ============================================================
   CTA block
   ============================================================ */
.iic-cta {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           0.4em 0.6em;
    margin-top:    0.75rem;
    padding:       0.75rem 1rem;
    background:    var(--iic-color-light);
    border-radius: 8px;
    border-left:   3px solid var(--iic-color-primary);
}

.iic-cta__icon {
    width:       1em;
    height:      1em;
    color:       var(--iic-color-primary);
    flex-shrink: 0;
}

.iic-cta__text {
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--iic-color-text-muted);
    margin:      0;
    white-space: nowrap;
}

.iic-cta__link {
    font-size:             0.82rem;
    font-weight:           600;
    color:                 var(--iic-color-primary);
    text-decoration:       underline;
    text-underline-offset: 2px;
    line-height:           1.4;
}

.iic-cta__link:hover {
    color: var(--iic-color-primary-hover);
}


/* ============================================================
   Grid layout helper
   Use <div class="iic-grid"> to wrap multiple cards
   ============================================================ */
.iic-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem;
    align-items:           start;
}

.iic-grid .iic-card {
    max-width:     100%;
    margin-bottom: 0;
}


/* ============================================================
   Focus accessibility
   ============================================================ */
.iic-btn:focus-visible {
    outline:        3px solid var(--iic-color-primary);
    outline-offset: 3px;
}


/* ============================================================
   Responsive — narrow screens
   ============================================================ */
@media (max-width: 500px) {
    .iic-body {
        padding: 1.1rem;
    }

    .iic-btn {
        font-size: 0.85rem;
    }
}