/* =============================================================
   home.css — BibEasy homepage components
   Strict rules:
   - No font-family, font-weight, or default color anywhere
   - font-size only via --font-size-* vars
   - Buttons/links styled only via .primary/.secondary/.tertiary/.delete
     (this file only ever sets font-size on them)
   - All spacing via --space-*; radius via --border-radius
   ============================================================= */

/* ---------- license banner ---------- */
.license-banner {
  background-color: var(--color-neutral-1);
  text-align: center;
  padding: var(--space-2xs) var(--space-s);

  >p {
    color: var(--color-neutral-10);
    letter-spacing: 0.02em;
  }
}

/* ---------- site nav ---------- */
.site-nav {
  >div {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2xs) 0;
    align-items: center;
    height: 4rem;

    >div,
    >ul {
      display: flex;
      list-style: none;
      gap: var(--space-s);
      align-items: center;
    }
  }

  .logo {
    font-size: var(--font-size-1);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    text-decoration: none;

    >p {
      font-size: var(--font-size-1);
      color: var(--color-color-1);
    }
  }
}

/* ---------- hero ---------- */
.hero {
  padding: var(--space-2xl) var(--space-l) var(--space-l);
  background-color: var(--color-neutral-10);
  display: grid;
  gap: var(--space-m);
  justify-items: center;
  text-align: center;

  >.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-xs);
    background-color: var(--color-neutral-9);
    color: var(--color-neutral-2);
    border-radius: var(--border-radius);

    >.dot {
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-radius: 50%;
      background-color: var(--color-color-1);
      animation: pulse 2s ease-in-out infinite;
    }
  }

  >h1 {
    max-width: 18ch;
    letter-spacing: -0.02em;

    >em {
      font-style: normal;
      color: var(--color-color-1);
    }
  }

  >.lead {
    max-width: 52ch;
    color: var(--color-neutral-3);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

/* ---------- search wrap ---------- */
.search-wrap {
  padding: 0 var(--space-l) var(--space-l);
  background-color: var(--color-neutral-10);
  display: flex;
  justify-content: center;

  >div {
    position: relative;
    width: 100%;
    max-width: 42rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2xs);
    background-color: var(--color-neutral-10);
    border: 2px solid var(--color-neutral-1);
    border-radius: var(--border-radius);
    padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-s);

    &:focus-within {
      border-color: var(--color-color-1);
    }

    >span {
      height: 3.5rem;
      width: 2rem;
      font-size: 3rem;
    }

    >.icon {
      color: var(--color-neutral-3);
    }

    >input[type="search"] {
      border: none;
      background: transparent;
      padding: var(--space-xs) var(--space-2xs);
      width: 100%;

      &:focus {
        outline: none;
      }
    }
  }

  #searchDropdown {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    right: 0;
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);
    border-radius: var(--border-radius);
    padding: var(--space-2xs);
    z-index: 40;
    max-height: 24rem;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;

    &.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    >.section-label {
      padding: var(--space-2xs) var(--space-s) var(--space-3xs);
      color: var(--color-neutral-4);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    >.row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--space-s);
      align-items: center;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--border-radius);
      cursor: pointer;

      &:hover,
      &.active {
        background-color: var(--color-neutral-9);
      }

      >.thumb {
        width: 2.25em;
        height: 2.25em;
        display: grid;
        place-items: center;
        background-color: var(--color-neutral-9);
        border-radius: var(--border-radius);
      }

      >p>span {
        display: block;
        color: var(--color-neutral-4);
      }

      >.price {
        color: var(--color-neutral-1);
      }
    }

    >.empty {
      padding: var(--space-m);
      text-align: center;
      color: var(--color-neutral-4);
    }
  }
}

/* ---------- trust bar ---------- */
.trust-bar {
  background-color: var(--color-neutral-9);
  border-block: 1px solid var(--color-neutral-8);

  >ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-m);
    padding: var(--space-s) 0;

    list-style: none;

    >li {
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
      justify-content: center;

      >.check {
        flex: 0 0 auto;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background-color: var(--color-color-1);
        display: grid;
        place-items: center;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 0.35em;
          height: 0.6em;
          border: solid var(--color-neutral-10);
          border-width: 0 2px 2px 0;
          transform: rotate(45deg) translate(-10%, -20%);
        }
      }

      >p {
        color: var(--color-neutral-2);
      }
    }
  }

}

