/* =============================================================
   Bathroom Remodeling page styles
   Loaded by services/bathroom-remodeling.html AFTER css/main.css.
   Page-scoped classes only; design-system tokens from main.css.
   ============================================================= */

/* ---------- Hero ----------
   Was a split image/text hero (.service-hero). Now the shared
   .hero + .hero-service overlay hero from css/main.css, which took over
   the same photo. Nothing page-specific is left here. */

/* ---------- Offerings bento: 1 large image cell + 2 stacked cards ---------- */
.offer-bento { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .offer-bento { grid-template-columns: 1.2fr .8fr; }
  .offer-feature { grid-row: 1 / 3; }
}

.offer-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.offer-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(8 30 49 / .9) 0%, rgb(8 30 49 / .48) 45%, rgb(8 30 49 / .06) 78%);
}
.offer-feature-body { position: relative; z-index: 1; padding: 2rem; }
.offer-feature h3 { color: var(--dark-text); font-size: 1.375rem; }
.offer-feature p { margin-top: .375rem; color: var(--dark-text); max-width: 52ch; }

.offer-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden; /* clips the flush figure to the card radius */
}
.offer-cell figure { aspect-ratio: 21 / 9; overflow: hidden; background: var(--stone); }
.offer-cell img { width: 100%; height: 100%; object-fit: cover; }
.offer-cell-body { padding: 1.375rem 1.625rem 1.625rem; }
.offer-cell-body p { margin-top: .375rem; font-size: .9875rem; }

/* ---------- Trust strip: stone section hosting the ambient draft layer ----------
   .draft-bg visuals (opacity, draw loop, reduced-motion guard) live in main.css;
   this block only anchors the layer and keeps content above it. */
.bath-trust { position: relative; padding-block: 3.25rem; }
@media (min-width: 960px) { .bath-trust { padding-block: 4.5rem; } }
.bath-trust .trust-row { position: relative; z-index: 1; }

/* ---------- Process: minimal numbered line ----------
   Horizontal gold rule with 5 nodes + titles (decorative, desktop only),
   then a compact 5-row number/title/sentence list. No new animation here;
   .reveal transitions are defined and reduced-motion guarded in main.css. */
.process-line { display: none; }
@media (min-width: 900px) {
  .process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 3.25rem;
  }
  .process-line::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 5px;
    height: 1px;
    background: var(--gold);
  }
}
.pl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  text-align: center;
}
.pl-node {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--stone);
}
.pl-title {
  max-width: 16ch;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink);
}

.process-list { counter-reset: step; max-width: 920px; }
.process-list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1rem;
  padding-block: .875rem;
}
.process-list li + li { border-top: 1px solid var(--line); }
.process-list li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / 3;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--gold-700);
}
.process-list h3 { font-size: 1.0625rem; }
.process-list p { grid-column: 2; margin-top: .125rem; font-size: .9375rem; }
@media (min-width: 900px) {
  .process-list li {
    grid-template-columns: 2.5rem 15rem 1fr;
    column-gap: 1.5rem;
    align-items: baseline;
  }
  .process-list li::before { grid-row: auto; }
  .process-list p { grid-column: 3; margin-top: 0; }
}