@charset 'utf-8';

/* 
 * Copyright © A3A Conception 2026 - https://www.a3aconception.fr/
 *  All rights reserved
 */

/* ------------------------------------------------
               General page layout
------------------------------------------------ */

:root {
  --side-margin: 6rem;

  --icon-filter-gray: url('data:image/svg+xml;utf8,<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.879953 1.58625C0.814892 1.51465 0.772 1.42571 0.756478 1.33022C0.740956 1.23473 0.75347 1.13678 0.792504 1.04826C0.831538 0.959741 0.895415 0.884445 0.976389 0.831504C1.05736 0.778563 1.15196 0.750251 1.2487 0.75H12.2487C12.3456 0.750009 12.4403 0.778147 12.5215 0.830994C12.6026 0.883841 12.6667 0.959123 12.7059 1.04769C12.7451 1.13626 12.7577 1.23431 12.7422 1.32991C12.7267 1.42552 12.6838 1.51457 12.6187 1.58625L8.2487 6.25V9.91562C8.24876 9.99796 8.22848 10.079 8.18966 10.1517C8.15084 10.2243 8.0947 10.2862 8.0262 10.3319L6.0262 11.665C5.95097 11.7152 5.86354 11.744 5.77321 11.7485C5.68288 11.7529 5.59304 11.7328 5.51326 11.6902C5.43348 11.6476 5.36674 11.5842 5.32015 11.5066C5.27356 11.4291 5.24887 11.3404 5.2487 11.25V6.25L0.879953 1.58625Z" stroke="%237B7B7B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-arrow-top-right: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 24L24 8" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 8H24V21" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100vh;
  max-height: 1000vh;
  background-color: var(--bg-color-over);
}

body > main {
  flex: 1;
  height: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-color-main);
}

.models-scroll-fader {
  height: 1rem;
  flex: 1;
  --fade-color: var(--bg-color-main);
  position: relative; /* For empty message placement */
}

footer {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: var(--font-size-xxs);
  color: var(--color-text-main);
  text-align: center;
  padding: var(--space-half) var(--space-more);
  background: transparent;
  pointer-events: none;
}

footer > * {
  pointer-events: all;
}


/* ------------------------------------------------
                   Main header
------------------------------------------------ */

body > header {
  display: flex;
  flex-direction: row;
  gap: var(--space);
  padding: var(--space) var(--side-margin);
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}

body > header > * {
  display: flex;
  flex-direction: row;
  gap: var(--space);
  align-items: center;
}

header .logo {
  position: absolute;
  top: 0;
  left: var(--space);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo {
  max-height: 3rem;
  width: 100vw; /* For SVGs with no set dimensions */
  max-width: calc(var(--side-margin) - 2 * var(--space));
}

header .zone1 {
  flex: 1;
}

#model-filter {
  width: 15ch;
  flex-shrink: 1;
  flex-basis: 40ch;
  --padding-top-bottom: var(--space-less);
  padding-top: var(--padding-top-bottom);
  padding-bottom: var(--padding-top-bottom);
}


/* ------------------------------------------------
               Content (sub-)header
------------------------------------------------ */

.content-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--space);
  align-items: center;
  padding: var(--space) var(--side-margin);
}

.content-header h1 {
  padding: 0;
  margin: 0;

  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
}

.content-header .tag-filters {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--space);
  align-items: center;
  justify-content: flex-end;
}


.content-header .tag-filters h6 {
  color: var(--color-text-light1);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  padding: 0 .5rem 0 1.5rem;
  background: var(--icon-filter-gray) no-repeat left center;
}

.content-header .tag-filters .chip {
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  background: var(--bg-color-over);
  box-shadow: inset 0 .12rem 0 0 rgba(255, 255, 255, 0.80),
              0 1px .12rem -1px rgba(0, 0, 0, 0.39);
}

.content-header .tag-filters .chip:not(:disabled):where(:hover, :has(:focus-visible)) {
  box-shadow: inset 0 .12rem 0 0 rgba(255, 255, 255, 0.80),
              0 1px .12rem -1px rgba(0, 0, 0, 0.99);
  background: var(--bg-color-preselect);
}

