/* ═════════════════════════════════════════════════════════════════════════
   Modal „Detail termínu"

   Stavia na bootstrapovskom `.modal` — pascu na fokus, Escape, `aria-modal`
   a zámok scrollu má hotové. Tento súbor pridáva len to, čo Bootstrap nemá:
   čitateľnú typografiu, kontrast, ktorý prejde WCAG AA, šírku podľa obsahu
   na desktope a **celoobrazovkovú vrstvu na mobile** — bez druhého kusu DOM.

   Rovnako ako pri kartách: `--bs-secondary-color` je v tejto téme `#c5c5c7`,
   teda 1,7 : 1 na bielej. Sekundárny text preto beží na `#5f6775` (5,4 : 1),
   ktorý prejde aj na tónovanom podklade zhrnutia.
   ═════════════════════════════════════════════════════════════════════════ */

.term-detail-modal {
    /* Rozsah zadaný dizajnom. `clamp` drží modal čitateľný aj na 1280 px
       (kde by 920 px bolo cez tri štvrtiny okna) aj na 1920 px. */
    --bs-modal-width: clamp(20rem, 62vw, 57.5rem);
    --bs-modal-border-radius: 20px;
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1.125rem 1.5rem;

    --td-ink: #353844;          /* 11,6 : 1 */
    --td-ink-muted: #5f6775;    /*  5,4 : 1 */
    --td-brand: rgb(var(--bs-primary-rgb));
    --td-brand-strong: #3f34ad;
    --td-line: #dfdfe3;
    --td-tint: rgba(var(--bs-primary-rgb), .06);

    color: var(--td-ink);
}

.term-detail-modal__content {
    /* Viewport, nie pevná výška: obsah sa hýbe podľa dĺžky popisu od
       dodávateľa. `modal-dialog-scrollable` scrolluje telo, hlavička a CTA
       zostávajú mimo scrollu — patička preto nikdy nezakrýva obsah. */
    max-height: calc(100dvh - 3.5rem);
    border: 0;
    box-shadow: 0 1.5rem 3rem rgba(11, 10, 18, .22);
}

.term-detail-modal__header {
    border-bottom: 1px solid var(--td-line);
    padding-top: max(1.125rem, env(safe-area-inset-top, 0px));
}

.term-detail-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Zatváranie musí mať 44 × 44 aj na dotyk. Bootstrapovský `.btn-close` má
   32 px a priesvitnú ikonu — obe sa tu prepisujú. */
.term-detail-modal__close {
    width: 44px;
    height: 44px;
    margin: -.5rem -.5rem -.5rem auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--td-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

.term-detail-modal__close:hover {
    background: rgba(11, 10, 18, .06);
}

.term-detail-modal__close:focus-visible {
    outline: 3px solid var(--td-brand);
    outline-offset: 2px;
}

.term-detail-modal__close svg {
    width: 20px;
    height: 20px;
}

.term-detail-modal__body {
    /* Fokus po otvorení smeruje sem, aby čítačka začala pri obsahu a nie na
       ráme dialógu; orámovať celý obsah by pri tom nebolo namieste. */
    outline: none;
    font-size: 1rem;
    line-height: 1.55;
    padding-bottom: 1.5rem;
}

.term-detail-modal__footer {
    display: block;
    border-top: 1px solid var(--td-line);
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.term-detail-modal__cta {
    min-height: 52px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.term-detail-modal__cta:focus-visible {
    outline: 3px solid var(--td-brand);
    outline-offset: 3px;
}

/* ── Mobil: celoobrazovková vrstva ──────────────────────────────────────── */
/*
   Nie plávajúci modal so zaoblenými rohmi, ale vrstva cez celý použiteľný
   displej. Rohy sú hranaté a okolo nej nie je vidieť pozadie — inak to
   pôsobí ako okno, ktoré sa dá obísť.

   Hranica 767.98 px je bootstrapovské `md`, teda tá istá, na ktorej sa
   v liste kariet skrývajú šípky.
*/
@media (max-width: 767.98px) {
    .term-detail-modal__dialog {
        position: fixed;
        inset: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        /* `dvh` sleduje lištu prehliadača, takže sa obsah pri jej schovaní
           neposunie. Staršie prehliadače spadnú na `vh`. */
        height: 100vh;
        height: 100dvh;
        max-height: none;
    }

    .term-detail-modal__content {
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .term-detail-modal {
        --bs-modal-padding: 1.125rem;
        --bs-modal-header-padding: 1rem 1.125rem;
    }

    /* Vrstva prichádza zdola, nie zhora ako predvolený modal. */
    .term-detail-modal.fade .modal-dialog {
        transform: translateY(100%);
    }

    .term-detail-modal.show .modal-dialog {
        transform: none;
    }
}

/* Kto má vypnuté animácie, nemá vidieť ani nábeh vrstvy. Bootstrap rieši
   svoj vlastný `transform`, nie ten náš. */
@media (prefers-reduced-motion: reduce) {
    .term-detail-modal.fade .modal-dialog {
        transition: none;
        transform: none;
    }
}

/* ═══ Obsah detailu ═══════════════════════════════════════════════════════ */

/* ── Zhrnutie ───────────────────────────────────────────────────────────── */
/* Panel s jemným brandovým podkladom drží to, podľa čoho sa rozhoduje:
   čo, kde, kedy a za koľko. Zvyšok modalu je doplnenie. */
.term-detail__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    padding: 1.125rem;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: var(--td-tint);
}

@media (min-width: 576px) {
    .term-detail__summary {
        grid-template-columns: 104px 1fr;
        align-items: start;
    }
}

.term-detail__summary-media {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #eceaf8;
}

.term-detail__summary-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.term-detail__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;

    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.term-detail__destination {
    margin-bottom: .875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

.term-detail__dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding-top: .875rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), .18);
}

.term-detail__date-label {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--td-ink-muted);
}

