/* Tips page specific styles – minimal and additive to base.css */
:root {
  --tips-accent: #00f5d4;
  --tips-accent-2: #7b2ff7;
  --tips-surface: rgba(255,255,255,0.04);
  --tips-surface-2: rgba(255,255,255,0.06);
  --tips-text-dim: rgba(255,255,255,0.8);
}
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.breadcrumb ol { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0; }
.breadcrumb a { text-decoration: none; color: var(--tips-accent); }

.tips-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; margin-top: 1rem; }
.tips-hero__text h1 { font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem); letter-spacing: 0.5px; }
.tips-hero__text p { color: var(--tips-text-dim); }
.tips-hero__media { border-radius: 12px; overflow: hidden; background: var(--tips-surface); border: 1px solid rgba(255,255,255,0.08); }
.tips-hero__media img { width: 100%; height: auto; display: block; }
.tips-hero__media figcaption { font-size: .875rem; padding: .5rem .75rem; color: var(--tips-text-dim); }

.tips-search { display: grid; grid-template-columns: 1fr auto; gap: .75rem; margin: 1rem 0; }
.tips-search input { padding: .8rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: var(--tips-surface); color: #fff; }
.tips-search button { padding: .8rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: var(--tips-surface-2); color: #fff; cursor: not-allowed; }
.tips-count { margin: 0 0 1rem; color: var(--tips-text-dim); }
.tips-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); }
.btn-primary { background: linear-gradient(135deg, var(--tips-accent), var(--tips-accent-2)); color: #0b0b0f; }
.btn-ghost { background: transparent; color: #fff; }

.tips-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; margin-top: 2rem; }
.tips-toc { position: sticky; top: 90px; align-self: start; background: var(--tips-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1rem; }
.tips-toc h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.tips-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.tips-toc a { color: #fff; text-decoration: none; border-left: 3px solid transparent; padding: .35rem .5rem .35rem .75rem; border-radius: 6px; display: block; }
.tips-toc a:focus, .tips-toc a:hover { border-left-color: var(--tips-accent); background: var(--tips-surface-2); }
.tips-toc__note { margin-top: .75rem; font-size: .9rem; color: var(--tips-text-dim); }

.tips-content { display: grid; gap: 1.5rem; }
.tips-section { background: var(--tips-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1rem 1.25rem; }
.tips-section h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.section-lead { color: var(--tips-text-dim); margin: 0 0 .75rem; }
.section-body ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.tips-figure { margin: 1rem 0 0; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1rem; }
.section-footer { margin-top: .75rem; color: var(--tips-text-dim); }

/* Accessibility helpers */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Responsive */
@media (max-width: 960px) {
  .tips-hero { grid-template-columns: 1fr; }
  .tips-layout { grid-template-columns: 1fr; }
  .tips-toc { position: static; }
}