/*
 * Author: Manoj Mathangadeera
 * Website: https://codemmhub.github.io/
 * Project: USRI Web Development V2027
 * File Name: sections.css
 * File Description: Styles for reusable page sections (section headings, trust bar, checklist, FAQ, client slider, model diagram, closing call to action) loaded by pages that use them.
 */

/* ---------------------------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------------------------- */
.section-head { max-width: 46rem; margin-bottom: var(--s-7); }
.section-head .lead { margin-top: var(--s-3); }

/* A quiet text link that sits under a section. The underline is drawn with a border so it
   stays visible on any background. */
.text-link { margin-top: var(--s-6); }
.text-link a { font-weight: 600; color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
.text-link a:hover { color: var(--blue-deep); border-bottom-color: var(--blue); }
.section--dark .text-link a, .section--blue .text-link a { color: var(--white); }
.section--dark .text-link a:hover { color: var(--yellow); }
.section-head .text-link { margin-top: var(--s-4); }

/* ---------------------------------------------------------------------------
   TRUST BAR (key numbers)
   The finished numbers are in the HTML. animations.js counts up from zero on scroll.
   --------------------------------------------------------------------------- */
.stats { background: var(--blue); color: var(--white); }
.stats-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: var(--s-6) var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.stat:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); line-height: 1; color: var(--yellow); }
.stat-pre { font-size: 0.4em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); vertical-align: 0.55em; }
.stat-label { margin-top: var(--s-2); font-weight: 600; line-height: 1.3; }
.stat-note { font-size: var(--fs-small); opacity: 0.85; margin-top: 0; }
.stats .stat-num + .stat-label { margin-top: var(--s-2); }

@media (min-width: 900px) {
  .stats-list { grid-template-columns: repeat(5, 1fr); }
  .stat, .stat:nth-child(odd), .stat:last-child { grid-column: auto; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.2); padding: var(--s-6) var(--s-5); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}

/* ---------------------------------------------------------------------------
   CHECKLIST (short facts, each with a tick)
   --------------------------------------------------------------------------- */
.checklist { display: grid; gap: var(--s-4) var(--s-7); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 500; }
.checklist .icon { width: 1.75rem; height: 1.75rem; padding: 0.3rem; margin-top: 0.05rem; background: var(--blue); color: var(--white); border-radius: 50%; }
@media (min-width: 800px) { .checklist { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------------
   FAQ (native details elements)
   --------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--steel-line); }
.faq-item { border-bottom: 1px solid var(--steel-line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.125rem; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus when the answer opens. It shows what changed. */
.faq-item summary::after {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 100% 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 100% no-repeat;
  transition: background-size 0.2s var(--ease);
}
.faq-item[open] summary::after { background-size: 100% 2px, 2px 0; }
.faq-item summary:hover { color: var(--blue); }
.faq-a { padding: 0 var(--s-6) var(--s-5) 0; max-width: 60ch; }

/* ---------------------------------------------------------------------------
   CLIENT SLIDER
   Two rows. Slot sizes are fixed (headline 220 x 110, others 150 x 75) and the fallback name
   box uses exactly the same size, so nothing shifts when a real logo file is added.
   --------------------------------------------------------------------------- */
.client-slider { display: grid; gap: var(--s-5); }
.client-row {
  overflow: hidden;
  /* Soft fade at both edges so names slide in and out instead of being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.client-track { display: flex; width: max-content; animation: client-marquee var(--marquee-seconds, 60s) linear infinite; }
.client-row--others .client-track { animation-direction: reverse; }
.client-row:hover .client-track { animation-play-state: paused; }
/* Each list has padding on its right and both halves are identical, so the track is
   exactly two equal halves and moving by 50 percent is a seamless loop. */
.client-group { display: flex; }
.client-list { display: flex; gap: var(--s-4); padding-right: var(--s-4); }
@keyframes client-marquee { to { transform: translateX(-50%); } }

.client-slot {
  flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--white); border: 1px solid var(--steel-line); border-radius: var(--radius);
  width: 150px; height: 75px;
}
.client-row--headline .client-slot { width: 220px; height: 110px; }
.client-slot img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }

/* The stand in for a logo that has not arrived: the name in capitals, in brand colours. */
.client-box {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0.4rem 0.6rem;
  border: 2px solid var(--blue); border-radius: var(--radius);
  color: var(--blue); text-align: center; text-wrap: balance;
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1;
  font-size: 0.95rem;
}
.client-row--headline .client-box { font-size: 1.3rem; }

/* People who ask for less motion get a still, wrapped list instead of a moving strip. */
@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; width: auto; }
  .client-group[aria-hidden="true"], .client-list[aria-hidden="true"] { display: none; }
  .client-group { flex-wrap: wrap; justify-content: center; }
  .client-list { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .client-row { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   MODEL DIAGRAM (blueprint style drawing, see components/model-diagram.php)
   The outline takes the surrounding text colour, measurements are brand yellow.
   The hidden starting states apply only once animations.js has confirmed it can play the
   animation (it adds .anim-ready), so without JavaScript the finished drawing always shows.
   --------------------------------------------------------------------------- */
.diagram { width: 100%; height: auto; display: block; overflow: visible; }
.d-line, .d-body { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-body { stroke-width: 3; }
.d-dim { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-linecap: round; }
.d-text { fill: var(--yellow); font-family: var(--font-head); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; }
.anim-ready .diagram [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim-ready .diagram [data-label] { opacity: 0; }

/* ---------------------------------------------------------------------------
   CLOSING CALL TO ACTION
   --------------------------------------------------------------------------- */
.cta-grid { display: grid; gap: var(--s-7); align-items: center; }
.cta-copy .lead { margin-top: var(--s-3); max-width: 34rem; }
.cta-contact { display: grid; gap: var(--s-4); }
.cta-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.cta-contact .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--yellow); }
.cta-k { display: block; font-size: 0.875rem; font-weight: 600; opacity: 0.75; }
.cta-contact a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.cta-contact a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); } }

/* ---------------------------------------------------------------------------
   MODEL CARDS (a dark card that works on light or dark sections)
   --------------------------------------------------------------------------- */
.model-grid { display: grid; gap: var(--s-5); }
.model-card a {
  display: block; height: 100%; padding: var(--s-5); text-decoration: none; color: var(--white);
  background: var(--ink-soft); /* solid, so the card looks the same on a light or a dark section */
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  transition: border-color 0.25s, background-color 0.25s;
}
.model-card a:hover, .model-card a:focus-visible { border-color: var(--yellow); background: var(--ink); }
.model-drawing { margin-bottom: var(--s-4); }
.model-card h3 { font-size: 2rem; }
.model-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.model-specs dt { font-size: 0.875rem; opacity: 0.75; }
.model-specs dd { margin: 0; font-weight: 600; line-height: 1.3; }
@media (min-width: 900px) { .model-grid { grid-template-columns: repeat(3, 1fr); } }