/* ==========================================================================
   Escorted tours - search results
   --------------------------------------------------------------------------
   One set of markup, two layouts.

   The results used to be rendered TWICE - search-gridview.phtml and
   search-listview.phtml - with one copy hidden by d-none and the view toggle
   swapping which copy was visible. Same data in both, so the page carried 2N
   cards, 2N carousels and 2N lazy image sets, and the sort and filter JS had
   to be duplicated to keep the hidden copy in step.

   Now search-results.phtml emits each tour once as

       .et-card > .et-media + .et-body + .et-actions

   and the container carries .et-view-grid or .et-view-list. Switching views is
   a class swap on one element; nothing is re-rendered and nothing is hidden.
   ========================================================================== */

.et-results {
    display: grid;
    gap: 1rem;
}

.et-card {
    background: #fff;
    border-radius: var(--cr-radius, 14px);
    box-shadow: 0 2px 8px rgba(16, 34, 68, .06), 0 12px 28px -14px rgba(16, 34, 68, .18);
    overflow: hidden;
    display: flex;
    min-width: 0;
}

.et-media {
    position: relative;
    overflow: hidden;
    background: #eef2f8;
    flex: 0 0 auto;
}
.et-media .carousel,
.et-media .carousel-inner,
.et-media .carousel-item {
    height: 100%;
}
.et-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.et-body {
    padding: .9rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.et-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .4rem;
}

