/* About page */

.about p { font: 400 21px/1.6 var(--ballinger); color: #000; }

/* Red label heading ("A Family-Owned Village of Freshness"). The wrapper sizes to
   its content like the old widget did, so width rules on the label resolve the same. */
.about .label-wrap { align-self: center; max-width: 100%; }
.about .label {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--red);
  font: 400 42px/1 var(--tanker);
  letter-spacing: 3px;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}
.about .label--health { margin-bottom: 20px; }

/* ---------- intro ---------- */

.about-intro {
  position: relative;
  padding: 0 0 75px;
  background: #f7ebe2 var(--tile) center / contain repeat;
}
.about-intro::before {
  content: ""; position: absolute; inset: 0;
  background: #f7ebe2; opacity: .09; mix-blend-mode: darken;
}
.about-intro__in {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 25px;
}
.about-intro__in p { padding-bottom: 30px; }

/* ---------- text + photo rows ---------- */

.split { display: flex; min-height: 450px; background: #fff; }
.split--reverse { flex-direction: row-reverse; }
.split > * { flex: 0 1 auto; width: 100%; }
.split__text {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 0 10% 0 8%;
}
.split__text > * { position: relative; }
.split--doodle .split__text::before {
  content: ""; position: absolute; inset: 0;
  background: url("/media/2024/07/4dsV0OQ.png") 0 0 / cover repeat;
  opacity: .16;
}
.split--tiled .split__text { background: #f8f3ef; }
.split--tiled .split__text::before {
  content: ""; position: absolute; inset: 0;
  background: #5e0303 var(--tile) 0 0 / contain repeat;
}
.split__title {
  font: 400 38px/1.2 var(--tanker);
  letter-spacing: 4.25px;
  text-transform: uppercase;
  color: var(--green);
}
.split__text p { margin-top: -10px; }
.split__btn { align-self: flex-start; margin-top: 20px; }
.split__image { background: center / cover no-repeat; }

/* ---------- commitment to great health ---------- */

.health {
  position: relative;
  background: #f7ebe2;
}
.health::before { content: ""; position: absolute; inset: 0; background: var(--tile) center; }
.health__in {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 70px 0 70px; /* bottom = gap + the old 50px spacer */
}
.health__intro { text-align: center; }
.health__list { display: flex; gap: 20px; padding-bottom: 50px; }
.health__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: 20px;
  padding: 10px;
}
.health__item img { width: 100%; align-self: center; }
.health__text {
  font: 600 25px/1.2 var(--ballinger);
  text-align: center;
  color: #08310c;
}
.health__btn { align-self: center; }

/* Elementor's own breakpoints. The old theme's device-specific rules (phones,
   iPads, 1224px+) are ported separately into devices/about.css. */

@media (max-width: 1024px) {
  .split__text { width: 55%; }
  .split__image { width: 45%; }
  .split__title { font-size: 45px; }
  .about .label { font-size: 40px; }
}

@media (max-width: 767px) {
  .split, .split--reverse { flex-wrap: wrap; }
  .split--reverse { flex-wrap: wrap-reverse; }
  .split__text, .split__image { width: 100%; }
  .split__title { font-size: 32px; letter-spacing: 3.25px; }
  .about .label { font-size: 32px; }
  .health__list { flex-wrap: wrap; }
  .health__item { flex: 1 1 100%; }
}