/* Cat Ba additions to the shared field-guide visual system. */
.cat-ba-guide .highlight-card .card-copy { display: flex; flex-direction: column; gap: 12px; }
.cat-ba-guide .highlight-card .card-copy p { margin: 0; }
.cat-ba-guide .highlight-card .text-button { margin-top: auto; }
.cat-ba-guide .highlight-card { display: flex; flex-direction: column; }
.cat-ba-guide .highlight-card .card-copy { flex: 1; }
.cat-ba-guide .note-label, .cat-ba-guide .photo-context { color: var(--muted); font-size: 13px; }
.cat-ba-guide .photo-context { margin-top: 20px; }
.cat-ba-guide .itinerary-view { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 32px; }
.cat-ba-guide .route-note { padding: 24px 18px; font-size: 14px; }
.cat-ba-guide .timeline { margin-top: 24px; }
.cat-ba-guide .timeline li { grid-template-columns: minmax(100px, .28fr) minmax(0, 1fr); }
.cat-ba-guide .timeline time { overflow-wrap: anywhere; }
.cat-ba-guide .day-tabs button { white-space: normal; flex: 1; text-align: left; }
.cat-ba-guide .extension-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--lime); border-radius: 16px; overflow: hidden; }
.cat-ba-guide .extension-card > img { width: 100%; height: 100%; object-fit: cover; }
.cat-ba-guide .extension-card h2 { font-size: clamp(28px, 3vw, 40px); margin-block: 12px 20px; }
.cat-ba-guide .weather-card { margin-bottom: 24px; }
.cat-ba-guide .weather-season-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cat-ba-guide .weather-season-grid article { border-radius: 12px; overflow: hidden; background: var(--white); }
.cat-ba-guide .weather-season-grid img { width: 100%; aspect-ratio: 3 / 2; height: auto; }
.cat-ba-guide .weather-season-grid h3 { margin-bottom: 12px; }
@media (max-width: 760px) {
  .cat-ba-guide .itinerary-view, .cat-ba-guide .weather-season-grid, .cat-ba-guide .extension-card { grid-template-columns: 1fr; }
  .cat-ba-guide .extension-card > img { height: auto; aspect-ratio: 3 / 2; }
  .cat-ba-guide .timeline li { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .cat-ba-guide .hero h1 { font-size: clamp(40px, 11vw, 60px); }
}