/* NOTE: LOCATIONS (inc/new/sections/locations.php) */

.kmd-locations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}

.kmd-location {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kmd-line);
    background: var(--kmd-white);
}

.kmd-location__image,
.kmd-location__image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--kmd-bg-sand);
}

.kmd-location__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

/* bottom of the card, so the links of a row line up whatever the length of the details above */
.kmd-location__link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--kmd-accent-hover);
    font-size: 15px;
    font-weight: 700;
}

.kmd-location__link:hover {
    color: #7E211E;
}

.kmd-location__link svg {
    transition: transform .2s;
}

.kmd-location__link:hover svg {
    transform: translateX(3px);
}

.kmd-location__name {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.kmd-location__name a {
    color: var(--kmd-ink);
    text-decoration: none;
}

.kmd-location__name a:hover {
    color: var(--kmd-accent);
}

.kmd-location__notice {
    padding: 6px 10px;
    border-left: 4px solid var(--kmd-accent);
    background: #FBEDEC;
    color: var(--kmd-accent-hover);
    font-size: 14px;
    font-weight: 700;
}

.kmd-location__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

.kmd-location__table th,
.kmd-location__table td {
    padding: 11px 0;
    border-top: 1px solid var(--kmd-line);
    text-align: left;
    vertical-align: top;
}

.kmd-location__table th {
    width: 38%;
    padding-right: 12px;
    color: var(--kmd-muted);
    font-weight: 600;
}

.kmd-location__table a {
    font-weight: 600;
}

.kmd-section--muted .kmd-location {
    border-color: transparent;
}

.kmd-section--dark .kmd-location {
    border-color: var(--kmd-dark-line);
    background: var(--kmd-dark-card);
}

.kmd-section--dark .kmd-location__name a,
.kmd-section--dark .kmd-location__table a {
    color: var(--kmd-white);
}

.kmd-section--dark .kmd-location__table th,
.kmd-section--dark .kmd-location__table td {
    border-color: var(--kmd-dark-line);
    color: var(--kmd-dark-text);
}

/* special opening hours (Black Friday...) above the opening hours: the title, the hours on the line below */
.kmd-location__special-row td {
    padding: 8px 10px;
    border-left: 4px solid #2B6CB0;
    background: #EAF2FB;
    color: #1F4E8C;
    font-weight: 700;
}

.kmd-location__special-title,
.kmd-location__special-hours {
    display: block;
}

/* long e-mails wrap instead of widening the card on phones */
.kmd-location__table td {
    overflow-wrap: anywhere;
}