/* ============================================================
   Tour card: one tour, as /vietnam-tours lists it, and the few lines the homepage
   block adds to the homepage's own card (end of file).

   Its own file because two pages draw a tour: the Vietnam tours list and the homepage
   block. Both load this file, and neither has to load the whole tour module
   stylesheet for it. Colours, radius and buttons come from 20.sondax-common.css.
   ============================================================ */

.st-vt-tcard { background: var(--color-card); border: 1px solid var(--color-border);
              display: grid; grid-template-columns: 250px 1fr 180px; margin-bottom: 13px; }
/* A tour with no photograph yet renders two children, not three. Without this the grid
   still holds the 250px image column open, so the text drops into it and the price block
   takes the wide one - the card reads as broken rather than as merely unillustrated. */
.st-vt-tcard-noimg { grid-template-columns: 1fr 180px; }
.st-vt-tcard > * { min-width: 0; }
.st-vt-card-img { display: block; min-height: 160px; }
.st-vt-card-img img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; }
.st-vt-card-body { padding: 15px 17px; }
.st-vt-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.st-vt-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px;
               border-radius: var(--radius); background: var(--color-muted-bg);
               color: var(--color-muted); border: 1px solid var(--color-border); }
.st-vt-card-title { font-size: 1.0625rem; margin: 0 0 9px; line-height: 1.35; }
.st-vt-card-title a { text-decoration: none; color: var(--color-text); }
.st-vt-card-title a:hover { color: var(--color-secondary); }
.st-vt-card-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 0.8125rem; }
.st-vt-card-meta div { display: flex; gap: 6px; min-width: 0; }
.st-vt-card-meta dt { color: var(--color-muted); margin: 0; }
.st-vt-card-meta dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.st-vt-card-price { border-left: 1px solid var(--color-border); padding: 15px;
                    display: flex; flex-direction: column; justify-content: center;
                    align-items: flex-start; gap: 3px; }
.st-vt-card-from { font-size: 0.71875rem; color: var(--color-muted); }
.st-vt-card-amount { font-size: 1.4375rem; font-weight: 800; color: var(--color-secondary); line-height: 1.1; }
.st-vt-card-unit { font-size: 0.71875rem; color: var(--color-muted); margin-bottom: 8px; }
.st-vt-card-price .st-btn { width: 100%; justify-content: center; }
/* In a draft preview the only thing that matters about a card is whether the public can
   see it. After .st-vt-badge, which it overrides. */
.st-vt-badge-draft { background: #fcf0dc; color: #9c5a06; border-color: var(--color-accent-dark, var(--color-accent)); }

/* The facts under the title: an icon where the label was (TourCard.Meta).
   The label stays in the markup for a screen reader, hidden by .st-vt-sr. The icon sits on
   the first line of a fact that wraps, rather than in the middle of the two lines. The
   selector is one step more specific than 20.sondax-refined.css's .st-vt-card-meta div, which
   loads later and would otherwise set baseline alignment, and an svg has no baseline. */
.st-vt-tcard .st-vt-card-meta div { align-items: flex-start; gap: 8px; }
.st-vt-card-meta dt { flex: 0 0 16px; display: flex; padding-top: 2px; color: var(--color-muted); }
.st-vt-card-meta dt svg { display: block; }
.st-vt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
            clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 800px) {
    .st-vt-tcard { grid-template-columns: 1fr; }
    .st-vt-card-img, .st-vt-card-img img { min-height: 150px; }
    .st-vt-card-price { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ---- homepage block ---------------------------------------------------- */
/* On the homepage a tour is drawn as the card of the Day Tours and Workshops blocks
   (.st-service-card, TourCard.RenderHome) in their grid (.st-service-grid-3), both from
   20.sondax-common.css: three across on a desktop, two on a tablet, one row that swipes
   sideways on a phone. Type sizes and weights come from there too, so the block reads as
   one of its neighbours. What is left here is only what the tour card has of its own. */

/* The card title is an h3 under the block's h2 where theirs is a div, and global.min.css
   sets every h3 to line-height 1.2 (theirs runs at the page's 1.6). Inherit what the div
   gets, so the titles come out the same, and keep the same face if headings get their own. */
.st-vt-home .st-service-title { line-height: inherit; font-family: inherit; }
/* Grey while the photo loads, and in place of one a tour does not have yet. */
.st-vt-home .st-service-img { background: var(--color-muted-bg); }
/* Tour type and price at the foot of the card: the sizes, weights and colours of the
   options count and price on the Day Tours card. */
.st-vt-home-type { font-size: 0.875rem; font-weight: 600; color: var(--color-secondary); }
.st-vt-home-price { text-align: right; }
.st-vt-home-amount { font-size: 1.125rem; font-weight: 800; color: var(--color-text); }
.st-vt-home-unit { font-size: 0.75rem; color: var(--color-muted); }