/*
 * BlazingTrips - tour package detail sections.
 *
 * The three blocks the 2026-09-07 package sections needed and bt.css did not
 * already have: the itinerary timeline, the spec chips on a vehicle card, and
 * the pickup/drop cards. Everything else those sections use - bt-section,
 * bt-card, bt-rail, bt-info, bt-notice, bt-prose - is bt.css's and is reused
 * rather than restated, which is why this file is short.
 *
 * Loaded after bt.css via $page['stylesheets']. It carries bt.css's own bt-
 * prefix and leans on the tokens .bt defines, exactly as bt.css does, so
 * nothing here reaches the views that share theme.css and nothing here works
 * without bt.css in front of it. Written to bt.css's spacing scale and naming
 * and meant to be folded back into it as three more banner sections once the
 * package, cab and gallery sheets land together.
 *
 * Mobile first throughout, like bt.css.
 *
 * Reference: play.tailwindcss.com/JW2HPJHWpf. What is taken from it is the
 * structure - the time column beside the dotted spine, the spec chips under a
 * vehicle name, the two pickup lists side by side. Its palette and its
 * Playfair headings are not: this page already runs a deep teal and terracotta
 * set, and dropping a second one in beside it would read as two design systems
 * bolted onto one page.
 */

/* ------------------------------------------------------------ itinerary -- */
/*
 * Intro column above the timeline on phones, beside it from 992px up. The
 * intro is what carries the heading, so it comes first in the source either
 * way and the timeline never separates a reader from the heading over it.
 */

.bt-itin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

.bt-itin__intro .bt-section__title {
    margin-bottom: .5rem;
}

.bt-itin__intro .bt-section__more {
    margin-top: 1rem;
}

/*
 * The timeline itself. It draws its own panel rather than relying on a tinted
 * section, because it is used on two pages whose section tinting alternates
 * differently - see the note in category_package.php.
 */
.bt-itin__list {
    list-style: none;
    padding: 1.25rem 1.125rem;
    margin: 0;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-card-radius);
    background-color: #fff;
}

.bt-itin__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
}

.bt-itin__item + .bt-itin__item {
    margin-top: .25rem;
}

/*
 * The time reads as a label, not as a heading: it is often absent - "Day 2",
 * "After breakfast" or nothing at all are all valid - and a missing one must
 * not leave a hole in the column.
 */
.bt-itin__time {
    /* A grid item is blockified, so without justify-self the chip would
       stretch the full width of its column on phones. */
    display: inline-block;
    align-self: start;
    justify-self: start;
    padding: .1875rem .5rem;
    border-radius: 100px;
    background-color: var(--bt-teal-tint);
    color: var(--bt-teal);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

/*
 * The spine is a border on the body, not a pseudo-element on the list, so it
 * ends exactly where the last step's copy ends rather than running on past it.
 */
.bt-itin__body {
    position: relative;
    padding: 0 0 1.25rem 1.375rem;
    border-left: 2px solid var(--bt-line);
}

.bt-itin__item:last-child .bt-itin__body {
    border-left-color: transparent;
    padding-bottom: 0;
}

.bt-itin__dot {
    position: absolute;
    left: -11px;
    top: .1875rem;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: var(--bt-clay);
    color: #fff;
    font-size: .625rem;
    line-height: 1;
}

.bt-itin__title {
    color: var(--bt-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.bt-itin__copy {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--bt-ink-soft);
    margin: .375rem 0 0;
}

.bt-itin__copy + .bt-itin__copy {
    margin-top: .25rem;
}

@media (min-width: 576px) {
    /* The time moves into its own column beside the spine, which is the
       reference's layout and is what makes a run of steps scannable. */
    .bt-itin__item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: .875rem;
    }

    .bt-itin__time {
        margin-top: .0625rem;
    }
}

@media (min-width: 992px) {
    .bt-itin {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 2.5rem;
    }

    .bt-itin__list {
        padding: 1.5rem 1.5rem 1.5rem 1.375rem;
    }
}

/* --------------------------------------------------------- vehicle specs -- */
/*
 * The chips under a vehicle name - seats first, then whatever else the panel
 * was given, one per line. A list rather than a paragraph because that is what
 * it is, and because a chip that wraps has to wrap as a unit.
 */

.bt-specs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .875rem;
}

.bt-specs li {
    padding: .1875rem .5rem;
    border: 1px solid var(--bt-line);
    border-radius: 100px;
    background-color: var(--bt-paper);
    font-size: .75rem;
    font-weight: 600;
    color: var(--bt-ink-soft);
}

/* ------------------------------------------------------- pickup and drop -- */
/*
 * Two cards, "Pickup Locations" and "Drop Locations", each a short list of
 * named places. The card shell matches bt-info__card deliberately - they are
 * siblings on the same page - but the copy inside is a list rather than
 * paragraphs, and it does not take the alert treatment: pickup points are
 * helpful, not a warning, and making both loud would make neither loud.
 */

.bt-pickup {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bt-pickup__card {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    background-color: #fff;
}

.bt-pickup__body {
    min-width: 0;
}

.bt-pickup__list {
    list-style: none;
    padding: 0;
    margin: .625rem 0 0;
}

.bt-pickup__list li {
    position: relative;
    padding-left: 1.125rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--bt-ink-soft);
}

.bt-pickup__list li + li {
    margin-top: .25rem;
}

/* A drawn marker rather than a list-style bullet, so it takes the accent
   colour and lines up with the text's first line at any wrap. */
.bt-pickup__list li::before {
    content: '';
    position: absolute;
    left: .25rem;
    top: .625rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bt-clay);
}

@media (min-width: 768px) {
    .bt-pickup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}


/* ==========================================================================
   Package listing (/package)
   ========================================================================== */

/*
 * The listing wears the .bt-stay look /accommodation and /cabs share, so all
 * it needs here is its finder: three fields - destination, trip length,
 * budget - where the hotel search has four.
 */

.bt-stay .bt-finder--3 {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* Tablet: destination across the top, the other two beside each other, the
   button full width under them. */
@media (max-width: 991px) {
    .bt-stay .bt-finder--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bt-stay .bt-finder--3 .bt-finder__submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .bt-stay .bt-finder--3 {
        grid-template-columns: 1fr;
    }
}