/*
 * Roofing Services grid -- plain code, not Elementor (see
 * jr_services_grid_shortcode() in functions.php for why + what changed).
 *
 * Card structure follows hhds-web-library's card-blog component
 * (components/card-blog/card-blog.css) -- adopted 2026-08-19 after the
 * owner pointed at it directly: a permanent gradient (not hover-gated)
 * plus a frosted glass panel gives the description/CTA text a real,
 * controlled-contrast surface instead of fighting whatever's in that
 * card's specific photo. Ported to this project's own class names +
 * --jr-* tokens (via the --lib-color-blog-card-* bridge in
 * tokens-brand-bridge.css) rather than loading the library's CSS file
 * directly, matching how every other component here has been ported.
 */
.jr-services {
  padding: clamp(48px, 6vw, 88px) 40px;
  background: var(--jr-color-graphite);
  /* 2026-09-07: this section sat directly under the Google reviews band
     (.lib-reviews-band, same graphite token) with no visible seam between
     them -- fixed same-day with a second, slightly darker background
     (--jr-color-surface-dark). Reverted 2026-09-08: the brand doc
     (Colores_y_Tipografia_2026-09-08.html) fixes page backgrounds to
     exactly white + graphite, nothing else, so a second dark shade isn't
     available anymore. Same seam, different mechanism: a thin red top
     border -- red is exactly the "highlight/call out an element" role
     the brand doc gives it, and a hairline accent line reads as a
     deliberate section break without inventing a 4th background color. */
  border-top: 3px solid var(--jr-color-primary);
}

/* Lowell only (jr_lowell_services_grid_shortcode() passes $with_peak_divider
   = true) -- Home already has a roofline-peak divider at this exact
   boundary, just still Elementor's native shape_divider, not code, so this
   isn't duplicated there. Positions the divider (below) against this
   section's own bottom edge. */
.jr-services--peak {
  position: relative;
}

/* Vendored from hhds-web-library's PAT-007 "Diagonal Cut" (EXPERIMENTAL,
   patterns/diagonal-cut/diagonal-cut.css) -- --lib-* tokens only, ported
   as-is rather than to --jr-* names since every token it needs
   (--lib-color-surface, --lib-treatment-diagonal-height,
   --lib-treatment-peak-base) already bridges correctly through
   tokens-brand-bridge.css / tokens-base.css. The --peak modifier (a
   symmetric centered rise, "Center Peak") is the exact shape Home's own
   Elementor shape_divider already uses at this same boundary -- matching
   the validated pattern in code instead of reinventing a divider shape. */
.lib-diagonal-cut {
  display: block;
  height: var(--lib-treatment-diagonal-height);
  background: var(--lib-diagonal-cut-fill, var(--lib-color-primary));
  clip-path: polygon(0 var(--lib-treatment-diagonal-angle), 100% 0, 100% 100%, 0 100%);
}

.lib-diagonal-cut--peak {
  clip-path: polygon(
    0 100%,
    0 var(--lib-treatment-peak-base),
    50% 0,
    100% var(--lib-treatment-peak-base),
    100% 100%
  );
}

/* --peak, vertically mirrored ("valley") -- for a dark-above/light-below
   seam (owner, 2026-09-08: Reviews -> About on Lowell) instead of
   --peak's light-above/dark-below one. Same shape, same tokens, just
   pointing down instead of up -- see .jr-lowell-about__divider
   (lowell-about.css) for the one real usage so far. */
.lib-diagonal-cut--peak-down {
  clip-path: polygon(
    0 0,
    0 calc(100% - var(--lib-treatment-peak-base)),
    50% 100%,
    100% calc(100% - var(--lib-treatment-peak-base)),
    100% 0
  );
}

/* Positioning is this project's own, per the pattern's README ("place it
   with a negative top margin / real value depends on the surrounding
   layout rhythm") -- absolutely anchored to this section's own bottom
   edge so the white peak (--lib-diagonal-cut-fill: var(--jr-color-surface),
   set inline in functions.php) rises up into the dark services background
   from below, exactly like Home's Elementor shape_divider does today. */
