/* ==========================================================================
   td-ui.css — additions from the design review that the layout package has no
   markup for: the review "See more" clamp, the project lightbox, the mobile
   floating call button. Layout tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reviews — 130px container, "See more" past that (Figma 253:7466 = 320x130,
   expanded state 207:5445)
   -------------------------------------------------------------------------- */
/* On the card, so the quote can read it */
.review-card {
  --review-clamp: 130px;
}

/* The quote box is a fixed 130px in the design (Figma 207:5431 — 318x130).
   The text is cut to fit and the script sets the exact whole-line height, so
   this only hides the full text for the frame before it runs. */
.review-card blockquote {
  overflow: hidden;
}

/* Inline at the end of the quote, in the quote's own colour and size, one step
   heavier — measured off the Figma export: #E7E7E7, stem 4px -> 5px at 3x, no
   underline. */
.review-card__more {
  font: inherit;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.review-card__more:hover {
  color: var(--c-text);
}

/* The layout raises the card gap to 80px from 64rem up. That was right while
   the quote was two placeholder lines and space-between had slack; with the
   design's real 130px quote box it forces the card to 315px instead of the
   290px in Figma (207:5429 — a 242px inner box plus 24px padding). 40px is the
   gap the design's own card carries, and space-between still spreads the two
   blocks across the card's 292px minimum. */
@media (min-width: 64rem) {
  .review-card {
    row-gap: var(--sp-10);
  }
}

/* Figma dims the location line to 80% (207:5435) */
.review-card__role {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.85);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.lightbox__dialog {
  position: relative;
  display: block;
  max-inline-size: min(80rem, 100%);
  outline: none;
}

.lightbox__img {
  max-inline-size: 100%;
  max-block-size: calc(100dvh - var(--sp-20));
  inline-size: auto;
  border-radius: var(--r-xs);
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background-image: var(--grad-btn);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  border-color: var(--c-line-hover);
  color: var(--c-accent-light);
}

.lightbox__close svg,
.lightbox__nav svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.lightbox__close {
  position: absolute;
  inset-block-start: calc(var(--sp-10) * -1);
  inset-inline-end: 0;
  z-index: 1;
}

/* Over the photo edges: in flow they were pushed outside the viewport as soon
   as the image took the full dialog width. */
.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 1;
  background-color: rgba(26, 26, 26, 0.6);
}

.lightbox__nav--prev {
  inset-inline-start: var(--sp-3);
}

.lightbox__nav--next {
  inset-inline-end: var(--sp-3);
}

.lightbox__nav[hidden] {
  display: none;
}

/* The photos that open it get a pointer so the affordance is visible */
.is-zoomable {
  cursor: zoom-in;
}

.lightbox__img {
  display: block;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Floating call button — mobile only (Figma 243:6036)
   -------------------------------------------------------------------------- */
.call-fab {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.75rem;  /* 60px outer ring */
  block-size: 3.75rem;
  padding: 0.25rem;      /* the 4px gap to the 52px inner disc */
  border: 1px solid #ffebd5;
  border-radius: 100px;
  background-color: rgba(255, 235, 213, 0.1);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  transition: scale var(--dur) var(--ease);
}

.call-fab::before {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 100px;
  background-image: linear-gradient(152deg, #fcb375 0%, #e84e0e 50%, #7b2813 100%);
}

.call-fab svg {
  position: relative;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--c-text);
}

.call-fab:active {
  scale: 0.96;
}

@media (min-width: 64rem) {
  .call-fab {
    display: none;
  }
}

/* Keep it clear of the cookie notice and any open sheet */
.no-scroll .call-fab {
  display: none;
}

/* `.work-card { display: flex }` beats the UA's [hidden] rule, so the filter
   would set the attribute without anything disappearing. Restate it. */
.work-card[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Quote modal — the contact form reused inside a dialog (Figma 243:5902)

   On the contact page the form draws its own 16px frame (the layout's own
   container). Inside a modal that frame sits inside the dialog's frame, so it
   is dropped here: per the design the dialog itself is the only frame, 560px
   wide with 24px padding.
   -------------------------------------------------------------------------- */
.modal .contact-form {
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* Figma stretches the submit across the dialog; on the page it stays auto */
.modal .contact-form .wpcf7-submit,
.modal .contact-form .btn--primary {
  inline-size: 100%;
}

/* Zoom affordance on the before/after cards — the rest of .compare shows an
   ew-resize cursor, so nothing there suggests the photo can be enlarged. */
.compare__zoom {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: rgba(26, 26, 26, 0.55);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  color: var(--c-text);
  cursor: zoom-in;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.compare__zoom svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.compare__zoom:hover {
  border-color: var(--c-line-hover);
  background-color: rgba(26, 26, 26, 0.78);
}

/* The photo itself is pointer-events:none for the swipe, so the zoom cursor
   has to sit on the slide. */
.gallery__slide {
  cursor: zoom-in;
}

.gallery__slide .compare {
  cursor: ew-resize;
}