/* ============================================================
   TOOLBAR — filter chip row + sort control (MinimalTripListing.cshtml
   only).
   ============================================================ */

/* Quick-filter chips: previously an unbounded horizontally-scrolling
   row (every tour type for the port, no cap) with scroll arrows —
   scroll-to-discover UI that clipped content mid-word against the
   sort control and gave no visible cue there was more to see.
   JS (minimaltriplisting.js) now caps the row at a fixed number of
   chips and appends a "+N more" chip that opens the same Filters
   modal instead. Nothing is hidden without an explicit affordance, and
   .wrap on #filters/#filters-scroll is a plain-CSS safety net if a
   narrow viewport still can't fit the capped row on one line. */
.toolbar-more-mod {
  color: var(--blue-70);
  font-weight: 600;
}

/* Sort / counter block: was two stacked <p> tags of equal weight
   ("Sort by:" / "19 Results") in a cramped column next to a native
   rectangular <select> — the one non-pill control in a row full of
   pills. Counter now reads as the primary text; sort is a compact
   inline label + pill-shaped select. */
.toolbar-count-mod {
  font-family: "Work Sans";
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-90);
  white-space: nowrap;
  margin: 0;
}

.toolbar-sort-label-mod {
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-70);
  white-space: nowrap;
}

.toolbar-select-mod {
  width: auto;
  min-width: 172px;
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-80);
}

@media screen and (max-width: 964px) {
  .toolbar-mod { gap: 12px; }
  .toolbar-sort-mod { justify-content: space-between; }
}

/* ============================================================
   TOUR CARDS — #tours grid (MinimalTripListing.cshtml only).
   Scoped to #tours throughout so nothing here leaks into shared
   utility classes (.h4, .b1, .price-row, etc. are used site-wide).
   ============================================================ */

/* Title: was .h4 (Urbanist 24px, --dark-70) — same gray as the price
   and the body copy below it, so nothing read as "the name of the
   tour." Switched to navy for contrast, keeping Urbanist (the site's
   heading face) but at 21px — between the old 24px heading size and
   the 17px card treatment used on Partners/Groups/destination pages. */
#tours .tour-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Urbanist";
  font-size: 21px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.3;
}

/* Clamped to 2 lines: an unbounded description let one long blurb make
   its card taller than its row neighbors. Capping it keeps card height
   predictable, which is most of what makes the grid feel more compact. */
#tours .tour-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--dark-70);
}

/* ---- Price + action footer ----
   The price used to float loose at the bottom of the body with nothing
   to act on, so the card ended on a number and the visitor had to guess
   that the whole tile was clickable. It's now a closed footer: a
   hairline rule separates it from the description block, the price sits
   in a labelled from/amount/unit stack on the left, and "View details"
   states the action on the right. */
#tours .tour-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--light-15);
}

#tours .tour-card-price-block {
  gap: 2px;
  min-width: 0;
}

/* .price-row and the two captions are <p>, which carries a UA margin
   here — the stack only reads as one price block with it removed. */
#tours .tour-card-price-block p {
  margin: 0;
}

/* Price: was plain --dark-70 gray at the same visual weight as "Per
   Person" beneath it — for a shop card, price is the one number a
   visitor actually scans for, so it gets real contrast and size now. */
#tours .tour-card-price {
  font-family: "Work Sans";
  color: var(--blue-90);
  font-size: 24px;
  line-height: 1.1;
}

#tours .tour-card-price-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-70);
  line-height: 1.2;
}

#tours .tour-card-price-caption {
  font-size: 12px;
  color: var(--dark-70);
  line-height: 1.2;
}

/* CTA reuses the site's .border-button (white/transparent fill, navy
   border and text — the "white button" elsewhere on the site) rather
   than a one-off style, so it matches the button language used
   everywhere else. It's a <span>, not a link — see the comment in the
   Razor loop. It sits under .card-overlay in the stacking order and
   lets pointer events through, so the one anchor on the card still
   handles the click, the right-click menu and open-in-new-tab. It stays
   static on hover/focus — the border-color lift on .card-clickable
   itself is the card's one hover signal, so the button doesn't compete
   with it. */
