/*
 * FILE: public/assets/css/materials.css
 * Elegant Encasements — Materials Education Section
 */

.materials-hero { padding: calc(80px + var(--space-20)) 0 var(--space-16); background: var(--color-taupe-bg); position: relative; overflow: hidden; }
.materials-hero__bg-tree { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 480px; opacity: 0.07; pointer-events: none; }
.materials-intro { max-width: 600px; position: relative; z-index: 1; }
.materials-intro__lead { font-size: var(--text-lg); font-weight: 300; color: var(--color-parchment); line-height: 1.8; margin-bottom: var(--space-6); }

.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-block: var(--space-16); }

.material-detail-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-16); align-items: start; padding-block: var(--space-16); }

.material-detail__section-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); margin-top: var(--space-10); }
.material-detail__section-title:first-child { margin-top: 0; }
.material-detail__text { font-size: var(--text-base); font-weight: 300; color: var(--color-parchment); line-height: 1.8; margin-bottom: var(--space-6); }

.sustainability-indicators { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--color-black-soft); border: 1px solid var(--color-border); border-radius: var(--card-radius); margin-top: var(--space-8); }
.sustainability-indicators-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-2); }

.sustainability-item { display: flex; align-items: center; gap: var(--space-4); }
.sustainability-item__label { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); flex: 0 0 100px; }
.sustainability-bar { flex: 1; height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.sustainability-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light)); border-radius: 2px; transition: width 0.8s ease; }
.sustainability-item__value { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-gold); flex: 0 0 30px; text-align: right; }

.material-hero-image { aspect-ratio: 3/4; background: var(--color-black-soft); border: 1px solid var(--color-border); overflow: hidden; margin-bottom: var(--space-8); position: relative; }
.material-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.material-items-using { padding: var(--space-6); background: var(--color-black-soft); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.material-items-using-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-5); }

@media (max-width: 1000px) {
    .material-detail-layout { grid-template-columns: 1fr; }
    .material-sidebar { order: -1; }
    .material-hero-image { aspect-ratio: 16/9; }
}

@media (max-width: 900px) { .materials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .materials-grid { grid-template-columns: 1fr; } }
/* ── Phase 5 Additions — append to end of materials.css ─────────────────── */

/* Search Bar */
.materials-filter-bar { background:var(--color-black-soft,#111); border-bottom:1px solid var(--color-border); padding:var(--space-5) 0; }
.materials-search-form { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.materials-search-wrap { position:relative; flex:1; min-width:240px; max-width:520px; }
.materials-search-input { width:100%; background:var(--color-black,#0A0A0A); border:1px solid var(--color-border); border-radius:2px; color:var(--color-cream,#F2EDE4); font-family:var(--font-display,'Jost',sans-serif); font-size:var(--text-sm); padding:var(--space-3) var(--space-10) var(--space-3) var(--space-4); transition:border-color var(--transition-fast); }
.materials-search-input:focus { outline:none; border-color:var(--color-gold,#B8973A); }
.materials-search-input::placeholder { color:var(--color-text-dim,#4a4440); }
.materials-search-btn { position:absolute; right:var(--space-3); top:50%; transform:translateY(-50%); background:none; border:none; color:var(--color-text-muted); cursor:pointer; padding:var(--space-1); display:flex; align-items:center; transition:color var(--transition-fast); }
.materials-search-btn:hover { color:var(--color-gold,#B8973A); }
.materials-search-clear { position:absolute; right:var(--space-8); top:50%; transform:translateY(-50%); color:var(--color-text-muted); text-decoration:none; font-size:var(--text-xs); padding:var(--space-1) var(--space-2); transition:color var(--transition-fast); }
.materials-search-clear:hover { color:var(--color-cream); }
.materials-result-count { font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); color:var(--color-text-muted); white-space:nowrap; }
.materials-result-count em { font-style:normal; color:var(--color-parchment); }

/* Card icon SVG fallback */
.card-material__icon { display:flex; align-items:center; justify-content:center; height:80px; color:rgba(184,151,58,0.4); background:rgba(0,0,0,0.2); border-bottom:1px solid var(--color-border); transition:color var(--transition-base); }
.card-material:hover .card-material__icon { color:rgba(184,151,58,0.7); }

/* Card hero image */
.card-material__hero { overflow:hidden; border-bottom:1px solid var(--color-border); }
.card-material__hero img { width:100%; height:140px; object-fit:cover; display:block; transition:transform var(--transition-base); }
.card-material:hover .card-material__hero img { transform:scale(1.03); }

/* Badges */
.material-badge { display:inline-flex; align-items:center; gap:var(--space-1); font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); padding:var(--space-1) var(--space-3); border-radius:10px; line-height:1.4; }
.material-badge--recycle { background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.25); color:#6fcf97; }
.material-badge__icon { font-size:12px; line-height:1; }
.material-badge--lg { font-size:var(--text-sm); padding:var(--space-2) var(--space-4); border-radius:20px; }
.material-recycle-badge { margin:var(--space-4) 0; }
.card-material__badges { margin:var(--space-3) 0 var(--space-4); display:flex; flex-wrap:wrap; gap:var(--space-2); min-height:var(--space-6); }

/* Detail sections */
.material-section { margin-bottom:var(--space-8); padding-bottom:var(--space-8); border-bottom:1px solid rgba(255,255,255,0.05); }
.material-section:last-of-type { border-bottom:none; }

/* Preview items */
.material-preview-items { display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; }
.material-preview-item { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; padding:var(--space-2); border-radius:2px; transition:background var(--transition-fast); }
.material-preview-item:hover { background:rgba(255,255,255,0.04); }
.material-preview-item__thumb { width:44px; height:44px; flex-shrink:0; border-radius:2px; overflow:hidden; background:var(--color-black-mid,#1a1a1a); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }
.material-preview-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.material-preview-item__placeholder { color:var(--color-text-dim); font-size:16px; }
.material-preview-item__info { flex:1; min-width:0; }
.material-preview-item__code { display:block; font-family:monospace; font-size:10px; color:var(--color-gold); letter-spacing:1px; margin-bottom:2px; }
.material-preview-item__name { display:block; font-size:var(--text-sm); color:var(--color-parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Other materials nav */
.material-other-link { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,0.04); text-decoration:none; transition:color var(--transition-fast); }
.material-other-link:last-child { border-bottom:none; }
.material-other-link__name { font-size:var(--text-sm); color:var(--color-parchment); transition:color var(--transition-fast); }
.material-other-link:hover .material-other-link__name { color:var(--color-gold); }
.material-other-link__arrow { font-size:var(--text-sm); color:var(--color-text-dim); transition:transform var(--transition-fast), color var(--transition-fast); }
.material-other-link:hover .material-other-link__arrow { transform:translateX(3px); color:var(--color-gold); }

/* Inquiry CTA */
.material-inquiry-cta { background:rgba(184,151,58,0.05); border:1px solid rgba(184,151,58,0.15); border-radius:2px; padding:var(--space-6); }

/* Empty state */
.materials-empty { grid-column:1/-1; text-align:center; padding:var(--space-16) var(--space-6); }
.materials-empty__title { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:300; color:var(--color-parchment); margin-bottom:var(--space-4); }

/* Screen-reader only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Responsive */
@media (max-width:768px) {
    .materials-search-wrap { max-width:100%; }
    .material-detail-layout { grid-template-columns:1fr; }
    .material-sidebar { order:-1; }
    .materials-result-count { display:none; }
}
@media (max-width:480px) {
    .materials-grid { grid-template-columns:1fr; }
}