/* coffee.css — bygger på tokens i styles.css (--accent, --accent-alt, --border-color, --t, --font-mono).
   Återanvänder .card.glass, .card-header, .grid-cards, .chip, .chip-row, .tag.coffee därifrån. */

/* Smakfamiljsfärger (matchar loggern). Lägg gärna i styles.css :root istället om du vill. */
:root{
  --c-sour:#c6e84f; --c-fruity:#ff5c8a; --c-sweet:#ff9f43; --c-salty:#7fd4ff;
  --c-savory:#9b7bff; --c-roasty:#8a5a3c; --c-earthy:#5fae7d; --c-bitter:#b0b0b0;
}

/* --- Smakkort --- */
.t-meta{ font-size:.74rem; color:var(--text-muted); margin:.15rem 0; }
.t-meta .t-arrow{ color:var(--accent); }
.t-stars{ color:var(--accent-alt); font-size:.9rem; margin:.5rem 0; }

.flav-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.7rem 0; }
.flav-pill{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem;
  border:1px solid var(--border-color); border-radius:.6rem; padding:.2rem .5rem; color:var(--text); }
.flav-dot{ width:.5rem; height:.5rem; border-radius:50%; flex:0 0 auto; }

.t-note{ font-size:.78rem; color:var(--text-muted); border-left:2px solid var(--accent-alt);
  padding-left:.6rem; margin:.6rem 0 0; }
.t-scales{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; font-size:.7rem;
  color:var(--text-muted); margin-top:.7rem; }
.t-scales b{ color:var(--text); font-weight:500; }
.t-scales .t-date{ margin-left:auto; }

/* --- Teaser: länk till hela loggen --- */
.see-all{ display:inline-block; margin-top:1.5rem; color:var(--accent); text-decoration:none;
  font-family:var(--font-mono); font-size:.9rem; border:1px solid var(--border-color);
  border-radius:.6rem; padding:.55rem .95rem; transition:all var(--t); }
.see-all:hover{ border-color:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.2); transform:translateY(-1px); }

/* --- Fullsida: kontroller --- */
.coffee-controls{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; margin:2rem 0 1rem; }
.coffee-controls .chip-row{ flex:1 1 auto; }
.t-tools{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.t-search{ font-family:var(--font-mono); font-size:.82rem; color:var(--text); min-width:200px;
  background:rgba(0,0,0,.25); border:1px solid var(--border-color); border-radius:.6rem; padding:.45rem .7rem; }
.t-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15); }
.t-sort{ font-family:var(--font-mono); font-size:.82rem; color:var(--text);
  background:rgba(0,0,0,.3); border:1px solid var(--border-color); border-radius:.6rem; padding:.45rem .55rem; }
.t-count{ font-size:.74rem; color:var(--text-muted); margin:0 0 1rem; }
.t-empty{ color:var(--text-muted); font-size:.9rem; padding:2rem 0; }

.btn-more{ display:block; margin:2rem auto 0; font-family:var(--font-mono); font-size:.88rem; cursor:pointer;
  background:transparent; color:var(--text); border:1px solid var(--border-color); border-radius:.6rem; padding:.6rem 1.4rem;
  transition:all var(--t); }
.btn-more:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }

/* --- Diskret entré-animation, bara på teaser (inte på sök-resultat) --- */
@keyframes tFadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  #coffeeTeaser .card{ animation:tFadeUp .5s ease both; }
}

/* --- Sub-sektionsrubriker inom utrustning --- */
.subsection-heading{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(var(--accent-rgb),0.6);
  margin:1.6rem 0 0.5rem;
}
.subsection-heading:first-child{ margin-top:0; }

/* --- Wrapper för ensamstående kort (espresso, tillbehör) --- */
.single-card{ max-width:380px; }