.content-header .tag-filters .chip:not(:disabled):where(:active) {
  border: 1px solid var(--color-select);
  box-shadow: inset 0 .12rem 0 0 rgba(255, 255, 255, 0.80);
}

.content-header .tag-filters .chip:has(> input:checked) {
  border: 1px solid var(--color-select);
}


/* ------------------------------------------------
                    Model cards
------------------------------------------------ */

.models {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, 17.25rem);
  grid-auto-rows: max-content;
  justify-content: center;
  gap: var(--space);
  padding: var(--space-half) var(--side-margin) round(5.375rem, 1px);
}

.models .model {
  list-style: none;

  padding: var(--space-half);

  background-color: var(--bg-color-over);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-outer);

  display: flex;
  flex-direction: column;
  gap: calc(.25 * var(--space));
  position: relative;

  cursor: var(--cursor-pointer);

  transition: all .2s ease-out;
}

.models .model:is(:hover, :focus-within) {
  box-shadow: var(--box-shadow-overlay);
}


.models .model:is(:hover, :focus-within) .btn-open {
  --button-bg-color-start: #F2F2F2;
  --button-bg-color-end: #EEEEEE;

  box-shadow: 0 .19rem .5rem -0.12rem rgba(0, 0, 0, 0.30),
              inset 0 .06rem 0 0 rgba(255, 255, 255, 0.70),
              0 0 0 .06rem #E6E6E6;
}

.models + .no-results-message {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: var(--space-more);
  background-color: var(--bg-color-main);

  font-size: var(--font-size-large);
  color: var(--color-text-light1);
  font-style: italic;

  z-index: 2;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease-out;
}

.models + .no-results-message::before {
  content: '';
  display: block;
  flex: 1;
}

.models + .no-results-message::after {
  content: '';
  display: block;
  flex: 4;
}

.models.empty + .no-results-message {
  opacity: 1;
  pointer-events: auto;
}

.model-image {
  width: 100%;
  height: 14.75rem;
  border-radius: var(--border-radius-inner-large);
  background-color: var(--bg-color-over);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.model-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-image .no-image {
  position: absolute;
  inset: 0;
  --no-image-house-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(220, 220, 220)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5L12 4l9 5.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>');
  background: var(--no-image-house-icon) no-repeat center center;
  background-size: 50%;
}

.model-info {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "n s"
                       "d d"
                       "t t";
  gap: calc(.25 * var(--space));
  padding: calc(.75 * var(--space));
}

.model-info .model-name {
  grid-area: n;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  align-self: baseline;
}

.model-info .model-surface {
  grid-area: s;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-xxs);
  color: var(--color-text-light1);
  align-self: baseline;
}

.model-info .model-description {
  grid-area: d;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-xxs);
  color: var(--color-text-light1);
  min-height: .25em;
  line-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-info .model-tags {
  grid-area: t;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: var(--space-half);
}

.model-info .chip {
  padding: calc(.25 * var(--space)) var(--space-half);

  border-radius: var(--border-radius-outer);
  background: var(--bg-color-preselect);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);border-radius: 2rem;
  border: 1px solid var(--color-border-light);
  
  box-shadow: inset 0 .12rem 0 0 rgba(255, 255, 255, 0.80),
                0 1px .12rem -1px rgba(0, 0, 0, 0.99);
}

.model .btn-open {
  font-weight: 600;
}

.over-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: var(--border-radius-outer);
}

.over-link:focus-visible {
  outline: 1px dotted var(--color-focus);
  outline-offset: 2px;
}

.over-link:is(:focus, :hover) ~ .model-info > .btn-open {
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.1);
}

.over-link::after {
  content: '';
  position: absolute;
  top: var(--space-less);
  right: var(--space-less);
  --size: 2.5rem;
  width: var(--size);
  height: var(--size);

  background: var(--bg-color-over) var(--icon-arrow-top-right) no-repeat center/80%;
  border-radius: 100%;
  box-shadow: 0 6px 3px 0 rgba(0, 0, 0, 0.01),
              0 3px 3px 0 rgba(0, 0, 0, 0.02),
              0 1px 1px 0 rgba(0, 0, 0, 0.02);

  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.over-link:is(:focus, :hover)::after {
  opacity: 1;
}