/* ==========================================================================
   Komponenty: ikony, tlačítka, sociální sítě, formulář, titulky, text,
   akordeon, tabulka termínů, hodnocení, seznamy, karty ceníku
   ========================================================================== */

/* ---------- ikony (soubory v images/icons/, barvu určuje color) ---------- */

.icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.icon--star { --icon: url('../images/icons/star.svg'); }
.icon--gem { --icon: url('../images/icons/gem.svg'); }
.icon--map-marked { --icon: url('../images/icons/map-marked.svg'); }
.icon--phone { --icon: url('../images/icons/phone.svg'); }
.icon--circle { --icon: url('../images/icons/circle.svg'); }
.icon--check { --icon: url('../images/icons/check-square.svg'); }
.icon--user { --icon: url('../images/icons/user.svg'); }
.icon--building { --icon: url('../images/icons/building.svg'); }
.icon--book-open { --icon: url('../images/icons/book-open.svg'); }
.icon--info { --icon: url('../images/icons/info-circle.svg'); }
.icon--step-back { --icon: url('../images/icons/step-back.svg'); }

/* ---------- tlačítko ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 35.28px;
    border: 0;
    background: var(--gold);
    color: #fff;
    font: 500 20px/22px var(--font-ui);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: transform .3s;
}

.button:hover {
    transform: scale(1.05);
}

.button .icon {
    width: 20px;
    height: 20px;
}

/* ---------- sociální sítě ---------- */

.socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #262626;
    text-decoration: none;
}

.socials__link:hover {
    opacity: .9;
}

