/* ══════════════════════════════════════════════
   OPUS Flooring — Product Catalogue
   css/components.css — Reusable component styles
   Depends on: css/main.css (all colour/spacing tokens)
   ══════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. Section Header with Gold Rule
   Usage: <div class="section-header">
            <h2 class="section-header__title">...</h2>
            <p class="section-header__subtitle">...</p>  (optional)
          </div>
   ────────────────────────────────────────────── */

.section-header {
  margin-bottom: var(--space-xl);
}

.section-header__title {
  display: inline-block;
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--color-gold);
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .section-header__title {
    font-size: var(--font-size-xl);
  }
}

.section-header__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  max-width: none;
  line-height: var(--line-height-loose);
  margin: 0;
}

@media (forced-colors: active) {
  .section-header__title {
    border-bottom: 3px solid ButtonText;
  }
}

/* ──────────────────────────────────────────────
   2. Category Navigation Bar
   Usage: <nav class="cat-nav" aria-label="Catalogue chapters">
            <ul class="cat-nav__list">
              <li><a class="cat-nav__link" href="...">Chapter</a></li>
              <li><a class="cat-nav__link" aria-current="page" href="...">Active</a></li>
            </ul>
          </nav>
   ────────────────────────────────────────────── */

.cat-nav {
  background-color: var(--color-cream);
  border-bottom: 2px solid var(--color-border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cat-nav__list {
  display: flex;
  align-items: stretch;
  gap: 0;
  white-space: nowrap;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.cat-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-secondary);
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  white-space: nowrap;
}

.cat-nav__link:hover,
.cat-nav__link:focus {
  color: var(--color-primary);
  background-color: var(--color-white);
}

.cat-nav__link[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.cat-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .cat-nav__link {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cat-nav {
    border-bottom: 2px solid ButtonBorder;
  }

  .cat-nav__link[aria-current="page"] {
    border-bottom-color: ButtonText;
  }
}

/* ──────────────────────────────────────────────
   3. Product Grid and Product Card
   Usage: <article class="product-card">
            <div class="product-card__image-wrap">
              <img class="product-card__image" loading="lazy" src="..." alt="...">
            </div>
            <div class="product-card__body">
              <p class="product-card__sku">SKU</p>
              <h3 class="product-card__name">Name</h3>
              <p class="product-card__desc">Short description</p>
              <ul class="product-card__chips">...</ul>
              <a class="cta-button cta-button--sm" href="#sku">View Specifications</a>
            </div>
          </article>
   ────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .product-card {
    transition: none;
  }
}

@media (forced-colors: active) {
  .product-card {
    border: 1px solid ButtonBorder;
  }

  .product-card:hover {
    border: 2px solid ButtonText;
  }
}

.product-card__image-wrap {
  aspect-ratio: 4 / 3;
  background-color: var(--color-cream);
  overflow: hidden;
  flex-shrink: 0;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .product-card__image {
    transition: none;
  }
}

.product-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
}

.product-card__sku {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0;
}

.product-card__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.product-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0;
}

.product-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ──────────────────────────────────────────────
   4. Specification Table
   Usage: <div class="spec-table-wrap">
            <table class="spec-table" aria-label="[Product Name] specifications">
              <thead>
                <tr><th colspan="2">Specifications — [SKU]</th></tr>
              </thead>
              <tbody>
                <tr><th scope="row">Label</th><td>Value <span class="spec-unit">unit</span></td></tr>
              </tbody>
              <tfoot>
                <tr><td colspan="2" class="spec-table__note">Footnote text</td></tr>
              </tfoot>
            </table>
          </div>
   ────────────────────────────────────────────── */

.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.spec-table {
  font-size: var(--font-size-sm);
  border-collapse: collapse;
  min-width: 420px;
}

/* Header row */
.spec-table thead tr {
  background-color: var(--color-primary);
}

.spec-table thead th {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  text-align: left;
}

/* Alternating body rows */
.spec-table tbody tr:nth-child(odd) {
  background-color: var(--color-white);
}

.spec-table tbody tr:nth-child(even) {
  background-color: var(--color-cream);
}

.spec-table tbody tr:hover {
  background-color: var(--color-gold-light);
}

/* Row header (left column — spec label) */
.spec-table tbody th {
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--font-weight-semi);
  color: var(--color-text);
  text-align: left;
  width: 45%;
  vertical-align: top;
  border-right: 1px solid var(--color-border-light);
  white-space: nowrap;
}

/* Value cell (right column) */
.spec-table tbody td {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

/* All cells get bottom border */
.spec-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
}

.spec-table tbody tr:last-child {
  border-bottom: none;
}

/* Footnote row */
.spec-table tfoot td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-style: italic;
  background-color: var(--color-cream);
  border-top: 1px solid var(--color-border-light);
  text-align: left;
}