.et-actions {
    padding: .9rem 1rem;
    display: flex;
    flex: 0 0 auto;
}
.et-buttons {
    display: flex;
    gap: .4rem;
    align-items: center;
}
.et-buttons .btn {
    white-space: nowrap;
}
.et-share {
    color: var(--cr-accent, #0056b3);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   GRID - cards stack vertically, several per row
   -------------------------------------------------------------------------- */
.et-results.et-view-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.et-results.et-view-grid .et-card {
    flex-direction: column;
}
.et-results.et-view-grid .et-media {
    height: 190px;
}
.et-results.et-view-grid .et-actions {
    /* pinned to the bottom so cards of unequal text length still line up */
    margin-top: auto;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--cr-line, #e7ebf3);
    flex-wrap: wrap;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   LIST - one card per row, media left, actions right
   -------------------------------------------------------------------------- */
.et-results.et-view-list {
    grid-template-columns: minmax(0, 1fr);
}
.et-results.et-view-list .et-card {
    flex-direction: row;
    align-items: stretch;
}
.et-results.et-view-list .et-media {
    width: 280px;
}
.et-results.et-view-list .et-actions {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    border-left: 1px solid var(--cr-line, #e7ebf3);
    min-width: 190px;
}
.et-results.et-view-list .et-buttons {
    flex-direction: column;
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   Responsive.
   Below lg the grid drops to two columns, and below md BOTH views collapse to
   the same single-column stacked card - on a phone the list/grid distinction
   is meaningless and a 280px media column leaves no room for the text.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .et-results.et-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .et-results.et-view-grid,
    .et-results.et-view-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .et-results.et-view-grid .et-card,
    .et-results.et-view-list .et-card {
        flex-direction: column;
    }
    .et-results.et-view-grid .et-media,
    .et-results.et-view-list .et-media {
        width: 100%;
        height: 200px;
    }
    .et-results.et-view-list .et-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        border-left: 0;
        border-top: 1px solid var(--cr-line, #e7ebf3);
        min-width: 0;
    }
    .et-results.et-view-list .et-buttons {
        flex-direction: row;
    }
}

/* The "no tours match your filters" notice is a grid item like any other, so it
   has to be told to span the full row rather than sit in the first column. */
.et-noresults {
    grid-column: 1 / -1;
}

/* The #gridview / #listview toggles are Bootstrap .nav-link elements and keep
   their existing .active styling - escSetView() in search.phtml just moves the
   class, exactly as the old handlers did. Nothing to add here. */


/* ==========================================================================
   SELECT v2 - single page, no wizard
   --------------------------------------------------------------------------
   select.phtml is a four-step wizard: each step hidden until the one before it
   is finished, and the extras behind a modal that only appears after the final
   CONTINUE. The customer cannot see what the decision costs until they have
   already made most of it.

   v2 puts the four sections on one page with a sticky price rail. Nothing is
   hidden; the rail updates as choices are made.
   ========================================================================== */

.et2-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--cr-accent, #0056b3);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.et2-head {
    border-bottom: 1px solid var(--cr-line, #e7ebf3);
    padding-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Calendar. A CSS grid rather than the old nested flex columns, so a row is
   one element and the seven cells line up by definition - the old markup had
   seven independent columns each looping the calendar separately, which is
   how two of them drifted out of sync and started throwing on click.
   -------------------------------------------------------------------------- */
.et2-cal {
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: var(--cr-radius, 14px);
    overflow: hidden;
}
.et2-cal-head,
.et2-cal-row {
    display: grid;
    grid-template-columns: 1.6fr .8fr .8fr 1fr 1fr 1fr 1fr;
    align-items: center;
}
.et2-cal-head {
    background: #f6f8fb;
    font-size: .78rem;
    font-weight: 600;
    color: #5a6b85;
}
.et2-cal-head > div,
.et2-cal-row > div {
    padding: .65rem .75rem;
}
.et2-cal-row {
    border-top: 1px solid var(--cr-line, #e7ebf3);
    cursor: pointer;
    transition: background .12s ease;
}
.et2-cal-row:hover {
    background: #f2f7ff;
}
.et2-cal-row.selected {
    background: #e7f1ff;
    box-shadow: inset 3px 0 0 var(--cr-accent, #0056b3);
}
.et2-cal-row:focus-visible {
    outline: 2px solid var(--cr-accent, #0056b3);
    outline-offset: -2px;
}
.et2-cal-empty {
    padding: 1.25rem;
    text-align: center;
    color: #6c757d;
}

/* --------------------------------------------------------------------------
   Rooms
   -------------------------------------------------------------------------- */
.et2-room {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: var(--cr-radius, 14px);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.et2-room:hover {
    background: #f6f9ff;
}
.et2-room.selected {
    border-color: var(--cr-accent, #0056b3);
    background: #e7f1ff;
}
.et2-room:focus-visible {
    outline: 2px solid var(--cr-accent, #0056b3);
    outline-offset: 2px;
}
.et2-room-icons {
    flex: 0 0 auto;
    display: flex;
    color: var(--cr-accent, #0056b3);
}
.et2-room-icons svg + svg {
    margin-left: -12px;   /* overlap, so three people read as a group */
}
.et2-room-body { flex: 1 1 auto; min-width: 0; }
.et2-room-price { flex: 0 0 auto; text-align: right; }
.et2-room-badge {
    font-size: .72rem;
    font-weight: 600;
    color: var(--cr-accent, #0056b3);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Price rail
   -------------------------------------------------------------------------- */
.et2-rail {
    border-radius: var(--cr-radius, 14px);
    position: sticky;
    top: 1rem;
}
.et2-rail-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    font-size: .9rem;
}
.et2-rail-total {
    font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   Passenger cards (v2)

   scroll-margin-top is load bearing, not decoration: when validation focuses
   the first bad field it scrolls the card into view, and without the margin the
   heading lands underneath the sticky progress bar.
   -------------------------------------------------------------------------- */
.et2-section {
    border-radius: var(--cr-radius, 14px);
    scroll-margin-top: 6rem;
}
.et2-section .et2-num {
    vertical-align: middle;
    margin-right: .4rem;
}
.et2 .form-control.is-invalid,
.et2 .form-select.is-invalid {
    border-color: #c0392b;
    background-image: none;      /* the icon collides with .travel-input-icon-cont */
    padding-right: .75rem;
}
.et2 .invalid-feedback {
    font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Below lg the rail stops being sticky (it would eat the viewport) and the
   calendar becomes a stack of labelled rows instead of a seven-column grid,
   which is unreadable on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .et2-rail { position: static; }
}
@media (max-width: 767.98px) {
    .et2-cal-head { display: none; }
    .et2-cal-row {
        grid-template-columns: 1fr 1fr;
        padding: .5rem 0;
    }
    .et2-cal-row > div[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #5a6b85;
    }
    .et2-room { flex-wrap: wrap; }
    .et2-room-price { text-align: left; }
}

/* ==========================================================================
   v2 pages: summary, confirm, info, index
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */
.et2-hero {
    background-size: cover;
    background-position: center;
    position: relative;
}
.et2-hero-inner {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(2px);
}
/* Confirmation / summary card image.

   display:block matters: an inline <img> sits on the text baseline and leaves
   a few px of stray whitespace between it and the card body below.

   object-fit:cover with a fixed max-height crops top and bottom, which is fine
   for a wide skyline and brutal for anything taller than it is wide. The
   aspect-ratio pins the crop to a known 21:9 instead of letting it depend on
   the viewport, and min-height stops a panoramic source collapsing to a sliver
   on a narrow screen. The real fix for over-magnified images was upstream -
   AddTourV2 was picking a 220x130 house graphic at random. */
.et2-hero-img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 180px;
    max-height: 340px;
    object-fit: cover;
    background-color: #f2f4f7;
}

/* --- itinerary timeline ---------------------------------------------------
   The marker column is a fixed width so the connecting rule lines up with the
   centre of every marker regardless of how many digits the day number has.
   -------------------------------------------------------------------------- */
.et2-itin-day {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;
    scroll-margin-top: 6rem;
}
.et2-itin-day:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: #e3e8f0;
}
.et2-itin-marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cr-accent, #0d6efd);
    color: #fff;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.et2-itin-img {
    width: 100%;
    max-width: 320px;
    border-radius: var(--cr-radius, 14px);
}
.et2-itin-text :last-child { margin-bottom: 0; }

/* --- inclusions ----------------------------------------------------------- */
.et2-includes {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.et2-includes > li {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: .5rem;
}
.et2-includes > li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--cr-accent, #0d6efd);
    font-weight: 700;
}

/* --- MoneyGram panel ------------------------------------------------------ */
.et2-moneygram .et2-rail-line { padding: .5rem 0; }

/* --- info calendar --------------------------------------------------------
   Seven equal columns. Bookable days are anchors, so they need the link
   styling stripped back off.
   -------------------------------------------------------------------------- */
.et2-cal2-head,
.et2-cal2-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.et2-cal2-head {
    font-size: .75rem;
    font-weight: 600;
    color: #5a6b85;
    text-align: center;
    margin-bottom: 2px;
}
.et2-cal2-cell {
    min-height: 3.25rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    text-decoration: none;
}
.et2-cal2-blank { background: transparent; }
.et2-cal2-na {
    background: #f6f7f9;
    color: #b3bcc9;
}
.et2-cal2-open {
    background: #e8f2ff;
    color: #12395f;
    border: 1px solid #bcd9fb;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.et2-cal2-open:hover,
.et2-cal2-open:focus-visible {
    background: var(--cr-accent, #0d6efd);
    color: #fff;
    transform: translateY(-1px);
}
.et2-cal2-day { font-weight: 600; }
.et2-cal2-price { font-size: .72rem; }

/* --- landing: region cards ------------------------------------------------ */
.et2-region-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .et2-itin-day { grid-template-columns: 2rem 1fr; gap: .75rem; }
    .et2-itin-day:not(:last-child)::before { left: 1rem; }
    .et2-itin-marker { width: 2rem; height: 2rem; font-size: .8rem; }
    .et2-cal2-cell { min-height: 2.75rem; font-size: .7rem; }
}

/* The PLACES value in the info hero. Same size as DATE and DURATION so the
   three values share a baseline; a long city list wraps rather than shrinking,
   because a smaller font in a row of normal ones visibly sits lower. */
.et2-hero-places {
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Month picker (select v2)

   Was a native <select>. Three problems with that: the customer could not see
   how many months existed without opening it, the open list covered the very
   departure table it filters, and "Other dates" - which reloads the page - sat
   in the same list as the months, so a navigation looked like a filter.

   There are only ever two or three months, so they fit on one line as buttons.
   -------------------------------------------------------------------------- */
.et2-months {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.et2-month {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid var(--cr-line, #d7dee9);
    border-radius: 999px;
    background: #fff;
    color: #24334a;
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.et2-month:hover {
    border-color: var(--cr-accent, #0056b3);
    background: #f2f7ff;
}
.et2-month:focus-visible {
    outline: 2px solid var(--cr-accent, #0056b3);
    outline-offset: 2px;
}
.et2-month.active {
    background: var(--cr-accent, #0056b3);
    border-color: var(--cr-accent, #0056b3);
    color: #fff;
    font-weight: 600;
}
/* Count of departures in that month - the reason the pill is worth clicking. */
.et2-month-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #eef2f8;
    color: #5a6b85;
    font-size: .72rem;
    font-weight: 600;
}
.et2-month.active .et2-month-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* The window steppers are navigation, not months - visually separated so a
   page reload never looks like a filter. */
.et2-month-nav {
    border-style: dashed;
    color: #5a6b85;
    background: transparent;
}
.et2-month-nav:first-of-type {
    margin-left: .35rem;
}

@media (max-width: 575.98px) {
    .et2-months { gap: .3rem; }
    .et2-month { padding: .4rem .6rem; font-size: .78rem; }
}

/* Back to the tour page, in the step 1 header. Quiet by default - it is an
   escape hatch, not a call to action competing with CONTINUE. */
.et2-back {
    color: #5a6b85;
    text-decoration: none;
    white-space: nowrap;
    padding: .3rem .1rem;
}
.et2-back:hover,
.et2-back:focus-visible {
    color: var(--cr-accent, #0056b3);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero with no usable photograph.

   Special Tours supply one 220x130 house graphic per tour and nothing else.
   Stretched across a hero that is a 6.6x upscale and reads as broken, so the
   band is rendered as brand colour instead. The tour name, destinations,
   duration and price sit on top either way - which on a booking page is what
   the customer came for.

   Shorter than the photo hero: there is no image to show off, so the content
   should start sooner.
   -------------------------------------------------------------------------- */
/* Specificity matters here: main.css sets `.infoHero .maincontainer { height:
   50vh }` for the photo hero, which is (0,2,0). A bare `.et2-hero-plain` is
   (0,1,0) and loses, which is why the first attempt produced a half-screen
   slab of empty gradient - the padding was never the thing setting the height.
   Matching on both classes wins, and height:auto lets the band hug the card. */
.infoHero .maincontainer.et2-hero-plain {
    height: auto;
    background-image: linear-gradient(135deg, var(--cr-accent, #0056b3) 0%, #06203a 100%);
    background-color: #0b2545;
}
.infoHero .maincontainer.et2-hero-plain > .container {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

/* --------------------------------------------------------------------------
   Autocomplete panel stacking (landing page).

   .search-helper is position:absolute with z-index:2, and its stacking context
   is the positioned wrapper around each field - which sits at the default
   level. The "Popular Destinations" cards come later in the document, so they
   painted OVER the open suggestion list: typing "paris" put the results behind
   the elephant.

   Lifting the whole search card rather than the panel alone, so every field's
   panel clears the sections below without each needing its own z-index.
   -------------------------------------------------------------------------- */
.escortedtours-hero .et2-hero-inner {
    position: relative;
    z-index: 20;
}
.escortedtours-hero .search-helper {
    z-index: 30;
}

/* The photo hero was also height:50vh from main.css, so the card sat near the
   top with a large empty strip of photograph below it. Sizing to content gives
   even space above and below - the container's py-5 is the only spacing left,
   so top and bottom match by construction rather than by luck. */
.infoHero .maincontainer.et2-hero {
    height: auto;
    min-height: 0;
}