/**
 * CUTIS Theme — Service "FUE & FUT explained" technique section
 * Classes kept identical to _design-reference/style.css (technique-block,
 * technique-media, technique-body, tag-row, tag-chip, two-col-list,
 * list-heading, check-list) — none of them collide with anything in
 * header.css/layout.css.
 *
 * .row, .g-4 and .col-lg-6 are already defined in single-service-types.css /
 * single-service-candidate.css, both enqueued alongside this file on every
 * service singular page — not redeclared here. .mb-4 is new (no earlier
 * section needed it) so it's added below.
 *
 * .check-list itself is defined in single-service-candidate.css, but this
 * section's lists are smaller/tighter (compact cards vs. the Candidate
 * section's standalone checklist) and need a second color variant for
 * "Considerations"-style warnings — both are scoped under .technique-body
 * so they don't affect the Candidate section's checklist.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). Values with no
 * matching token (card radius/shadow) are hardcoded, same as
 * single-service-comparison.css.
 */

/* ------------------------------------------------------------------ */
/* Grid addition — Bootstrap's mb-4 (1.5rem) spacer, on top of the .row/g-4/
   col-lg-6 rules already defined in earlier section stylesheets. */
/* ------------------------------------------------------------------ */
.mb-4 {
  margin-bottom: 24px;
}

/* ------------------------------------------------------------------ */
/* Technique block card */
/* ------------------------------------------------------------------ */
.technique-block {
  background: var(--cutis-color-surface);
  border-radius: 28px;
  border: 1px solid var(--cutis-color-border);
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(15, 43, 61, 0.06),
    0 1px 3px rgba(15, 43, 61, 0.05);
}
.technique-block.h-100 {
  height: 100%;
}
.technique-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.technique-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.technique-body {
  padding: 36px;
}

.tag-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.tag-chip {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cutis-color-cream);
  color: var(--cutis-color-primary);
  font-weight: 600;
}

.technique-body h3 {
  font-size: 22px;
  margin: 0;
  color: var(--cutis-color-heading);
}
.technique-body p {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Two-column advantages/considerations lists */
/* ------------------------------------------------------------------ */
.two-col-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 22px;
}
@media (max-width: 575.98px) {
  .two-col-list {
    grid-template-columns: 1fr;
  }
}
.list-heading {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cutis-color-text);
  margin-bottom: 12px;
}

/* Compact check-list variant for inside technique cards — .check-list itself
   is defined in single-service-candidate.css with larger type/spacing for
   its standalone checklist; scoped under .technique-body so that section
   is unaffected. */
.technique-body .check-list {
  gap: 10px;
}
.technique-body .check-list li {
  font-size: 14px;
}
.technique-body .check-list svg {
  stroke: var(--cutis-color-primary);
}
.technique-body .check-list--warning svg {
  stroke: var(--cutis-color-warning);
}