/* Home Team Construction — howwework

   COMPONENT 09 — HOW WE WORK
   SHIPPING SOURCE OF TRUTH.
   CORRECTED. My first version was a three-column grid and had the header
   roles reversed. The live section is an ACCORDION: six items, one open, the
   rest collapsed behind plus signs, beside a portrait photograph. And the
   header reads the other way round — the small line is "Why Long Island
   Homeowners Choose Us" and the large one is "How We Work", so those are the
   eyebrow and the headline respectively. The live header is centred; kept.
   NATIVE <details>, NO JAVASCRIPT. Elementor's own nested accordion already
   uses details/summary, so rebuilding it this way is both faithful and the
   accessible option: keyboard operable, open by default for the first item,
   findable by in-page search in browsers that expand on find, and it works
   with JS disabled. The plus/minus is drawn in CSS rather than shipped as an
   icon font.
   THE TRADE, worth stating: an accordion hides five of six value props behind
   a click. A grid shows all six at once and scans better. This matches the
   live page; the grid version is one class change away if that is preferred.

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

/* Home Team Construction — 09 How we work */
.htc-hww{
  box-sizing:border-box;
  width:100%;
  /* Was `padding:var(--htc-s7) 0;`. This block relied on Elementor's container for its horizontal
     padding and 1400px centring; there is no such container in this theme, so it
     carries both itself. max-width puts the gutters outside the container width
     so content aligns with sections that centre an __inner at --htc-container. */
  padding:var(--htc-s7) var(--htc-s4);
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  font-family:var(--htc-font-body);
}

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

/* Centred, matching the live section. The only centred header on the page
   besides the closing CTA. */
.htc-hww__header{
  margin:0 0 var(--htc-s5);
  text-align:center;
}

.htc-hww__eyebrow{
  display:inline-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-red);
}
.htc-hww__eyebrow::before,
.htc-hww__eyebrow::after{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:2px;
  background:var(--htc-red);
}

.htc-hww__title{
  margin:0;
  font-size:var(--htc-h2);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--htc-black);
  text-wrap:balance;
}

/* ---- accordion ---- */

/* THE ROW BENEATH THE CENTRED HEADER.
   The live section nests it exactly this way: container d232a77 carries the
   header across the full width, and d32a058 below it holds the accordion and
   the image widget side by side. The artifact's harness flattened that — it
   put the whole component in the row's main column and the photograph in the
   aside, which would have centred the header over the accordion alone.

   7fr/5fr rather than an even split, and the media capped at 440px on top of
   that. A portrait 3:4 photograph given half of a 1400px container is 880px
   tall and sets the height of a section whose content is a 450px accordion;
   capped, the two columns come out level. Uneven columns and a fixed ratio are
   the same treatment split.css and prose.css use. */
.htc-hww__body{
  display:grid;
  grid-template-columns:7fr 5fr;
  align-items:center;
  gap:var(--htc-s6);
}

.htc-hww__list{
  display:flex;
  flex-direction:column;
  gap:var(--htc-s1);
}

/* The red block offset behind the photograph, carried over from the live
   section and measured off the artifact's stand-in: 62% wide, 70% tall,
   flush to the bottom-left, with the image inset from it by s3 on those two
   edges so the block shows. */
.htc-hww__media{
  position:relative;
  max-width:440px;
  margin-left:auto;
  padding:0 0 var(--htc-s3) var(--htc-s3);
}

.htc-hww__media::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:62%;
  height:70%;
  background:var(--htc-red);
}

.htc-hww__media img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--htc-radius);
}

.htc-hww__item{
  background:var(--htc-bg-light);
  border-left:3px solid transparent;
  border-radius:var(--htc-radius);
  transition:border-color 200ms ease, background-color 200ms ease;
}
.htc-hww__item[open]{
  background:var(--htc-white);
  border-left-color:var(--htc-red);
  box-shadow:0 2px 10px rgba(16,16,16,.07);
}

.htc-hww__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--htc-s3);
  min-height:56px;
  padding:var(--htc-s2) var(--htc-s3);
  cursor:pointer;
  list-style:none;
}
/* Suppress the native disclosure triangle in both engines. */
.htc-hww__summary::-webkit-details-marker{ display:none; }
.htc-hww__summary::marker{ content:""; }

.htc-hww__summary:focus-visible{
  outline:2px solid var(--htc-red);
  outline-offset:-2px;
}

.htc-hww__label{
  font-size:var(--htc-h5);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--htc-black);
}

/* Plus and minus drawn in CSS, so no icon font ships with the block. */
.htc-hww__sign{
  position:relative;
  flex:0 0 auto;
  width:18px;
  height:18px;
}
.htc-hww__sign::before,
.htc-hww__sign::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:18px;
  height:2px;
  margin-top:-1px;
  background:var(--htc-red);
  transition:transform 200ms ease, opacity 200ms ease;
}
.htc-hww__sign::after{ transform:rotate(90deg); }
.htc-hww__item[open] .htc-hww__sign::after{ transform:rotate(0deg); opacity:0; }

.htc-hww__panel{
  padding:0 var(--htc-s3) var(--htc-s3);
}
.htc-hww__copy{
  margin:0;
  font-size:var(--htc-body);
  line-height:1.6;
  color:var(--htc-text);
  max-width:60ch;
}

@media (max-width:1150px){
  /* Stacked, with the photograph below the accordion. The live page hides it
     outright at this width; keeping it costs a little height and is better
     than throwing the only photograph in the section away on a tablet.

     The gutters here were a port bug: the base rule above gained
     var(--htc-s4) when this stopped being an Elementor block, but these two
     media queries kept the artifact's zero, so everything below 1150px ran to
     the viewport edge. s3 matches trust, reviews and the rest. */
  .htc-hww{ padding:var(--htc-s6) var(--htc-s3); }

  .htc-hww__body{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--htc-s5);
  }

  .htc-hww__media{ margin-inline:auto; }
}

@media (max-width:767px){
  .htc-hww{ padding:var(--htc-s5) var(--htc-s3); }
  .htc-hww__summary{ padding:var(--htc-s2); gap:var(--htc-s2); }
  .htc-hww__label{ font-size:var(--htc-body); }
  .htc-hww__panel{ padding:0 var(--htc-s2) var(--htc-s2); }
}

@media (prefers-reduced-motion: reduce){
  .htc-hww__item,
  .htc-hww__sign::before,
  .htc-hww__sign::after{ transition:none; }
}