.jr-services__divider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

/* Same Elementor default-widget-margin gap as the hero
   (.elementor-element-jrhero1 in hero.css) -- the wrapper div Elementor
   generates around this Shortcode widget carries its own 20px bottom
   margin that this section never accounted for. */
.elementor-element-jrservices1 {
  margin-bottom: 0 !important;
}

.jr-services__header {
  /* Was position:relative with the title capped at a flat max-width and
     the mascot pinned absolute (right:0) over it -- any title long enough
     to approach that max-width could still collide with the mascot's own
     220px box, since the two were sized independently with no shared
     layout keeping them apart. Confirmed real 18px text/image overlap on
     Home ("Explore our approach...") after widening the title's max-width
     for Lowell's longer heading (owner review pass, 2026-09-07). Flex
     lets the title take exactly the space left after the mascot's fixed
     width, on both pages, at any title length -- no magic number to
     re-tune every time either page's copy changes. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--jr-container-wide);
  margin: 0 auto 40px;
}

.jr-services__intro {
  flex: 1 1 auto;
  min-width: 0;
}

.jr-services__eyebrow {
  /* 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;
  font-family: var(--jr-font-action);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jr-color-primary);
}

.jr-services__title {
  margin: 0;
  font-family: var(--jr-font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--jr-color-text-inverse);
}

.jr-services__mascot {
  /* 220px -> 200px, alongside the gap trim above -- reclaims just enough
     width for Lowell's longer title ("What We Do: Complete Roof Care in
     Your Local Neighborhood", measured at ~974px natural width) to still
     fit on one line at this font-size now that flex properly reserves
     the mascot's own space instead of letting the title overlap it. */
  flex: 0 0 200px;
  /* Negative margin instead of the old absolute top:-12px -- keeps the
     same "peeking above the header" placement without taking the mascot
     out of flow (which is what let it overlap the title in the first
     place). */
  margin-top: -12px;
  width: 200px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* gap was 2px -- cards essentially touching, no breathing room (owner,
   2026-09-09: "separar un poco, darle respiro entre los cards").
   --jr-card-gap (clamp(18px, 2.8vw, 32px)) is the token this project
   already defines for exactly this purpose, not a new hardcoded
   number. */
.jr-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jr-card-gap);
  max-width: var(--jr-container-wide);
  margin: 0 auto;
}

/* Card redesign, 2026-09-08 (owner: the old full-width gray button +
   edge-to-edge panel read flat/dropped-in compared to hhds-web-library's
   own card-blog -- "propon ideas... incluso mejor que hhds"). Kept the
   full-bleed photo + permanent gradient (the part that already worked --
   these are real job photos, not stock, so showing them large is the
   point), redesigned everything on top of it: a centered, narrower glass
   panel instead of an edge-to-edge box; a real heading separate from the
   button instead of the service name doubling as the button label; a
   proper pill CTA sized to its own content instead of a full-width
   block; a hover state (photo zoom + panel brighten + lift) since the
   card had none before; and the same red corner marks
   (.jr-photo-frame__corners, lowell-sections.css) already used on every
   standalone photo elsewhere on the site -- the one signature touch
   hhds-web-library's own generic card doesn't have. */
.jr-services__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 340px;
  overflow: hidden;
  border-radius: var(--jr-radius-lg);
  text-decoration: none;
  box-shadow: var(--jr-shadow-card);
  transition: box-shadow 0.25s ease;
}

.jr-services__card:hover,
.jr-services__card:focus-visible {
  box-shadow: var(--jr-shadow-strong);
}

