/* Parts shared by the trade sample pages. Looks set the colors and type; this file sets the shapes. */

:root {
  --bar-h: 68px;
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --ring: var(--fg);
  --ink-accent: var(--accent);
  --danger: #b3261e;
  --dur-fast: 200ms;
}

/* Sticky header: every target clears it, the header itself never scrolls to make room. */
* {
  scroll-margin-top: calc(var(--bar-h) + var(--s-16));
}

:is(input, textarea, select) {
  scroll-margin-top: calc(var(--bar-h) + 3rem);
}

.nav,
.nav * {
  scroll-margin-top: 0;
}

.nowrap {
  display: inline-block;
  white-space: nowrap;
}

/* Focus ring: dark scopes switch --ring to a color that holds up on ink. */
:focus-visible {
  outline-color: var(--ring);
}

.t-ink,
.t-foot,
.t-callbar {
  --ring: var(--ink-accent);
}

.t-phone {
  font-weight: 600;
  white-space: nowrap;
}

.t-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-14);
  color: var(--ink-muted);
}

.t-rating b {
  color: var(--ink-fg);
}

.t-stars {
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* Section heads and two-column splits */
.t-head {
  max-width: 44rem;
  margin-bottom: var(--s-48);
}

.t-head > * + * {
  margin-top: var(--s-16);
}

/* Two-column splits: each sets --cols, and all stack below 900px. */
:is(.t-split, .t-feature, .t-estimate, .t-price-split, .t-est, .t-paint) {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--split-gap, clamp(var(--s-32), 5vw, var(--s-80)));
  align-items: start;
}

.t-split {
  --cols: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
}

.t-split .t-head {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  :is(.t-split, .t-feature, .t-estimate, .t-price-split, .t-est, .t-paint) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Before-and-after slider. --ba is the share of the picture showing "before". */
.ba {
  --ba: 50%;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-panel);
  background: var(--surface-2);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-before {
  clip-path: inset(0 calc(100% - var(--ba)) 0 0);
}

.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba);
  width: 2px;
  translate: -1px 0;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
  pointer-events: none;
}

.ba-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312171a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 45%);
}

.ba-tag {
  position: absolute;
  top: var(--s-16);
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-pill);
  background: rgb(17 23 26 / 74%);
  color: #ffffff;
  font-size: var(--t-14);
  font-weight: 600;
  pointer-events: none;
}

.ba-tag-before {
  left: var(--s-16);
}

.ba-tag-after {
  right: var(--s-16);
}

.ba-range {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ba:has(.ba-range:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* Dark band */
.t-ink {
  background: var(--ink);
  color: var(--ink-fg);
}

.t-ink .lead,
.t-ink p {
  color: var(--ink-muted);
}

/* Numbered sequence, for content that really happens in order. */
.t-seq {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-32);
  padding: 0;
  list-style: none;
  counter-reset: seq;
}

.t-seq li {
  counter-increment: seq;
  padding-top: var(--s-24);
  border-top: 1px solid var(--ink-border);
}

.t-seq li::before {
  content: counter(seq);
  display: block;
  margin-bottom: var(--s-16);
  font-family: var(--font-display);
  font-size: var(--t-36);
  font-weight: var(--weight-display);
  line-height: 1;
  color: var(--ink-accent);
}

.t-seq h3 {
  margin-bottom: var(--s-8);
  font-size: var(--t-20);
}

@media (max-width: 960px) {
  .t-seq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .t-seq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Service rows */
.t-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-64);
  padding: 0;
  list-style: none;
}

.t-rows li {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-24) 0;
  border-top: 1px solid var(--border);
}

.t-rows h3 {
  font-size: var(--t-20);
}

.t-rows p {
  color: var(--fg-muted);
}

