/* Itineraries main (/itineraries), Figma "Itineraries / Main" (4:921). No photo: a plain cream hero
   with the H1 and a filter box. Measured from the Figma render: hero #faf4f0 (= --color-cream),
   filter box 1200x179 on #efe7e1 (we use the --color-sand token, #efeae6; see CHANGES.md "Open tasks"), white fields with #ddd hairlines, semibold type.
   The filter is richer than Figma's mock (multi-select + search, filtering instantly); Figma's
   "Get started" button is dropped and "Clear filters" added - all decided with Pavlo, 2026-10-19. */

/* Figma 4:923: the page isn't a flat cream block - it's a 2108px linear fade starting right under
   the header (where #main-container begins) from #f8f1ec to white, then plain white below.
   --color-cream (#f9f3ee) falls part-way down it, which is why a single sample read as flat.
   Scoped to this page: this stylesheet is only loaded by /itineraries. */
#main-container {
  background-color: var(--color-white);
  background-image: linear-gradient(to bottom, #f8f1ec, var(--color-white));
  background-repeat: no-repeat;
  background-size: 100% 2108px;
}

.itin-hero { padding-block: 71px 56px; }
.itin-hero__title { max-width: 1019px; margin: 0 auto 29px; text-align: center; color: var(--color-ink); }

/* Figma 4:1026: 1200x179, 37px inset top and bottom, eyebrow then a 50px control row */
.itin-filter { max-width: 1200px; margin: 0 auto; padding: 37px var(--space-30); background: var(--color-sand); }
.itin-filter__eyebrow { margin: 0 0 32px; text-align: center; font-weight: 600; color: var(--color-ink); }
.itin-filter__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-20); }

/* Fields (Figma 4:1028 / 4:1031): white, 1px #ddd, 50px tall, uppercase label, right chevron.
   Weight 600, not 700: measured against the Figma render, 700 was visibly too heavy
   (ink density: Figma 16.7%, Poppins 600 17.3%, Poppins 700 22.4%). */
.field {
  position: relative; display: flex; align-items: center;
  min-height: 50px; padding: 0 20px;
  border: 1px solid #ddd; background: var(--color-white);
  font: 600 16px/19px var(--font-body); text-transform: uppercase; color: var(--color-ink);
}
.field--button { cursor: pointer; list-style: none; }
.field--button::-webkit-details-marker { display: none; }
.field__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chevron, drawn rather than another icon: Figma's is a thin 2px caret */
.field__chevron {
  flex: none; width: 9px; height: 9px; margin-left: var(--space-20);
  border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink);
  transform: translateY(-3px) rotate(45deg);
}
.dropdown { position: relative; }
.dropdown[open] .field__chevron { transform: translateY(2px) rotate(-135deg); }
.itin-filter__country { flex: 1 1 418px; max-width: 418px; }
.itin-filter__duration { flex: 1 1 248px; max-width: 248px; }

/* The open panel has no Figma design; styled to match the fields (ASK-DESIGN(itineraries-filter-panel)) */
.dropdown__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  border: 1px solid #ddd; border-top: 0; background: var(--color-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.dropdown__search {
  width: calc(100% - 20px); margin: 10px; padding: 9px 11px;
  border: 1px solid #ddd; font-family: var(--font-body); font-size: 15px;
}
.dropdown__options { max-height: 260px; margin: 0; padding: 0 0 6px; list-style: none; overflow-y: auto; }
.dropdown__option label { display: flex; align-items: center; gap: 10px; padding: 7px 20px; cursor: pointer; font-size: 15px; }
.dropdown__option label:hover { background: var(--color-sand); }
.dropdown__option input { flex: none; accent-color: var(--color-teal); }
/* Ours, not in Figma (Pavlo asked to keep it): outlined rather than filled, so the only action in
   the box reads as a quiet reset, not a call to action. ASK-DESIGN(itineraries-clear-button) */
.itin-filter__clear {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px;
  border: 1px solid var(--color-teal); background: none; color: var(--color-teal);
  font: 600 16px/19px var(--font-body); text-transform: uppercase; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.itin-filter__clear:hover { background: var(--color-teal); color: var(--color-white); }
.itin-filter__clear:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }

.itin-group { padding-block: 47px; }
.itin-group .section-title { text-align: center; margin-bottom: 47px; }

.itin-noresults { max-width: 600px; margin: 60px auto; text-align: center; }
.itin-noresults p { margin-bottom: var(--space-20); }
.itin-noresults .btn-coral { display: inline-flex; min-width: 260px; justify-content: center; }

.itin-disclaimer { margin: 0 0 10px; font-size: 13px; color: var(--color-ink-muted); }

/* Figma is desktop only; stacking the controls is ours */
@media (max-width: 991.98px) {
  .itin-filter { padding: var(--space-30) var(--space-20); }
  .itin-filter__row { flex-direction: column; align-items: stretch; }
  .itin-filter__country, .itin-filter__duration { flex: 1 1 auto; max-width: none; }
}

/* Pavlo, 2026-10-22: 4 per row from 1600px (Figma's 1513px frame shows 3), and each group starts with two rows:
   4 cards below 992px, 6 up to 1599px, 8 at 4 columns. The Show all button hides when nothing is left to show. */
@media (max-width: 991.98px) {
  .itin-group:not(.is-open) .card-grid--3 > :nth-child(n+5) { display: none; }
  .itin-group:not(:has(.card-grid--3 > :nth-child(5))) .itin-more { display: none; }
}
@media (min-width: 992px) and (max-width: 1599.98px) {
  .itin-group:not(.is-open) .card-grid--3 > :nth-child(n+7) { display: none; }
  .itin-group:not(:has(.card-grid--3 > :nth-child(7))) .itin-more { display: none; }
}
@media (min-width: 1600px) {
  #filtered.card-grid--3, .itin-group .card-grid--3 { grid-template-columns: repeat(4, 1fr); }
  .itin-group:not(.is-open) .card-grid--3 > :nth-child(n+9) { display: none; }
  .itin-group:not(:has(.card-grid--3 > :nth-child(9))) .itin-more { display: none; }
}
/* Group headings take focus when reached from the nav menu (#10-days…); no outline on a non-tabbable heading */
.itin-group h2:focus { outline: none; }