/* Xlive – blok kamenné prodejny v šedé sekci nad čtyřmi kostkami (.info-section).
   Selektory začínají .info-section, aby přebily podtržení odkazů ze šablony. */

/* Karta je prvním prvkem flexu .info-section a zabírá celou šířku */
.info-section .info-store {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-section .info-store__text {
    flex: 1 1 400px;
    padding: 24px 28px;
    text-align: left;
}

/* Nadpis musí mít zarovnání výslovně, globální pravidlo h3 ho jinak vycentruje */
.info-section .info-store__text h3 {
    margin: 0 0 14px;
    color: #333;
    text-align: left;
}

/* justify-items a width drží řádky na celé šířce; šablona je jinak centruje */
.info-section .info-store__rows {
    display: grid;
    justify-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
}

.info-section .info-store__row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    gap: 10px;
    color: #555;
    line-height: 1.45;
}

.info-section .info-store__row strong {
    color: #222;
    font-weight: 600;
}

.info-section .info-store__row a {
    color: inherit;
}

/* Ikony jsou v CSS jako data URI, aby je editor obsahu nemohl odstranit */
.info-section .info-store__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}

.info-section .info-store__icon--pin {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23d93621%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021.5s7-6.4%207-11.2a7%207%200%201%200-14%200c0%204.8%207%2011.2%207%2011.2z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210.2%22%20r=%222.6%22/%3E%3C/svg%3E");
}

.info-section .info-store__icon--clock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23d93621%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%228.6%22/%3E%3Cpath%20d=%22M12%206.8V12l3.4%202.1%22/%3E%3C/svg%3E");
}

.info-section .info-store__icon--bus {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23d93621%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.6%22%20y=%224%22%20width=%2216.8%22%20height=%2212%22%20rx=%222.6%22/%3E%3Cpath%20d=%22M3.6%2011.2h16.8%22/%3E%3Ccircle%20cx=%228.2%22%20cy=%2219%22%20r=%221.5%22/%3E%3Ccircle%20cx=%2215.8%22%20cy=%2219%22%20r=%221.5%22/%3E%3C/svg%3E");
}

.info-section .info-store__note {
    margin: 0 0 18px;
    color: #777;
    font-size: 0.9em;
}

.info-section .info-store__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.info-section .info-store__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--color-primary, #0d0c0c);
    border-radius: 4px;
    background-color: var(--color-primary, #0d0c0c);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.info-section .info-store__btn:hover,
.info-section .info-store__btn:focus-visible {
    background-color: var(--color-primary-hover, #d93621);
    border-color: var(--color-primary-hover, #d93621);
    color: #fff;
    text-decoration: none;
}

.info-section .info-store__btn--ghost {
    background-color: transparent;
    color: var(--color-primary, #0d0c0c);
}

.info-section .info-store__btn--ghost:hover,
.info-section .info-store__btn--ghost:focus-visible {
    background-color: transparent;
    color: var(--color-primary-hover, #d93621);
}

.info-section .info-store__photo {
    flex: 1 1 320px;
    min-height: 240px;
    margin: 0;
}

.info-section .info-store__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .info-section .info-store__text {
        padding: 20px;
    }

    .info-section .info-store__photo {
        flex: 1 1 100%;
        min-height: 0;
    }

    .info-section .info-store__photo img {
        height: 200px;
    }

    .info-section .info-store__btn {
        flex: 1 1 100%;
    }
}