/*
 * Lowell "about us" band (Quality Roof Work - Guaranteed) -- text + a
 * self-hosted video, two columns on desktop. Tokens only, no literals.
 */

.jr-lowell-about {
  position: relative;
  padding: clamp(48px, 7vw, 96px) var(--jr-page-gutter);
  background: var(--jr-color-surface);
}

/* Architectural roofline divider, inline SVG (owner, 2026-09-08, full
   creative brief -- see the shortcode's own comment in functions.php
   for the design reasoning). Sits inside this section's own top
   padding, so it never overlaps the real title/copy below it.
   preserveAspectRatio="none" on the <svg> itself lets the roofline
   stretch to any width without letterboxing or clipping -- the two
   real pitch angles do change slightly across very narrow vs very wide
   viewports (an accepted tradeoff for a full-bleed divider, same one
   every clip-path version on this site already made), but the
   silhouette itself never distorts into something unrecognizable,
   confirmed at 1920/1440/1024/768/390px. */
.jr-lowell-about__divider {
  display: block;
  position: absolute;
  /* -1px, not 0 -- at some zoom/DPR combinations the boundary between
     this section and the reviews band above it (two separate elements,
     both graphite) sub-pixel-rounds to a hairline gap showing the page's
     own background through it (owner: "quedo una linea fea ahi entre el
     separador y la seccion de arriba"). The divider's own top edge is a
     flat, full-width graphite fill, so overlapping 1px up into the
     reviews band is invisible on its own (same solid color) and removes
     any gap regardless of rounding. */
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(64px, 7vw, 96px);
}

.jr-lowell-about__divider polygon {
  fill: var(--jr-color-graphite);
}

@media (max-width: 640px) {
  .jr-lowell-about__divider {
    /* Simplified proportions, not a simplified silhouette (owner: "en
       mobile puede simplificarse la geometria si es necesario, pero
       debe conservar la intencion visual") -- same two-peak polygon,
       just shorter so it doesn't eat too much of a small screen's own
       vertical rhythm. */
    height: 44px;
  }
}

.jr-lowell-about__grid {
  /* Was --jr-container-content (hard 1440px cap) -- read as a narrow
     column with dead whitespace on both sides on a real wide screen,
     while every other page on this site (HHDS's own included) lets its
     equivalent split content section grow fluidly toward a much wider
     cap (owner, 2026-09-09: "la pagina de hhds ocupa todo el ancho...
     asi deben estar estos templates"). --jr-container-wide is the same
     fluid min(112.5rem, 94vw) formula already fixed to match
     hhds-web-library's real tokens earlier this session -- reusing it
     here instead of inventing a third width value. */
  max-width: var(--jr-container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .jr-lowell-about__grid {
    grid-template-columns: 1fr;
  }
}

.jr-lowell-about__eyebrow {
  font-family: var(--jr-font-action);
  font-size: var(--jr-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jr-color-primary);
  /* Spacing to the title below is owned by .jr-eyebrow-badge's own
     margin-bottom (cta-buttons.css) -- single source for the
     eyebrow-to-title gap across every section, see that rule's comment. */
  margin: 0;
}

.jr-lowell-about__title {
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: var(--jr-leading-tight);
  color: var(--jr-color-heading);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.jr-lowell-about__subtitle {
  font-family: var(--jr-font-body);
  font-weight: 600;
  font-size: var(--jr-text-lg);
  color: var(--jr-color-primary);
  margin: 0 0 1.25rem;
  line-height: var(--jr-leading-heading);
}

.jr-lowell-about__copy p {
  color: var(--jr-color-text);
  line-height: var(--jr-leading-body);
  margin: 0 0 1rem;
}

.jr-lowell-about__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* .jr-lowell-about__badge (Owens Corning "Preferred Contractor" logo)
   removed 2026-09-09 -- owner asked for the icon gone entirely. */

/* Geometry (aspect-ratio/radius/overflow/shadow/corner marks) now owned
   by .jr-photo-frame (lowell-sections.css) -- this rule only keeps
   what's specific to this instance: a graphite placeholder behind the
   video before it paints. */
.jr-lowell-about__media {
  background: var(--jr-color-graphite);
}

.jr-lowell-about__media video {
  /* Default (50% center) cropped this narrow 4:5 box out of the wide
     16:9 drone source centered on the FRAME, not the house -- since the
     house itself sits left-of-center in the source footage, that read as
     the house hugging the left edge with too much empty yard on the
     right (owner screenshot, 2026-09-08: "para que la casa se vea
     centrada"). Shifts the crop window left (toward the house) so the
     house lands centered in the visible box instead. */
  object-position: 30% center;
}