/* ---------- slider / featured carousel ---------- */
.slider-section {
  display: grid;
  row-gap: var(--space-s);
  padding-block: var(--space-s);

  >header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-s);
    flex-wrap: wrap;

    >h3 {
      letter-spacing: -0.01em;
    }

    >p {
      color: var(--color-neutral-4);
    }
  }

  >.slider-progress {
    height: 3px;
    background-color: var(--color-neutral-8);
    border-radius: var(--border-radius);
    overflow: hidden;

    >div {
      height: 100%;
      width: 0%;
      background-color: var(--color-color-1);
      transition: width 60ms linear;
    }
  }

  >.slider-viewport-wrap {
    overflow: hidden;
    border-radius: var(--border-radius);

    >.slider-viewport {
      display: flex;
      transition: transform 480ms cubic-bezier(.2, .8, .2, 1);
      list-style: none;

      >li {
        flex: 0 0 100%;
        position: relative;
        min-height: clamp(18rem, 32vw, 24rem);
        display: grid;
        align-items: end;
        overflow: hidden;

        >.bg {
          position: absolute;
          inset: 0;
          display: grid;
          place-items: center;
          font-size: clamp(8rem, 20vw, 16rem);
          transform: scale(1.05);
          transition: transform 8s ease-out;

          &.bg--1 {
            background-color: var(--color-color-2);
          }

          &.bg--2 {
            background-color: var(--color-color-1);
          }

          &.bg--3 {
            background-color: var(--color-color-3);
          }
        }

        &.is-active>.bg {
          transform: scale(1.15);
        }

        >.overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, transparent 40%, var(--color-neutral-1) 100%);
          opacity: 0.85;
        }

        >.content {
          position: relative;
          padding: var(--space-l);
          display: grid;
          gap: var(--space-2xs);
          max-width: 36rem;

          >.tag {
            width: fit-content;
            background-color: var(--color-color-1);
            color: var(--color-neutral-10);
            padding: var(--space-3xs) var(--space-xs);
            border-radius: var(--border-radius);
            text-transform: uppercase;
            letter-spacing: 0.06em;
          }

          >h4 {
            color: var(--color-neutral-10);
            letter-spacing: -0.02em;
          }

          >.meta {
            color: var(--color-neutral-9);
            opacity: 0.9;
          }
        }
      }
    }
  }

  >.slider-controls {
    display: flex;
    gap: var(--space-2xs);
    justify-content: center;

    >.dot {
      width: 2rem;
      height: 0.25rem;
      background-color: var(--color-neutral-8);
      border: none;
      padding: 0;
      cursor: pointer;
      border-radius: var(--border-radius);
      transition: background-color 200ms ease, width 200ms ease;

      &.active {
        background-color: var(--color-color-1);
        width: 3rem;
      }
    }
  }
}

/* ---------- listings section ---------- */
.listings-section {
  display: grid;
  row-gap: var(--space-m);
  padding-block: var(--space-s);

  >header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-s);
    flex-wrap: wrap;

    >h3 {
      letter-spacing: -0.01em;
    }
  }

  >p {
    color: var(--color-neutral-4);
  }

  >.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    padding: var(--space-2xs);
    background-color: var(--color-neutral-9);
    border-radius: var(--border-radius);

    >label {
      padding-left: var(--space-xs);
      color: var(--color-neutral-3);
    }

    >.sep {
      width: 1px;
      height: 1.5em;
      background-color: var(--color-neutral-7);
    }

    >.count {
      margin-left: auto;
      padding: 0 var(--space-xs);
      color: var(--color-neutral-3);
    }
  }

  >ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--space-s);
    list-style: none;

    >li {
      display: grid;
      grid-template-rows: auto 1fr;
      border-radius: var(--border-radius);
      overflow: clip;
      background-color: var(--color-neutral-10);
      border: 1px solid var(--color-neutral-8);
      transition: transform 180ms ease, border-color 180ms ease;
      cursor: pointer;
      position: relative;

      .stretched-link {
        color: inherit;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
        }

        &:hover {
          text-decoration: none;
        }
      }

      >.body>.primary {
        position: relative;
        z-index: 2;
      }

      &:hover {
        /* transform: translateY(-2px); */
        border-color: var(--color-color-5);
        overflow: clip;
      }

      &.hidden {
        display: none;
      }

      >.img {
        aspect-ratio: 16 / 10;
        display: grid;
        place-items: center;
        font-size: clamp(3rem, 8vw, 5rem);
        position: relative;
        overflow: hidden;

        &.img--1 {
          background-color: var(--color-color-1);
        }

        &.img--2 {
          background-color: var(--color-color-2);
        }

        &.img--3 {
          background-color: var(--color-color-3);
        }

        &.img--4 {
          background-color: var(--color-color-0);
        }
      }

      >.body {
        display: grid;
        gap: var(--space-3xs);
        padding: var(--space-s);
        align-content: start;

        >h4 {
          letter-spacing: -0.01em;
        }

        >p {
          color: var(--color-neutral-4);
        }

        >.primary {
          margin-top: var(--space-2xs);
          justify-content: center;
        }
      }
    }
  }

  /* variant: compact list */
  &[data-variant="list"]>ul {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);

    >li {
      grid-template-columns: 6rem 1fr;
      grid-template-rows: auto;
      align-items: center;

      >.img {
        aspect-ratio: 1;
      }
    }
  }

  /* variant: bold (emoji tile dominates) */
  &[data-variant="bold"]>ul>li>.img {
    aspect-ratio: 1;
    font-size: clamp(5rem, 12vw, 8rem);
  }
}

