/*
  Vitrine dos produtos da Cozinha da Rafa.

  Imagem primeiro, em três níveis: a linha (atalhos e seções), o sabor (o
  cartão, que é um <details> e expande no lugar, um por linha) e o pedido
  (WhatsApp com a mensagem do item). Tudo funciona sem script; app.js só
  abre o cartão apontado por um link direto. Cores e fontes vêm de
  tokens.css por base.css.
*/

main {
  padding-block: 1.6rem 1rem;
}

/* ------------------------------------------------------------- abertura --- */

.abertura {
  max-width: 40rem;
  margin-bottom: 1.4rem;
}

.sobrelinha {
  margin-bottom: .4rem;
  color: var(--verde);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 {
  margin-bottom: .6rem;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 570;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.abertura p {
  margin: 0;
  font-size: 1.06rem;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- atalhos --- */

.atalhos {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 -1rem 1.5rem;
  padding: .5rem 1rem;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linha);
}

.atalhos ul {
  display: flex;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.atalhos a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: .3rem .85rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  color: var(--traco);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.atalhos a:hover,
.atalhos a:focus-visible {
  border-color: var(--traco);
  color: var(--tinta);
}

@media (min-width: 46rem) {
  .atalhos {
    margin-inline: 0;
    padding-inline: 0;
  }

  .atalhos ul {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------- linhas --- */

.linha {
  scroll-margin-top: 4rem;
  padding-block: 1.2rem 2rem;
  border-top: 1px solid var(--linha);
}

.linha-cabeca {
  display: grid;
  gap: .3rem;
  margin-bottom: 1.1rem;
}

.linha-marca {
  margin: 0;
  color: var(--verde);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.linha h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
  font-weight: 570;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  line-height: 1.1;
}

.linha-lead {
  max-width: 40rem;
  margin: .2rem 0 0;
  font-size: 1.04rem;
  text-wrap: pretty;
}

@media (min-width: 46rem) {
  .linha-cabeca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
    column-gap: 2rem;
  }

  .linha-marca,
  .linha h2 {
    grid-column: 1;
  }

  .linha-lead {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* ---------------------------------------------------------------- grade --- */

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 62rem) {
  .grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- cartão --- */

.cartao {
  scroll-margin-top: 4.5rem;
  border: 1px solid var(--linha);
  border-radius: .9rem;
  background: var(--papel);
  transition: border-color 160ms ease;
}

.cartao:hover {
  border-color: var(--traco);
}

.cartao summary {
  display: grid;
  gap: .35rem;
  padding: .55rem .55rem .8rem;
  list-style: none;
  cursor: pointer;
}

.cartao summary::-webkit-details-marker {
  display: none;
}

.cartao summary:focus-visible {
  outline: 3px solid var(--terracota);
  outline-offset: -3px;
  border-radius: .9rem;
}

.cartao-figura {
  margin: 0;
}

.cartao-figura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: .5rem;
  mix-blend-mode: multiply;
}

.cartao-figura.quadrada img {
  aspect-ratio: 1 / 1;
}

.cartao h3 {
  margin: .3rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.2;
}

.cartao-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  margin: 0;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  color: var(--terracota);
}

.cartao-abrir {
  margin: .1rem 0 0;
  color: var(--traco);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.cartao[open] .cartao-abrir {
  display: none;
}

/*
  Aberto, o cartão ocupa a linha inteira da grade: a foto real à esquerda
  e, à direita, ingredientes, peso e o pedido.
*/
.grade > li:has(> .cartao[open]) {
  grid-column: 1 / -1;
}

.cartao[open] {
  border-color: var(--traco);
}

.cartao[open] summary {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--linha);
}

.cartao[open] .cartao-figura img {
  aspect-ratio: 1 / 1;
}

.cartao[open] h3 {
  margin: 0;
  font-size: 1.4rem;
}

.cartao[open] .cartao-preco {
  grid-column: 2;
}

.cartao-detalhe {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.cartao-foto {
  margin: 0;
}

.cartao-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: .6rem;
}

.cartao-foto.larga img {
  aspect-ratio: 3 / 2;
}

.cartao-info dl {
  display: grid;
  gap: .8rem;
  margin: 0 0 1.2rem;
}

.cartao-info dt {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--traco);
}

.cartao-info dd {
  margin: .15rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.cartao-info p {
  margin: 0 0 .9rem;
  font-size: 1rem;
  text-wrap: pretty;
}

.cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0;
}

@media (min-width: 46rem) {
  .cartao-detalhe {
    padding: 1.2rem;
  }

  /*
    Só divide em duas colunas quem tem foto. O Kit Receba Bem e o Kit Celebrar
    não têm, e na regra fixa o texto caía na coluna estreita com o resto vazio.
  */
  .cartao-detalhe:has(.cartao-foto) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 1.6rem;
  }

  .cartao[open] summary {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  }

  .cartao[open] .cartao-preco {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.1rem;
  }
}

/* ------------------------------------------------- blocos de linha única --- */

.bloco {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--linha);
  border-radius: .9rem;
  background: var(--papel);
}

.bloco-figura {
  margin: 0;
}

.bloco-figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .6rem;
  mix-blend-mode: multiply;
}

