/* Home Team Construction — grid-featured

   ---------- OPTION A — featured row ----------

   Ported from deliverables/review.html <template id="cmp-grid-featured">.
   Tokens come from tokens.css; only local overrides are declared here.
*/

/* Home Team Construction — 06 Service section / A, featured row */
.htc-grid{
  box-sizing:border-box;
  width:100%;
  /* The photograph is back, per the note this replaces: the live section is
     white cards on a darkened photograph, and the flat --htc-grey-dark that
     shipped here was a placeholder for it.

     The recipe is the live container's (element 00a2b42), read off the page
     rather than eyeballed: base #252525 with the image over it at
     --overlay-opacity 0.17. An 83% wash of --htc-grey-dark over the photo is
     the same result, and keeps the kit token instead of hardcoding #252525.

     TWO THINGS FROM THE LIVE RULE ARE DELIBERATELY NOT COPIED.
     background-attachment:fixed, which Elementor applies above 1151px: it
     repaints the whole section on every scroll frame for a texture already at
     17%, and this section is the tallest on the page. And Motion Effects,
     which is how the photo is injected live — it is a background here, so it
     renders on a cold load instead of waiting for JavaScript. */
  background-color:var(--htc-grey-dark);
  background-image:
    linear-gradient(rgba(32, 30, 29, .83), rgba(32, 30, 29, .83)),
    url("https://www.hometeamconstructionli.com/wp-content/uploads/2025/03/Brick-Chimney-House-Roof-Suffolk-County-New-York.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:var(--htc-s7) var(--htc-s4);
  font-family:var(--htc-font-body);
}

.htc-grid *,
.htc-grid *::before,
.htc-grid *::after{ box-sizing:border-box; }

.htc-grid__inner{ max-width:var(--htc-container); margin:0 auto; }
.htc-grid__header{ margin:0 0 var(--htc-s5); }

/* White eyebrow, not red: #E63946 on --htc-grey-dark is 3.91:1, which fails AA
   at 13px. The red is kept as the rule, so the brand mark survives. */
.htc-grid__eyebrow{
  display:flex; align-items:center; gap:var(--htc-s2);
  margin:0 0 var(--htc-s2);
  font-size:var(--htc-eyebrow); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
  color:var(--htc-white);
}
.htc-grid__eyebrow::before{
  content:""; flex:0 0 auto; width:24px; height:2px; background:var(--htc-red);
}

.htc-grid__title{
  margin:0;
  font-size:var(--htc-h2); font-weight:700; line-height:1.2;
  letter-spacing:-.015em; color:var(--htc-white);
  max-width:20ch; text-wrap:balance;
}

/* ---- card ---- */

.htc-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--htc-white);
  border:1px solid transparent;
  border-radius:var(--htc-radius);
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.30);
  transition:border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.htc-card__media{ position:relative; overflow:hidden; }
.htc-card__media img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; object-position:center;
  transition:transform 400ms ease;
}
.htc-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,16,16,0) 55%, rgba(16,16,16,.20) 100%);
  transition:opacity 200ms ease;
}
.htc-card__body{
  display:flex; flex-direction:column; gap:var(--htc-s1);
  padding:var(--htc-s3); flex:1 1 auto;
}
.htc-card__title{
  margin:0; font-size:var(--htc-h5); font-weight:600;
  line-height:1.3; letter-spacing:-.01em; color:var(--htc-black);
}
/* :visited paired for the same reason as .htc-grid__btn below — `body
   a:visited` (0-1-2) outranks this (0-1-1), so a visited card title dropped
   to the link colour instead of inheriting the card's. */
.htc-card__title a,
.htc-card__title a:visited{ color:inherit; text-decoration:none; }
.htc-card__title a::after{ content:""; position:absolute; inset:0; }
.htc-card__text{
  margin:0; font-size:var(--htc-body); line-height:1.6; color:var(--htc-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.htc-card__cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--htc-s2);
  margin-top:auto; padding-top:var(--htc-s3);
  border-top:1px solid var(--htc-divider);
  font-size:var(--htc-small); font-weight:600; color:var(--htc-red);
}
.htc-card__chev{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:28px; height:28px;
  background:rgba(230,57,70,.10); color:var(--htc-red);
  transition:background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.htc-card:hover{
  border-color:var(--htc-red);
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}
.htc-card:hover .htc-card__media img{ transform:scale(1.05); }
.htc-card:hover .htc-card__media::after{ opacity:.35; }
.htc-card:hover .htc-card__chev{
  background:var(--htc-red); color:var(--htc-white); transform:translateX(3px);
}
.htc-card:focus-within{ border-color:var(--htc-red); }
.htc-card__title a:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }

/* ---- footer action ---- */

.htc-grid__more{
  display:flex; align-items:center; gap:var(--htc-s3);
  margin-top:var(--htc-s5);
}
/* :visited is matched explicitly, and it is not optional. base.css carries
   `body a, body a:visited { color: var(--htc-link) }` — near-black — to keep
   hozio-studio's unlayered link colour off the site. `body a:visited` is
   0-1-2; this class on its own is 0-1-0, so it loses, and the moment a
   visitor has been to /services/ the button's label turns near-black on the
   dark photograph while its white border stays put. Reported exactly that
   way. Browsers will not inherit a colour into a visited link from the
   unvisited rule, so the pair has to be spelled out. */
.htc-grid__btn,
.htc-grid__btn:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--htc-s1);
  min-height:44px; padding:var(--htc-s2) var(--htc-s4);
  border:2px solid var(--htc-white); border-radius:var(--htc-radius);
  background:transparent; color:var(--htc-white);
  font-size:var(--htc-body); font-weight:600; line-height:1.2;
  text-decoration:none;
  transition:background-color 200ms ease, color 200ms ease;
}
.htc-grid__btn:hover{ background:var(--htc-white); color:var(--htc-black); }
.htc-grid__btn:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }
.htc-grid__count{
  font-size:var(--htc-small); color:rgba(255,255,255,.64);
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion: reduce){
  .htc-card, .htc-card__media img, .htc-card__media::after, .htc-card__chev,
  .htc-grid__btn{ transition:none; }
  .htc-card:hover{ transform:none; }
  .htc-card:hover .htc-card__media img{ transform:none; }
}

/* ---- A: one featured row ---- */

.htc-grid__cards{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:var(--htc-s2);
}

/* At six across a card is ~215px wide. A two-line description there is about
   24 characters a line, which is not reading, it is decoration — so the compact
   card drops it. Same container, media and title as the full card; one part
   omitted at a density that cannot carry it. */
.htc-card--compact .htc-card__body{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:var(--htc-s2); padding:var(--htc-s2);
}
.htc-card--compact .htc-card__title{ font-size:var(--htc-body); }
.htc-card--compact .htc-card__chev{ width:24px; height:24px; }

@media (max-width:1150px){
  .htc-grid{ padding:var(--htc-s6) var(--htc-s3); }
  .htc-grid__cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--htc-s3); }
}
@media (max-width:767px){
  .htc-grid{ padding:var(--htc-s5) var(--htc-s3); }
  .htc-grid__title{ max-width:none; }
  .htc-grid__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--htc-s2); }
  .htc-grid__more{ flex-direction:column; align-items:stretch; }
  .htc-grid__btn{ width:100%; }
}