/* ============================================================
   NAAMS product page — styles specific to /products/naams/.
   Builds on the shared classes in assets/css/site.css (buttons,
   badges, section headers, product cards, stats band, hero image
   frame, modal, hazard bar).
   ============================================================ */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.trs-naams-hero { position: relative; background: var(--graphite-900); overflow: hidden; }
.trs-naams-hero__dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 82% 20%, rgba(186,31,57,0.38), transparent 46%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}
.trs-naams-hero__wrap { position: relative; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(40px, 5vw, 84px); }

.trs-naams-breadcrumb { margin-bottom: clamp(24px, 3vw, 40px); }
.trs-naams-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.trs-naams-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.trs-naams-breadcrumb a { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45); text-decoration: none; }
.trs-naams-breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.trs-naams-breadcrumb span[aria-current] { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff; }

.trs-naams-hero__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

.trs-naams-hero__overline {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-500);
}
.trs-naams-hero__overline span { width: 28px; height: 3px; background: var(--amber-500); }
.trs-naams-hero__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; margin: 0 0 18px;
}
.trs-naams-hero__body { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 520px; margin: 0 0 32px; }

.trs-naams-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.trs-naams-hero__media { max-width: 676px; margin: 0 auto; width: 100%; }
/* Real photo is 2500x1406 (~16:9), not the shared hero frame's default 4:3 —
   match its ratio so the parts at the left/right edges aren't cropped. */
[data-naams-hero-frame] { aspect-ratio: 2500 / 1406; }
[data-naams-hero-frame] img[data-naams-hero-image] {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-naams-hero-frame] img[data-naams-hero-image].is-hidden { display: none; }

@media (max-width: 720px) {
  .trs-naams-hero__grid { grid-template-columns: 1fr; }
  .trs-naams-hero__media { order: 2; }
}


/* ---------------------------------------------------------------
   Category card badge / image / placeholder
   --------------------------------------------------------------- */
.trs-naams-cat-code { font-family: var(--font-mono); }

/* Category photos are square product shots; the shared card frame is
   4:3 with object-fit: cover, which crops the top/bottom off a square
   image. Switch to contain (with a white backdrop matching the photos)
   so the whole part is visible instead of cut off. */
[data-naams-grid] .trs-product-card__image { background: #fff; background-image: none; }
[data-naams-grid] .trs-product-card__image img { object-fit: contain; padding: 20px; box-sizing: border-box; }
[data-naams-grid] { margin-top: 40px; }

/* ---------------------------------------------------------------
   CNC Machining cross-promo
   --------------------------------------------------------------- */
.trs-naams-cnc-promo { background: var(--graphite-900); padding: clamp(56px, 7vw, 96px) 0; }
.trs-naams-cnc-promo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.trs-naams-cnc-promo .trs-section-header__title { color: #fff; margin: 14px 0 0; }
.trs-naams-cnc-promo__body { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.7); margin: 18px 0 28px; max-width: 52ch; }
.trs-naams-cnc-promo__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.trs-naams-cnc-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .trs-naams-cnc-promo__grid { grid-template-columns: 1fr; }
  .trs-naams-cnc-promo__media { order: -1; }
}

/* ---------------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------------- */
.trs-naams-faq { max-width: 880px; }
.trs-naams-faq__list { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.trs-naams-faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px 24px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.trs-naams-faq-item--open { border-top-color: var(--brand); }
.trs-naams-faq-item__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 0; width: 100%; text-align: left; cursor: pointer; }
.trs-naams-faq-item__q { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); }
.trs-naams-faq-item__chevron { color: var(--brand); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-standard); }
.trs-naams-faq-item--open .trs-naams-faq-item__chevron { transform: rotate(180deg); }
.trs-naams-faq-item__a { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: 14px 0 0; display: none; }
.trs-naams-faq-item--open .trs-naams-faq-item__a { display: block; }

/* ---------------------------------------------------------------
   Category detail modal
   --------------------------------------------------------------- */
.trs-naams-detail-modal { max-width: 620px; position: relative; }
.trs-naams-detail-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.trs-naams-detail-modal__image {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background-image: linear-gradient(135deg, var(--graphite-100), var(--graphite-200));
}
.trs-naams-detail-modal__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--graphite-100); }
.trs-naams-detail-modal__body { padding: 32px; }
.trs-naams-detail-modal__category {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand);
}
.trs-naams-detail-modal__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; text-transform: uppercase; color: var(--text-strong); margin: 8px 0 4px; }
.trs-naams-detail-modal__code { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.trs-naams-detail-modal__desc { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 16px 0 24px; }

@media (max-width: 560px) {
  .trs-naams-hero__ctas { gap: 10px; }
}