/* Multi-column table variant: left-align all body cells */
.spec-table--multicolumn tbody td {
  text-align: left;
}

/* Inline unit label */
.spec-unit {
  color: var(--color-text-secondary);
  font-size: inherit;
  margin-left: var(--space-xs);
  font-variant-numeric: normal;
}

/* "Testing in progress" status indicator */
.spec-status {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* "Documentation available" / confirmed status modifier */
.spec-status--available {
  color: var(--color-primary);
  font-style: normal;
  font-weight: var(--font-weight-semi);
}

@media (forced-colors: active) {
  .spec-table-wrap {
    border: 1px solid ButtonBorder;
  }

  .spec-table thead tr {
    background-color: ButtonFace;
  }

  .spec-table thead th {
    color: ButtonText;
    border-bottom: 2px solid ButtonText;
  }

  .spec-table tbody th,
  .spec-table tbody td {
    border: 1px solid ButtonBorder;
  }
}

/* ──────────────────────────────────────────────
   5. Product Entry Block
   Usage: <section class="product-entry" id="[sku-slug]" aria-labelledby="[sku-slug]-heading">
            <div class="product-entry__header">...</div>
            <div class="product-entry__body">
              <div class="product-entry__images">...</div>
              <div class="product-entry__specs">...</div>
            </div>
          </section>
   ────────────────────────────────────────────── */

.product-entry {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-border-light);
}

.product-entry:last-child {
  border-bottom: none;
}

.product-entry__header {
  margin-bottom: var(--space-xl);
}

.product-entry__sku-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.product-entry__heading {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.product-entry__desc {
  font-size: var(--font-size-base);
  color: var(--color-text);
  max-width: 72ch;
  margin-bottom: var(--space-md);
}

.product-entry__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: start;
  min-width: 0;
}

@media (max-width: 768px) {
  .product-entry__body {
    grid-template-columns: 1fr;
  }
}

.product-entry__images {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: sticky;
  top: calc(80px + var(--space-md));
  align-self: start;
  min-width: 0;
}

