.amm-breadcrumb {
  padding-block: 18px;
}

.amm-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--amm-muted);
  font-size: 0.78rem;
}

.amm-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amm-breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--amm-line);
}

.amm-breadcrumb a {
  color: var(--amm-muted);
  text-decoration: none;
}

.amm-breadcrumb a:hover {
  color: var(--amm-red);
}

.amm-breadcrumb [aria-current="page"] {
  color: var(--amm-black);
  font-weight: 700;
}

/* Hero -------------------------------------------------------------- */

/*
 * The watermark and the machine image are composed together, inside
 * .amm-equipment-hero__media: that block is the shared coordinate system
 * (position: relative + isolation: isolate + aspect-ratio) both children
 * are positioned against, so the model name always sits directly behind
 * "its" machine instead of floating relative to the whole hero. Stacking
 * order inside that block (bottom to top): block background (implicit) <
 * watermark (1) < image (2). The content column's own stacking context
 * (z-index: 3) only matters if the grid gap is ever tight enough for the
 * two columns to visually overlap — it guarantees the commercial copy
 * always wins if that happens.
 */
.amm-equipment-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 60vh, 700px);
  padding-block: clamp(32px, 5vw, 64px);
  background: var(--amm-surface);
}

/* No width/max-width/margin here on purpose: .amm-container (already on
   this same element in the markup) provides those, exactly like every
   other section's .amm-container.<section>__inner combo below (features,
   description, whatsapp, quote-form, nav) — none of them set their own
   width either. A width:100% here previously fought .amm-container's
   width for the cascade tie (same specificity, equipment.css loads after
   asianmotor.css, so this rule was winning) and stretched the hero's
   content edge-to-edge instead of sharing the site's centered grid. */
.amm-equipment-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
}

.amm-equipment-hero__content {
  position: relative;
  z-index: 3;
  min-width: 0;
  max-width: 100%;
}

.amm-equipment-hero__content .amm-breadcrumb {
  padding-block: 0 18px;
}