/* empty state */
.listings-empty {
  grid-column: 1 / -1;
  padding: var(--space-l);
  text-align: center;
  color: var(--color-neutral-4);
  border: 1px dashed var(--color-neutral-7);
  border-radius: var(--border-radius);
}

/* ---------- bottom CTA ---------- */
.bottom-cta {
  background-color: var(--color-neutral-1);
  padding: var(--space-2xl) var(--space-l);
  justify-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  row-gap: var(--space-s);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, var(--color-color-1) 0%, transparent 40%),
      radial-gradient(circle at 80% 50%, var(--color-color-3) 0%, transparent 40%);
    opacity: 0.18;
    pointer-events: none;
  }

  >* {
    position: relative;
  }

  >h3 {
    color: var(--color-neutral-10);
    letter-spacing: -0.02em;
    max-width: 20ch;
  }

  >p {
    color: var(--color-neutral-9);
    opacity: 0.8;
    max-width: 44ch;
  }
}

/* ---------- footer ---------- */
.site-footer {
  padding: var(--space-xl) 0;
  background-color: var(--color-neutral-9);
  display: grid;
  row-gap: var(--space-l);
  margin-top: var(--space-s);

  >.cols {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-l);

    >div {
      display: grid;
      gap: var(--space-2xs);
      align-content: start;

      >p {
        color: var(--color-neutral-4);
        max-width: 30ch;
      }
    }

    >nav {
      display: grid;
      gap: var(--space-3xs);
      align-content: start;

      >h6 {
        color: var(--color-neutral-1);
        margin-bottom: var(--space-2xs);
      }
    }
  }

  >.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--color-neutral-8);

    >p {
      color: var(--color-neutral-4);
    }

    >.lang {
      display: flex;
      gap: var(--space-2xs);
    }
  }

  .logo {
    font-size: var(--font-size-1);
    letter-spacing: -0.02em;
    text-decoration: none;

    >span {
      font-size: var(--font-size-1);
      color: var(--color-color-1);
    }
  }
}

/* ---------- tweaks panel ---------- */
.tweaks-panel {
  position: fixed;
  bottom: var(--space-m);
  right: var(--space-m);
  background-color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  padding: var(--space-s);
  display: none;
  gap: var(--space-2xs);
  z-index: 1000;
  min-width: 14rem;

  &.open {
    display: grid;
  }

  >.options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3xs);
  }
}

/* auth-section */
.auth-section {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);

  >header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  >.providers {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
  }
}

/* dashboard-section */
.dashboard-section {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);

  >header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* sell-section */
.sell-section {
  padding-block: var(--space-m) var(--space-xl);
}

