/* Reference (projects) section — structural + editorial helpers.
   Linked only from the two references templates, so overrides here are scoped to
   this section even when they target theme selectors.
   The one brand color token (#404859, slate) is reused from the theme, none invented.
   Ported from the approved ha-test render board (2026-07-13); polished 2026-07-23. */

/* --- Hero: keep the title/tagline legible over bright photography --- */
#page-title .bg-overlay { background-color: rgba(0, 0, 0, 0.32); }
#page-title .page-title .text-light { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
#page-title .page-title span.text-light { font-size: 1.15rem; font-weight: 500; }

/* --- Hero: more compact band on desktop (mobile keeps the theme's 160/80) --- */
@media (min-width: 992px) {
  #header[data-transparent="true"] + #page-title { padding-top: 150px; padding-bottom: 90px; }
}

/* --- Index: project cards (a portfolio, not a shop grid) --- */
.reference-grid .grid-item:nth-child(odd) { clear: left; }   /* clean 2-up rows regardless of caption height */
.reference-grid .product-image { overflow: hidden; }
.reference-grid .product-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.5s ease; }
.reference-grid .product:hover .product-image img { transform: scale(1.04); }
.reference-grid .product-title { max-width: 100%; }          /* theme caps .product-title at 60% (shop SKU) */
.reference-grid .product-title h3 { margin-bottom: 0; }
.reference-grid .product-category { opacity: 1; color: #8a8f98; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.35rem; }
.reference-tagline { color: #6a6f78; font-size: 0.95rem; margin: 0.4rem 0 0; }

/* --- Detail: project attributes as an aligned label / value list --- */
.project-attributes.style2 { text-transform: none; display: inline-block; text-align: left; margin-top: 1.75rem; }
.project-attributes.style2 .attribute { float: none; width: auto; display: flex; gap: 0.75rem; margin: 0 0 0.6rem; }
.project-attributes.style2 .attribute strong { display: block; opacity: 1; border: 0; margin: 0; width: auto; min-width: 7.5rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8f98; font-weight: 600; padding-top: 0.1rem; }

/* --- Detail: gallery + used-products --- */
.products-grid .product-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.products-grid .product-description p { color: #6a6f78; font-size: 0.95rem; margin-top: 10px; }
.gallery-grid .grid-item img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; cursor: pointer; }

/* Hold gallery + used-products at two-up on phones instead of a long one-up scroll. */
@media (max-width: 767.98px) {
  .gallery-grid .grid-item, .products-grid .grid-item { width: 50%; }
  .gallery-grid .grid-item:nth-child(odd), .products-grid .grid-item:nth-child(odd) { clear: left; }
}