.overview-teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.overview-teaser { min-width: 0; border: 1px solid var(--tt-border); border-radius: 12px; background: var(--tt-surface); padding: 14px; }
.teaser-heading { display: flex; align-items: center; gap: 8px; }
.teaser-heading > .bi { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--tt-accent-tint); color: var(--tt-accent); font-size: 19px; }
.teaser-heading h3 { margin: 0; font: 700 20px/1.1 var(--tt-serif); }
.teaser-heading > a { margin-left: auto; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 12px; white-space: nowrap; text-decoration: none; }
.teaser-intro { font-size: 12px; color: var(--tt-muted); margin: 8px 0 12px; }
/* "View all →" is a tinted pill; on desktop the stays one sits on the intro line, as in the mockup. */
.teaser-stays .teaser-heading > a { min-height: 44px; padding: 0 10px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-radius: 12px; color: var(--tt-accent); background: var(--tt-accent-tint); background-clip: padding-box; }
@media (min-width: 768px) {
    .overview-teaser.teaser-stays { position: relative; }
    .teaser-stays .teaser-heading > a { position: absolute; top: 48px; right: 14px; }
    .teaser-stays .teaser-intro { padding-right: 84px; }
}
.teaser-day-label { font-size: 11px; color: var(--tt-muted); margin: 0 0 6px; }
.teaser-stops { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.teaser-stops li { display: flex; gap: 8px; align-items: center; font: 13px/1.25 var(--tt-serif); }
.teaser-stops li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #397346; }
.teaser-stops li:nth-child(2)::before { background: var(--tt-writer); }
.teaser-stops li:nth-child(3)::before { background: var(--tt-accent); }
.teaser-stops img { width: 38px; height: 32px; border-radius: 5px; object-fit: cover; }
.teaser-stops small { display: block; font: 10px var(--tt-font-body); color: var(--tt-muted); }
.teaser-stay { display: flex; align-items: center; gap: 10px; }
.teaser-stay img { width: 74px; height: 72px; object-fit: cover; border-radius: 8px; }
.teaser-stay h4 { font: 700 17px var(--tt-serif); margin: 0 0 4px; }
.teaser-stay p { font-size: 11px; color: var(--tt-muted); margin: 0; }
.teaser-video-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.teaser-video { min-width: 0; color: var(--tt-ink); text-decoration: none; font-size: 11px; }
.teaser-video > span { display: block; position: relative; }
.teaser-video img { width: 100%; height: 72px; object-fit: cover; border-radius: 8px; }
.teaser-video .bi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; background: #24221f; border-radius: 50%; font-size: 24px; line-height: 1; }
.teaser-phone-title { display: none; }
@media (max-width: 767px) {
    .overview-teasers { grid-template-columns: minmax(0, 1fr); }
    .teaser-phone-title { display: inline; }
    .teaser-desktop-title { display: none; }
    .teaser-day .teaser-intro { display: none; }
    /* Phone row like the mockup: the first stop's photo, then Morning and Afternoon on a timeline. */
    .teaser-stops { grid-template-columns: 96px repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 12px; }
    .teaser-stops li { display: contents; font-size: 12px; }
    .teaser-stops li::before { content: none; }
    .teaser-stops li:nth-child(n+3), .teaser-stops li:nth-child(n+2) img { display: none; }
    .teaser-stops img { width: 96px; height: 64px; }
    .teaser-stops li > span { position: relative; padding-left: 14px; border-left: 1px solid var(--tt-border); font: 13px / 1.3 var(--tt-serif); }
    .teaser-stops li > span::before { content: ''; position: absolute; left: -4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #397346; }
    .teaser-stops li:nth-child(2) > span::before { background: var(--tt-writer); }
    .teaser-stops small { font-size: 12px; }
    .teaser-heading h3 { font-size: 19px; }
    .teaser-video img { height: 100px; }
}