#tours .tour-card-cta {
  flex-shrink: 0;
  pointer-events: none;
  margin-top: 0;
}

/* Fact pills: the site-wide .pill-outline is a white chip with a
   hairline border, which on a white card body drew three boxes competing
   with the card's own border. Filled and borderless, they read as one
   band of tour facts under the description. */
#tours .pill-outline {
  padding: 5px 10px;
  background-color: var(--light-10);
  border-color: transparent;
}

/* Package tours: a flat mustard wash on the whole card body was tried
   and dropped once already (read as a warning color, duplicated the
   "Multi-Port Packages" pill). Brought back at explicit request to make
   the one discounted-package card stand out more against a page of
   plain white cards — this time as a warm, desaturated gold (not
   mustard) mixed from the same brand gold already used for the hover
   glow ring (rgb(201 162 39)), so the two read as one color language.
   Scoped to .package-tour-card, not "the first card" positionally —
   the gold means "this is a package deal," so it should follow that
   card wherever it sorts, not just sit on whichever card loads first. */
#tours .package-tour-card {
  border-color: rgba(201, 162, 39, 0.55);
}

#tours .package-tour-card .padding-24 {
  background-color: #f1e0a8;
}

/* Footer rule and fact pills switch off the site-wide gray/light-15
   tokens on this card only — both would look muddy sitting on gold. */
#tours .package-tour-card .tour-card-footer {
  border-top-color: rgba(154, 116, 20, 0.3);
}

#tours .package-tour-card .pill-outline {
  background-color: var(--light-00);
}

/* .tour-card-cta reuses .border-button, which is transparent by design
   (see the earlier "white button" comment above) so it shows whatever
   is behind it — on gold that would tint the button gold too. Give it
   an explicit white fill here only, so it still reads as a clean
   button sitting on the gold rather than absorbing it. */
#tours .package-tour-card .tour-card-cta {
  background-color: var(--light-00);
}

/* Duration / group-size / activity-level icons: the three source SVGs
   don't share a color (clock.svg and group.svg default to black via
   currentColor, walk-grey.svg is hardcoded #9AA0AC), so opacity alone
   left them looking like different grays. brightness(0) first collapses
   any source color to a solid black silhouette, then the rest of the
   chain is a calibrated black -> var(--blue-90) (#293358) recolor —
   exact, not approximate, and identical across all three icons. */
#tours .pill-outline .pill-icon-sm img {
  filter: brightness(0) invert(43%) sepia(37%) saturate(575%) hue-rotate(190deg) brightness(48%) contrast(108%);
}

/* Card base — .back-white/.rounded-2/.shadow (from globals.css) already
   cover background, radius, and the hover shadow lift; this only adds
   the hairline border the rest of the site's cards use. */
#tours .card-clickable {
  border: 1px solid var(--light-15);
  transition: border-color 0.2s ease;
}

#tours .card-clickable:hover {
  border-color: var(--blue-50);
}

/* Package card overrides the site-wide blue hover border above — same
   selector specificity, so it has to come after in the cascade to win.
   Blue against the gold body read as green, so this stays in the same
   gold family as the resting border instead. */
#tours .package-tour-card:hover {
  border-color: rgba(201, 162, 39, 0.85);
}

/* ---- Media ---- */

/* Badges sat flush against the image edge, which read as floating
   rather than pinned to the corner. */
#tours .tour-card-badges {
  padding: 12px;
  /* leave the top-right corner clear so a wrapping tag row never runs
     under the itinerary marker */
  max-width: calc(100% - 44px);
}

/* Featured: .pill-tag-green is the pale mint chip used elsewhere for
   passive status, and it washes out over a photo. Featured is the only
   merchandising signal on the card, so it gets a solid fill (a darkened
   --second-A50) and label casing, which separates it from the outlined
   content pills further down. */
