/* INK DETAIL — id- prefix
   Documents use the global .pd-doc markup (styles inherited from
   product-detail.css). Quote modal also reuses .pd-quote. */

/* HERO */
.id-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: #fff;
  clip-path: inset(0);
  overflow: hidden;
}

.id-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.id-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(28, 25, 23, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 75% 75% at 70% 50%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 70% 50%, #000 30%, transparent 95%);
}

.id-hero__bg-glow {
  position: absolute;
  top: 50%;
  right: -8%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 25, 23, .14) 0%, rgba(28, 25, 23, .04) 40%, rgba(28, 25, 23, 0) 70%);
  filter: blur(40px);
  transform: translateY(-50%);
  animation: id-glow 8s ease-in-out infinite alternate;
}

@keyframes id-glow {
  0% {
    opacity: .6;
    transform: translateY(-50%) scale(.9);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
}

.id-hero>.container {
  position: relative;
  z-index: 1;
}

.id-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: var(--t-xs);
  color: var(--text-muted);
}

.id-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.id-crumbs a:hover {
  color: var(--text);
}

.id-crumbs i {
  font-size: .75rem;
  color: var(--text-light);
}

.id-crumbs span {
  color: var(--text);
  font-weight: 500;
}

.id-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.id-hero__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-md);
}

.id-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.id-hero__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.id-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.id-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(28, 25, 23, .08);
  border: 1px solid rgba(28, 25, 23, .18);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--accent);
}

.id-hero__chip i {
  font-size: .9rem;
  color: var(--accent);
}

.id-hero__code {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 6px;
}

.id-hero__title {
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text);
}

.id-hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 540px;
}

.id-hero__cta {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* SECTION FRAMEWORK */
.id-section {
  padding: clamp(56px, 8vw, 96px) 0;
  background: #fff;
}

.id-section--alt {
  background: var(--bg-soft);
}

.id-secthead {
  margin-bottom: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.id-secthead__eyebrow {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  font-weight: 500;
}

.id-secthead__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text);
}

.id-secthead__sub {
  font-size: var(--t-md);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 640px;
  margin-top: 4px;
}

/* =========================================================
   PROSE — class-less semantic HTML inside .id-content
   Backend dumps any of: p, h2/h3/h4, ul/ol/li, strong/b, em/i,
   a, blockquote, table, hr, code, pre, img. Each is styled by
   tag selector — no extra classes needed.
   ========================================================= */
.id-content {
  font-size: var(--t-md);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 920px;
}

/* Block spacing — every direct child gets bottom margin; last child resets.
   Heavier blocks (lists, blockquotes, tables) get extra breathing space
   above so they don't visually collide with the paragraph or heading
   that introduces them. */
.id-content>* {
  margin-bottom: 1.3em;
}

.id-content>*:last-child {
  margin-bottom: 0;
}

.id-content>ul,
.id-content>ol,
.id-content>blockquote,
.id-content>table,
.id-content>pre,
.id-content>figure,
.id-content>hr {
  margin-top: 1.4em;
  margin-bottom: 1.6em;
}

/* But if a list/quote/table follows its own heading (h2/h3/h4),
   the heading's margin-bottom already provides the gap — collapse
   the block's margin-top so the pair sits as a unit. */
.id-content>h2+ul,
.id-content>h2+ol,
.id-content>h2+blockquote,
.id-content>h2+table,
.id-content>h2+pre,
.id-content>h3+ul,
.id-content>h3+ol,
.id-content>h3+blockquote,
.id-content>h3+table,
.id-content>h3+pre,
.id-content>h4+ul,
.id-content>h4+ol,
.id-content>h4+blockquote,
.id-content>h4+table,
.id-content>h4+pre {
  margin-top: 0;
}

/* Paragraphs */
.id-content p {
  margin: 0 0 25px 0;
}

/* Headings — clear hierarchy with extra top space when starting a new section */
.id-content h2,
.id-content h3,
.id-content h4 {
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
  font-weight: 600;
}

.id-content h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  margin-top: 1.7em;
  margin-bottom: .55em;
}

.id-content h3 {
  font-size: 1.12rem;
  margin-top: 1.3em;
  margin-bottom: .45em;
}

.id-content h4 {
  font-size: 1rem;
  margin-top: 1.1em;
  margin-bottom: .35em;
}

.id-content>h2:first-child,
.id-content>h3:first-child,
.id-content>h4:first-child {
  margin-top: 0;
}

/* Inline emphasis */
.id-content strong,
.id-content b {
  color: var(--text);
  font-weight: 600;
}

.id-content em,
.id-content i {
  font-style: italic;
}

.id-content small {
  font-size: .85em;
  color: var(--text-muted);
}

.id-content mark {
  background: rgba(28, 25, 23, .12);
  color: var(--text);
  padding: 0 4px;
  border-radius: 3px;
}

/* Links */
.id-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}

.id-content a:hover {
  color: var(--accent-deep, #44403c);
}

/* Lists — accent dot markers, tighter line height */
.id-content ul,
.id-content ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.id-content li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text);
}

