/* NRH category tiles — asymmetric bento, machined-industrial */

.nrh-category-tiles {
  padding: clamp(48px, 7vw, 110px) clamp(16px, 4vw, 56px);
}

.nrh-category-tiles__heading {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: left;
}

.nrh-category-tiles__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 230px;
  gap: 12px;
}

.nrh-category-tiles__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--nrh-radius-lg);
  border: 1px solid var(--nrh-line);
  background: var(--nrh-surface);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Featured tile: big bento cell */
.nrh-category-tiles__tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (hover: hover) and (pointer: fine) {
  .nrh-category-tiles__tile:hover {
    transform: translateY(-4px);
    border-color: var(--nrh-line-strong);
    box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.75);
  }
}

.nrh-category-tiles__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.9s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s var(--nrh-ease);
}

@media (hover: hover) and (pointer: fine) {
  .nrh-category-tiles__tile:hover img {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* Ghost background type when no image (and behind images at low opacity) */
.nrh-category-tiles__tile::before {
  content: attr(data-ghost);
  position: absolute;
  right: -8px;
  bottom: -18px;
  z-index: 0;
  font-family: Oswald, sans-serif;
  font-size: clamp(64px, 7vw, 120px);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  white-space: nowrap;
}

.nrh-category-tiles__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(13, 12, 10, 0.55) 68%, rgba(13, 12, 10, 0.92) 100%);
  transition: opacity 0.5s var(--nrh-ease);
}

.nrh-category-tiles__label {
  position: absolute;
  left: 18px;
  bottom: 58px;
  z-index: 2;
  max-width: 80%;
  font-family: Oswald, sans-serif;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .nrh-category-tiles__tile:hover .nrh-category-tiles__label {
    transform: translateY(-4px);
  }
}

.nrh-category-tiles__cta {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nrh-text-dim);
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nrh-category-tiles__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 10px;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), background-color 180ms cubic-bezier(0.23, 1, 0.32, 1), border-color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .nrh-category-tiles__tile:hover .nrh-category-tiles__cta {
    color: var(--nrh-accent);
  }
}

@media (hover: hover) and (pointer: fine) {
  .nrh-category-tiles__tile:hover .nrh-category-tiles__cta-arrow {
    transform: translateX(4px);
    background: var(--nrh-accent);
    border-color: var(--nrh-accent);
    color: #fff;
  }
}

@media (max-width: 989px) {
  .nrh-category-tiles__row {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
  }

  .nrh-category-tiles__tile:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 749px) {
  .nrh-category-tiles__row {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    gap: 8px;
  }

  .nrh-category-tiles__tile:first-child {
    grid-column: span 1;
  }

  .nrh-category-tiles__label {
    left: 14px;
    bottom: 50px;
  }

  .nrh-category-tiles__cta {
    left: 14px;
    bottom: 14px;
  }
}