/**
 * Equipment list card grid on /rooms/zones/equipment.
 *
 * 2-up grid of "kinda big" cards: tool photo, title, status, badge chips,
 * favorite star. Favorited tools sort to the top via the view's flag-count
 * sort; the .mh-equipment-card--favorite class is added by the view's
 * row_class for additional emphasis.
 */

/* Area of Interest options have long labels (e.g. "Wood, Metal & Fabrication");
   give it more room than the other exposed filters. A CSS Injector rule
   sets `.view-filters .views-exposed-form .form-item { flex: 1 1 200px }` at
   the same specificity, so chain a fourth class to win. */
.view-equipment .views-exposed-form .form-item.form-item--area {
  flex: 2 1 24rem;
  min-width: 18rem;
}

.view-equipment .views-exposed-form .form-item.form-item--area select,
.view-equipment .views-exposed-form .form-item.form-item--area .chosen-container {
  max-width: none !important;
  width: 100% !important;
}

/* Gin theme flattens `.row` and `.col` (display: contents) and applies the
   grid on `.view-content` itself (default repeat for ~4 columns). For the
   equipment list we want the user's chosen 2-up "kinda big card" layout, so
   we override the grid-template-columns on the view-content. */
.view.view-equipment .view-content {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 48em) {
  .view.view-equipment .view-content {
    grid-template-columns: 1fr !important;
  }
}

.view-equipment .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--mh-color-border, #e0e0e0);
  border-radius: 0.75rem;
  background: #fff;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.view-equipment .card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.view-equipment .card.favorited {
  border-color: var(--mh-color-warning-300, #ffcc66);
  box-shadow: 0 4px 14px rgba(255, 180, 0, 0.12);
}

/* Image area — keep landscape ratio since tool photos are typically wide. */
.view-equipment .card .card-img-top {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mh-color-neutral-100, #f5f5f5);
}

.view-equipment .card .card-img-top img,
.view-equipment .card .card-img-top a {
  display: block;
  width: 100%;
  height: 100%;
}

.view-equipment .card .card-img-top img {
  object-fit: cover;
}

.view-equipment .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
}

.view-equipment .card .card-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.view-equipment .card .card-title a {
  color: var(--mh-color-brand-primary, #8b1919);
  text-decoration: none;
}

.view-equipment .card .card-title a:hover {
  text-decoration: underline;
}

/* Favorite star — preprocess hook wraps the flag.link_builder output in
   <span class="mh-fav">. The inner <a class="use-ajax flag-..."> handles
   AJAX toggling; we just position and style the wrapper + link as a round
   pill in the card's top-right corner. */
.view-equipment .card {
  position: relative;
}

.view-equipment .card .mh-fav {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
}

.view-equipment .card .mh-fav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mh-color-warning-700, #c08400);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--mh-color-border, #e0e0e0);
  transition: color 120ms ease, background 120ms ease, transform 80ms ease;
  /* Flag module emits its own label text inside the <a>. Hide the text but
     keep it accessible; we render the star glyph via ::before. */
  font-size: 0;
  overflow: hidden;
}

.view-equipment .card .mh-fav .action-flag a::before {
  content: "\2606"; /* ☆ — not yet starred */
  font-size: 1.25rem;
  line-height: 1;
}

.view-equipment .card .mh-fav .action-unflag a::before {
  content: "\2605"; /* ★ — starred */
  font-size: 1.25rem;
  line-height: 1;
}

.view-equipment .card .mh-fav a:hover,
.view-equipment .card .mh-fav a:focus-visible {
  background: #fff;
  color: var(--mh-color-warning-900, #6f4500);
  transform: scale(1.06);
  text-decoration: none;
}

.view-equipment .card .mh-fav .action-unflag a {
  background: var(--mh-color-warning-100, #fff4cc);
  color: var(--mh-color-warning-900, #6f4500);
}

/* The .flag div inside .mh-fav has its own block layout; make it fill the
   positioned wrapper so the clickable target matches the pill bounds. */
.view-equipment .card .mh-fav .flag {
  width: 100%;
  height: 100%;
}

/* Meta row: status pill, badge chips, and View-tool CTA on one horizontal
   line beneath the title. Pinned to the bottom of the card so cards stay
   visually consistent regardless of how tall the title wraps. */
.view-equipment .mh-equipment-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.view-equipment .mh-equipment-card__status,
.view-equipment .mh-equipment-card__badges,
.view-equipment .mh-equipment-card__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

/* Push the CTA to the right edge of the meta row so it reads as the
   primary action without competing with the status/badge chips. */
.view-equipment .mh-equipment-card__cta {
  margin-left: auto;
}

.view-equipment .mh-equipment-card__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.4rem;
  background: var(--mh-color-brand-primary, #8b1919);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease;
}

.view-equipment .mh-equipment-card__cta a:hover,
.view-equipment .mh-equipment-card__cta a:focus-visible {
  background: var(--mh-color-brand-primary-dark, #6c1313);
  color: #fff;
  text-decoration: none;
}

/* Override the existing global rule that adds 15px of top padding to the
   status field; inside our meta row the gap is handled by flex. */
.view-equipment .mh-equipment-card__meta .field.field--name-field-item-status {
  padding-top: 0;
}