/* =====================================================================
   showcase.css — MAIN PAGE LAYOUT (index.html only)
   ---------------------------------------------------------------------
   Search bar, filter dropdown, sort menu, the 3-per-row grid, and the
   tablet / phone versions of the grid.
   ===================================================================== */

/* =========================================================
 CONTROLS
 ---------------------------------------------------------
 One row: search box, filter dropdown, sort menu, and a
 "Clear filters" link that only appears when something is
 filtered.
 ========================================================= */

.controls {
  background: var(--surface-muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 28px;
  margin-bottom: 24px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-input {
  width: 100%;
  height: 100%;
  min-height: 54px;
  padding: 14px 38px 14px 16px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font-size: 17px;
  outline: none;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(46, 48, 50, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 90, 43, 0.16), 0 4px 14px rgba(46, 48, 50, 0.1);
}

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 19px;
  cursor: pointer;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}

.search-clear:hover { background: var(--accent-bg); color: var(--accent); }
.search-clear.visible { display: flex; }

.sort-select {
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  font-size: 16px;
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sort-select:hover,
.sort-select:focus { border-color: var(--accent); }

.clear-filters-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 8px;
  text-decoration: underline;
  display: none;
}

.clear-filters-btn.visible { display: inline-block; }

.search-row .clear-filters-btn {
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  text-decoration: none;
}

.search-row .clear-filters-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}


/* =========================================================
 FILTER DROPDOWN
 ---------------------------------------------------------
 A button that opens a panel of checkboxes underneath it.
 The panel is positioned "absolute" relative to
 .filter-dropdown, so it floats over the page instead of
 pushing content down. The [hidden] attribute (toggled by
 JavaScript) shows and hides it.
 ========================================================= */

.filter-dropdown { position: relative; }

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.filter-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* Turns the toggle red when any filter is active */
.filter-toggle.has-active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.filter-caret {
  font-size: 10px;
  transition: transform 0.15s;
}

.filter-toggle[aria-expanded="true"] .filter-caret { transform: rotate(180deg); }

.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 8px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.filter-option:hover { background: var(--accent-bg); }

.filter-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}


/* =========================================================
 RESULTS
 ========================================================= */

.results-summary {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 28px 18px;
}

/* Only shown on phones (see PHONE section below) */
.swipe-hint {
  display: none;
  font-size: 12px;
  color: var(--ink-faint);
  margin: -8px 0 10px 2px;
}


/* =========================================================
 FOOTER
 ---------------------------------------------------------
 A short sponsor acknowledgment under the project grid, so
 the bottom of the page isn't left empty.
 ========================================================= */

.site-footer {
  width: 100vw;
  margin: 40px 0 0 calc(50% - 50vw);
  padding: 28px;
  background: var(--header-bg);
  border-top: 1px solid var(--header-border);
  text-align: center;
}

.footer-sponsor {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.footer-sponsor strong { color: var(--accent); }


/* =========================================================
 GRID — 3 CARDS PER ROW
 ---------------------------------------------------------
 "repeat(3, minmax(0, 1fr))" = 3 equal columns. The
 minmax(0, ...) stops long words from stretching a column.
 Grid rows automatically make every card in the same row
 as tall as the tallest one, so rows line up neatly.
 Phones use one vertical column (see the bottom of the CSS).
 ========================================================= */

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-left: 60px;
  margin-right: 60px;
}

/* =========================================================
 TABLET — 2 per row
 ========================================================= */

@media (max-width: 1000px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-left: 30px;
    margin-right: 30px;
  }
}


/* =========================================================
 PHONE — VERTICAL CARD LIST
 ---------------------------------------------------------
 On narrow screens the project cards stack in one column and
 use the page's normal vertical scrolling.
 ========================================================= */

@media (max-width: 700px) {
  body { padding: 0; }

  .search-row { flex-direction: column; }
  .sort-select,
  .filter-toggle { width: 100%; justify-content: space-between; }
  .filter-panel { left: 0; right: 0; width: auto; }

  .swipe-hint { display: none; }

  .project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 10px 16px;
    margin: 0;
  }

  .project-grid .loading,
  .project-grid .error-state { grid-column: 1 / -1; }

  :root { --card-pad: 16px; }
  .card-title { font-size: 20px; }
  .controls { padding: 14px 16px; }
  .results-summary { margin-left: 16px; margin-right: 16px; }
}


/* =========================================================
 TITLE BANNER
 ---------------------------------------------------------
 .banner-img   the background photo; fills the whole banner
               ("object-fit: cover" crops the edges rather
               than stretching). To choose which part of the
               photo shows, add e.g. object-position: center 30%;
 ::after       a dark layer over the photo so the white title
               is readable on any picture
 .site-logo   sits in the header above the banner
 .banner-title centered in the middle of the banner
 ========================================================= */

.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 2px 20px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 1px 12px rgba(16, 24, 40, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.header-link {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.header-link[hidden] { display: none; }

.header-link:hover {
  color: var(--accent);
  background: var(--surface-hover);
}

.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 0;
  width: 60px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--accent); }

.theme-toggle-icon {
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  font-size: 14px;
}

.theme-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease;
}

:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(28px); }

.site-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-logo {
  display: block;
  margin: 0 auto 20px;
  height: 160px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.25s ease;
}

.site-logo[hidden] { display: none; }

.site-logo:hover { transform: scale(1.04); }

.banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 48vw, 720px);
  width: 100vw;
  margin: 0 0 36px calc(50% - 50vw);
  padding: 40px 24px;
  overflow: hidden;
  background: #2a2a2a; /* shows while the photo loads, or if it's missing */
  text-align: center;
}

.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 3.5s ease-in-out;
  z-index: 0;
  will-change: opacity;
}

.banner-img--next {
  opacity: 0;
  z-index: 0;
}

@keyframes bannerZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 12, 8, 0.36) 0%, rgba(20, 12, 8, 0.44) 60%, rgba(20, 12, 8, 0.6) 100%),
    linear-gradient(90deg, rgba(192, 90, 43, 0.18), rgba(20, 12, 8, 0) 45%, rgba(20, 12, 8, 0) 55%, rgba(192, 90, 43, 0.18));
  z-index: 1;
  pointer-events: none;
}

.banner-cue {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
  transform: translateX(-50%);
}

.banner-cue:hover { opacity: 1; }

.banner-cue-arrow {
  font-size: 18px;
  line-height: 1;
  animation: cueBounce 1.6s ease-in-out infinite;
}

@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .banner-cue-arrow { animation: none; }
  html { scroll-behavior: auto; }
}

.banner-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  animation: bannerTitleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bannerTitleIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.banner [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .banner-img { animation: none; }
  .banner-title { animation: none; }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .site-header { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 700px) {
  body { padding: 0; }

  .site-header {
    min-height: 44px;
    width: 100%;
    margin-left: 0;
    padding: 2px 10px;
  }

  .site-logo {
    height: 110px;
    max-width: 80%;
  }

  .site-title { font-size: 16px; white-space: normal; }
  .site-header { gap: 8px; }

  .theme-toggle { transform: none; }

  .header-links { gap: 0; }
  .header-link { padding: 4px 4px; font-size: 12px; }

  .footer-sponsor { font-size: 13px; }

  .banner {
    height: 260px;
    min-height: 0;
    width: 100%;
    margin-left: 0;
    padding: 28px 16px;
  }

  .banner-title { font-size: clamp(34px, 8vw, 52px); }
}