/* Theme 2 — Holidays landing: categories, durations, package rails. */

/* Category tiles: photo circle + name + package count */
.t2-cat-rail { grid-auto-columns: calc((100% - 7 * 16px) / 8); padding-bottom: 14px; }
.t2-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1px solid var(--t2-line);
  border-radius: 18px;
  background: #fff;
  color: var(--t2-navy);
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.t2-cat:hover { transform: translateY(-4px); box-shadow: var(--t2-shadow); color: var(--t2-navy); }
.t2-cat.is-on { border-color: var(--t2-blue); box-shadow: 0 0 0 3px rgba(20, 83, 224, 0.15); }
.t2-cat-img { width: 74px; height: 74px; margin-bottom: 6px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 6px 14px rgba(11, 30, 67, 0.15); background: var(--t2-blue-soft); }
.t2-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.t2-cat:hover .t2-cat-img img { transform: scale(1.1); }
.t2-cat strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.t2-cat small { color: var(--t2-muted); font-size: 12px; }

/* Active filter chips in the results head */
.t2-chip-x { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--t2-blue-soft); color: var(--t2-blue); font-size: 13px; font-weight: 600; text-decoration: none; }
.t2-chip-x:hover { background: var(--t2-blue); color: #fff; }

/* Duration tiles */
.t2-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.t2-duration {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--t2-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, var(--t2-bg));
  color: var(--t2-navy);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2-duration:hover { transform: translateY(-3px); box-shadow: var(--t2-shadow); color: var(--t2-navy); }
.t2-duration-ico { display: inline-flex; flex-shrink: 0; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 14px; background: var(--t2-orange-soft); color: var(--t2-orange); }
.t2-duration:nth-child(2) .t2-duration-ico { background: var(--t2-blue-soft); color: var(--t2-blue); }
.t2-duration:nth-child(3) .t2-duration-ico { background: #e5f7ee; color: var(--t2-green); }
.t2-duration-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.t2-duration > span:nth-child(2) { flex: 1; }
.t2-duration strong { display: block; font-size: 15.5px; font-weight: 600; }
.t2-duration small { color: var(--t2-muted); font-size: 12.5px; }
.t2-duration em { display: inline-flex; min-width: 40px; height: 32px; padding: 0 10px; align-items: center; justify-content: center; border-radius: 999px; background: var(--t2-navy); color: #fff; font-size: 13px; font-style: normal; font-weight: 600; }

/* Package rails (one row per category) */
.t2-pkg-rail { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; padding: 4px 2px 14px; }
.t2-pkg-rail .t2-pkg { scroll-snap-align: start; }

/* Grid slots used for the length filter */
.t2-pkg-slot { display: flex; }
.t2-pkg-slot[hidden] { display: none; }
.t2-pkg-slot > .t2-card { width: 100%; }
.t2-pkg-grid .t2-pkg-slot:nth-child(4n+1) .t2-go,
.t2-pkg-grid .t2-pkg-slot:nth-child(4n+2) .t2-go { background: var(--t2-orange); }
.t2-pkg-grid .t2-pkg-slot:nth-child(4n+3) .t2-go { background: #f43f5e; }
.t2-pkg-grid .t2-pkg-slot:nth-child(4n) .t2-go { background: #3b9ec4; }

/* Review cards in a rail */
.t2-review-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
.t2-review-rail .t2-review { display: flex; flex-direction: column; height: 100%; animation: none; }
.t2-review-rail .t2-review blockquote { flex: 1; margin-top: 8px; }

@media (max-width: 1199.98px) {
  .t2-cat-rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .t2-pkg-rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 991.98px) {
  .t2-durations { grid-template-columns: 1fr; }
  .t2-pkg-rail { grid-auto-columns: 46%; }
  .t2-review-rail { grid-auto-columns: 70%; }
}
@media (max-width: 575.98px) {
  .t2-cat-rail { grid-auto-columns: 36%; }
  .t2-pkg-rail { grid-auto-columns: 82%; }
  .t2-review-rail { grid-auto-columns: 88%; }
}