.socials__link::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.socials__link--instagram { --icon: url('../images/icons/instagram.svg'); background: #262626; }
.socials__link--phone { --icon: url('../images/icons/phone-square.svg'); background: #eb943b; }
.socials__link--facebook { --icon: url('../images/icons/facebook.svg'); background: #3b5998; }
.socials__link--whatsapp { --icon: url('../images/icons/whatsapp.svg'); background: #25d366; }

/* ---------- seznam s ikonami (kontakty, údaje o firmě) ----------
   <ul class="icon-list"><li class="icon-list__item"><span class="icon icon--phone icon-list__icon"></span>
   <span class="icon-list__text">…</span></li></ul>   (odkaz: obal .icon-list__link). Varianta --compact: menší ikony v patičce. */

.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.icon-list__item {
    display: flex;
    align-items: center;
}

.icon-list__item:not(:last-child) {
    padding-bottom: 5px;
    border-bottom: 1px solid #494848;
}

.icon-list__item:not(:first-child) {
    margin-top: 6px;
}

.icon-list__link {
    display: flex;
    flex: 1;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.icon-list__icon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    color: var(--gold);
}

.icon-list__text {
    color: #f0f0f0;
}

.icon-list--compact .icon-list__icon {
    width: 16px;
    height: 16px;
    margin-right: 19px;
    color: var(--gold-light);
}

/* ---------- formulář ---------- */

.form {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.form__field {
    display: block;
    color: #e0e0e0;
}

.form__control {
    display: block;
    width: 100%;
    padding: 16px 22px;
    border: 1px solid #e4e5e7;
    border-radius: 0;
    background: #fff;
    color: #000;
    font: 400 16px/19.7658px var(--font-body);
    text-overflow: ellipsis;
}

.form__control::placeholder {
    color: #757575;
}

.form textarea.form__control {
    padding: 22px;
    resize: vertical;
}

.button--form {
    justify-self: start;
    margin-top: 32px;
    padding: 13px 55px;
    background: var(--gold-light);
    box-shadow: none;
    font: 500 16px/22px var(--font-body);
}

.button--form:hover {
    background: #1a1a1a;
    transform: none;
}

/* ---------- titulky a texty ---------- */

.eyebrow {
    font: 800 17px/23.8px var(--font-label);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
}

.title-display {
    font: 700 46px/50.6px var(--font-title);
    color: #fff;
    text-transform: uppercase;
}

.prose p + p,
.prose p + ul,
.prose ul + p {
    margin-top: 20px;
}

/* ---------- akordeon (otázky a odpovědi) ---------- */

.accordion {
    text-align: left;
}

.accordion__item {
    border-bottom: 1px solid rgba(171, 171, 181, .33);
}

.accordion__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 32px 0;
    color: #fff;
    font: 700 22px/23px var(--font-title);
    list-style: none;
    cursor: pointer;
}

.accordion__title::-webkit-details-marker {
    display: none;
}

.accordion__title::after {
    content: "";
    flex: none;
    width: 24px;
    height: 16px;
    background-color: #fa4f09;
    -webkit-mask: url('../images/icons/chevron-down.svg') right center / 16px 16px no-repeat;
    mask: url('../images/icons/chevron-down.svg') right center / 16px 16px no-repeat;
}

.accordion__item[open] > .accordion__title::after {
    background-color: var(--muted);
    -webkit-mask-image: url('../images/icons/chevron-up.svg');
    mask-image: url('../images/icons/chevron-up.svg');
}

.accordion__content {
    padding: 0 0 32px;
    color: var(--muted);
    font: 400 18px/27px var(--font-body);
}

.accordion__content p {
    margin-bottom: 16px;
}

.accordion__content strong {
    font-weight: 800;
}

/* ---------- tabulka termínů ---------- */

.events {
    width: 100%;
    margin: 0 0 16px;
    table-layout: fixed;
    text-align: left;
}

.events th,
.events td {
    padding: 10px;
    color: #fff;
    font: 400 16px/24px var(--font-body);
    text-align: left;
    vertical-align: top;
}

.events th {
    height: 44.97px;
    background: var(--bg);
}

.events td {
    background: var(--surface);
}

.events strong {
    font-weight: 800;
}

.events .button-small {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: #b19862;
    color: #fff;
    font: 700 16px/24px Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.events .button-small:hover {
    color: #7a7a7a;
}

/* tablet: tabulka je širší než sloupec s obsahem (jako v původním návrhu) */
@media (min-width: 769px) and (max-width: 1024px) {
    .events {
        min-width: 600px;
    }
}

/* úzká obrazovka: každý termín je karta, popisek buňky se bere z data-label */
@media (max-width: 768px) {
    .events,
    .events tbody,
    .events tr,
    .events td {
        display: block;
    }

    .events thead {
        display: none;
    }

    .events tr {
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;
        background: linear-gradient(#111827, #0b1220);
    }

    .events td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        line-height: 18px;
        opacity: .6;
    }

    .events td:last-child {
        margin-top: 12px;
    }

    .events td:last-child::before {
        content: none;
    }

    .events .button-small {
        display: block;
        padding: 14px 0;
        border-radius: 10px;
        text-align: center;
    }
}

/* ---------- hodnocení (recenze) ---------- */

.testimonial {
    padding: 30px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 40px rgba(36, 36, 36, .1);
    color: #000;
    text-align: center;
}

.testimonial__text {
    margin-bottom: 10px;
}

.testimonial__text p {
    margin-bottom: 16px;
}

.testimonial__stars {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.testimonial__stars li {
    width: 16px;
    height: 16px;
    background-color: #f0ad4e;
    -webkit-mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
    mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
}

.testimonial__stars li.is-off {
    background-color: #ccd6df;
}

.testimonial__name {
    margin-top: 8px;
    font: 600 18px/27px var(--font-body);
    color: #000;
}

.testimonial__name small {
    font: 400 15px/22.5px var(--font-body);
    color: #888;
}

/* ---------- vložený obsah (podcast, mapa) ---------- */

.embed {
    display: block;
    width: 100%;
    margin-bottom: 7px;
    border: 0;
    border-radius: 10px;
}

/* Pod tlačítkem odeslání zůstává místo: v původním návrhu se tam zalamoval skrytý ukazatel průběhu,
   kdykoli se vedle tlačítka nevešel (formulář užší než 296 px). */
@media (max-width: 395px) {
    .form {
        padding-bottom: 31px;
    }
}

/* ---------- mobil (do 767 px) ---------- */

@media (max-width: 767px) {
    .eyebrow {
        font-size: 14px;
        line-height: 19.6px;
        letter-spacing: 3px;
    }

    .title-display {
        font-size: 35px;
        line-height: 38.5px;
    }

    .accordion__title {
        font-size: 18px;
        line-height: 23.4px;
    }
}

/* obrázek vložený do textu v editoru */
.content-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
}

/* ---------- výpis termínů z administrace ---------- */

.events__row--past td {
    opacity: .45;
}

.events__status {
    display: inline-block;
    padding: 6px 0;
    font-size: 15px;
    opacity: .7;
}

.events-empty {
    margin: 0 0 16px;
    padding: 20px;
    background: var(--surface);
    color: #fff;
    font: 400 16px/24px var(--font-body);
    text-align: center;
}

/* návrh: termíny jako karty s titulním obrázkem (<!--cms:events cards-->) */
.event-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 0 16px;
}

.event-card {
    flex: 0 1 calc((100% - 40px) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: var(--surface);
    color: #fff;
}

.event-card--past {
    opacity: .45;
}

.event-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg) url('../images/sun.png') center / 40% no-repeat;
}

.event-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

.event-card__when,
.event-card__leader {
    margin: 0;
    font: 400 15px/22px var(--font-body);
    opacity: .75;
}

.event-card__title {
    margin: 0;
    font: 800 20px/28px var(--font-body);
}

.event-card__action {
    margin-top: auto;
    padding-top: 10px;
}

.event-card__action .button-small {
    display: block;
    padding: 12px 0;
    border-radius: 8px;
    background: #b19862;
    color: #fff;
    font: 700 16px/24px Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
}

.events-heading {
    margin: 40px 0 20px;
    color: var(--gold);
    font: 600 36px/42px var(--font-ui);
    text-align: center;
}

@media (min-width: 681px) and (max-width: 1024px) {
    .event-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 680px) {
    .event-card {
        flex-basis: 100%;
    }

    .events-heading {
        font-size: 28px;
        line-height: 34px;
    }
}

.events-list {
    width: 100%;
    min-width: 0;
}

/* ---------- nejbližší termín jako velký pruh (úvodní stránka) ---------- */

.event-feature {
    display: flex;
    overflow: hidden;
    margin: 0 0 24px;
    border: 1px solid rgba(186, 154, 99, .45);
    border-radius: 22px;
    background: linear-gradient(135deg, #2b2b3a 0%, #1f1f2b 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 6px rgba(186, 154, 99, .06);
    color: #fff;
}

.event-feature__media {
    position: relative;
    flex: 0 0 46%;
    min-height: 340px;
}

.event-feature__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg) url('../images/sun.png') center / 45% no-repeat;
}

.event-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(31, 31, 43, .85));
    pointer-events: none;
}

