/* Hot Goss Story Cards — Collapsible Format */

.goss-story {
  background: linear-gradient(145deg, rgba(255, 253, 251, 0.96), rgba(247, 238, 238, 0.9));
  border: 1px solid rgba(75, 33, 72, 0.16);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.goss-story:hover {
  border-color: rgba(111, 38, 63, 0.3);
  box-shadow: 0 14px 28px rgba(75, 33, 72, 0.1);
}
.goss-story .goss-number {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 1.8rem;
  font-weight: 800;
  color: rgba(111, 38, 63, 0.12);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.goss-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #211820;
  margin: 0 0 8px;
  padding-right: 40px;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .goss-story {
    padding: 18px 16px 18px 20px;
  }

  .goss-story .goss-number {
    top: 12px;
    right: 12px;
    font-size: 1.18rem;
    line-height: 1;
    color: rgba(111, 38, 63, 0.18);
  }

  .goss-headline {
    padding-right: 32px;
    font-size: 0.98rem;
    line-height: 1.34;
  }

  .goss-preview {
    padding-right: 10px;
  }
}
.goss-preview {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(16, 8, 5, 0.65);
  margin: 0 0 10px;
}
/* Expand button */
.goss-expand-btn {
  background: none;
  border: none;
  color: var(--wine, #6f263f);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.goss-expand-btn:hover {
  opacity: 0.7;
}

/* Expanded content — hidden by default */
.goss-expanded {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(75, 33, 72, 0.12);
}
.goss-story.is-expanded .goss-expanded {
  display: block;
}
.goss-story.is-expanded .goss-preview {
  display: none;
}

/* Body text in expanded view */
.goss-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(16, 8, 5, 0.8);
  margin: 0 0 14px;
}

/* Why you'd care */
.goss-note-block,
.goss-editor-note,
.goss-why-care, .goss-cocktail-party {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.goss-note-block {
  background: rgba(255, 248, 252, 0.72);
  border: 1px solid rgba(75, 33, 72, 0.12);
  box-shadow: inset 4px 0 0 rgba(111, 38, 63, 0.28);
}
.goss-note-why {
  background: rgba(232, 197, 200, 0.16);
}
.goss-note-rating {
  background: rgba(255, 228, 122, 0.12);
  box-shadow: inset 4px 0 0 rgba(255, 190, 52, 0.5);
}
.goss-note-cocktail {
  background: rgba(255, 228, 122, 0.1);
  box-shadow: inset 4px 0 0 rgba(255, 190, 52, 0.44);
}
.goss-note-translation,
.goss-note-takeaway {
  background: rgba(231, 247, 255, 0.72);
  box-shadow: inset 4px 0 0 rgba(105, 180, 255, 0.46);
}
.goss-editor-note {
  background:
    radial-gradient(circle at top right, rgba(232, 197, 200, 0.14), transparent 9rem),
    rgba(255, 249, 236, 0.78);
  border: 1px dashed rgba(140, 17, 96, 0.26);
  color: rgba(16, 8, 5, 0.66);
}
.goss-why-care {
  background: rgba(232, 197, 200, 0.14);
  border-left: 3px solid rgba(111, 38, 63, 0.32);
}
.goss-cocktail-party {
  background: rgba(255, 215, 0, 0.05);
  border-left: 3px solid rgba(255, 180, 0, 0.35);
}
.goss-note-block span,
.goss-editor-note span,
.goss-why-label, .goss-cocktail-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  color: rgba(16, 8, 5, 0.45);
}
.goss-note-block p,
.goss-editor-note p,
.goss-why-care p, .goss-cocktail-party p {
  margin: 0;
  color: rgba(16, 8, 5, 0.72);
}

/* Footer with links */
.goss-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(75, 33, 72, 0.1);
}
.goss-source-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wine, #6f263f);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(232, 197, 200, 0.18);
  transition: background 0.2s;
}
.goss-source-link:hover {
  background: rgba(232, 197, 200, 0.3);
}
.goss-site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.goss-site-links a {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(16, 8, 5, 0.55);
  text-decoration: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(16, 8, 5, 0.03);
  border: 1px solid rgba(16, 8, 5, 0.08);
  transition: all 0.2s;
}
.goss-site-links a:hover {
  color: var(--wine, #6f263f);
  border-color: rgba(111, 38, 63, 0.24);
  background: rgba(232, 197, 200, 0.14);
}

/* Daily stories: slightly more compact */
.goss-story.goss-daily {
  padding: 16px 20px;
}
.goss-story.goss-daily .goss-headline {
  font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 600px) {
  .goss-story { padding: 16px 14px; }
  .goss-headline { font-size: 0.95rem; padding-right: 32px; }
  .goss-footer { flex-direction: column; align-items: flex-start; }
  .goss-site-links { gap: 4px; }
}