/* ==========================================================================
   DESEN CONSTRUCTION — Services module extension
   Scoped additive stylesheet for the Services listing grid and the six
   service detail pages. Loaded ONLY on services.html and /services/*.html —
   does not affect any other page. Reuses the existing design tokens,
   colors, fonts and components defined in css/style.css.
   ========================================================================== */

/* ---------- Services — clickable module grid (bento composition) ---------- */
.service-modules{ display:grid; grid-template-columns: 1fr; gap: 18px; }

.service-module{
  position: relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height: 280px; border-radius: var(--radius); overflow:hidden; isolation:isolate;
  padding: clamp(22px,3vw,30px); color: var(--white); background: var(--charcoal);
  box-shadow: 0 20px 40px -28px rgba(11,10,8,.4);
  transition: transform .38s var(--ease-cine), box-shadow .38s var(--ease-cine);
}
.service-module:hover, .service-module:focus-visible{
  transform: translateY(-8px);
  box-shadow: 0 34px 68px -26px rgba(11,10,8,.55);
}

/* Photo layer (pseudo-element — keeps the card markup free of extra wrapper spans) */
.service-module::before{
  content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  background-image: var(--sm-bg); transform: scale(1.02);
  transition: transform .6s var(--ease-cine);
}
.service-module:hover::before{ transform: scale(1.07); }

/* Scrim / overlay layer — darkens further on hover for text legibility */
.service-module::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(190deg, rgba(11,10,8,.1) 0%, rgba(11,10,8,.38) 45%, rgba(11,10,8,.88) 100%);
  transition: background .4s var(--ease-cine);
}
.service-module:hover::after{
  background: linear-gradient(190deg, rgba(11,10,8,.32) 0%, rgba(11,10,8,.62) 45%, rgba(11,10,8,.96) 100%);
}

.service-module__idx{
  display:block; font-family: var(--font-mono); font-size:.8rem; letter-spacing:.16em;
  color: rgba(247,245,240,.68); margin-bottom: 10px;
  transition: color .38s var(--ease-cine), opacity .38s var(--ease-cine);
}
.service-module:hover .service-module__idx{ color: var(--sand); }

.service-module__accent{
  display:block; width: 30px; height:2px; background: var(--sand); margin-bottom: 12px;
  transition: width .38s var(--ease-cine), background .38s var(--ease-cine);
}
.service-module:hover .service-module__accent{ width: 60px; background: var(--green); }

.service-module h3{
  color: var(--white); font-size: clamp(1.05rem, 1.5vw, 1.4rem); margin: 0 0 8px; max-width: 26ch;
  transition: color .3s var(--ease-cine);
}
.service-module:hover h3{ color: var(--sand-light); }

.service-module p{
  color: rgba(247,245,240,.8); font-size: .88rem; max-width: 40ch; margin: 0 0 14px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}

.service-module__link{
  display:inline-flex; align-items:center; gap:9px; font-size:.85rem; font-weight:600;
  color: var(--sand); font-family: var(--font-body);
}
.service-module__arrow{ display:inline-block; transition: transform .38s var(--ease-cine); }
.service-module:hover .service-module__arrow{ transform: translateX(6px); }
[dir="rtl"] .service-module__arrow{ display:inline-block; transform: scaleX(-1); }
[dir="rtl"] .service-module:hover .service-module__arrow{ transform: scaleX(-1) translateX(6px); }

/* Featured (larger) tiles get roomier type */
.service-module--featured{ min-height: 380px; }
.service-module--featured h3{ font-size: clamp(1.25rem, 2.1vw, 1.8rem); max-width: 22ch; }
.service-module--featured p{ font-size: .96rem; -webkit-line-clamp:3; line-clamp:3; }

/* Desktop bento composition — avoids a monotonous 3x2 grid */
@media (min-width: 900px){
  .service-modules{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 240px 240px 280px 240px;
    gap: 22px;
    grid-template-areas:
      "m1 m1 m1 m1 m2 m2"
      "m1 m1 m1 m1 m2 m2"
      "m3 m3 m4 m4 m5 m5"
      "m6 m6 m6 m6 m6 m6";
  }
  .service-module{ min-height: 0; }
  .service-module--01{ grid-area: m1; }
  .service-module--02{ grid-area: m2; }
  .service-module--03{ grid-area: m3; }
  .service-module--04{ grid-area: m4; }
  .service-module--05{ grid-area: m5; }
  .service-module--06{ grid-area: m6; }
}
@media (min-width: 900px) and (max-width: 1180px){
  .service-modules{ grid-template-rows: 220px 220px 300px 240px; }
}

/* ---------- Scope of work — icon info-card grid (detail pages) ---------- */
.scope-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:2px;
  background: var(--paper-2); border-radius: var(--radius); overflow:hidden;
}
@media (max-width: 700px){ .scope-grid{ grid-template-columns: 1fr; } }

.scope-item{
  background: var(--white); padding: 20px 24px; display:flex; align-items:center; gap:16px;
  transition: background .3s var(--ease);
}
.scope-item:hover{ background: var(--green-soft); }

.scope-item__ic{
  flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--green);
  display:flex; align-items:center; justify-content:center; color: var(--green);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.scope-item:hover .scope-item__ic{ background: var(--green); color: var(--white); }
.scope-item__ic svg{ width:16px; height:16px; }

.scope-item span{ font-size:.95rem; font-weight:500; color: var(--ink-text); line-height:1.3; }

/* ---------- Detail-page gallery placeholder ---------- */
.detail-gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px){ .detail-gallery{ grid-template-columns: 1fr; } }
.detail-gallery__tile{
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); border: 1px solid var(--concrete-line);
  display:flex; align-items:center; justify-content:center; text-align:center; padding: 20px;
}
.detail-gallery__tile svg{ width:30px; height:30px; color: var(--concrete); margin: 0 auto 10px; display:block; }
.detail-gallery__tile span{ display:block; font-family: var(--font-mono); font-size:.74rem; letter-spacing:.04em; color: var(--concrete-dark); max-width: 22ch; margin: 0 auto; }

/* ---------- Detail hero back-link row ---------- */
.service-hero-nav{ position:relative; z-index:1; margin-bottom: 22px; }

/* Prose readability on dark (.section--ink) QHSE section of detail pages */
.section--ink .prose{ color: var(--concrete); }