/* PIERCERS.PT | ENCONTRAR UM PIERCER */

/* PESQUISA */

.submission form {

  margin-top: 56px;

}

/* REFINAR PESQUISA */

.search-refine {

  margin-top: 34px;

}

.search-refine summary {

  width: 100%;

  padding: 18px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  border-top: 1px solid var(--black);

  border-bottom: 1px solid var(--black);

  font-size: clamp(20px, 2.2vw, 32px);

  line-height: 1;

  letter-spacing: -0.04em;

  cursor: pointer;

  list-style: none;

  transition:

    background var(--transition),

    color var(--transition);

}

.search-refine summary::-webkit-details-marker {

  display: none;

}

.search-refine summary::marker {

  content: "";

}

.search-refine summary:hover {

  background: var(--black);

  color: var(--white);

}

.search-refine summary:focus-visible {

  outline: 2px solid var(--black);

  outline-offset: 4px;

}

.summary-icon {

  flex: 0 0 auto;

  font-size: 25px;

  line-height: 1;

  transition: transform var(--transition);

}

.search-refine[open] .summary-icon {

  transform: rotate(45deg);

}

/* FILTROS */

.search-refine .section-gap {

  margin-top: 72px;

}

.search-refine .section-heading+.form-grid {

  margin-top: 44px;

}

.search-refine .form-grid {

  gap: 52px 28px;

}

/* SELECT */

.search-refine select {

  cursor: pointer;

  background-image:

    linear-gradient(45deg,

      transparent 50%,

      var(--black) 50%),

    linear-gradient(135deg,

      var(--black) 50%,

      transparent 50%);

  background-position:

    calc(100% - 8px) 50%,

    calc(100% - 3px) 50%;

  background-size: 5px 5px, 5px 5px;

  background-repeat: no-repeat;

  padding-right: 28px;

}

.search-refine select:disabled {

  cursor: default;

}

/* RESULTADOS */

.search-results {

  margin-top: 96px;

  padding-top: 0;

}

.results-count {

  white-space: nowrap;

}

.results-list {

  margin-top: 0;

  border-bottom: 1px solid var(--black);

}

.empty-results {

  max-width: 520px;

  margin: 0;

  padding: 34px 0 80px;

  color: var(--grey);

  font-size: clamp(22px, 2.4vw, 34px);

  line-height: 1.05;

  letter-spacing: -0.04em;

}

/* CARTÃO INTEIRO CLICÁVEL */

.search-result {

  display: grid;

  grid-template-columns: 220px minmax(0, 1fr) auto;

  gap: 32px;

  align-items: stretch;

  padding: 32px 0;

  border-top: 1px solid var(--black);

  color: inherit;

  text-decoration: none;

  cursor: pointer;

  transition: background-color 0.2s ease;

}

.search-result:first-child {

  border-top: 0;

}

a.search-result {

  color: inherit;

  text-decoration: none;

}

a.search-result:hover {

  background-color: rgba(0, 0, 0, 0.035);

}

a.search-result:focus-visible {

  outline: 2px solid var(--black);

  outline-offset: -2px;

}

/* FOTOGRAFIA */

.search-result-image {

  width: 220px;

  height: 220px;

  overflow: hidden;

}

.search-result-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.search-result-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--black);

  font-size: 11px;

  letter-spacing: 0.08em;

}

/* CONTEÚDO */

.search-result-content {

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}

.search-result-location {

  margin: 0 0 18px;

  font-size: 11px;

  line-height: 1.4;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.search-result-name {

  margin: 0;

  font-size: clamp(38px, 5vw, 70px);

  line-height: 0.92;

  letter-spacing: -0.055em;

  overflow-wrap: anywhere;

}

.search-result .search-result-bio {

  max-width: 580px;

  margin: 32px 0 0;

  font-size: 16px;

  line-height: 1.5;

  overflow-wrap: anywhere;

}

/* MATERIAIS E MÉTODO */

.search-result .search-result-details {

  display: flex;

  flex-wrap: wrap;

  gap: 32px 48px;

  margin-top: 36px;

}

.search-result-detail {

  min-width: 0;

}

.search-result .search-result-detail-label {

  margin: 0 0 14px;

  font-size: 11px;

  line-height: 1.4;

  letter-spacing: 0.06em;

}

.search-result-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 28px;

}

.search-result .search-result-detail .search-result-tags {

  margin: 0;

}

.search-result-tags span {

  padding: 8px 12px;

  border: 1px solid var(--black);

  font-size: 12px;

  line-height: 1.3;

}

/* VER PERFIL */

.search-result-action {

  min-width: 110px;

  align-self: start;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  color: inherit;

  text-decoration: none;

  font-size: 14px;

  line-height: 1.3;

  letter-spacing: 0.02em;

  white-space: nowrap;

}

.search-result-action span,

.search-result-action span:last-child {

  font-size: inherit;

  line-height: inherit;

}

