/**
 * Quick Fix Force — Guides (directory / category / article)
 * Source: src/pages/Guides.jsx, GuideCategory.jsx, GuideArticle.jsx and
 * src/components/guides/*.jsx. Hand-ported from the source's Tailwind
 * classes to the same px/rem values (see CLAUDE.md §2). Sitewide primitives
 * (.qff-container, .qff-reveal, .qff-section--*, .qff-section-compact,
 * .qff-h3-band, buttons, FAQ accordion, breadcrumb, page hero, cta band,
 * value grid, service-links grid, area chips) live in qff-base.css /
 * qff-components.css / qff-shared-blocks.css and are reused as-is — nothing
 * in this file redefines them.
 *
 * Loaded explicitly by archive-qff_guide.php / taxonomy-qff_service_category.php
 * / single-qff_guide.php's templates; not auto-enqueued by inc/enqueue.php
 * (out of this workstream's file ownership — see final report).
 */

/* ===== Guide card (directory grid + category grid + related-guides grid) =====
   Source: Guides.jsx / GuideCategory.jsx / RelatedGuides.jsx card markup. */
.qff-guide-grid { margin-top: 2.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.qff-guide-grid--2col { gap: 1.25rem; }
@media (min-width: 1024px) { .qff-guide-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.qff-guide-card {
  display: block; height: 100%;
  background: #fff; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm);
  padding: 1.5rem; transition: border-color 0.2s ease;
}
.qff-guide-card:hover { border-color: var(--qff-navy-25); }
.qff-guide-card h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 16.5px; line-height: 1.35; letter-spacing: -0.01em; }
.qff-guide-card p { margin-top: 0.75rem; font-size: 14.5px; color: var(--qff-charcoal-60); line-height: 1.6; }
.qff-guide-card__link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 600; color: var(--qff-navy); transition: color 0.2s ease; }
.qff-guide-card:hover .qff-guide-card__link { color: var(--qff-action); }
.qff-guide-card__link svg { width: 0.875rem; height: 0.875rem; }

.qff-guide-card--lg { padding: 1.5rem; }
@media (min-width: 640px) { .qff-guide-card--lg { padding: 1.75rem; } }
.qff-guide-card--lg h2 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.qff-guide-card--lg p { margin-top: 0.75rem; font-size: 15px; color: var(--qff-charcoal-65); line-height: 1.6; }

/* ===== Guide directory: "All X guides" / "X services in Dubai" link row ===== */
.qff-guide-links-row { margin-top: 2rem; display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.5rem; }
.qff-guide-links-row .qff-inline-link { margin-top: 0; }

/* ===== Guide article: byline strip (source: GuideMeta.jsx) ===== */
.qff-guide-meta-wrap { padding-top: 0; padding-bottom: 0.5rem; background: #fff; }
.qff-guide-meta { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.625rem; font-size: 13.5px; color: var(--qff-charcoal-60); }
.qff-guide-meta li { display: inline-flex; align-items: center; gap: 0.5rem; }
.qff-guide-meta svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; }

/* ===== Narrow article column (Symptoms/Causes, Steps) — source: max-w-3xl ===== */
.qff-guide-narrow { max-width: 48rem; margin: 0 auto; }

.qff-guide-h2 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-guide-h2 { font-size: 28px; } }

/* ===== Bulleted lists (symptoms / whenPro) — source uses AlertCircle /
   AlertTriangle icons from lucide-react, not in this theme's icon set yet
   (see inc/icons.php); rendered as a small coloured bullet instead of
   substituting an unrelated glyph. ===== */
.qff-guide-bullets { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.qff-guide-bullets li { display: flex; gap: 0.75rem; font-size: 16px; line-height: 1.7; }
.qff-guide-bullets--symptom li { color: var(--qff-charcoal-70); }
.qff-guide-bullets--symptom li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.6rem; border-radius: 9999px; background: var(--qff-action); }
.qff-guide-bullets--pro { margin-top: 1.75rem; }
.qff-guide-bullets--pro li { font-size: 15.5px; color: var(--qff-white-70); }
.qff-guide-bullets--pro svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; margin-top: 0.2rem; }

/* ===== Causes list (source: SymptomsCauses.jsx "Possible causes") ===== */
.qff-guide-causes { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.qff-guide-cause { border-top: 1px solid var(--qff-navy-10); padding-top: 1.25rem; }
.qff-guide-cause h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 17.5px; letter-spacing: -0.01em; }
.qff-guide-cause h3 span { color: var(--qff-action); margin-right: 0.5rem; }
.qff-guide-cause p { margin-top: 0.625rem; font-size: 15.5px; color: var(--qff-charcoal-65); line-height: 1.7; }

/* ===== Safety split (source: SafetySplit.jsx) ===== */
.qff-safety-split { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .qff-safety-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-safety-split__col { height: 100%; background: #fff; border: 1px solid var(--qff-navy-10); padding: 1.5rem; border-radius: var(--qff-radius-sm); }
@media (min-width: 640px) { .qff-safety-split__col { padding: 2rem; } }
.qff-safety-split__col h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-safety-split__col ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.qff-safety-split__col li { display: flex; gap: 0.75rem; font-size: 15px; color: var(--qff-charcoal-70); line-height: 1.6; }
.qff-safety-split__col li svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; margin-top: 0.2rem; }
.qff-safety-split__col--navy { background: var(--qff-navy); border-color: transparent; }
.qff-safety-split__col--navy h3 { color: #fff; }
.qff-safety-split__col--navy li { color: var(--qff-white-70); }

/* ===== Step-by-step (source: GuideSteps.jsx) ===== */
.qff-guide-steps { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 2rem; counter-reset: none; }
.qff-guide-steps li { display: flex; gap: 1.25rem; }
.qff-guide-steps__num { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-action); font-size: 20px; line-height: 1; padding-top: 0.125rem; flex-shrink: 0; width: 2rem; }
.qff-guide-steps li h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 17.5px; letter-spacing: -0.01em; }
.qff-guide-steps li p { margin-top: 0.5rem; font-size: 15.5px; color: var(--qff-charcoal-65); line-height: 1.7; }

/* ===== When to call a professional (source: WhenToCall.jsx, navy band) ===== */
.qff-when-to-call { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .qff-when-to-call { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } }
.qff-when-to-call__box { background: var(--qff-white-05); border: 1px solid var(--qff-white-10); padding: 1.5rem; border-radius: var(--qff-radius-sm); }
@media (min-width: 640px) { .qff-when-to-call__box { padding: 2rem; } }
.qff-when-to-call__box h3 { font-family: var(--qff-font-display); font-weight: 600; color: #fff; font-size: 18px; letter-spacing: -0.01em; }
.qff-when-to-call__box p { margin-top: 1rem; font-size: 15.5px; color: var(--qff-white-65); line-height: 1.7; }
.qff-when-to-call__actions { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-when-to-call__actions { flex-direction: row; } }