/* bib-detail */
.bib-detail {
  padding-block: var(--space-m) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  >.hero {
    aspect-ratio: 16 / 6;
    display: grid;
    place-items: center;
    font-size: clamp(4rem, 14vw, 7rem);
    border-radius: var(--border-radius);
    overflow: hidden;

    &.img--1 {
      background-color: var(--color-color-1);
    }

    &.img--2 {
      background-color: var(--color-color-2);
    }

    &.img--3 {
      background-color: var(--color-color-3);
    }

    &.img--4 {
      background-color: var(--color-color-0);
    }
  }

  >dl {
    display: flex;
    flex-direction: column;
    margin: 0;

    >div {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      padding-block: var(--space-s);
      border-top: 1px solid var(--color-neutral-8);

      >dt {
        color: var(--color-neutral-4);
      }

      >dd {
        margin: 0;
        color: var(--color-neutral-2);
      }
    }
  }

  >.actions {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
  }
}

/* bib-receipt-form */
bib-receipt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  [hidden] {
    display: none;
  }

  >form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-2xs);

    >div {
      display: flex;
      gap: var(--space-2xs);

      >input[type="url"] {
        flex: 1;
        /* flex: 1 1 20rem; */
      }
    }
  }

  >.error {
    color: var(--color-color-4);
  }

  >.preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    >section {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      >dl {
        display: flex;
        flex-direction: column;
        margin: 0;

        >div {
          display: flex;
          flex-direction: column;
          gap: var(--space-3xs);
          padding-block: var(--space-xs);
          border-top: 1px solid var(--color-neutral-8);

          >dt {
            color: var(--color-neutral-4);
          }

          >dd {
            margin: 0;
            color: var(--color-neutral-2);
          }
        }
      }
    }
  }
}

/* profile-section */
.profile-section {
  padding-block: var(--space-m) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;

  >dl {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;

    >div {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      padding-block: var(--space-s);
      border-top: 1px solid var(--color-neutral-8);

      >dt {
        color: var(--color-neutral-4);
      }

      >dd {
        margin: 0;
        color: var(--color-neutral-2);
      }
    }
  }
}

/* page-header */
.page-header {
  padding-block: var(--space-xl) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  >p {
    color: var(--color-neutral-4);
  }
}

/* steps */
.steps {
  padding-block: var(--space-m) var(--space-xl);

  >ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-m);

    >li {
      background-color: var(--color-neutral-9);
      border-radius: var(--border-radius);
      padding: var(--space-m);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);

      >p {
        color: var(--color-neutral-4);
      }
    }
  }
}

/* faq */
.faq {
  padding-block: var(--space-m) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  >header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  >dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;

    >div {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      padding-block: var(--space-s);
      border-top: 1px solid var(--color-neutral-8);

      >dt {
        color: var(--color-neutral-2);
      }

      >dd {
        margin: 0;
        color: var(--color-neutral-4);
      }
    }
  }
}

/* page-cta */
.page-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  background-color: var(--color-neutral-1);
  padding: var(--space-2xl) var(--space-l);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, var(--color-color-1) 0%, transparent 40%),
      radial-gradient(circle at 80% 50%, var(--color-color-3) 0%, transparent 40%);
    opacity: 0.18;
    pointer-events: none;
  }

  >* {
    position: relative;
  }

  >h2 {
    color: var(--color-neutral-9);
    max-width: 20ch;
  }

  >p {
    color: var(--color-neutral-8);
    opacity: 0.8;
    max-width: 44ch;
  }

  >div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-xs);
  }
}

.admin-organizers,
.admin-bibs {
  >table {
    width: 100%;

    input[type=number] {
      width: 6rem;
    }

    thead {
      text-align: left;
      color: var(--color-neutral-5);
    }
  }
}

/* sandro.biolchi@gmail.com */
/* 1988 */

/* claim error */
.claim-error {
  color: var(--color-color-4);
}

#claim-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  >label,
  button {
    margin-top: var(--space-xs);
  }

  >input,
  select {
    width: 25rem;
    max-width: 100%;
  }
}

/* admin-organizer */
.admin-organizer {
  padding-block: var(--space-m) var(--space-xl);

  >form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    >dl {
      display: flex;
      flex-direction: column;
      margin: 0;

      >div {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding-block: var(--space-s);
        border-top: 1px solid var(--color-neutral-8);

        >dt {
          color: var(--color-neutral-4);
        }

        >dd {
          margin: 0;

          >input {
            max-width: 100%;
            width: 20rem;
          }
        }
      }
    }

    >.actions {
      display: flex;
      gap: var(--space-s);
      flex-wrap: wrap;
    }
  }
}