.event-feature__date {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 68px;
    padding: 8px 12px 10px;
    border-radius: 14px;
    background: #b19862;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    color: #fff;
    text-transform: uppercase;
    font: 600 14px/16px var(--font-ui);
    letter-spacing: .08em;
}

.event-feature__date b {
    font: 700 32px/36px var(--font-title);
}

.event-feature__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 40px 44px;
}

.event-feature__eyebrow {
    margin: 0;
    color: #b19862;
    font: 600 14px/20px var(--font-ui);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.event-feature__title {
    margin: 0;
    color: #fff;
    font: 700 38px/46px var(--font-title);
}

.event-feature__meta {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 18px/26px var(--font-body);
}

.event-feature__spots {
    align-self: flex-start;
    margin: 0;
    padding: 4px 14px;
    border: 1px solid rgba(217, 119, 107, .6);
    border-radius: 999px;
    color: #f0a79d;
    font: 600 14px/22px var(--font-body);
}

.event-feature__action {
    margin-top: 6px;
}

.event-feature__action .button-small {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 10px;
    background: #b19862;
    color: #fff;
    font: 700 18px/26px Arial, Helvetica, sans-serif;
    text-decoration: none;
    transition: background-color .3s ease-in-out, transform .3s ease-in-out;
}

.event-feature__action .button-small:hover {
    background: #c4ab74;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .event-feature {
        flex-direction: column;
    }

    .event-feature__media {
        flex-basis: auto;
        min-height: 240px;
    }

    .event-feature__media::after {
        background: linear-gradient(180deg, transparent 60%, rgba(31, 31, 43, .85));
    }

    .event-feature__body {
        padding: 28px 24px 32px;
    }

    .event-feature__title {
        font-size: 30px;
        line-height: 38px;
    }

    .event-feature__action .button-small {
        display: block;
        text-align: center;
    }
}

