/* =========================================================
   SUPPORT pattern - Technical support hub and article
   Figma frame 559:1327 "Tech Support" (1920 x 3452).

   Moved here from page-tech-support.php's inline <style> block as part of
   the figma-exact pass. The hub's own sections are scoped to
   ".evo-tpl-page-tech-support"; the article sections use the .tsp-* classes,
   which site.css itself documents as belonging to the 12 children of
   /tech-support/ and so are unique to this pattern.

   Three tiers, so a fixed-pixel Figma value can never cause overflow:
     base              fluid, phone first
     min-width:1201px  the desktop composition, still fluid
     min-width:1568px  the exact Figma pixels (the .container is exactly
                       1520px wide with zero padding from 1568px up, which
                       is what every number below is measured against)

   The article pages (/tech-support/<product>/) have NO Figma frame. Only the
   hero is touched there, because the hero is the same component the hub frame
   draws; every other .tsp-* section is left exactly as site.css ships it.
   See docs/fleet-issues/support.md.
   ========================================================= */

/* ---------------------------------------------------------
   HERO  559:1328 Header-Banner
   Two stacked scrims, both as drawn: the image rect 559:1329 carries a
   20% black fill over the photo, and the separate Overlay 559:1331 adds
   15% over the top 600px. Combined that is the 32% the frame renders.
   The band is 567px tall because the white Background 559:1350 starts
   there and covers the last 33px of the 600px image rect.
   --------------------------------------------------------- */
.evo-tpl-page-tech-support .ts-hero{position:relative;overflow:hidden;color:#fff;background:none;}
.evo-tpl-page-tech-support .ts-hero .bg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;}
/* 559:1329's image fill is drawn stretched to the 1920x600 rect, not cropped
   to it: the frame's own code carries object-position bottom and no object-fit
   at all, so the fill is the CSS default. Cropping it instead moves every
   feature in the photo, which is half the hero's pixels.
   The stretch is a 1920x600 decision and only a 1920x600 decision, so it lives
   in the desktop block below. The base value stays the "cover" staging ships,
   because a 1024x683 photo stretched into a 375x520 phone band is squashed to
   less than half its aspect ratio. There are no mobile frames in Figma. */
.evo-tpl-page-tech-support .ts-hero .bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:bottom;}
.evo-tpl-page-tech-support .ts-hero .bg .ov{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.2);}
.evo-tpl-page-tech-support .ts-hero .ov2{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.15);z-index:1;}
.evo-tpl-page-tech-support .ts-hero .container{position:relative;z-index:2;}
.evo-tpl-page-tech-support .ts-hero .eyebrow{font-weight:400;letter-spacing:normal;margin:0 0 2px;}
.evo-tpl-page-tech-support .ts-hero h1{font-weight:700;margin:0;}

/* ---------------------------------------------------------
   INTRO  559:1351
   --------------------------------------------------------- */