.jr-services__card-media {
  position: absolute;
  inset: 0;
  background-image: var(--jr-card-bg-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.jr-services__card:hover .jr-services__card-media,
.jr-services__card:focus-visible .jr-services__card-media {
  transform: scale(1.06);
}

/* Permanent, not hover-gated. 2026-09-08: dropped the glass panel below
   entirely (owner, pointing at a reference site's plain photo-caption
   cards: "dejar de [usar la caja]... con algun sombreado al texto...
   quedaria de lujo") -- this gradient is now the ONLY contrast surface
   behind the text, so it needed to go darker at the bottom than the
   panel-era version did (that one only had to bridge the gap to an
   already-opaque glass panel; this one has to carry contrast on its
   own, working together with the text-shadow below). */
.jr-services__card-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}

/* Corner marks sit above the fade/panel -- they read as a frame on the
   whole card, not just a decoration under the glass. */
.jr-services__card .jr-photo-frame__corners {
  z-index: 3;
  inset: 0.85rem;
}

/* No glass panel anymore -- just a plain positioning box for the text,
   sitting directly on the fade gradient + text-shadow below for
   contrast instead of an opaque surface. Left-aligned (was centered),
   matching the reference's photo-caption layout. */
/* Flex column (was plain block flow) so the button below can anchor to
   the panel's right edge on its own line without an absolute-position
   overlap risk against a 3-line description -- owner, 2026-09-08: the
   button used to just trail after left-aligned text of a different
   width on every card, so its start position drifted card to card
   ("no esten en distintos lugares"). Title/text stay left (align-items
   default), only the button gets pushed right below. */
.jr-services__card-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 20px 20px;
  text-align: left;
}

.jr-services__card-title {
  display: block;
  margin: 0 0 6px;
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--jr-color-text-inverse);
  /* Carries the legibility job the glass panel used to (owner: "algun
     sombreado al texto para que se vea perfectamente clara sobre la
     imagen") -- a tight dark shadow plus a softer, wider one reads
     clearly against any photo, bright sky included, without needing an
     opaque surface behind it. Same 2-shadow recipe already proven on
     the hero title (hero.css). */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Not just relying on cascade order to beat tokens-brand-bridge.css's
   .jr-services .hhds-title-highlight { color: inherit; } (added earlier
   for the plain-on-photo title/button label, equal specificity to a
   naive version of this rule) -- three classes here makes the win
   explicit instead of order-dependent. Now that the title sits inside
   the frosted panel instead of raw on the photo, the red highlight reads
   fine (this panel is exactly the "controlled contrast surface" that
   rule's own sibling comment already established the panel provides). */
.jr-services__card .jr-services__card-title .hhds-title-highlight {
  color: var(--color-title-highlight);
}

.jr-services__card-text {
  margin: 0 0 12px;
  font-family: var(--jr-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--jr-color-text-inverse);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.jr-services__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 12px 20px;
  font-size: 13px;
  /* Own line, pushed to the panel's right edge -- a fixed, predictable
     corner instead of trailing directly after text of a different width
     on every card. margin-top instead of relying on .jr-services__card-text's
     own bottom margin keeps a real gap even when a description is short
     enough that flex-start alone would leave the button hugging the text. */
  align-self: flex-end;
  margin-top: 4px;
}

.jr-services__card-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.2s ease;
}

.jr-services__card:hover .jr-services__card-btn svg,
.jr-services__card:focus-visible .jr-services__card-btn svg {
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .jr-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .jr-services__mascot {
    display: none;
  }
}

@media (max-width: 640px) {
  .jr-services {
    padding: 40px 20px;
  }

  .jr-services__grid {
    grid-template-columns: 1fr;
  }

  .jr-services__title {
    font-size: 26px;
  }

  /* 40px bottom padding here (was up to 88px on desktop) can't fit the
     default 5rem/80px divider without it overlapping the last row of
     cards -- shrunk to match. */
  .jr-services__divider {
    height: 2.5rem;
  }

  /* Mobile: centered at the bottom instead of right-aligned (owner,
     2026-09-08: "en version mobile centrado a lado abajo inferior") --
     single-column cards read better with a centered CTA than a
     right-hugging one. */
  .jr-services__card-panel {
    align-items: center;
    text-align: center;
  }

  .jr-services__card-btn {
    align-self: center;
  }
}