/* ==========================================
   SDO PRODUCTS PAGE  (standards/sdo_doc_list.html)

   Was an inline <style> block in the template. Moved out so the page follows
   the same per-app pattern as products.css / featured.css, and so the masthead
   rules below sit beside the carousel rules they interact with.
   ========================================== */

/* ==========================================
   BREADCRUMB BAND
   Same wash as the product page's band, previously an inline style on the
   element with a hardcoded rgb(0, 84, 159). The blue now comes from the token,
   which is a slightly different hue — the literal predated --blue-550.
   ========================================== */

.breadcrumb-container--sdo {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, .9),
    color-mix(in srgb, var(--blue-550), white 85%)
  );
}

/* ==========================================
   MASTHEAD
   The publisher's identity and the featured rail read as two columns rather
   than two stacked bands: the logo, abbreviation and full name are one block
   about the publisher, and everything to their right is about the documents.
   Splitting them that way also stops the identity from claiming a full-width
   row it never needed.
   ========================================== */

.sdo-masthead {
  display: grid;
  gap: var(--space-32px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: var(--space-32px);
}

@media (min-width: 768px) {
  .sdo-masthead {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--space-48px);
  }
}

/* ---------- identity (left) ---------- */

.sdo-identity__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 17rem;
  margin-bottom: var(--space-24px);
}

.sdo-identity__logo .sdo-logo {
  max-width: 100%;
  max-height: 10rem;
  object-fit: contain;
}

/* The abbreviation and the count sit on one line, baseline-independent: the
   badge is a chip, so it centres on the abbreviation's box rather than trying
   to share its baseline. */
.sdo-identity__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-10px);
  margin-bottom: var(--space-8px);
}

/* Brand blue, not the grey the rest of the block uses — this is the one word
   a visitor scans for to confirm they are on the right publisher. */
.sdo-identity__abv {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.sdo-identity__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ---------- featured rail (right) ---------- */

/* Shared by "Featured Documents" and "All Documents" — they are peer sections,
   so one class rather than two rules that have to be kept in step by hand.

   Leading and tracking are the scale's pairings for --text-lg; the 36px values
   this carried before would have been left stranded on 20px type. */
.sdo-section-title {
  margin: 0 0 var(--space-4px);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
}

.sdo-featured__lede {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.sdo-featured__rule {
  height: 1px;
  margin: var(--space-16px) 0 var(--space-24px);
  border: none;
  background-color: var(--border-default);
  opacity: 1;
}

/* ==========================================
   FEATURED CAROUSEL
   ========================================== */

#featuredDocsSwiper {
  padding: 0 var(--space-48px);
  overflow: hidden;
}

#featuredDocsSwiper .swiper-wrapper {
  overflow: visible;
}

#featuredDocsSwiper .swiper-slide {
  overflow: hidden;
  height: auto;
}

.featured-swiper-btn-prev,
.featured-swiper-btn-next {
  width: var(--space-40px);
  height: var(--space-40px);
  background-color: var(--color-primary-light);
  border-radius: 50%;
  transition: all var(--transition-base);
  z-index: 10;
}

.featured-swiper-btn-prev:after,
.featured-swiper-btn-next:after {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.featured-swiper-btn-prev:hover,
.featured-swiper-btn-next:hover {
  background-color: var(--color-primary);
}

.featured-swiper-btn-prev:hover:after,
.featured-swiper-btn-next:hover:after {
  color: var(--text-on-dark);
}

.featured-swiper-btn-prev {
  left: 0;
}

.featured-swiper-btn-next {
  right: 0;
}

#featuredDocsSwiper .swiper-pagination {
  bottom: -30px;
}

@media (max-width: 767.98px) {
  #featuredDocsSwiper {
    padding: 0 var(--space-10px);
  }

  .featured-swiper-btn-prev,
  .featured-swiper-btn-next {
    display: none;
  }
}

/* ==========================================
   FEATURED DOCUMENT CARD
   Used only by this page (blueprints/item-doc_listing.html).
   ========================================== */

.featured-doc-card {
  height: 100%;
  padding: 0 var(--space-8px);
  max-width: 100%;
}

.featured-doc-card .card {
  min-height: 240px;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.featured-doc-card .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* The document number is the card's title — it is what a buyer recognises and
   searches for, so it carries the brand blue and the largest type here. The
   prose title below it is supporting detail. */
.featured-doc-card__code {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-8px);
  padding-bottom: var(--space-12px);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-12px);
}

.featured-doc-card__code i {
  flex: 0 0 auto;
  font-size: var(--icon-xs);
  color: var(--color-primary);
}

.featured-doc-card__code p {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clamped rather than truncated to one line: the description gets the room it
   needs, but a long one cannot push the card past the fixed height and leave
   the carousel's cards uneven. Three lines at --leading-caption fit inside the
   240px card with the header and button accounted for. The full string stays
   reachable through the element's title attribute. */
.featured-doc-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-caption);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-doc-card .nim-btn i {
  transition: transform 0.2s ease;
}

.featured-doc-card .nim-btn:hover i {
  transform: translateX(4px);
}