.evo-tpl-page-tech-support .ts-intro{text-align:center;}
.evo-tpl-page-tech-support .ts-intro h2{font-weight:700;color:#27272d;}
.evo-tpl-page-tech-support .ts-intro p{font-weight:300;letter-spacing:normal;color:#27272d;}

/* ---------------------------------------------------------
   ACTION CARDS  559:1398 cta
   Figma draws no card shadow and no hover state. The rule above the row is
   Line 68 559:1417, a 1px #E7EEEE stroke 1520.011 wide.
   --------------------------------------------------------- */
.evo-tpl-page-tech-support .ts-actions .tsline{height:0;border-top:1px solid #e7eeee;margin:0 auto;}
.evo-tpl-page-tech-support .ts-acard{position:relative;display:block;background:#f4f4f4;border-radius:15px;text-align:center;
  transition:box-shadow .15s ease;}
.evo-tpl-page-tech-support .ts-acard:hover{box-shadow:0 18px 40px rgba(0,20,45,.10);}
.evo-tpl-page-tech-support .ts-acard .pillbtn{display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;margin:0;}
.evo-tpl-page-tech-support .ts-acard .pillbtn.blue{background:#2ca9e3;}
.evo-tpl-page-tech-support .ts-acard .pillbtn .ic{display:block;flex:0 0 auto;}
/* Figma sets the pill labels to leading "normal"; the face renders that as a
   30px line box in the frame, so it is written as 30px here rather than left
   to whatever a browser's "normal" resolves to. */
.evo-tpl-page-tech-support .ts-acard .pillbtn .pl{font-weight:500;line-height:30px;color:#27272d;}
.evo-tpl-page-tech-support .ts-acard .pillbtn.blue .pl{color:#fff;}
.evo-tpl-page-tech-support .ts-acard p{font-weight:300;letter-spacing:normal;color:#27272d;text-align:center;margin:0;}

/* ---------------------------------------------------------
   PRODUCT SELECTOR  559:1354 boxes
   Figma draws 8 cards. The build ships the 12 real products that have a
   tech-support page, in the same 4-up grid, so rows 1 and 2 land on the
   Figma pixels and the 4 hot water models flow into a third row.
   Each card's photo and name wordmark are positioned per card, because the
   design places every one of them individually.
   --------------------------------------------------------- */
.evo-tpl-page-tech-support .ts-products{background:#f4f4f4;}
.evo-tpl-page-tech-support .ts-products h2{font-weight:700;color:#27272d;text-align:center;}
.evo-tpl-page-tech-support .ts-pcard{position:relative;display:block;background:#fff;border-radius:20px;
  transition:box-shadow .15s ease;}
.evo-tpl-page-tech-support .ts-pcard:hover{box-shadow:0 18px 40px rgba(0,20,45,.10);}
.evo-tpl-page-tech-support .ts-pcard .pimg{display:block;overflow:hidden;}
.evo-tpl-page-tech-support .ts-pcard .pimg img{display:block;}
.evo-tpl-page-tech-support .ts-pcard .pname{display:block;overflow:hidden;}
.evo-tpl-page-tech-support .ts-pcard .pname img{display:block;}
/* Cards 9-12 keep a text name: the hot water models have no Figma card, so
   there is no name wordmark to export. #0e2a50 is sampled from the wordmark
   artwork itself, not the site --navy, so the two read as one set. */
.evo-tpl-page-tech-support .ts-pcard.textname .pname{font-weight:700;color:#0e2a50;text-align:center;
  letter-spacing:-0.4px;white-space:nowrap;}

/* =========================================================
   DESKTOP COMPOSITION (still fluid)
   ========================================================= */
@media(min-width:1201px){
  .evo-tpl-page-tech-support .ts-hero{height:567px;}
  .evo-tpl-page-tech-support .ts-hero .bg{top:-2px;bottom:auto;height:600px;}
  /* the frame's stretched fill, on the frame's own band */
  .evo-tpl-page-tech-support .ts-hero .bg img{object-fit:fill;}
  .evo-tpl-page-tech-support .ts-hero .ov2{bottom:auto;height:600px;}
  .evo-tpl-page-tech-support .ts-hero .container{padding-top:300px;}
  .evo-tpl-page-tech-support .ts-hero .eyebrow{font-size:20px;line-height:25px;}
  .evo-tpl-page-tech-support .ts-hero h1{font-size:75px;line-height:89px;letter-spacing:-1.5px;}

  .evo-tpl-page-tech-support .ts-intro{padding:137px 0 39px;}
  .evo-tpl-page-tech-support .ts-intro h2{width:max-content;max-width:100%;margin:0 auto 26px;
    font-size:50px;line-height:55px;letter-spacing:-1.5px;}
  .evo-tpl-page-tech-support .ts-intro p{width:947px;max-width:100%;margin:0 auto;font-size:20px;line-height:26px;}

  .evo-tpl-page-tech-support .ts-actions{padding:0 0 130.9px;}
  .evo-tpl-page-tech-support .ts-actions .tsline{width:1520.011px;max-width:100%;}
  .evo-tpl-page-tech-support .ts-actions .row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
    max-width:1520px;margin:64.1px auto 0;}
  .evo-tpl-page-tech-support .ts-acard{height:190px;}
  .evo-tpl-page-tech-support .ts-acard .pillbtn{position:absolute;left:27px;top:32px;right:27px;height:65px;}
  .evo-tpl-page-tech-support .ts-acard .pillbtn .pl{font-size:24px;letter-spacing:-0.72px;}
  .evo-tpl-page-tech-support .ts-acard p{position:absolute;left:50%;top:117px;width:349px;max-width:calc(100% - 40px);
    transform:translateX(-50%);font-size:16px;line-height:20px;}

  .evo-tpl-page-tech-support .ts-products{padding:118px 0 244px;}
  .evo-tpl-page-tech-support .ts-products h2{margin:0 auto 73px;font-size:50px;line-height:58px;letter-spacing:-1px;}
  .evo-tpl-page-tech-support .ts-products .grid{display:grid;grid-template-columns:repeat(4,1fr);
    column-gap:40px;row-gap:45px;max-width:1520px;margin:0 auto;align-items:start;}
  .evo-tpl-page-tech-support .ts-pcard{height:356px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(-n+4){height:358px;}
  /* max-width:none because site.css line 118 sets img{max-width:100%}, which
     would clamp the layers whose image fill is drawn wider than its own
     window - the same override .lpill img already uses. */
  .evo-tpl-page-tech-support .ts-pcard .pimg{position:absolute;}
  .evo-tpl-page-tech-support .ts-pcard .pimg img{position:absolute;left:0;top:0;width:100%;height:100%;
    max-width:none;object-fit:cover;}
  .evo-tpl-page-tech-support .ts-pcard .pname{position:absolute;}
  .evo-tpl-page-tech-support .ts-pcard .pname img{position:absolute;left:0;top:0;width:100%;height:100%;
    max-width:none;object-fit:cover;}
  .evo-tpl-page-tech-support .ts-pcard.textname .pname{font-size:26px;line-height:27px;}
}

/* =========================================================
   FIGMA EXACT - the .container is 1520px with no padding from 1568px up,
   so every number here is the frame value straight off the layer.
   ========================================================= */
@media(min-width:1568px){
  /* hero 559:1332 txt: eyebrow box y300 h25 w232, headline box y327 h89 w451,
     both x202. The .container starts at x200, so 2px of text indent.
     Each tracked text node gets the frame's own box width rather than
     max-content, because CSS letter-spacing also applies after the last
     glyph and Figma's does not: max-content comes out ~1.8px narrow on the
     headline. The box is the frame's, and the glyphs start where the frame
     starts them. */
  .evo-tpl-page-tech-support .ts-hero .eyebrow{width:232px;margin-left:2px;text-align:left;}
  .evo-tpl-page-tech-support .ts-hero h1{width:451px;margin-left:2px;text-align:left;}

  /* intro 559:1353 h2 box x650 w619 y824 h55 - centre 959.5 on a 1920 frame.
     559:1352 paragraph box x486 w947 y905, three lines at 26. */
  .evo-tpl-page-tech-support .ts-intro h2{width:619px;position:relative;left:-0.5px;}
  .evo-tpl-page-tech-support .ts-intro p{position:relative;left:-0.5px;}

  /* action cards 559:1399/1405/1411: 480 x 190 at x200/720/1240, radius 15 */
  .evo-tpl-page-tech-support .ts-actions .row{grid-template-columns:repeat(3,480px);width:1520px;}
  /* pill 423 x 65 at +27/+32. The icon x and the icon-to-label gap are set
     per card because the frame places each group differently: cards 2 and 3
     centre it in the pill, card 1 sits 7px left of centre. */
  .evo-tpl-page-tech-support .ts-acard .pillbtn{width:423px;right:auto;justify-content:flex-start;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(1) .pillbtn{padding-left:132px;gap:11px;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(2) .pillbtn{padding-left:111px;gap:12px;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(3) .pillbtn{padding-left:83px;gap:12px;}
  /* 559:1403/1409/1415. The frame does not centre the icons on the pill's
     own centre line, it sits each one a fraction below it, differently per
     card; these offsets are that difference, so each icon lands on its
     drawn y rather than on the y flex centring happens to give. */
  .evo-tpl-page-tech-support .ts-acard .pillbtn .ic{position:relative;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(1) .pillbtn .ic{width:18px;height:18px;top:0.5px;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(2) .pillbtn .ic{width:21px;height:21px;top:1px;}
  .evo-tpl-page-tech-support .ts-acard:nth-child(3) .pillbtn .ic{width:18px;height:18.7501px;top:0.9px;}
  /* body copy 559:1404/1410/1416: box x+77 y+117 w349, two lines at 20 */
  .evo-tpl-page-tech-support .ts-acard p{left:77px;transform:none;width:349px;max-width:349px;}

  /* product grid 559:1354: cards 350 wide at x199/589/979/1369, rows at
     y1657 (h358) and y2060 (h356). The whole boxes group is drawn 1px left
     of the frame centre, so the grid is nudged the same 1px. */
  /* 559:1397 box x738 w441 y1526 h58, centre 958.5 */
  .evo-tpl-page-tech-support .ts-products h2{width:441px;position:relative;left:-1.5px;}
  .evo-tpl-page-tech-support .ts-products .grid{grid-template-columns:repeat(4,350px);width:1520px;
    position:relative;left:-1px;}

  /* Per card: photo rect then name wordmark rect, card relative.
     Percentages on the inner img reproduce each layer's own image crop. */
  .evo-tpl-page-tech-support .ts-pcard:nth-child(1) .pimg{left:30px;top:57px;width:290px;height:194px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(1) .pname{left:101px;top:284px;width:148px;height:27px;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(2) .pimg{left:40px;top:58px;width:271px;height:192px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(2) .pimg img{width:110.84%;height:128.82%;left:-5.42%;top:-15.97%;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(2) .pname{left:101px;top:284px;width:149px;height:27px;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(3) .pimg{left:91px;top:40px;width:168px;height:227px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(3) .pimg img{width:163.64%;height:100%;left:-29.45%;top:0;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(3) .pname{left:42px;top:286px;width:267px;height:27px;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(4) .pimg{left:24px;top:58px;width:301px;height:204px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(4) .pname{left:77px;top:290px;width:209px;height:27px;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(5) .pimg{left:34.394px;top:47.429px;width:280.955px;height:216.591px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(5) .pimg img{width:110.72%;height:118.4%;left:-5.18%;top:-8.96%;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(5) .pname{left:48.355px;top:278.398px;width:252.355px;height:26.918px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(5) .pname img{width:100.1%;height:100%;left:-0.05%;top:0;object-fit:fill;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(6) .pimg{left:78.273px;top:38.478px;width:194.276px;height:217.59px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(6) .pimg img{width:150%;height:100%;left:-24%;top:0;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(6) .pname{left:42.372px;top:278.398px;width:265.366px;height:26.913px;}

  .evo-tpl-page-tech-support .ts-pcard:nth-child(7) .pimg{left:67.301px;top:47.425px;width:214.332px;height:219.453px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(7) .pimg img{width:176.45%;height:100%;left:-38.91%;top:0;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(7) .pname{left:116.164px;top:278.398px;width:116.673px;height:26.924px;}

  /* card 8: the frame reuses card 7's "EVO CS-I" wordmark at 118.18% inside a
     98.723 window, which crops the "-I" off and reads "EVO CS". As drawn. */
  .evo-tpl-page-tech-support .ts-pcard:nth-child(8) .pimg{left:50.348px;top:70.331px;width:248.303px;height:194.455px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(8) .pimg img{width:122.49%;height:106.2%;left:-10.84%;top:-0.03%;object-fit:fill;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(8) .pname{left:125.138px;top:278.398px;width:98.723px;height:26.924px;}
  .evo-tpl-page-tech-support .ts-pcard:nth-child(8) .pname img{width:118.18%;height:100%;left:0;top:0;object-fit:fill;}

  /* cards 9-12 have no Figma card. They take row 2's photo box and name
     baseline so the third row reads as part of the same grid. */
  .evo-tpl-page-tech-support .ts-pcard.textname .pimg{left:35px;top:47px;width:280px;height:217px;}
  .evo-tpl-page-tech-support .ts-pcard.textname .pimg img{object-fit:contain;}
  .evo-tpl-page-tech-support .ts-pcard.textname .pname{left:0;right:0;width:auto;top:278.398px;height:27px;}
}

/* =========================================================
   ARTICLE HERO  /tech-support/<product>/
   No Figma frame exists for these pages. The hero is the one section the hub
   frame does define, so it is brought to those values and nothing else in
   .tsp-* is touched. site.css ships .tsp-hero with a 30% flat scrim and
   -3px tracking; these rules replace only that.
   ========================================================= */
.tsp-hero{background:none;}
.tsp-hero .bg .ov{background:rgba(0,0,0,.2);}
.tsp-hero .ov2{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.15);z-index:1;}
.tsp-hero .bg img{object-position:bottom;}
.tsp-hero .container{position:relative;z-index:2;}
@media(min-width:1201px){
  .tsp-hero{height:567px;min-height:0;}
  .tsp-hero .bg{top:-2px;bottom:auto;height:600px;}
  /* Same fill as the hub, and for the same reason: this IS the hub's hero
     component (559:1328/559:1329), drawn stretched into the 1920x600 rect.
     site.css:613 ships .tsp-hero .bg img{object-fit:cover}, which on a
     1024x683 photo in a 1920x600 band crops to a completely different part of
     the picture: the hub and its 12 children showed two different photos.
     Below 1201px site.css's cover still stands, as above. */
  .tsp-hero .bg img{object-fit:fill;}
  .tsp-hero .ov2{bottom:auto;height:600px;}
  .tsp-hero .container{padding-top:300px;}
  .tsp-hero .eyebrow{font-weight:400;font-size:20px;line-height:25px;letter-spacing:normal;margin-bottom:2px;}
  .tsp-hero h1{font-weight:700;font-size:75px;line-height:89px;letter-spacing:-1.5px;}
}
@media(min-width:1568px){
  .tsp-hero .eyebrow{width:max-content;margin-left:2px;}
  .tsp-hero h1{width:max-content;margin-left:2px;}
}

/* =========================================================
   TABLET AND PHONE - release every fixed pixel above.
   No Figma mobile frames exist, so this keeps the shipped behaviour:
   one readable column, nothing wider than the viewport.
   ========================================================= */
@media(max-width:1200px){
  .evo-tpl-page-tech-support .ts-hero{min-height:520px;}
  .evo-tpl-page-tech-support .ts-hero .container{padding-top:340px;}
  .evo-tpl-page-tech-support .ts-hero .eyebrow{font-size:18px;line-height:24px;}
  .evo-tpl-page-tech-support .ts-hero h1{font-size:52px;line-height:1.08;letter-spacing:-1px;}

  .evo-tpl-page-tech-support .ts-intro{padding:72px 0 28px;}
  .evo-tpl-page-tech-support .ts-intro h2{font-size:34px;line-height:1.14;letter-spacing:-0.8px;margin:0 auto 18px;}
  .evo-tpl-page-tech-support .ts-intro p{font-size:17px;line-height:1.55;max-width:680px;margin:0 auto;}

  .evo-tpl-page-tech-support .ts-actions{padding:0 0 64px;}
  .evo-tpl-page-tech-support .ts-actions .tsline{width:100%;}
  .evo-tpl-page-tech-support .ts-actions .row{display:grid;grid-template-columns:1fr;gap:20px;
    max-width:460px;margin:32px auto 0;}
  .evo-tpl-page-tech-support .ts-acard{height:auto;padding:26px 24px 30px;}
  .evo-tpl-page-tech-support .ts-acard .pillbtn{position:static;width:auto;height:56px;
    justify-content:center;padding:0 14px;gap:10px;margin-bottom:18px;}
  .evo-tpl-page-tech-support .ts-acard .pillbtn .pl{font-size:19px;letter-spacing:-0.3px;}
  .evo-tpl-page-tech-support .ts-acard p{position:static;width:auto;max-width:320px;margin:0 auto;
    transform:none;font-size:15px;line-height:1.5;}
  /* the two Figma line breaks in each card's copy are a 349px-wide decision.
     Each <br> has an &nbsp; in front of it (the frame's own trailing space, see
     the fragment), so dropping the break here still leaves the two halves of
     the sentence spaced: without it the copy read "ready to helpby phone". */
  .evo-tpl-page-tech-support .ts-acard p br{display:none;}

  .evo-tpl-page-tech-support .ts-products{padding:72px 0 80px;}
  .evo-tpl-page-tech-support .ts-products h2{font-size:34px;line-height:1.14;letter-spacing:-0.8px;margin:0 auto 40px;}
  .evo-tpl-page-tech-support .ts-products .grid{display:grid;grid-template-columns:1fr 1fr;
    column-gap:20px;row-gap:20px;max-width:760px;margin:0 auto;}
  .evo-tpl-page-tech-support .ts-pcard,
  .evo-tpl-page-tech-support .ts-pcard:nth-child(-n+4){height:auto;padding:26px 16px 22px;}
  .evo-tpl-page-tech-support .ts-pcard .pimg{position:static;width:auto;height:150px;
    display:flex;align-items:center;justify-content:center;}
  .evo-tpl-page-tech-support .ts-pcard .pimg img{position:static;width:auto;height:auto;
    max-width:100%;max-height:100%;object-fit:contain;}
  .evo-tpl-page-tech-support .ts-pcard .pname{position:static;width:auto;height:auto;
    margin:18px auto 0;max-width:200px;}
  .evo-tpl-page-tech-support .ts-pcard .pname img{position:static;width:100%;height:auto;object-fit:contain;}
  .evo-tpl-page-tech-support .ts-pcard.textname .pname{font-size:17px;line-height:1.2;white-space:normal;}

  .tsp-hero{min-height:520px;height:auto;}
  .tsp-hero .container{padding-top:340px;}
  .tsp-hero .eyebrow{font-size:18px;line-height:24px;}
  .tsp-hero h1{font-size:44px;line-height:1.1;letter-spacing:-1px;}
}

@media(max-width:768px){
  .evo-tpl-page-tech-support .ts-hero h1{font-size:40px;}
  .evo-tpl-page-tech-support .ts-intro h2,
  .evo-tpl-page-tech-support .ts-products h2{font-size:28px;}
  .evo-tpl-page-tech-support .ts-intro p{font-size:16px;}
  .evo-tpl-page-tech-support .ts-products .grid{grid-template-columns:1fr;max-width:360px;}
  .tsp-hero h1{font-size:34px;}
}