/**
 * Trip Kailash catalogue
 *
 * The package archive and the cards. Loaded on the archive and any taxonomy
 * listing.
 */

.tk-catalogue__head { padding-block: 96px 12px; }
.tk-catalogue__empty { max-width: var(--measure); margin: 40px 0 0; color: var(--text-muted); }

/* ======================================================================
   FILTERS
   Real links. Every one is a URL you can send someone.
   ====================================================================== */

.tk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 44px;
}

.tk-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.tk-filter:hover { border-color: var(--brassline); color: var(--brass-600); }

.tk-filter.is-on {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: #fff;
}

.tk-filter__count {
  font-size: 11px;
  opacity: .72;
}

/* ======================================================================
   CARDS

   The photograph is a photograph, edge to edge, and the words sit on the
   card below it. The old card laid a dark band across the bottom of the
   image with the title inside it, which cut the photograph at an arbitrary
   line and changed height with the length of the title. That is why it read
   as a mistake on every card at once.
   ====================================================================== */

.tk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 28px;
}

.tk-card {
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.tk-card:hover { border-color: var(--brassline); transform: translateY(-4px); }

.tk-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.tk-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-inset);
  overflow: hidden;
}

/* The image fills its frame and nothing sits on top of it except the grading
   chip, which is a small object with its own backing rather than a band cut
   across the picture. */
.tk-card__img,
.tk-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A package with no photograph gets the brand's own materials rather than a
   broken image icon. One card unlike its siblings reads as a fault. */
.tk-card__placeholder {
  background:
    repeating-linear-gradient(108deg, rgba(184, 134, 11, .10) 0 2px, transparent 2px 16px),
    var(--sand-200);
}

.tk-card__grade {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r);
  background: rgba(251, 246, 236, .92);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.tk-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

.tk-card__traditions {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-bottom: 9px;
}

.tk-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.24;
  color: var(--text-heading);
}

.tk-card__pitch {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  /* Held to three lines so every card in a row ends at the same place. A
     ragged bottom edge is the tell that a set of cards was not designed
     together. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tk-card__facts {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Pushed to the bottom, so the price sits on one line across the row whatever
   the pitch length above it. */
.tk-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.tk-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
}

.tk-card__more {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-600);
}

.tk-card:hover .tk-card__more { color: var(--verm-500); }

/* The doors sit inside the catalogue page, so they lose the section's own
   top padding and hand it to the filters below. */
.tk-catalogue .tk-doors-section { padding-block: 40px 72px; }
.tk-catalogue__list { padding-bottom: 96px; }
.tk-catalogue__prose { padding-bottom: 96px; }