@media (max-width: 768px) {
  .product-entry__images {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-entry__specs {
  min-width: 0;
}

.product-entry__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background-color: var(--color-cream);
  object-fit: cover;
}

.product-entry__img--primary {
  aspect-ratio: 4 / 3;
}

.product-entry__img--secondary {
  aspect-ratio: 1 / 1;
  width: calc(50% - var(--space-xs));
}

/* ──────────────────────────────────────────────
   6. Product Index List
   Usage: <nav class="product-index" aria-label="Products in this chapter">
            <ol class="product-index__list">
              <li class="product-index__item">
                <a class="product-index__link" href="#sku-slug">
                  <span class="product-index__sku">SKU</span>
                  <span class="product-index__name">Product Name</span>
                  <span class="product-index__arrow" aria-hidden="true">→</span>
                </a>
              </li>
            </ol>
          </nav>
   ────────────────────────────────────────────── */

.product-index {
  background-color: var(--color-cream);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.product-index__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.product-index__list {
  list-style: none;
  counter-reset: product-counter;
}

.product-index__item {
  counter-increment: product-counter;
  border-bottom: 1px solid var(--color-border-light);
}

.product-index__item:last-child {
  border-bottom: none;
}

.product-index__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.15s, padding-left 0.15s;
}

.product-index__link::before {
  content: counter(product-counter, decimal-leading-zero);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  flex-shrink: 0;
}

.product-index__link:hover,
.product-index__link:focus {
  color: var(--color-primary);
  padding-left: var(--space-sm);
}

.product-index__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.product-index__sku {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  min-width: 9rem;
  flex-shrink: 0;
}

.product-index__name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.product-index__arrow {
  color: var(--color-gold-medium);
  font-size: var(--font-size-base);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.product-index__link:hover .product-index__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

  .product-index__link,
  .product-index__arrow {
    transition: none;
  }
}

@media (max-width: 480px) {
  .product-index__link {
    flex-wrap: wrap;
  }

  .product-index__sku {
    min-width: auto;
  }
}

/* ──────────────────────────────────────────────
   7. Comparison Summary Table
   The comparison-table-wrap enables horizontal scroll
   at narrow viewports, scoped to this component only.
   ────────────────────────────────────────────── */

.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.comparison-table {
  border-collapse: collapse;
  min-width: 800px;
  font-size: var(--font-size-sm);
}

.comparison-table thead tr {
  background-color: var(--color-primary);
}

.comparison-table thead th {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  font-size: var(--font-size-xs);
}

.comparison-table thead th:first-child {
  text-align: left;
}

.comparison-table tbody tr:nth-child(odd) {
  background-color: var(--color-white);
}

.comparison-table tbody tr:nth-child(even) {
  background-color: var(--color-cream);
}

.comparison-table tbody tr:hover {
  background-color: var(--color-gold-light);
}

/* Material group separators */
.comparison-table tbody tr.group-separator td,
.comparison-table tbody tr.group-separator th {
  background-color: var(--color-cream);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  border-top: 2px solid var(--color-border);
}

.comparison-table tbody th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: var(--font-weight-semi);
  white-space: nowrap;
}

.comparison-table tbody th a {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.comparison-table tbody th a:hover {
  text-decoration: underline;
}

.comparison-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--color-border-light);
}

.comparison-table tfoot td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-secondary);
  background-color: var(--color-cream);
  border-top: 1px solid var(--color-border);
  text-align: left;
}

@media (forced-colors: active) {
  .comparison-table-wrap {
    border: 1px solid ButtonBorder;
  }

  .comparison-table thead tr {
    background-color: ButtonFace;
  }

  .comparison-table thead th {
    color: ButtonText;
    border-bottom: 2px solid ButtonText;
  }
}

/* ──────────────────────────────────────────────
   8. Certification Badge
   Usage: <ul class="cert-badge-list">
            <li>
              <span class="cert-badge cert-badge--available" aria-label="RoHS — Documentation available">
                RoHS
              </span>
            </li>
          </ul>
   ────────────────────────────────────────────── */

.cert-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
}

/* Available / confirmed */
.cert-badge--available {
  color: var(--color-primary);
  background-color: var(--color-cream);
  border-color: var(--color-gold);
}

/* In progress */
.cert-badge--pending {
  color: var(--color-text-secondary);
  background-color: var(--color-white);
  border-color: var(--color-border-light);
  border-style: dashed;
}

@media (forced-colors: active) {
  .cert-badge {
    border: 2px solid ButtonBorder;
    background-color: ButtonFace;
    color: ButtonText;
  }
}

/* ──────────────────────────────────────────────
   9. Feature Chip / Tag
   Usage: <ul class="chip-list">
            <li><span class="chip">Laminate</span></li>
          </ul>
   ────────────────────────────────────────────── */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 2px var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text);
  background-color: var(--color-cream);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.chip--primary {
  color: var(--color-primary);
  background-color: var(--color-cream);
  border-color: var(--color-gold);
}