.amm-equipment-hero__category {
  display: block;
  margin-bottom: 10px;
  color: var(--amm-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amm-equipment-hero__content h1 {
  margin-bottom: 8px;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.amm-equipment-hero__name {
  margin-bottom: 16px;
  color: var(--amm-muted);
  font-size: 1rem;
  font-weight: 700;
}

.amm-equipment-hero__description {
  margin-bottom: 26px;
  max-width: 460px;
  color: var(--amm-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Shared coordinate system for watermark + image (see stacking-order note
   above .amm-equipment-hero). aspect-ratio gives the block a predictable
   height from nothing but its own width, so it stays stable for every
   model without a per-model min-height — this is the canvas the future
   externally-standardized 3:2 product photos are meant to drop into
   unchanged. container-type lets the watermark size itself off this
   block's actual width (see .amm-equipment-hero__watermark) instead of
   the viewport, so it scales correctly regardless of the grid ratio. */
.amm-equipment-hero__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
}

.amm-equipment-hero__watermark {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  color: #e4e4e0;
  font-size: clamp(3.2rem, 24cqw, 9rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}

.amm-equipment-hero__image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Características ampliables ----------------------------------------- */

.amm-equipment-features {
  border-bottom: 1px solid var(--amm-line);
  padding-block: clamp(32px, 5vw, 52px);
}

.amm-equipment-features__eyebrow {
  margin: 0 0 20px;
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.amm-equipment-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
}

.amm-equipment-features__item {
  padding-block: 14px;
  border-top: 1px solid var(--amm-line);
}

.amm-equipment-features__item dt {
  margin-bottom: 6px;
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amm-equipment-features__item dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.amm-equipment-features__qualifier {
  margin: 4px 0 0;
  color: var(--amm-muted);
  font-size: 0.76rem;
  font-weight: 600;
}

/* Descripción + galería ----------------------------------------------- */

.amm-equipment-description {
  padding-block: clamp(40px, 6vw, 64px);
}

.amm-equipment-description__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(32px, 5vw, 56px);
}

.amm-equipment-description__text p {
  max-width: 620px;
  margin-bottom: 16px;
  color: var(--amm-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.amm-equipment-gallery {
  min-width: 0;
}

.amm-equipment-gallery__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--amm-surface);
  aspect-ratio: 4 / 3;
}

.amm-equipment-gallery__track {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-equipment-gallery__slide {
  position: absolute;
  inset: 0;
}

/* object-fit: cover assumes a real, full-bleed operating photo (the
   current content for all 5 models — see docs/pending-content.md); a
   transparent cutout used as a gallery image (the fallback in
   asianmotor_minimal_get_equipment_gallery() for a model without one) would
   get cropped instead of floating with padding like it does in the hero. */
.amm-equipment-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amm-equipment-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}

.amm-equipment-gallery__arrow {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--amm-line);
  border-radius: 50%;
  background: var(--amm-white);
  color: var(--amm-black);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.amm-equipment-gallery__arrow:hover {
  border-color: var(--amm-red);
  color: var(--amm-red);
}

.amm-equipment-gallery__dots {
  display: flex;
  gap: 8px;
}

.amm-equipment-gallery__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--amm-line);
  cursor: pointer;
  padding: 0;
}

.amm-equipment-gallery__dot.is-active {
  background: var(--amm-red);
}

/* Certificaciones ------------------------------------------------------ */

.amm-equipment-certifications {
  border-top: 1px solid var(--amm-line);
  border-bottom: 1px solid var(--amm-line);
  padding-block: clamp(28px, 4vw, 40px);
  background: var(--amm-surface);
}

.amm-equipment-certifications__eyebrow {
  margin: 0 0 18px;
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.amm-equipment-certifications__list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-equipment-certifications__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.amm-equipment-certifications__item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.amm-equipment-certifications__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amm-equipment-certifications__text strong {
  font-size: 0.92rem;
  font-weight: 850;
}

.amm-equipment-certifications__text span {
  color: var(--amm-muted);
  font-size: 0.76rem;
}

/* WhatsApp -------------------------------------------------------------- */

.amm-equipment-whatsapp {
  padding-block: clamp(40px, 6vw, 60px);
  background: var(--amm-black);
  color: var(--amm-white);
}

.amm-equipment-whatsapp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.amm-equipment-whatsapp__copy h2 {
  margin-bottom: 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.amm-equipment-whatsapp__copy p {
  margin: 0;
  max-width: 480px;
  color: #c2c2be;
}

.amm-equipment-whatsapp__action {
  flex: 0 0 auto;
}

.amm-equipment-whatsapp .amm-button--primary {
  color: var(--amm-black) !important;
  background: var(--amm-white);
}

.amm-equipment-whatsapp .amm-button--primary:hover {
  color: var(--amm-white) !important;
  background: var(--amm-red);
}

/* Formulario integrado --------------------------------------------------- */

.amm-equipment-quote-form {
  padding-block: clamp(48px, 7vw, 84px);
  scroll-margin-top: 24px;
}

.amm-equipment-quote-form__inner {
  max-width: 640px;
}

.amm-equipment-quote-form h2 {
  margin-bottom: 10px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.amm-equipment-quote-form__selected {
  margin-bottom: 22px;
  color: var(--amm-muted);
  font-size: 0.9rem;
}

/* Navegación -------------------------------------------------------------- */

.amm-equipment-nav {
  padding-block: clamp(40px, 6vw, 64px);
}

.amm-equipment-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.amm-equipment-nav__back {
  color: var(--amm-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.amm-equipment-nav__back:hover {
  color: var(--amm-red);
}

.amm-equipment-nav__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.amm-equipment-nav__prev,
.amm-equipment-nav__next {
  color: var(--amm-black);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.amm-equipment-nav__prev:hover,
.amm-equipment-nav__next:hover {
  color: var(--amm-red);
}

.amm-equipment-nav__related-title {
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 850;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Tablet: still two columns (there's enough room for the machine to
     stay the protagonist) — only the ratio, spacing and hero height taper
     off. The single-column transform happens later, at 640px. */
  .amm-equipment-hero {
    min-height: auto;
  }

  .amm-equipment-hero__inner {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
    gap: clamp(20px, 4vw, 36px);
  }

  .amm-equipment-hero__watermark {
    top: 8%;
  }

  .amm-equipment-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .amm-equipment-description__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-equipment-whatsapp__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .amm-equipment-whatsapp__action .amm-button {
    width: 100%;
  }
}

@media (max-width: 720px) {
  /* Still two columns here — this only tightens the same tablet
     composition further as the viewport keeps shrinking. */
  .amm-equipment-hero__inner {
    gap: clamp(16px, 4vw, 28px);
  }

  .amm-equipment-features__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-equipment-gallery__viewport {
    aspect-ratio: 1 / 1;
  }

  .amm-equipment-certifications__list {
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  /* Mobile: single column, but the image is promoted to right after the
     breadcrumb/category — before the model name — instead of sitting
     after the whole text block like it does implicitly on desktop:
     breadcrumb → category → image → H1 → name → intro → CTA.
     .amm-equipment-hero__content switches to display:contents (desktop
     is untouched, this only applies in this media query), which unwraps
     it so its children become direct grid items alongside
     .amm-equipment-hero__media and can each get their own [order] —
     no HTML/PHP changes needed, and display:contents doesn't affect
     CSS selector matching, so the descendant selectors below still work. */
  .amm-equipment-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 28px);
  }

  .amm-equipment-hero__content {
    display: contents;
  }

  .amm-equipment-hero__content .amm-breadcrumb {
    order: 1;
  }

  .amm-equipment-hero__category {
    order: 2;
  }

  .amm-equipment-hero__media {
    order: 3;
    margin-top: 4px;
  }

  .amm-equipment-hero__content h1 {
    order: 4;
  }

  .amm-equipment-hero__name {
    order: 5;
  }

  .amm-equipment-hero__description {
    order: 6;
  }

  .amm-equipment-hero__content .amm-button {
    order: 7;
  }

  .amm-equipment-hero__watermark {
    top: 6%;
    font-size: clamp(2.6rem, 26cqw, 5rem);
  }
}