/* Support page specific styles (avoid duplicating base.css) */

.hero {
  padding-block: var(--space-12) var(--space-10);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.hero-grid {
  grid-template-columns: 1.1fr .9fr;
}
.hero-figure { display: none; }
@media (min-width: 900px) { .hero-figure { display: block; } }

.search-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); margin-top: var(--space-7); }
.search-hint { color: var(--gray-600); margin-top: var(--space-3); grid-column: 1 / -1; }

.quick-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-7); margin-top: var(--space-8); }

.section-faq, .section-contact, .section-troubleshooting, .section-videos, .section-forum, .section-chat, .section-feedback, .section-resources {
  padding-block: var(--space-12);
}
.faq-list { display: grid; gap: var(--space-6); }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; }
.faq-item[open] { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { display: grid; gap: 8px; }

.tips-grid { grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .tips-grid { grid-template-columns: 1fr 1fr; } }

.video-grid { grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .video-grid { grid-template-columns: 1fr 1fr 1fr; } }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Chat widget */
.chat-widget { display: grid; gap: var(--space-6); }
.start-form { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 700px) { .start-form { grid-template-columns: 1fr; } }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-5); }
.chat-header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
.chat-log { max-height: 360px; overflow: auto; display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--color-muted); border-radius: var(--radius-md); }
.chat-msg { display: inline-block; max-width: 80%; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chat-msg.agent { background: var(--color-surface); border: 1px solid var(--color-border); }
.chat-msg.user { background: var(--color-primary); color: var(--color-primary-contrast); justify-self: end; }
.chat-meta { display: block; font-size: var(--fs-xs); color: var(--gray-500); margin-top: 2px; }
.chat-input-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); }

/* Feedback form */
.rating-field { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.rating-group { display: inline-flex; gap: var(--space-4); }
.form-note { color: var(--gray-600); margin-left: var(--space-5); display: inline-block; }

/* Resources */
.resources-grid { grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .resources-grid { grid-template-columns: 1fr 1fr 1fr; } }