/* ──────────────────────────────────────────────
   10. Alert / Notice Box
   Usage: <div class="notice notice--info" role="note">
            <p>...</p>
          </div>
   ────────────────────────────────────────────── */

.notice {
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-gold);
  background-color: var(--color-cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-md);
}

.notice p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-base);
  max-width: none;
}

.notice--warning {
  border-left-color: var(--color-primary);
}

@media (forced-colors: active) {
  .notice {
    border: 1px solid ButtonBorder;
    border-left: 4px solid ButtonText;
  }
}

/* ──────────────────────────────────────────────
   11. CTA Section and Button
   Usage: <a class="cta-button" href="...">Label</a>
          <button class="cta-button" type="submit">Label</button>
   ────────────────────────────────────────────── */

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.cta-button:hover,
.cta-button:focus {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-white);
  text-decoration: none;
}

.cta-button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Transparent outline fallback for forced-colors focus */
.cta-button:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--color-gold);
}

.cta-button--outline {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.cta-button--outline:hover,
.cta-button--outline:focus {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cta-button--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
}

/* CTA section block */
.cta-section {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-2xl);
  text-align: center;
}

.cta-section__title {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.cta-section__subtitle {
  color: var(--color-gold-light);
  font-size: var(--font-size-md);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.cta-section .cta-button {
  background-color: var(--color-gold-medium);
  border-color: var(--color-gold-medium);
  color: var(--color-primary);
}

.cta-section .cta-button:hover,
.cta-section .cta-button:focus {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .cta-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cta-button {
    border: 2px solid ButtonBorder;
    background-color: ButtonFace;
    color: ButtonText;
  }

  .cta-button:focus {
    box-shadow: none;
    outline: 2px solid ButtonText;
  }
}

/* ──────────────────────────────────────────────
   12. Breadcrumb Navigation
   Usage: <nav class="breadcrumb" aria-label="Breadcrumb">
            <ol class="breadcrumb__list">
              <li class="breadcrumb__item">
                <a class="breadcrumb__link" href="/">Home</a>
              </li>
              <li class="breadcrumb__item" aria-current="page">
                Chapter Title
              </li>
            </ol>
          </nav>
   ────────────────────────────────────────────── */

.breadcrumb {
  padding-block: var(--space-sm);
  font-size: var(--font-size-xs);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  list-style: none;
}

.breadcrumb__item+.breadcrumb__item::before {
  content: '/';
  color: var(--color-text-secondary);
  padding-right: var(--space-xs);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-semi);
}

/* ──────────────────────────────────────────────
   13. About / Company Block
   Used on About OPUS section of index.html
   ────────────────────────────────────────────── */

.company-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 768px) {
  .company-block {
    grid-template-columns: 1fr;
  }
}

.company-block__image {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.company-block__image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.trust-box {
  background-color: var(--color-cream);
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-lg);
}

.trust-box__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.trust-box__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trust-box__item {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding-left: var(--space-md);
  position: relative;
}

.trust-box__item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-gold-medium);
}

/* ──────────────────────────────────────────────
   14. Chapter Navigation
   Used at the bottom of each chapter page
   ────────────────────────────────────────────── */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.chapter-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.chapter-nav__link:hover,
.chapter-nav__link:focus {
  background-color: var(--color-cream);
  border-color: var(--color-gold);
}

.chapter-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chapter-nav__link {
    transition: none;
  }
}

