/*
 * Page styles of /termekek/hokameras-tuzmegelozes/ (PKG-B4TT74). Every selector starts with the
 * page-thermal-fire-prevention body class (plan §8.3); the building blocks follow the other product pages
 * (quality-management.css: small overview image, numbered steps of the dark band, chips; environment-management.css:
 * hairline list; energy-monitoring.css: limiting remark under the benefits).
 */

/* --- Overview: the claim of the page and a small thermal camera image, never wider than 40rem (the image is 640 px).
   From 60em the claim sits on the left and the image on the right, below that the claim comes first. --- */
.page-thermal-fire-prevention .tfp__overview {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 60em) {
  .page-thermal-fire-prevention .tfp__overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
}

.page-thermal-fire-prevention .tfp__claim {
  max-width: 24ch;
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--c-turq);
  font: 400 var(--fs-4) / var(--lh-snug) var(--ff-display);
  color: var(--c-text);
}

.page-thermal-fire-prevention .tfp__figure {
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.page-thermal-fire-prevention .tfp__overview-frame {
  max-width: 40rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}

.page-thermal-fire-prevention .tfp__overview-frame img {
  height: auto;
}

.page-thermal-fire-prevention .tfp__overview-caption {
  max-width: 60ch;
  color: var(--c-text-2);
  font-size: var(--fs-1);
}

/* --- Six functions: two columns between 40em and 64em (three full rows), three from 64em (tiles--3) --- */
@media (min-width: 40em) and (max-width: 63.99em) {
  .page-thermal-fire-prevention .tfp__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Text columns --- */
.page-thermal-fire-prevention .tfp__text .lead {
  margin-bottom: var(--space-5);
}

.page-thermal-fire-prevention .tfp__nobr {
  white-space: nowrap;
}

/* --- Numbered steps: a real sequence (watch, analyse, alert), joined by a hairline --- */
.page-thermal-fire-prevention .tfp__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tfp-step;
}

.page-thermal-fire-prevention .tfp__step {
  counter-increment: tfp-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  min-height: 2.75rem;
  padding-bottom: var(--space-5);
  font: 500 var(--fs-2) / var(--lh-snug) var(--ff-display);
  color: var(--c-text);
}

@media (min-width: 40em) {
  .page-thermal-fire-prevention .tfp__step {
    column-gap: var(--space-5);
  }
}

.page-thermal-fire-prevention .tfp__step:last-child {
  padding-bottom: 0;
}

.page-thermal-fire-prevention .tfp__step::before {
  content: counter(tfp-step);
  grid-column: 1;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  font: 300 var(--fs-3) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-turq-700);
}

.page-thermal-fire-prevention .tfp__step::after {
  content: '';
  position: absolute;
  left: calc(1.375rem - 0.5px);
  top: 3.25rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--c-line);
}

.page-thermal-fire-prevention .tfp__step:last-child::after {
  display: none;
}

/* --- How it works is the dark dotted band: the paragraphs are muted (like .lead), the steps stay light, the
   circles and the joining line use the dark hairline. --- */
.page-thermal-fire-prevention .section--ink .tfp__text p {
  color: var(--c-on-dark-2);
}

.page-thermal-fire-prevention .section--ink .tfp__step {
  color: var(--c-on-dark);
}

.page-thermal-fire-prevention .section--ink .tfp__step::before {
  border-color: var(--c-ink-line);
  background: var(--c-ink-2);
  color: var(--c-turq);
}

.page-thermal-fire-prevention .section--ink .tfp__step::after {
  background: var(--c-ink-line);
}

@media (min-width: 60em) {
  .page-thermal-fire-prevention .tfp__steps {
    margin-top: 0.35rem;
  }
}

/* --- Where it can be used: a hairline list with a turquoise dash, in two text columns from 48em (columns, not a
   grid, so an odd number of items leaves no empty cell) --- */
.page-thermal-fire-prevention .tfp__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64rem;
}

@media (min-width: 48em) {
  .page-thermal-fire-prevention .tfp__areas {
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

.page-thermal-fire-prevention .tfp__area {
  position: relative;
  break-inside: avoid;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-top: 1px solid var(--c-line);
  font: 500 var(--fs-2) / var(--lh-snug) var(--ff-display);
  color: var(--c-text);
}

.page-thermal-fire-prevention .tfp__area::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-4) + 0.6em);
  width: 1.25rem;
  height: 2px;
  background: var(--c-turq-700);
}

/* --- Business and safety benefits: limited to a readable width, the limiting remark under the list --- */
.page-thermal-fire-prevention .tfp__benefits {
  max-width: 60rem;
}

.page-thermal-fire-prevention .tfp__note {
  max-width: 60rem;
  margin: var(--space-6) 0 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--c-turq);
  color: var(--c-text-2);
}

/* --- Building blocks: hairline chips --- */
.page-thermal-fire-prevention .tfp__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
}

.page-thermal-fire-prevention .tfp__chip {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-text);
  font-size: var(--fs-1);
  line-height: 1.3;
  white-space: nowrap;
}

@media (min-width: 60em) {
  .page-thermal-fire-prevention .tfp__chips {
    padding-top: 0.35rem;
  }
}