/**
 * assets/css/place/trek.css
 * Loaded only when Layout Type == Trek (see kon_enqueue_place_layout_assets).
 * Keep this file to Trek-only overrides — shared component styles
 * (.kon-stat-bar, .kon-itinerary, .kon-packing-list, etc.) live in
 * kon-single.css §11 so Temple/other layouts can reuse them too.
 */

.kon-single-hero--trek .kon-single-hero__overlay {
    background: linear-gradient(180deg, rgba(15, 35, 25, 0.15) 0%, rgba(15, 35, 25, 0.75) 100%);
}

/* -------------------------------------------------------------
   "Book This Trek" sidebar card + enquiry form
   ------------------------------------------------------------- */
.kon-trek-booking__operator {
    font-size: .85rem;
    font-weight: 600;
    color: var(--kon-pine-mid);
    margin: -.35rem 0 var(--kon-space-md);
}

.kon-trek-booking__trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    list-style: none;
    margin: 0 0 var(--kon-space-md);
    padding: 0;
}
.kon-trek-booking__trust-row li {
    font-size: .72rem;
    font-weight: 600;
    color: var(--kon-pine-mid);
    background: var(--kon-pine-light);
    border-radius: var(--kon-radius-pill, 999px);
    padding: .3rem .6rem;
    white-space: nowrap;
}

.kon-trek-booking__submit {
    width: 100%;
    margin-top: .15rem;
    animation: kon-cta-pulse 2.6s ease-in-out infinite;
}
.kon-trek-booking__submit:hover,
.kon-trek-booking__submit:focus-visible {
    animation: none;
}
@keyframes kon-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); }
    50%      { box-shadow: 0 0 0 8px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .kon-trek-booking__submit { animation: none; }
}

.kon-trek-booking__form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: var(--kon-space-md);
}

.kon-trek-booking__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.kon-trek-booking__field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.kon-trek-booking__field label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--kon-ink-mid);
}

.kon-trek-booking__optional {
    font-weight: 400;
    color: var(--kon-ink-soft);
}

.kon-trek-booking__field input,
.kon-trek-booking__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .75rem;
    border: 1.5px solid var(--kon-border-strong);
    border-radius: var(--kon-radius-sm);
    font-family: var(--kon-font-sans);
    font-size: .9rem;
    color: var(--kon-ink);
    background: var(--kon-white);
    transition: border-color var(--kon-transition), box-shadow var(--kon-transition);
}

.kon-trek-booking__field input:focus,
.kon-trek-booking__field textarea:focus {
    outline: none;
    border-color: var(--kon-pine-mid);
    box-shadow: 0 0 0 3px var(--kon-pine-light);
}

.kon-trek-booking__field textarea {
    resize: vertical;
    min-height: 2.4em;
}

.kon-trek-booking__call {
    width: 100%;
    justify-content: center;
    margin-bottom: .6rem;
}

.kon-trek-booking__trust {
    font-size: .8rem;
    color: var(--kon-pine-mid);
    margin: 0;
}

.kon-trek-booking__none {
    font-size: .88rem;
    color: var(--kon-ink-mid);
    margin: 0 0 var(--kon-space-md);
}

/* Small phones: stack date/people instead of squeezing two columns */
@media (max-width: 380px) {
    .kon-trek-booking__row {
        grid-template-columns: 1fr;
    }
}