/* Traveller stories — placeholder notice + quote cards. */

.notice {
  margin: 0 var(--gutter) 8px;
  background: var(--color-accent-2-100);
  border: 1px solid var(--color-accent-2-200);
  border-radius: var(--radius-md);
  padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.notice__mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent-2); flex: none; margin-top: 7px;
}
.notice p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--color-accent-2-800); }

.quote-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding: clamp(28px, 4vw, 40px) var(--gutter) clamp(20px, 3vw, 32px);
}
.quote {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-8); margin: 0;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.quote blockquote {
  font-family: var(--font-heading); font-weight: 700; font-size: 21px; line-height: 1.35;
  letter-spacing: -0.01em; margin: 0 0 22px; flex: 1;
}
.quote figcaption { display: flex; gap: 14px; align-items: center; font-size: 14px; margin: 0; color: var(--color-muted); }
.quote figcaption strong { color: var(--color-text); font-weight: 700; }
.quote__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; box-shadow: var(--shadow-sm); }
.quote__avatar::after { content: ""; }

@media (max-width: 760px) {
  .quote-grid { grid-template-columns: 1fr; }
}