/* ──────────────────────────────────────────────
   15. Contact Component
   Used on the contact page
   ────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.contact-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}

.contact-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-cream);
}

.contact-card__content {
  font-style: normal;
  line-height: var(--line-height-loose);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.contact-card__content p {
  margin-bottom: var(--space-sm);
}

.contact-card__content a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semi);
}

@media (prefers-reduced-motion: reduce) {
  .contact-card {
    transition: none;
  }
}

@media (forced-colors: active) {
  .contact-card {
    border: 1px solid ButtonBorder;
  }

  .contact-card:hover {
    border: 2px solid ButtonText;
  }
}

/* ──────────────────────────────────────────────
   16. Photo Grid
   Responsive 3→2→1 column image gallery.
   Usage: <ul class="photo-grid" role="list">
            <li class="photo-grid__item">
              <img src="..." alt="..." loading="lazy">
            </li>
          </ul>
   ────────────────────────────────────────────── */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  list-style: none;
}

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

.photo-grid__item {
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
  background-color: var(--color-cream);
}

.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.photo-grid__item:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .photo-grid__item img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .photo-grid__item {
    border: 1px solid ButtonBorder;
  }
}

/* ──────────────────────────────────────────────
   17. Page Intro Eyebrow Label
   Gold uppercase label displayed above h1 in
   .page-intro hero sections.
   Usage: <p class="page-intro__eyebrow">Chapter 1 of 4</p>
   ────────────────────────────────────────────── */

.page-intro__eyebrow {
  font-size: var(--font-size-sm);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  max-width: none;
}

/* ──────────────────────────────────────────────
   18. Cover Grid
   Two-column hero grid used on the index page cover
   section. Collapses to a single column on tablet
   and mobile.
   Usage: <div class="cover-grid">
   ────────────────────────────────────────────── */

.cover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 768px) {
  .cover-grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────
   19. Material Overview Grid
   Two-column layout (text 2fr, image 1fr) used in
   chapter material overview sections. Collapses to
   a single column on tablet and mobile.
   Usage: <div class="material-overview-grid">
   ────────────────────────────────────────────── */

.material-overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .material-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────
   20. Colour Variants Panel
   Category-level swatch display used in Material
   Overview sections to show available colour options.
   Usage:
     <div class="colour-variants-panel">
       <p class="colour-variants-panel__label">Available Colour Variants</p>
       <p class="colour-variants-panel__desc">All products in this chapter are available in 4 colour variants.</p>
       <ul class="colour-variants-panel__list" role="list">
         <li class="colour-variants-panel__item">
           <span class="colour-swatch" aria-hidden="true" style="--swatch-color: #E46C0A;"></span>
           <span class="colour-variants-panel__hex">#E46C0A</span>
           <span class="colour-variants-panel__name">Orange</span>
         </li>
       </ul>
     </div>
   ────────────────────────────────────────────── */

.colour-variants-panel {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-cream);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.colour-variants-panel__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-xs);
}

.colour-variants-panel__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  line-height: var(--line-height-base);
}

.colour-variants-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
}

.colour-variants-panel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

/* ── Swatch element (reused in panel and spec table) ── */

.colour-swatch {
  display: inline-block;
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--swatch-color, #ccc);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Light swatches (white, yellow) need a more visible border */
.colour-swatch--light {
  border: 2px solid var(--color-gold);
}

/* Compact variant for spec table rows */
.colour-swatch--sm {
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
  border-radius: 50%;
}

.colour-variants-panel__hex {
  font-size: var(--font-size-xs);
  font-family: 'Courier New', Courier, monospace;
  font-weight: var(--font-weight-semi);
  color: var(--color-text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.colour-variants-panel__name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Spec table colour row: inline swatch strip */
.colour-swatch-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .colour-variants-panel__list {
    gap: var(--space-sm);
  }
}

@media (forced-colors: active) {
  .colour-swatch {
    forced-color-adjust: none; /* preserve fill — it is the data */
    outline: 1px solid ButtonBorder;
  }

  .colour-swatch--light {
    outline: 2px solid ButtonBorder;
  }

  .colour-variants-panel {
    border: 1px solid ButtonBorder;
    border-left: 4px solid ButtonText;
  }
}