/* =============================================================================
   Service landing page
   =============================================================================

   Loaded only where a service is in context — the three service pages, the service
   archive and a single listing. See codebrillo_imad_service_page_styles() in
   functions.php.

   The page is laid out in Elementor: sections, spacing, backgrounds and the responsive
   behaviour of the containers are edited there. What is here is the appearance of the
   repeating pieces Elementor cannot hold — the cards, the tiles, the accordion — so that
   six service cards look identical without six copies of a widget's styling.

   RTL throughout. Logical properties (inline-start / inline-end) rather than left/right,
   so nothing has to be mirrored by hand.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Section blocks take the full width of their section

   The section containers are centred (align-items:center), which on a flex column makes every
   child only as wide as its own content. A grid of cards is wide anyway, so it looked right —
   but the FAQ accordion is as wide as its longest question and came out a third of the page.
   Each block states its own width instead of depending on the container's alignment.
   -------------------------------------------------------------------------- */

/* The widget carries the class (set in build-service-page.php); the div inside it inherits the
   room. Styling only the inner div does nothing — the widget is what was narrow. */
.imad-block {
  width: 100%;
}

.imad-svc-grid,
.imad-svc-gallery,
.imad-svc-cases,
.imad-svc-areas,
.imad-svc-reviews,
.imad-svc-faq,
.imad-svc-features {
  width: 100%;
}

/* Long-form reading, so it stops short of the full width: a question sitting on one line
   across 1140px is harder to scan, not easier. */
.imad-svc-faq {
  max-width: 980px;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.imad-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.imad-icon--sm { width: 16px; height: 16px; }

.imad-icon--star {
  width: 18px;
  height: 18px;
  fill: var(--imad-accent);
  stroke: var(--imad-accent);
}

/* The orange half of a two-toned heading. */
.imad-hl { color: var(--imad-accent); }

/* The small pill above each section heading. */
.imad-svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--imad-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* On the dark sections the pill is an outline instead of a solid block, so it does not
   fight the hero's own orange call to action. */
.imad-sec--dark .imad-svc-eyebrow {
  background: transparent;
  border: 1px solid var(--imad-accent);
  color: var(--imad-accent);
}

.imad-svc-heading {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--imad-text);
}

.imad-sec--dark .imad-svc-heading { color: #fff; }

/* -----------------------------------------------------------------------------
   Contact buttons — the call / WhatsApp pair
   -------------------------------------------------------------------------- */

/* align-items:stretch is what makes the pair match. The call button carries two lines (label
   over number) and the WhatsApp button one, so left to themselves they came out different
   heights and the row read as an accident. Stretch lets the shorter one grow to the taller,
   and the min-height keeps both from collapsing when the label is short. */
.imad-svc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.imad-svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.imad-svc-btn:hover,
.imad-svc-btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--imad-shadow-lg);
}

.imad-svc-btn .imad-icon {
  width: 20px;
  height: 20px;
}

.imad-svc-btn span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.imad-svc-btn strong { font-size: 15px; font-weight: 700; }

/* The number under the label. Tabular figures so it does not shift width between services,
   and a little space above it rather than the two lines touching. */
.imad-svc-btn b {
  font-size: 13.5px;
  font-weight: 600;
  opacity: .95;
  letter-spacing: .4px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.imad-svc-btn--call { background: var(--imad-accent); }
.imad-svc-btn--call:hover { background: #e06d12; }

.imad-svc-btn--wa { background: var(--imad-wa); }
.imad-svc-btn--wa:hover { background: var(--imad-wa-dark); }

/* The hero pair, which sits alone under the paragraph and carries the page. */
.imad-svc-cta--lg .imad-svc-btn {
  min-height: 64px;
  padding: 10px 30px;
}

.imad-svc-cta--lg .imad-svc-btn strong { font-size: 16px; }
.imad-svc-cta--lg .imad-svc-btn b      { font-size: 14.5px; }
.imad-svc-cta--lg .imad-svc-btn .imad-icon { width: 22px; height: 22px; }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Elementor's image widget renders the attachment at its own size, so a 600px photo sat in a
   42% column with white space around it. The hero and emergency pictures are art, not content
   images: they fill their column at a fixed ratio and crop rather than letterbox. */
.imad-sec--hero .elementor-widget-image img,
.imad-sec--dark .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* width:100% is the half that was missing. aspect-ratio alone sizes the box from its content,
   so the widget shrank to the attachment's own width and left a gap in the column. */
.imad-sec--hero .elementor-widget-image {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  border-radius: 18px;
  overflow: hidden;
}

/* The emergency picture sits under its copy in a narrow column; unconstrained it grew taller
   than the list of situations beside it and pushed the section to twice its height. */
.imad-sec--dark .elementor-widget-image {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}

/* The badge stack sits over the picture. Its width is its content, not the column's: at full
   width the four plates covered the technician's face and the photograph stopped being worth
   showing. align-items keeps them flush to the edge they are offset from. */
.imad-svc-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 62%;
}

.imad-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 11px;
  background: rgb(14 26 43 / 86%);
  border: 1px solid var(--imad-ink-line);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.imad-svc-badge .imad-icon { color: var(--imad-accent); }

.imad-svc-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.imad-svc-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #cfd7e2;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.imad-svc-feature .imad-icon {
  width: 30px;
  height: 30px;
  color: var(--imad-accent);
}