.term-detail__date-value {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

.term-detail__dates-arrow {
    color: var(--td-ink-muted);
    font-size: 1.25rem;
}

.term-detail__length {
    margin-left: auto;
    padding: .375rem .875rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.term-detail__price {
    padding-top: .875rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), .18);
}

.term-detail__price-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.term-detail__price-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--td-brand);
}

.term-detail__price-unit {
    font-size: 1rem;
    color: var(--td-ink-muted);
}

.term-detail__price-original {
    font-size: 1rem;
    color: var(--td-ink-muted);
    text-decoration: line-through;
}

.term-detail__saving {
    background: var(--bs-danger);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    padding: .3rem .625rem;
    border-radius: 999px;
}

.term-detail__price-group {
    margin: .5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}

.term-detail__note {
    margin: .625rem 0 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

/* ── Sekcie ─────────────────────────────────────────────────────────────── */
.term-detail__section {
    padding: 1.25rem 0;
    border-top: 1px solid var(--td-line);
}

.term-detail__section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Nadpis skupiny. Verzálky na 13 px sa nedali prečítať — teraz 17 px
   normálnym rezom, ktorý sa aj pri zväčšenom písme drží. */
.term-detail__heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .875rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--td-ink);
}

.term-detail__heading svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--td-brand);
}

.term-detail__list {
    margin: 0;
    display: grid;
    gap: .75rem;
}

.term-detail__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .125rem 1.25rem;
}

@media (min-width: 480px) {
    .term-detail__row {
        grid-template-columns: minmax(8rem, 11rem) 1fr;
        gap: 0 1.25rem;
    }
}

.term-detail__row dt {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

.term-detail__row dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    /* Dlhé slovenské názvy izieb sa musia zalomiť, nie pretiecť. */
    overflow-wrap: anywhere;
}

/* ── Let ────────────────────────────────────────────────────────────────── */
.term-detail__flight {
    padding: 1rem;
    border: 1px solid var(--td-line);
    border-radius: 14px;
}

.term-detail__flight + .term-detail__flight {
    margin-top: .75rem;
}

.term-detail__flight-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .875rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--td-line);
}

.term-detail__flight-route {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.term-detail__flight-day {
    font-size: .9375rem;
    color: var(--td-ink-muted);
    white-space: nowrap;
}

/* Zvislá os letu. Body a spojnicu kreslí CSS, nie znaky — pri zväčšenom
   písme by sa rozišli s textom. Bez `subgrid`: dvojstĺpcová mriežka, do ktorej
   idú značky a obsah striedavo, takže funguje aj v starších prehliadačoch. */
.term-detail__leg {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: .875rem;
}

.term-detail__leg-marker {
    position: relative;
    width: 18px;
}

.term-detail__leg-marker--start::before,
.term-detail__leg-marker--end::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid var(--td-brand);
    background: var(--bs-body-bg);
}

.term-detail__leg-marker--end::before {
    background: var(--td-brand);
}

/* Spojnica medzi bodmi. Vlastný riadok mriežky, takže sa naťahuje presne
   podľa výšky textu vedľa nej. */
.term-detail__leg-marker--line::before {
    content: "";
    position: absolute;
    top: -.35rem;
    bottom: -.35rem;
    left: 8px;
    width: 2px;
    background: rgba(var(--bs-primary-rgb), .35);
}

.term-detail__leg-body {
    padding-bottom: .25rem;
}

.term-detail__leg-time {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.term-detail__leg-overnight {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bs-danger);
    vertical-align: super;
}

.term-detail__leg-place {
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.term-detail__leg-date {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

.term-detail__leg-code {
    font-variant-numeric: tabular-nums;
    color: var(--td-ink-muted);
}

/* Medzičlánok osi: trvanie letu alebo dopravca. */
.term-detail__leg-between {
    grid-column: 2;
    padding: .375rem 0 .625rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

.term-detail__flight-fallback {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

.term-detail__flight-note {
    margin: .875rem 0 0;
    padding-top: .75rem;
    border-top: 1px dashed var(--td-line);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

/* ── Editorský obsah od dodávateľa ──────────────────────────────────────── */
.term-detail__content {
    font-size: 1rem;
    line-height: 1.6;
}

.term-detail__content :last-child {
    margin-bottom: 0;
}

.term-detail__content table {
    width: 100%;
    display: block;
    /* Široká tabuľka od dodávateľa scrolluje sama v sebe, nikdy nie stránka. */
    overflow-x: auto;
}

.term-detail__conditions {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 1rem;
    line-height: 1.6;
}

.term-detail__conditions li + li {
    margin-top: .625rem;
}

.term-detail__freshness {
    margin: 0;
    padding-top: 1.25rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--td-ink-muted);
}

/* ── Kostra počas načítania ─────────────────────────────────────────────── */
.term-detail__skeleton .placeholder {
    display: block;
    height: 1.25rem;
    opacity: .35;
}