#tours .tour-card-featured {
  background-color: #14705c;
  color: var(--light-00);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Itinerary marker — opposite corner from the badges so a Featured tour
   already in the itinerary shows both without collision. */
#tours .tour-card-state {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--light-00);
  box-shadow: 0 1px 4px rgba(9, 9, 10, 0.18);
}

#tours .tour-card-state img {
  width: 16px;
  height: 16px;
}

/* The one motion on the card: the photo pushes in slightly while the
   CTA fills, so hover reads as a single response from the whole tile.
   The gallery already clips overflow, so nothing escapes the frame. */
#tours .tour-card-media .img-in {
  transition: transform 0.35s ease;
}

#tours .card-clickable:hover .tour-card-media .img-in,
#tours .card-clickable:focus-within .tour-card-media .img-in {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  #tours .tour-card-media .img-in,
  #tours .card-clickable:hover .tour-card-media .img-in,
  #tours .card-clickable:focus-within .tour-card-media .img-in {
    transition: none;
    transform: none;
  }
}

/* Mobile keeps the stacked layout (see the .flex-column-to-row override
   at the end of this file); only the footer needs tightening so the CTA
   still sits beside the price in a narrower body. */
@media screen and (max-width: 964px) {
  #tours .tour-card-footer {
    padding-top: 10px;
  }

  #tours .tour-card-cta {
    padding: 8px 12px;
    font-size: 13px;
  }

  #tours .tour-card-price {
    font-size: 21px;
  }
}

/* Y/W view-specific adjustments */

/* Keep ports scrollbar always visible only on itinerary rows used by these views */
#ports-scroll-main.ports-scroll {
    scrollbar-width: thin;
    overflow-x: scroll;
    overflow-y: hidden;
}

/* Itinerary ports visual states:
   - Available ports: blue card
   - Active port: emphasized with stronger blue
   - At Sea cards remain unchanged (.card-port--small) */
#ports-scroll-main [model="card-port"].card-port--default.pointer {
    border-width: 1px;
    border-style: solid;
    border-color: var(--blue-70);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer>div:first-child {
    background-color: var(--light-00);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer>div:last-child {
    background-color: var(--light-10);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer p,
#ports-scroll-main [model="card-port"].card-port--default.pointer span {
    color: var(--blue-70);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer[data-status="active"]>div:first-child {
    background-color: var(--blue-70);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer[data-status="active"]>div:last-child {
    background-color: var(--blue-80);
}

#ports-scroll-main [model="card-port"].card-port--default.pointer[data-status="active"] p,
#ports-scroll-main [model="card-port"].card-port--default.pointer[data-status="active"] span {
    color: var(--light-00);
}

/* Limit thumbs to 3 on these cards */
.gallery-thumb .tour-thumb:nth-of-type(n + 4) {
    display: none !important;
}

/* Avoid stretched cards on desktop when there are <4 visible tours */
@media (min-width: 965px) {
    #tours.tours-compact-desktop .card-clickable {
        flex: 0 0 410px;
        width: 410px;
        max-width: 410px;
    }
}

/* Prevent long pill labels from stretching cards horizontally */
.card-clickable .flex-row.wrap.min-w-0 {
    min-width: 0;
    max-width: 100%;
}

.card-clickable .flex-row.wrap.min-w-0 .pill-outline {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.card-clickable .flex-row.wrap.min-w-0 .pill-outline .f1 {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile: cards were forced into a row (image squeezed to 170px wide,
   text squeezed alongside it) by the generic .flex-column-to-row
   utility, which flips column->row at <=964px for many unrelated
   components sitewide. Overriding it globally would risk breaking
   those, so it's overridden here, scoped to #tours only: stack image
   on top, full width, same as desktop. */
@media screen and (max-width: 964px) {
  #tours .card-clickable.flex-column-to-row {
    flex-direction: column;
  }
  #tours .card-clickable .mob-w-170 {
    width: 100%;
  }
}