.bloco h3 {
  margin: 0 0 .5rem;
  font-size: 1.4rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.2;
}

.bloco p {
  margin: 0 0 .8rem;
  font-size: 1.02rem;
  text-wrap: pretty;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: .92rem;
}

.chips li {
  padding: .3rem .75rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-weight: 600;
}

.selo-campanha {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background-color: var(--evento-roxo);
  background-image: var(--evento-degrade);
  color: var(--papel);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 46rem) {
  .bloco {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: 1.8rem;
    padding: 1.4rem;
  }
}

/* ---------------------------------------------------------------- cafés --- */

.familia {
  border-top: 1px solid var(--linha);
}

.familia summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.familia summary::-webkit-details-marker {
  display: none;
}

.familia summary h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.familia summary small {
  color: var(--verde);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
}

.familia summary::after {
  content: "+";
  margin-left: auto;
  color: var(--traco);
  font-family: var(--sans);
  font-weight: 700;
}

.familia[open] summary::after {
  content: "–";
}

.familia-nota {
  margin: -.3rem 0 .8rem;
  color: color-mix(in srgb, var(--tinta) 70%, var(--papel));
  font-family: var(--sans);
  font-size: .88rem;
}

.cafes-acoes {
  margin-top: 1rem;
}

.cafes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.cafe {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: center;
  padding: .6rem;
  border: 1px solid var(--linha);
  border-radius: .7rem;
}

.cafe img,
.cafe svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.cafe strong {
  display: block;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
}

.cafe span {
  display: block;
  margin-top: .15rem;
  color: color-mix(in srgb, var(--tinta) 70%, var(--papel));
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.35;
}

.cafe .cafe-preco {
  color: var(--terracota);
  font-weight: 700;
}

/*
  Sem estoque se marca por borda tracejada e pelo texto, não por transparência:
  a opacidade de .6 derrubava o nome a 4,21:1, a descrição a 2,53:1 e o aviso a
  2,44:1 sobre o papel, com o mínimo em 4,5:1. Sem ela o nome herda --tinta
  (15,00:1) e a descrição fica no color-mix de .cafe span (5,76:1).

  A borda sobe de --linha para 60% do traço porque a 1,44:1 o tracejado não se
  distingue de uma borda cheia mais clara; a 3,13:1 ele se lê e cumpre o mínimo
  de componente não textual.
*/
.cafe--sem-estoque {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--traco) 60%, transparent);
}

.cafe--sem-estoque .cafe-preco {
  color: var(--traco);
}

@media (min-width: 46rem) {
  .cafes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .cafes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}