/*
  Homepage hero search — the search bar + live AJAX results grid that
  replaced the old static hero (typography badge, filter dropdowns,
  floating decorative tiles). front.css's tokens and .mcard/.mark-grid/
  .btn still apply underneath this.
*/

.hero{
  position:relative; padding:150px 0 90px;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; background-position:-6px -6px;
}
.hero-copy{ text-align:left; }
.hero-copy h1{ font-size:clamp(30px,4.6vw,50px); line-height:1.15; white-space:normal; }
.hero-copy h1 span{ font-style:italic; font-family:'Bricolage Grotesque',sans-serif; color:var(--magenta); }

/* Search + filter bar — full width, softly rounded; 3 filter fields at
   13% each (39% total), search fills what's left, button ~10%. */
.explore-bar{
  margin:40px 0 0; width:100%; display:flex; align-items:stretch;
  border:1.5px solid var(--ink); border-radius:20px; background:var(--paper);
  position:relative; z-index:3; overflow:hidden; transition:box-shadow .25s ease;
}
.explore-bar:focus-within{ box-shadow:0 10px 32px -12px rgba(21,19,15,.28); }
.explore-bar-filters{ flex:0 0 39%; display:flex; border-right:1px solid var(--line); min-width:0; }
.explore-bar-field{
  flex:0 0 33.333%; padding:11px 16px; border-right:1px solid rgba(11,150,176,.3);
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.explore-bar-field:last-child{ border-right:none; }
.explore-bar-field label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.explore-bar-field select{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
  border:none; background:none; padding:0 14px 0 0; color:var(--ink); width:100%;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2315130f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:9px 5px;
}
.explore-bar-search{ flex:1 1 auto; display:flex; align-items:center; gap:10px; padding:0 18px; min-width:0; }
.explore-bar-icon{ flex:none; color:var(--ink-faint); }
.explore-bar-search input{
  flex:1; border:none; outline:none; padding:16px 0; font-size:15px; min-width:0;
  font-family:'Manrope',sans-serif; color:var(--ink); background:none;
}
.explore-bar-search input::placeholder{ color:var(--ink-faint); }
.explore-bar .explore-bar-go{
  flex:0 0 10%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; gap:6px;
  font-weight:700; font-size:13px; transition:background .25s ease; min-width:96px; white-space:nowrap;
}
.explore-bar .explore-bar-go:hover{ background:var(--magenta); color:#fff; }

/* Results */
.hero-results{ margin-top:56px; position:relative; min-height:80px; }
.hero-mark-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.hero-mark-grid .mcard{ width:auto; }

@keyframes gliCardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.hero-mark-grid .mcard{ animation:gliCardIn .45s var(--ease) both; }
.hero-mark-grid .mcard:nth-child(1){ animation-delay:.02s; }
.hero-mark-grid .mcard:nth-child(2){ animation-delay:.06s; }
.hero-mark-grid .mcard:nth-child(3){ animation-delay:.1s; }
.hero-mark-grid .mcard:nth-child(4){ animation-delay:.14s; }
.hero-mark-grid .mcard:nth-child(5){ animation-delay:.18s; }
.hero-mark-grid .mcard:nth-child(6){ animation-delay:.22s; }
.hero-mark-grid .mcard:nth-child(7){ animation-delay:.26s; }
.hero-mark-grid .mcard:nth-child(8){ animation-delay:.3s; }

.hero-results .hero-mark-grid{ transition:opacity .2s ease; }
.hero-results.is-loading .hero-mark-grid{ opacity:.35; pointer-events:none; }
.hero-results.is-loading::after{
  content:""; position:absolute; top:40%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
  border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%;
  animation:gliSpin .7s linear infinite;
}
@keyframes gliSpin{ to{ transform:rotate(360deg); } }

.hero-empty{ padding:60px 20px; text-align:center; border:1px dashed var(--line); color:var(--ink-soft); }

.hero-load-more{ display:flex; justify-content:center; margin-top:32px; }
.hero-load-more button[disabled]{ opacity:.5; cursor:default; }

@media (max-width:1100px){
  .hero-mark-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px){
  .explore-bar{ flex-wrap:wrap; }
  .explore-bar-filters{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--line); }
  .explore-bar-search{ flex:1 1 auto; }
  .explore-bar-go{ flex:0 0 auto; padding:0 22px; }
  .hero-mark-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .hero{ padding:126px 0 60px; }
  .explore-bar-filters{ flex-direction:column; }
  .explore-bar-field{ border-right:none; border-bottom:1px solid rgba(11,150,176,.3); }
  .explore-bar-field:last-child{ border-bottom:none; }
  .hero-mark-grid{ grid-template-columns:1fr 1fr; gap:12px; }
}
@media (max-width:480px){
  .hero-mark-grid{ grid-template-columns:1fr; }
}