.id-content ul li::before {
  content: '';
  position: absolute;
  top: .7em;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.id-content ol {
  counter-reset: id-prose-ol;
}

.id-content ol li {
  counter-increment: id-prose-ol;
  padding-left: 26px;
}

.id-content ol li::before {
  content: counter(id-prose-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.6;
}

/* Nested lists — slight indent, smaller marker */
.id-content li ul,
.id-content li ol {
  margin-top: 8px;
  margin-bottom: 0;
  gap: 6px;
}

.id-content li ul li {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* Blockquote — accent left bar, soft bg */
.id-content blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-style: italic;
  line-height: 1.6;
}

.id-content blockquote p {
  margin: 0;
}

.id-content blockquote p+p {
  margin-top: 8px;
}

.id-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-weight: 500;
}

/* Inline code + code blocks */
.id-content code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  padding: 2px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

.id-content pre {
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: .9em;
  line-height: 1.55;
}

.id-content pre code {
  padding: 0;
  background: none;
  border: none;
  font-size: 1em;
}

/* HR — subtle divider */
.id-content hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 1.8em 0;
}

/* Image — full-width, rounded */
.id-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  margin: 0;
}

.id-content figure {
  margin: 0;
}

.id-content figure figcaption {
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--text-muted);
  text-align: center;
}

/* =========================================================
   TABLE — rounded corners on all sides, hover zebra
   The :first-child / :last-child tr corner trick gives the
   container its rounded outline without overflow:hidden,
   which would clip table-cell box-shadows on hover.
   ========================================================= */
.id-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.id-content thead {
  background: var(--bg-soft);
}

.id-content th,
.id-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.id-content th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}

/* Last row — no bottom border (radius takes over) */
.id-content tbody tr:last-child td {
  border-bottom: none;
}

/* Hover — soft accent fill on the row */
.id-content tbody tr {
  transition: background var(--t-fast) var(--ease);
}

.id-content tbody tr:hover {
  background: rgba(28, 25, 23, .04);
}

/* First column — slightly deeper text */
.id-content tbody td:first-child {
  font-weight: 500;
  color: var(--text);
}

/* =========================================================
   COMPATIBLE PRODUCTS — search-style flat list rows
   Compact rows that scale to many products without dominating.
   ========================================================= */
.id-compat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(12px, 1.6vw, 18px);
}

.id-compat-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease),
    transform var(--t-base-d) var(--ease),
    box-shadow var(--t-base-d) var(--ease);
}

.id-compat-row:hover {
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.id-compat-row__media {
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-soft);
  flex-shrink: 0;
}

.id-compat-row__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}

.id-compat-row:hover .id-compat-row__media img {
  transform: scale(1.06);
}

.id-compat-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.id-compat-row__series {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  font-weight: 500;
}

.id-compat-row__name {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.id-compat-row__arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: .9rem;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-base-d) var(--ease);
}

.id-compat-row:hover .id-compat-row__arrow {
  background: var(--accent);
  color: #fff;
  transform: translateX(3px);
}

/* =========================================================
   RELATED INKS — visual cards (kept from before)
   ========================================================= */
.id-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.id-related-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease),
    transform var(--t-base-d) var(--ease),
    box-shadow var(--t-base-d) var(--ease);
}

.id-related-card:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.id-related-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  overflow: hidden;
}

.id-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}

.id-related-card:hover .id-related-card__media img {
  transform: scale(1.04);
}

.id-related-card__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.id-related-card__code {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  font-weight: 500;
}

.id-related-card__name {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}

.id-related-card__desc {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   SWIPER OVERRIDE — only on mobile via JS
   ========================================================= */
.id-related.swiper {
  display: block;
  overflow: hidden;
}

.id-related.swiper .swiper-wrapper {
  display: flex;
}

.id-related.swiper .swiper-slide>.id-related-card {
  height: 100%;
}

.id-related.swiper .swiper-pagination {
  position: relative;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.id-related.swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--text-light);
  opacity: .5;
  border-radius: 999px;
  transition: width var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.id-related.swiper .swiper-pagination-bullet-active {
  width: 18px;
  background: var(--accent);
  opacity: 1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
  .id-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .id-hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .id-compat-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .id-hero {
    padding-top: calc(var(--header-h) + 24px);
  }

  .id-secthead__title {
    font-size: 1.3rem;
  }

  /* Prose tightens on mobile */
  .id-content {
    font-size: var(--t-sm);
    line-height: 1.6;
  }

  .id-content>* {
    margin-bottom: 1em;
  }

  .id-content>ul,
  .id-content>ol,
  .id-content>blockquote,
  .id-content>table,
  .id-content>pre,
  .id-content>figure,
  .id-content>hr {
    margin-top: 1.1em;
    margin-bottom: 1.3em;
  }

  .id-content li {
    font-size: var(--t-sm);
  }

  .id-content ul li::before {
    top: .55em;
  }

  .id-content h2 {
    font-size: 1.15rem;
  }

  .id-content h3 {
    font-size: 1.05rem;
  }

  .id-content h4 {
    font-size: .95rem;
  }

  .id-content table {
    font-size: .82rem;
  }

  .id-content th,
  .id-content td {
    padding: 10px 12px;
  }

  .id-compat-row {
    padding: 8px 12px 8px 8px;
    gap: 12px;
  }

  .id-compat-row__media {
    width: 60px;
    height: 60px;
  }

  .id-compat-row__name {
    font-size: var(--t-sm);
  }

  .id-compat-row__arrow {
    width: 28px;
    height: 28px;
    font-size: .85rem;
  }

  /* Related ink Swiper bleeds to viewport edges on mobile so the
     carousel rail sits flush with both sides of the screen. The
     left padding inside the swiper preserves the visual line of
     the section above (so the first slide aligns with the heading);
     the right side simply overflows out of view. */
  .id-related.swiper {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: 0;
  }

  .id-related.swiper .swiper-pagination {
    margin-left: 0;
    margin-right: var(--gutter);
  }
}