/* ======================================================================
   collection.css — gemstones.html
   ======================================================================

   Loaded after maison.css and scoped under .page-collection. Everything
   structural comes from the shared .hm-* vocabulary; this file only holds
   what is specific to the listing.

   The grid itself is written by renderGemstones() in script.js, which
   emits .collection-card / .collection-visual / .collection-card-info /
   .wishlist-button. That function is left alone — it is shared with the
   product pages' related-items strip — so the cards are restyled here by
   their generated class names instead, scoped so nothing else moves.
   ====================================================================== */

/* --- Page hero ---------------------------------------------------------
   .hm-page-hero and .hm-breadcrumb moved to maison.css when appointment.html
   opened the same way. Identical values, one definition; nothing on this
   page changed. Look there, not here. */

/* --- Filter bar --------------------------------------------------------
   One hairline above and below, nothing else. The controls are buttons
   that cycle a value on click (see initCollectionFilters), so they read as
   labels that happen to be pressable rather than as form chrome. */
.page-collection .hm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-s3) var(--a-s5);
  padding-block: var(--a-s3);
  border-top: 1px solid var(--a-hairline);
  border-bottom: 1px solid var(--a-hairline);
}
.page-collection .hm-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-s2) var(--a-s4);
}
.page-collection .hm-filters__legend {
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
/* Each select needs a name that says which field it is; on screen the
   chosen option already says so. .hm-visually-hidden also moved to
   maison.css — the appointment form needs it too. */

/* --- Select ------------------------------------------------------------
   The mechanics — appearance:none, the chevron on the wrapper, and the
   dressed-up open list behind @supports (appearance: base-select) — are in
   maison.css, shared with the appointment form. Only the filter bar's own
   type and its active state are here.

   The open list inherits its type from the control, so these filters open
   in the same 11px small caps they are closed in. */
.page-collection .hm-select {
  display: inline-flex;
  align-items: center;
}
.page-collection .hm-select select {
  padding: var(--a-s1) var(--a-s3) var(--a-s1) 0;
  border: 0;
  border-bottom: 1px solid var(--a-hairline);
  border-radius: var(--a-r0);
  background: none;
  font-family: var(--sans);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink);
  cursor: pointer;
  transition: border-color var(--a-d-fast) var(--a-ease-soft);
}
.page-collection .hm-select select:hover { border-bottom-color: var(--a-hairline-strong); }
.page-collection .hm-select select:focus-visible {
  outline: 2px solid var(--a-gold);
  outline-offset: 3px;
}
/* An active filter is marked by its rule turning gold, so the row shows at
   a glance which fields are narrowing the list. apply() sets data-active
   on any select that is not on "all". */
.page-collection .hm-select select[data-active] { border-bottom-color: var(--a-gold); }

.page-collection .hm-filters__clear {
  padding: var(--a-s1) 0;
  border: 0;
  border-bottom: 1px solid var(--a-gold);
  background: none;
  font-family: var(--sans);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink);
  cursor: pointer;
}
.page-collection .hm-filters__clear[hidden] { display: none; }

.page-collection .hm-filters__count {
  margin: var(--a-s4) 0 0;
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}

/* --- The listing grid --------------------------------------------------
   Same treatment as the homepage's four featured stones: photograph,
   hairline, type. No panel, no radius, no shadow. */
.page-collection .collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--a-s4), 3vw, var(--a-s6)) clamp(var(--a-s3), 2.5vw, var(--a-s5));
  margin-top: var(--a-s8);
}
.page-collection .collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Overrides the shared card rule in styles.css, which paints a panel,
     rounds the corners and lifts the card on hover. */
  padding: 0;
  border: 0;
  border-radius: var(--a-r0);
  background: none;
  box-shadow: none;
  transform: none;
}
.page-collection .collection-card:hover {
  transform: none;
  box-shadow: none;
}
.page-collection .collection-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--a-marble);
}
.page-collection .collection-visual .gem-photo {
  margin: 0;
  width: 100%;
  height: 100%;
}
.page-collection .collection-visual .gem-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--a-ease);
}
/* The CSS-drawn fallback gem, for stones with no photograph. */
.page-collection .collection-visual .gem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  transform: translate(-50%, -50%);
}
.page-collection .collection-card:hover .gem-photo-img,
.page-collection .collection-card:focus-within .gem-photo-img {
  transform: scale(1.04);
}

.page-collection .collection-card-info {
  padding: var(--a-s3) 0 0;
  margin-top: var(--a-s3);
  border-top: 1px solid var(--a-hairline);
  transition: transform var(--a-d-mid) var(--a-ease);
}
.page-collection .collection-card:hover .collection-card-info,
.page-collection .collection-card:focus-within .collection-card-info {
  transform: translateY(-4px);
}
.page-collection .collection-card-info h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--a-w-display);
  font-size: var(--a-h3);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}
.page-collection .collection-card-info p {
  margin: var(--a-s2) 0 0;
  font-size: var(--a-label);
  line-height: 2;
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
.page-collection .collection-card-info a {
  display: inline-block;
  position: relative;
  margin-top: var(--a-s3);
  padding: 0 0 var(--a-s1);
  border: 0;
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink);
}
.page-collection .collection-card-info a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--a-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--a-d-fast) var(--a-ease);
}
.page-collection .collection-card-info a:hover::after,
.page-collection .collection-card-info a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* The arrow in the generated markup is decorative; the gold rule already
   carries the affordance. */
.page-collection .collection-card-info a span { display: none; }

/* --- Empty state -------------------------------------------------------
   Shown when a filter combination matches nothing. */
.page-collection .collection-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding-block: var(--a-s8);
  max-width: var(--a-measure);
  font-family: var(--serif);
  font-weight: var(--a-w-display);
  font-size: var(--a-h3);
  line-height: 1.4;
  color: var(--a-ink-soft);
}

/* The save-for-later control is gone from the markup (see the note in
   renderGemstones). Belt and braces in case a cached script.js still
   emits one: styles.css draws that heart from TWO pseudo-elements, so
   overriding just ::before left half a heart behind the replacement —
   which is exactly how it looked. Both have to go, not one. */
.page-collection .wishlist-button { display: none !important; }

/* --- Breakpoints -------------------------------------------------------
   Four across down to two, then one. A listing of eight stones at one
   card per row is a long scroll, so the single column only comes in at
   the narrowest width. */
@media (max-width: 1100px) {
  .page-collection .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-collection .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-collection .hm-filters { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .page-collection .collection-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A filter with no values yet (no mineral or carat on record) is hidden by
   initCollectionFilters with [hidden]; .hm-select sets its own display, so
   the attribute needs saying. */
.page-collection .hm-select[hidden] { display: none; }

/* Two columns on a phone (23 October). One card per row made twelve stones
   a scroll of about 7000px at 375 wide, each photo nearly a screen tall.
   Two keep the stone large enough to read and the collection to about a
   third of that. The name steps down so a two-word name fits a half width. */
@media (max-width: 480px) {
  .page-collection .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--a-s2);
  }
  .page-collection .collection-card-info h2 { font-size: 20px; }
}