/* -----------------------------------------------------------------------------
   Card grids — services and guarantees
   -------------------------------------------------------------------------- */

.imad-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.imad-svc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--imad-radius);
  background: var(--imad-surface);
  border: 1px solid var(--imad-line);
  box-shadow: var(--imad-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.imad-svc-card:hover {
  transform: translateY(-2px);
  border-color: #d8dce3;
  box-shadow: var(--imad-shadow-lg);
}

/* The 01..06 counter. Order is the source of truth: the numbers are generated from the
   row index, so reordering the repeater renumbers the cards and cannot go out of step. */
.imad-svc-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--imad-accent);
  line-height: 1;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.imad-svc-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--imad-ink);
  color: var(--imad-accent);
  flex: 0 0 auto;
}

.imad-svc-card__body { flex: 1 1 auto; min-width: 0; }

.imad-svc-card__body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--imad-text);
  line-height: 1.5;
}

.imad-svc-card__body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--imad-muted);
  line-height: 1.8;
}

/* The chevron points along the reading direction, so it flips with the document. */
.imad-svc-card__chev {
  color: var(--imad-accent);
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}

.imad-svc-card--light .imad-svc-card__icon {
  background: var(--imad-accent-soft);
  color: var(--imad-accent);
}

/* -----------------------------------------------------------------------------
   Gallery — a scroll-snap strip
   -------------------------------------------------------------------------- */

.imad-svc-gallery {
  display: grid;
  grid-auto-flow: column;
  /* A fixed track, not `1fr`. With a fractional track the six pictures divided the container
     between them and the strip never overflowed, so nothing scrolled and each frame was a
     third of its intended size. A fixed width is what makes it a carousel. */
  grid-auto-columns: 300px;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  /* Firefox and WebKit spell the thin scrollbar differently; both are set so the strip
     does not gain a chunky bar on a desktop. */
  scrollbar-width: thin;
}

.imad-svc-gallery::-webkit-scrollbar { height: 6px; }
.imad-svc-gallery::-webkit-scrollbar-thumb { background: #cfd4db; border-radius: 999px; }

.imad-svc-shot {
  position: relative;
  margin: 0;
  border-radius: var(--imad-radius);
  overflow: hidden;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  background: var(--imad-ink);
}

.imad-svc-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imad-svc-shot figcaption {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgb(14 26 43 / 88%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.imad-svc-shot figcaption .imad-icon { color: var(--imad-accent); }

/* -----------------------------------------------------------------------------
   Advantages — dark cards with a nested list
   -------------------------------------------------------------------------- */

.imad-svc-advantages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--imad-ink);
  border-radius: var(--imad-radius-lg);
  overflow: hidden;
}

.imad-svc-adv {
  padding: 28px 24px;
  border-inline-start: 1px solid var(--imad-ink-line);
}

.imad-svc-adv:first-child { border-inline-start: 0; }

.imad-svc-adv h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.imad-svc-adv h3 .imad-icon { color: var(--imad-accent); }

.imad-svc-adv ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.imad-svc-adv li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #b9c3d1;
}

.imad-svc-adv li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--imad-accent);
}

/* -----------------------------------------------------------------------------
   Emergency cases
   -------------------------------------------------------------------------- */

.imad-svc-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.imad-svc-case {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--imad-ink-line);
  color: #d4dce7;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
}

.imad-svc-case .imad-icon { color: var(--imad-accent); }

/* -----------------------------------------------------------------------------
   Neighbourhoods
   -------------------------------------------------------------------------- */