@media (max-width: 720px) {
  .t-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Photo beside a list; the photo holds still while the list scrolls past. */
.t-feature {
  --cols: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.t-feature-photo {
  position: sticky;
  top: calc(var(--bar-h) + var(--s-24));
  margin: 0;
}

.t-feature-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-panel);
}

.t-feature .t-rows {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .t-feature-photo {
    position: relative;
    top: auto;
  }

  .t-feature-photo img {
    aspect-ratio: var(--photo-ratio-phone, 4 / 3);
  }
}

/* Reviews */
.t-score {
  display: flex;
  align-items: baseline;
  gap: var(--s-12);
}

.t-score b {
  font-family: var(--font-display);
  font-size: var(--t-60);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--tracking);
}

.t-score .t-stars {
  font-size: var(--t-20);
}

.t-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-32);
}

.t-quote {
  margin: 0;
  padding-top: var(--s-24);
  border-top: 2px solid var(--fg);
}

.t-quote p {
  font-size: var(--t-18);
  line-height: 1.55;
}

.t-quote footer {
  margin-top: var(--s-16);
  font-size: var(--t-14);
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .t-quotes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Estimate request */
.t-estimate {
  --cols: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.t-estimate .list {
  margin-top: var(--s-24);
}

.t-form,
.t-estimate .form-done {
  padding: clamp(var(--s-24), 4vw, var(--s-40));
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.t-form {
  display: grid;
  gap: var(--s-24);
}

/* The thank-you card that replaces a sent form. */
.t-estimate .form-done {
  border-left: 4px solid var(--accent);
  color: var(--fg);
  font-size: var(--t-18);
}

.t-estimate .form-done small {
  display: block;
  margin-top: var(--s-8);
  font-size: var(--t-14);
  color: var(--fg-muted);
}

.t-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-24);
}

:is(.t-form, .t-est-panel) .field :is(input, textarea) {
  border-radius: var(--r-card);
  background: var(--bg);
}

.t-form .field input[type="file"] {
  padding: var(--s-16);
  border-style: dashed;
  cursor: pointer;
}

.t-form .field input[type="file"]::file-selector-button {
  margin-right: var(--s-12);
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.t-opt,
.t-hint {
  font-weight: 400;
  color: var(--fg-muted);
}

.t-hint {
  font-size: var(--t-14);
}

:is(.t-form, .t-est-panel) .btn {
  justify-self: start;
}

@media (max-width: 560px) {
  .t-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.t-form, .t-est-panel) .btn {
    justify-self: stretch;
  }
}

/* Footer */
.t-foot {
  padding: var(--s-64) 0 var(--s-32);
  background: var(--ink);
  color: var(--ink-muted);
  font-size: var(--t-14);
}

.t-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-32);
}

.t-foot h2 {
  margin-bottom: var(--s-12);
  font-size: var(--t-18);
  color: var(--ink-fg);
}

.t-foot p + p {
  margin-top: var(--s-8);
}

.t-foot a:hover {
  color: var(--ink-fg);
}

.t-foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-16) var(--s-32);
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  border-top: 1px solid var(--ink-border);
}

.t-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
}

.t-credit {
  margin-left: auto;
  color: var(--ink-fg);
}

@media (max-width: 720px) {
  .t-foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-credit {
    margin-left: 0;
  }
}

/* Phone-only call bar */
.t-callbar {
  display: none;
}

@media (max-width: 820px) {
  body:has(.t-callbar) {
    padding-bottom: 84px;
  }

  .t-callbar {
    position: fixed;
    z-index: 30;
    right: var(--s-12);
    bottom: calc(var(--s-12) + env(safe-area-inset-bottom));
    left: var(--s-12);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8);
    padding: var(--s-8);
    border-radius: calc(var(--r-pill) + var(--s-8));
    background: var(--ink);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / 50%);
  }

  .t-callbar .btn {
    min-height: 48px;
  }

  .t-callbar .btn-ghost {
    color: var(--ink-fg);
    border-color: var(--ink-border);
  }
}