/**
 * Quick Fix Force — Services architecture
 * Source: src/pages/Services.jsx, ServiceDetail.jsx, SubServiceDetail.jsx
 * and src/components/service/*.jsx, src/components/subservice/*.jsx.
 *
 * Only what genuinely isn't covered by qff-shared-blocks.css / qff-components.css
 * lives here — service directory cards, the service hero (its own 2-col
 * layout, distinct from qff-page-hero), problem/offering/sub-service grids
 * and sibling links.
 */

/* ===== Services directory grid (archive-qff_service.php, source: ServicesDirectory.jsx) ===== */
.qff-service-directory-grid { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .qff-service-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-service-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3.5rem; } }
.qff-service-directory-card {
  height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); overflow: hidden;
}
.qff-service-directory-card__media { position: relative; overflow: hidden; display: block; }
.qff-service-directory-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s ease; }
.qff-service-directory-card__media:hover img { transform: scale(1.04); }
.qff-service-directory-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
@media (min-width: 640px) { .qff-service-directory-card__body { padding: 1.5rem; } }
.qff-service-directory-card__body h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-service-directory-card__body p { margin-top: 0.5rem; font-size: 14.5px; color: var(--qff-charcoal-60); line-height: 1.7; flex: 1; }
.qff-service-directory-card__link {
  margin-top: 1.25rem; 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-service-directory-card__link:hover { color: var(--qff-action); }
.qff-service-directory-card__link svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.qff-service-directory-card__link:hover svg { transform: translate(2px, -2px); }

/* ===== Service hero (single-qff_service.php, source: ServiceHero.jsx — distinct
   2-column layout from the shared qff-page-hero, image alongside copy) ===== */
.qff-service-hero { padding-top: var(--qff-header-height); background: #fff; }
.qff-service-hero__grid {
  padding-top: 1.5rem; padding-bottom: 2.5rem; display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 640px) { .qff-service-hero__grid { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .qff-service-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; padding-top: 5rem; padding-bottom: 5rem; } }
.qff-service-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--qff-action); margin-bottom: 1.25rem; }
.qff-service-hero__title { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
@media (min-width: 640px) { .qff-service-hero__title { font-size: 48px; } }
@media (min-width: 1024px) { .qff-service-hero__title { font-size: 54px; } }
.qff-service-hero__desc { margin-top: 1.5rem; font-size: 17px; color: var(--qff-charcoal-65); line-height: 1.7; max-width: 36rem; }
.qff-service-hero__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-service-hero__actions { flex-direction: row; } }
.qff-service-hero__trust { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; }
.qff-service-hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13.5px; font-weight: 500; color: var(--qff-charcoal-60); }
.qff-service-hero__trust svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; }
.qff-service-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ===== Quick-answer "who this is for" follow-on line (source: ServiceQuickAnswer.jsx) ===== */
.qff-service-forwho-wrap { padding-top: 0; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .qff-service-forwho-wrap { padding-bottom: 5rem; } }
.qff-service-forwho { max-width: 48rem; margin: -2.5rem auto 0; padding-left: 1.25rem; font-size: 15px; color: var(--qff-charcoal-60); line-height: 1.7; }
@media (min-width: 640px) { .qff-service-forwho { padding-left: 1.75rem; } }
.qff-service-forwho strong { font-weight: 600; color: var(--qff-charcoal-80); }

/* ===== Problems (Problem · Cause · Solution) — source: ServiceProblems.jsx ===== */
.qff-problem-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .qff-problem-list { gap: 1.25rem; margin-top: 3.5rem; } }
.qff-problem-card { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1.5rem; }
@media (min-width: 640px) { .qff-problem-card { padding: 2rem; } }
.qff-problem-card h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 17px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-problem-card h3 { font-size: 20px; } }
.qff-problem-card dl { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-problem-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.qff-problem-card dt { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qff-charcoal-40); }
.qff-problem-card dt.qff-problem-fix { color: var(--qff-action); }
.qff-problem-card dd { margin-top: 0.5rem; font-size: 15px; color: var(--qff-charcoal-65); line-height: 1.7; }

/* ===== Offerings grid — source: ServiceOfferings.jsx ===== */
.qff-offerings-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-offerings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3.5rem; } }
.qff-offering-card { background: #fff; border-radius: var(--qff-radius-sm); padding: 1.5rem; height: 100%; }
@media (min-width: 640px) { .qff-offering-card { padding: 2rem; } }
.qff-offering-card__badge {
  display: flex; align-items: center; justify-content: center; height: 2rem; width: 2rem;
  border-radius: 9999px; background: var(--qff-action); margin-bottom: 1rem;
}
.qff-offering-card__badge svg { width: 1rem; height: 1rem; color: #fff; }
.qff-offering-card h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-offering-card p { margin-top: 0.5rem; font-size: 14px; color: var(--qff-charcoal-60); line-height: 1.7; }

/* ===== Sub-service grid on the parent service page — source: SubServiceGrid.jsx ===== */
.qff-subservice-grid { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .qff-subservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-subservice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.5rem; } }
.qff-subservice-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-subservice-card:hover { border-color: var(--qff-navy-25); }
.qff-subservice-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.qff-subservice-card h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.qff-subservice-card__row svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; margin-top: 0.15rem; transition: transform 0.2s ease; }
.qff-subservice-card:hover .qff-subservice-card__row svg { transform: translate(2px, -2px); }
.qff-subservice-card p { margin-top: 0.75rem; font-size: 14.5px; color: var(--qff-charcoal-60); line-height: 1.7; }

/* ===== Cost & Quotation section extra CTA row — source: ServiceCost.jsx buttons ===== */
.qff-cost-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-cost-cta { flex-direction: row; } }

/* ===== Sibling sub-service links — source: SiblingLinks.jsx ===== */
.qff-sibling-links { margin-top: 2.25rem; display: grid; gap: 1rem; max-width: 56rem; }
@media (min-width: 640px) { .qff-sibling-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-sibling-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--qff-navy-10); padding: 1rem 0; transition: border-color 0.2s ease;
}
.qff-sibling-link:hover { border-color: var(--qff-navy-25); }
.qff-sibling-link span { font-weight: 500; color: var(--qff-charcoal); font-size: 15.5px; }
.qff-sibling-link svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; transition: transform 0.2s ease; }
.qff-sibling-link:hover svg { transform: translateX(4px); }