/* Tips section (tips*.html). Uses the palette variables from styles.css only. */
.tips-grid{grid-template-columns:repeat(3,1fr)}
.tips-grid .tips-card,.tips-grid .tips-card:nth-child(4),.tips-grid .tips-card:nth-child(5){grid-column:auto}
.tips-card{scroll-margin-top:calc(var(--header-h) + 20px)}
.tips-card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--tint)}
.tips-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tips-count{font-size:.82rem!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)!important;margin:.2em 0 .8em}
.tips-catnav{margin:0 0 28px}
.tips-catnav .chip{text-decoration:none;padding:8px 16px;font-size:.9rem}
.tips-catnav .chip:hover{background:color-mix(in srgb,var(--primary) 14%,var(--bg))}
.tips-catnav .chip-active{background:var(--primary);color:var(--on-primary)}
.tips-zone{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--secondary);border-radius:10px;padding:14px 18px;margin:28px 0 36px;font-size:.94rem;color:var(--muted)}
.tips-zone svg{flex:none;width:22px;height:22px;color:var(--primary);margin-top:1px}
.tip-list{list-style:none;counter-reset:tip;padding:0;margin:0}
.tip-list .tip{counter-increment:tip;position:relative;padding:20px 22px 18px 72px;margin:0 0 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.tip-list .tip::before{content:counter(tip);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary);font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.tip-list h3{margin:0 0 .35em;font-size:1.15rem}
.tip-list p{margin:0;color:var(--muted);font-size:.97rem}
.video-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.yt{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.yt-link{position:absolute;inset:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s,opacity .2s}
.yt-link:hover img,.yt-link:focus-visible img{transform:scale(1.03);opacity:.9}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.yt-link:hover .yt-play path:first-child,.yt-link:focus-visible .yt-play path:first-child{fill:#f00;fill-opacity:1}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.video-card figcaption strong{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.3}
.video-meta{color:var(--muted);font-size:.84rem}
.video-card figcaption a{font-weight:700}
.tips-credit-line{margin-top:24px;font-size:.88rem;color:var(--muted)}
.tips-more{font-weight:600}
@media (max-width:900px){.tips-grid{grid-template-columns:1fr 1fr}.tips-grid .tips-card:nth-child(3){grid-column:span 2}}
@media (max-width:640px){.tips-grid{grid-template-columns:1fr}.tips-grid .tips-card:nth-child(3){grid-column:auto}.tip-list .tip{padding:18px 18px 16px 62px}.tip-list .tip::before{left:14px;top:18px}}