/* ==========================================================================
   Jobson Garden — About Us Page
   Visual design strictly adhering to Brand Master Memory theme colors:
   Canvas White (#FFFFFF), Tint Surface (#F2F7EC), Deep Forest (#2C5F38),
   Leaf Green (#5C9E33), Lime Accent (#B9DC7A), Charcoal Ink (#1A231B).
   ========================================================================== */

/* --- Section 2: Main About Trio Section (Tint Surface #F2F7EC) ------------ */

.about-green {
  background: var(--secondary); /* #F2F7EC - Tint Surface */
  color: var(--foreground);    /* #1A231B - Charcoal Ink */
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--border);
}
.about-green__grid {
  display: grid;
  grid-template-columns: 140px 1.35fr 1fr;
  gap: clamp(2rem, 3.5vw, 3.75rem);
  align-items: start;
}

/* Left Column: Logo replacing the vertical text */
.about-green__brand-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 6.5rem;
  height: 520px;
  width: 140px;
}
.about-green__logo-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.about-green__logo-vertical {
  transform: rotate(-90deg);
  transform-origin: center center;
  width: 360px;
  max-width: none;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(44, 95, 56, 0.12));
  user-select: none;
}

/* Middle Column: 3 Clean Content Blocks */
.about-green__content-col {
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}
.about-block {
  display: flex;
  flex-direction: column;
}
.about-block__title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary); /* Deep Forest #2C5F38 */
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.about-block__title::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 32px;
  background: var(--leaf); /* Leaf Green #5C9E33 */
}
.about-block__text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--foreground); /* Charcoal Ink #1A231B */
  margin: 0;
  text-align: justify;
  /* Justification without hyphenation opens rivers of white space, badly so
     in a narrow column. Hyphens close the gaps by letting long words break;
     lang="en-IN" on <html> gives the engine the dictionary to do it. */
  hyphens: auto;
  -webkit-hyphens: auto;
  text-justify: inter-word;
}
.about-block__action {
  margin-top: 1.75rem;
}

/* --- "What we stand for" list ---------------------------------------------
   Four short claims, read once from includes/content.php. A list rather than
   a paragraph because each point is a separate promise, and because it keeps
   this block visually distinct from the prose block above it.
   -------------------------------------------------------------------------- */

.about-stand {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}
.about-stand__item {
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}
.about-stand__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
  margin: 0 0 0.3rem 0;
}
.about-stand__text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--foreground);
  margin: 0;
}

/* Primary Green Pill Button */
.btn--about-pill {
  display: inline-block;
  background: var(--primary); /* Deep Forest #2C5F38 */
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.85rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(44, 95, 56, 0.22);
  transition: all 0.2s ease;
  text-align: center;
}
.btn--about-pill:hover {
  background: var(--leaf); /* Bright Leaf Green #5C9E33 */
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 95, 56, 0.28);
}

/* Right Column: 3 Rounded Rectangular Photos */
.about-green__media-col {
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
}
.about-media-card {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(44, 95, 56, 0.08);
  background: var(--background);
}
.about-media-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* --- Section 3: Warm Canvas White Section (#FFFFFF) ---------------------- */

.about-process {
  background: var(--background); /* #FFFFFF - Canvas White */
  color: var(--foreground);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--border);
}
.about-process__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* Left Column */
.about-process__media-col {
  display: flex;
  flex-direction: column;
}
.about-process__photo-wrap {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px rgba(44, 95, 56, 0.08);
  margin-bottom: 1.5rem;
  background: var(--secondary);
}
.about-process__photo-wrap img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.about-process__lead-note p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--foreground);
  margin: 0 0 1.5rem 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.btn--about-outline {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.btn--about-outline:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Right Column */
.about-process__content-col {
  display: flex;
  flex-direction: column;
}
.about-process__headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary); /* Deep Forest #2C5F38 */
  margin: 0 0 2.5rem 0;
  text-align: justify;
  /* h1-h3 carry text-wrap: balance from main.css, which deliberately makes
     lines SHORT and even. Justify then stretches those short lines back to
     full width, so the two together produce the widest possible word gaps.
     Turn balancing off wherever this heading is justified. */
  text-wrap: wrap;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.about-process__steps-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leaf); /* Leaf Green #5C9E33 */
  margin: 0 0 1.5rem 0;
  font-weight: 700;
}
.about-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
}
.about-process__list li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--foreground);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* The label is display: block, so it is its own single line — i.e. a last
   line, which justify leaves alone. Stated explicitly so it stays that way
   if the label ever wraps to two lines. */
.about-process__list strong {
  text-align: left;
}
.about-process__list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--primary); /* Deep Forest #2C5F38 */
  margin-bottom: 0.35rem;
  font-weight: 700;
}

/* --- Section 4: Bottom Photo Banner with Centered Quote ------------------ */

.about-quote {
  position: relative;
  width: 100%;
  min-height: clamp(22rem, 35vw, 28rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
}
.about-quote__media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-20);
}
.about-quote__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-quote__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 95, 56, 0.75) 0%, rgba(26, 35, 27, 0.88) 100%);
}
.about-quote__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 46rem;
  color: #ffffff;
  padding-inline: var(--gutter);
}
.about-quote__badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--accent); /* Lime Accent #B9DC7A */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
}
.about-quote__text {
  margin: 0 0 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  font-style: normal;
}
.about-quote__author {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent); /* Lime Accent #B9DC7A */
  margin: 0;
  font-weight: 600;
}

/* --- Responsive Adaptations ---------------------------------------------- */

@media (max-width: 1024px) {
  .about-green__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  /* The brand column is a wide-screen device: a rotated wordmark running up
     the left edge of the green band. Once the grid collapses there is no
     rail to run along, and it degrades into a second copy of the logo that
     is already in the fixed header a few hundred pixels above. Drop it below
     the desktop layout rather than restyling it. */
  .about-green__brand-col {
    display: none;
  }

  .about-process__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-process__media-col {
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  /* Justification needs a measure long enough to absorb the slack. In a
     335px column it opens rivers between words instead, which hyphenation
     only partly closes. Ranged left on a phone. */
  .about-block__text,
  .about-process__lead-note p {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }

  .about-green__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-green__content-col {
    gap: 2.5rem;
  }
  .about-media-card img {
    height: 220px;
  }
  .about-process__media-col {
    max-width: 100%;
  }
  .about-process__photo-wrap img {
    height: 240px;
  }
}