a.search-result:hover .search-result-action {

  text-decoration: underline;

  text-underline-offset: 4px;

}

/* COMPATIBILIDADE COM CARTÕES ANTIGOS */

.result-card {

  position: relative;

  display: grid;

  grid-template-columns: 110px minmax(0, 1fr) auto;

  gap: 28px;

  align-items: center;

  min-height: 145px;

  padding: 22px 0;

  border-bottom: 1px solid var(--black);

  color: var(--black);

  text-decoration: none;

  transition:

    background var(--transition),

    color var(--transition);

}

.result-card:hover {

  background: var(--black);

  color: var(--white);

}

.result-avatar {

  width: 86px;

  height: 86px;

  object-fit: cover;

  border-radius: 50%;

}

.result-content {

  min-width: 0;

}

.result-name {

  margin: 0;

  font-size: clamp(28px, 3.5vw, 50px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.055em;

}

.result-meta {

  margin: 12px 0 0;

  color: var(--grey);

  font-size: 12px;

  line-height: 1.4;

}

.result-card:hover .result-meta {

  color: var(--white);

}

.result-arrow {

  font-size: 28px;

  line-height: 1;

}

.result-tags {

  margin-top: 14px;

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}

.result-tag {

  padding: 5px 8px;

  border: 1px solid currentColor;

  font-size: 10px;

  line-height: 1;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}


/* RESULTADOS — DISTINÇÃO ENTRE ZONA E PROXIMIDADE */

.nearby-section-heading {
  margin-top: 56px;
  padding: 26px 0 22px;
  border-top: 3px solid var(--black);
  border-bottom: 1px solid var(--black);
  align-items: flex-end;
}

.nearby-section-title {
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.nearby-section-distance {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.results-count {
  text-align: right;
}

/* TABLET */

@media (max-width: 900px) {

  .search-result {

    grid-template-columns: 160px minmax(0, 1fr);

  }

  .search-result-image {

    width: 160px;

    height: 160px;

  }

  .search-result-action {

    grid-column: 2;

    min-width: 0;

    justify-content: flex-start;

  }

}

/* MOBILE */

@media (max-width: 700px) {

  .submission form {

    margin-top: 48px;

  }

  .search-refine {

    margin-top: 28px;

  }

  .search-refine summary {

    padding: 16px 0;

    font-size: 22px;

  }

  .summary-icon {

    font-size: 22px;

  }

  .search-refine .section-gap {

    margin-top: 58px;

  }

  .search-refine .section-heading+.form-grid {

    margin-top: 36px;

  }

  .search-refine .form-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }

  .search-results {

    margin-top: 76px;

  }


  .nearby-section-heading {

    margin-top: 44px;

    padding: 22px 0 18px;

    align-items: flex-start;

    flex-direction: column;

    gap: 8px;

  }

  .nearby-section-title {

    font-size: clamp(24px, 8vw, 34px);

  }

  .nearby-section-distance {

    white-space: normal;

  }

  .results-count {

    white-space: normal;

    max-width: 52%;

  }

  .empty-results {

    padding-top: 32px;

    padding-bottom: 56px;

    font-size: 20px;

  }

  .result-card {

    grid-template-columns: 74px minmax(0, 1fr) auto;

    gap: 16px;

    min-height: 118px;

    padding: 18px 0;

  }

  .result-avatar {

    width: 64px;

    height: 64px;

  }

  .result-name {

    font-size: clamp(26px, 8vw, 38px);

  }

  .result-meta {

    margin-top: 8px;

    font-size: 11px;

  }

  .result-tags {

    margin-top: 10px;

  }

  .result-tag {

    padding: 4px 6px;

    font-size: 9px;

  }

  .result-arrow {

    font-size: 24px;

  }

}

/* CARTÃO NO MOBILE */

@media (max-width: 650px) {

  .search-result {

    grid-template-columns: minmax(0, 1fr);

    gap: 32px;

    padding: 32px 0 40px;

  }

  .search-result-image {

    width: 100%;

    height: auto;

    aspect-ratio: 1;

  }

  .search-result-name {

    font-size: clamp(42px, 14vw, 68px);

  }

  .search-result .search-result-details {

    flex-direction: column;

    align-items: flex-start;

    gap: 28px;

    margin-top: 32px;

  }

  .search-result .search-result-action {

    grid-column: auto;

    margin-top: 8px;

  }

}

/* MOBILE PEQUENO */

@media (max-width: 420px) {

  .result-card {

    grid-template-columns: 58px minmax(0, 1fr) auto;

    gap: 12px;

  }

  .result-avatar {

    width: 50px;

    height: 50px;

  }

  .result-name {

    font-size: 26px;

  }

  .result-tags {

    display: none;

  }

}

/* MOVIMENTO REDUZIDO */

@media (prefers-reduced-motion: reduce) {

  .search-result,

  .search-refine summary,

  .summary-icon,

  .result-card {

    transition: none;

  }

}