/* nejbližší termín na stránce Rezervace: dvojitá šířka, obrázek vlevo, text vpravo (<!--cms:events wide-->) */
.event-card--wide {
    flex-basis: calc((100% - 40px) / 3 * 2 + 20px);
    flex-direction: row;
    border-color: rgba(186, 154, 99, .45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}

.event-card--full {
    flex-basis: 100%;
}

.event-card--wide .event-card__image {
    flex: 0 0 48%;
    width: 48%;
    aspect-ratio: auto;
    min-height: 280px;
}

.event-card--wide .event-card__body {
    justify-content: center;
    gap: 10px;
    padding: 28px 32px;
}

.event-card--wide .event-card__title {
    font: 700 30px/38px var(--font-title);
}

.event-card--wide .event-card__when,
.event-card--wide .event-card__leader {
    font-size: 17px;
}

.event-card--wide .event-card__action {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .event-card--wide {
        flex-basis: 100%;
    }
}

@media (max-width: 680px) {
    .event-card--wide {
        flex-direction: column;
    }

    .event-card--wide .event-card__image {
        flex-basis: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .event-card--wide .event-card__body {
        padding: 18px;
    }

    .event-card--wide .event-card__title {
        font-size: 24px;
        line-height: 32px;
    }
}

/* karta vedle dvojité karty se roztáhne do výšky: obrázek dorůstá, text zůstává dole */
.event-card:not(.event-card--wide) .event-card__image {
    flex: 1 0 auto;
}

.event-card__excerpt {
    margin: 4px 0 8px;
    font: 400 16px/26px var(--font-body);
    opacity: .85;
}

.event-card__where {
    margin: 0;
    font: 400 15px/22px var(--font-body);
    opacity: .75;
}

.events__status--live,
.event-card__action .events__status--live {
    color: #d9b36f;
    font-weight: 700;
    opacity: 1;
}

.events__status--live::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #d9b36f;
    animation: events-live 1.6s ease-in-out infinite;
}

@keyframes events-live {
    50% {
        opacity: .25;
    }
}

.event-card__excerpt p {
    margin: 0 0 8px;
}

.event-card__excerpt strong,
.event-card__excerpt b {
    font-weight: 800;
}

.event-card__more {
    color: var(--gold-light);
    text-decoration: none;
    font-weight: 600;
}

.event-card__more:hover {
    color: #fff;
}

/* ---------- veřejné formuláře: ochrana, hlášky, hodnocení ---------- */

.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__notice {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    font: 500 15px/22px var(--font-body);
}

.form__notice--ok {
    border: 1px solid rgba(111, 207, 138, .6);
    background: rgba(111, 207, 138, .16);
}

.form__notice--error {
    border: 1px solid rgba(217, 119, 107, .7);
    background: rgba(217, 119, 107, .18);
}

.form__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    color: #fff;
    font: 400 15px/22px var(--font-body);
}

.form__check input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.form__label {
    padding: 0;
    color: #fff;
    font: 400 16px/24px var(--font-body);
}

/* výběr hvězdiček bez skriptu: přepínače jsou v obráceném pořadí a zobrazují se zprava doleva */
.star-input {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.star-input__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.star-input__stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-input__stars label {
    width: 38px;
    height: 38px;
    cursor: pointer;
    background-color: #5d5d6c;
    -webkit-mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
    mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
    transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}

.star-input__stars input:checked ~ label,
.star-input__stars label:hover,
.star-input__stars label:hover ~ label {
    background-color: #f0ad4e;
}

.star-input__stars label:hover {
    transform: scale(1.12);
}

.star-input__stars input:focus-visible + label {
    outline: 2px solid #f0ad4e;
    outline-offset: 2px;
}

/* výpis hodnocení návštěvníků */
.reviews-list__title {
    margin: 0 0 12px;
    color: var(--gold);
    font: 600 40px/48px var(--font-ui);
    text-align: center;
}

.reviews-list__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 0 0 28px;
    color: #fff;
    font: 400 18px/26px var(--font-body);
}

.reviews-list__stars {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reviews-list__stars li {
    width: 24px;
    height: 24px;
    background-color: #f0ad4e;
    -webkit-mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
    mask: url('../images/icons/rating-star.svg') center / contain no-repeat;
}

.reviews-list__stars li.is-off {
    background-color: #5d5d6c;
}

.reviews-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.reviews-list__item {
    margin: 0;
}

.reviews-list__item .testimonial__stars li {
    width: 20px;
    height: 20px;
}

@media (max-width: 767px) {
    .reviews-list__grid {
        grid-template-columns: 1fr;
    }

    .reviews-list__title {
        font-size: 30px;
        line-height: 38px;
    }
}

.reviews-list {
    padding-top: 50px;
    padding-bottom: 30px;
}