/* Tips page specific styles. Keep minimal and lean on base.css for layout, typography, and utilities. */

.tips-hero {
  background: linear-gradient(135deg, rgba(40,120,200,0.08), rgba(200,170,60,0.08));
  padding: var(--space-8) 0 var(--space-6);
}
.tips-hero__content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
.tips-hero__text .overline { color: var(--brand-700, #275ea8); letter-spacing: .08em; font-weight: 700; }
.tips-hero__text h1 { margin: .25rem 0 .5rem; }
.tips-hero__text .subtitle { color: var(--text-600); max-width: 48ch; }

.tips-search { display: flex; gap: .5rem; margin-top: var(--space-4); }
.tips-search input[type="search"] { flex: 1; }

.tips-hero__media img { width: 100%; height: auto; border-radius: var(--radius-3); box-shadow: var(--shadow-2); }
.tips-hero__media figcaption { font-size: .9rem; color: var(--text-600); margin-top: .5rem; }

.tips-toc { margin-block: var(--space-4); }
.tips-toc__list { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.tips-toc .toc-link { padding: .4rem .7rem; border-radius: 999px; background: var(--surface-200); transition: background .2s; }
.tips-toc .toc-link:hover, .tips-toc .toc-link:focus { background: var(--surface-300); }

.tips-section { padding-block: var(--space-6); border-top: 1px solid var(--surface-250, #e8ebf0); }
.section-header { margin-bottom: var(--space-4); }
.section-header p { color: var(--text-600); }

.tips-grid { display: grid; gap: var(--space-4); }
.tips-grid.two { grid-template-columns: 1.2fr .8fr; }
.tips-grid.three { grid-template-columns: repeat(3, 1fr); }

.tips-list { display: grid; gap: .5rem; }
.steps { display: grid; gap: .5rem; padding-left: 1.25rem; }
.quotes { display: grid; gap: .75rem; font-style: italic; }

.card { padding: var(--space-3); background: var(--surface-100); border-radius: var(--radius-3); box-shadow: var(--shadow-1); }

.tips-figure img { width: 100%; height: auto; border-radius: var(--radius-3); }
.tips-figure figcaption { color: var(--text-600); font-size: .9rem; margin-top: .25rem; }

.note { font-size: .95rem; color: var(--text-600); margin-top: .5rem; }

.tips-cta { padding-block: var(--space-6); text-align: center; }
.tips-cta .cta-actions { display: flex; gap: .75rem; justify-content: center; margin-top: .75rem; }

.feedback-form { display: grid; gap: .75rem; max-width: 720px; margin-inline: auto; }
.feedback-form .form-row { display: grid; gap: .25rem; }

/* Responsive */
@media (max-width: 1024px) {
  .tips-hero__content { grid-template-columns: 1fr; }
  .tips-grid.two { grid-template-columns: 1fr; }
  .tips-grid.three { grid-template-columns: 1fr; }
}