/* Tips page specific styles – minimal and additive to base.css */
:root {
  --tips-accent: #a78bfa; /* moody violet */
  --tips-muted: rgba(255,255,255,0.7);
  --tips-bg-elev: rgba(255,255,255,0.04);
  --tips-border: rgba(255,255,255,0.12);
}

.tips-breadcrumb ol { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0; }
.tips-breadcrumb li+li::before { content: '/'; opacity: .6; margin: 0 .5rem; }

.tips-hero { position: relative; padding: clamp(2rem, 4vw, 4rem) 0; }
.tips-hero__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.tips-hero__copy h1 { line-height: 1.2; margin-bottom: .5rem; }
.tips-hero__copy p { color: var(--tips-muted); margin-bottom: 1rem; }

.tips-hero__media { position: relative; border-radius: .75rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.tips-hero__media img { display: block; width: 100%; height: auto; filter: saturate(.9) contrast(1.1) brightness(.85); }

.tips-search { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; margin: 1rem 0; }
.tips-search input[type="search"] { background: var(--tips-bg-elev); border: 1px solid var(--tips-border); color: inherit; padding: .75rem .9rem; border-radius: .5rem; }
.tips-search button { background: transparent; border: 1px solid var(--tips-border); color: inherit; padding: .6rem .9rem; border-radius: .5rem; cursor: pointer; }
.tips-search button:hover { border-color: var(--tips-accent); color: var(--tips-accent); }
.tips-results-count { font-size: .9rem; color: var(--tips-muted); grid-column: 1 / -1; }

.tips-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: .5rem; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: linear-gradient(135deg, var(--tips-accent), #6d28d9); color: #fff; }
.btn-secondary { background: transparent; color: #fff; border-color: var(--tips-border); }
.btn-outline { background: transparent; border-color: var(--tips-accent); color: var(--tips-accent); }
.btn:hover { filter: brightness(1.05); }

.tips-toc { margin: 2rem 0; padding: 1rem; border: 1px solid var(--tips-border); border-radius: .75rem; background: var(--tips-bg-elev); }
.tips-toc h2 { margin-top: 0; }
.tips-toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1rem; margin: 0; padding-left: 1.2rem; }
.tips-toc a { color: inherit; text-decoration-color: var(--tips-accent); }

.tips-section { padding: 1.5rem 0; border-top: 1px dashed var(--tips-border); }
.tips-section:first-of-type { border-top: none; }
.section-intro { color: var(--tips-muted); margin-top: -.25rem; }

.tips-list { margin: .75rem 0 0 0; padding-left: 1.2rem; }
.tips-list li { margin: .4rem 0; }

.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tip-card { border: 1px solid var(--tips-border); background: var(--tips-bg-elev); padding: 1rem; border-radius: .75rem; }
.tip-card h3 { margin-top: 0; color: var(--tips-accent); }

.tips-media .tips-figure { margin: 1rem 0; }
.tips-figure img { width: 100%; height: auto; border-radius: .5rem; }
.tips-figure figcaption { font-size: .9rem; color: var(--tips-muted); margin-top: .25rem; }

.tips-community-cta { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.tips-next { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--tips-border); border-radius: .75rem; background: var(--tips-bg-elev); }

@media (max-width: 1024px) {
  .tips-hero__inner { grid-template-columns: 1fr; }
}

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