.imad-svc-areas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.imad-svc-area {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--imad-surface);
  border: 1px solid var(--imad-line);
  color: var(--imad-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.imad-svc-area:hover,
.imad-svc-area:focus-visible {
  border-color: var(--imad-accent);
  color: var(--imad-accent);
  transform: translateY(-1px);
}

.imad-svc-area .imad-icon { color: var(--imad-accent); }

.imad-svc-area--more {
  background: var(--imad-accent-soft);
  border-color: transparent;
  color: var(--imad-accent);
}

/* -----------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.imad-svc-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.imad-svc-review {
  position: relative;
  margin: 0;
  padding: 26px 24px 22px;
  border-radius: var(--imad-radius);
  background: var(--imad-surface);
  border: 1px solid var(--imad-line);
  box-shadow: var(--imad-shadow);
}

.imad-svc-review__quote {
  position: absolute;
  top: 18px;
  inset-inline-start: 22px;
  font-size: 44px;
  line-height: 1;
  color: #dfe3e9;
  font-family: serif;
}

.imad-svc-review__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.imad-svc-review blockquote {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--imad-text);
}

.imad-svc-review figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--imad-text);
  padding-top: 14px;
  border-top: 1px solid var(--imad-line);
}

.imad-svc-review__area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--imad-muted);
}

.imad-svc-review__area .imad-icon { color: var(--imad-accent); }

/* -----------------------------------------------------------------------------
   FAQ — native <details>, no script
   -------------------------------------------------------------------------- */

.imad-svc-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.imad-svc-q {
  border-radius: 12px;
  background: var(--imad-surface);
  border: 1px solid var(--imad-line);
  box-shadow: var(--imad-shadow);
  overflow: hidden;
}

.imad-svc-q summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--imad-text);
  list-style: none;
  /* Safari draws its own triangle through this pseudo-element, which the ::after below
     would otherwise duplicate. */
  -webkit-tap-highlight-color: transparent;
}

.imad-svc-q summary::-webkit-details-marker { display: none; }

.imad-svc-q summary span { flex: 1 1 auto; }

/* The + / − marker, drawn rather than an icon so it can rotate. */
.imad-svc-q summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--imad-accent-soft);
  color: var(--imad-accent);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease;
}

.imad-svc-q[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.imad-svc-a {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 2;
  color: var(--imad-muted);
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .imad-svc-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .imad-svc-advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imad-svc-adv:nth-child(3) { border-inline-start: 0; }
  .imad-svc-adv:nth-child(n+3) { border-top: 1px solid var(--imad-ink-line); }
  .imad-svc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imad-svc-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .imad-svc-grid,
  .imad-svc-cases,
  .imad-svc-reviews,
  .imad-svc-advantages { grid-template-columns: 1fr; }

  .imad-svc-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .imad-svc-adv { border-inline-start: 0; }
  .imad-svc-adv + .imad-svc-adv { border-top: 1px solid var(--imad-ink-line); }

  .imad-svc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }

  /* Full-width buttons on a phone: this is a page whose whole purpose is the call, and a
     half-width tap target next to another is the easiest thing to miss. */
  .imad-svc-cta { flex-direction: column; }
  .imad-svc-btn { justify-content: center; }

  .imad-svc-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* The badge stack is positioned absolutely over the picture by a container setting, which
     is a desktop refinement. On a phone the picture is 358px wide and four plates on top of
     it cover the whole photograph, so they come back into normal flow underneath it.
     Forced here rather than trusting Elementor's `_position_mobile`: an unset responsive
     position key is ignored silently, and the failure looks like a styling accident. */
  .imad-svc-badges {
    position: static !important;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
  }

  .imad-svc-badge { font-size: 12px; padding: 7px 11px; }

  .imad-svc-card { padding: 17px 18px; gap: 13px; }
  .imad-svc-num { font-size: 24px; }
  .imad-svc-card__icon { width: 44px; height: 44px; }

  .imad-svc-gallery { grid-auto-columns: 80vw; }

  .imad-svc-heading { font-size: clamp(22px, 6vw, 28px); }
}

/* The site's own fixed contact bar sits at the bottom of the viewport under 768px, so the
   last section needs room or the final call to action hides behind it. */
@media (max-width: 767px) {
  body.imad-has-service-page { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .imad-svc-btn,
  .imad-svc-card,
  .imad-svc-area,
  .imad-svc-q summary::after {
    transition: none;
  }

  .imad-svc-btn:hover,
  .imad-svc-card:hover,
  .imad-svc-area:hover {
    transform: none;
  }
}