/* ==========================================================================
   SAJ Dental Clinic — Grid Review (patient testimonials) section
   Scope: every selector is prefixed grid-review-. Visual values are CSS
   custom properties so they can map to future CMS / widget controls.
   ========================================================================== */

/* Standalone preview page only (grid-review.html) */
.grid-review-preview {
  margin: 0;
  padding-bottom: 30vh;
  background: #FFFFFF;
}

.grid-review-section {
  /* ---- Brand ---- */
  --gr-navy: #0B356D;
  --gr-navy-text: #1B3A63;
  --gr-orange: #FF6A21;
  --gr-orange-text: #E2531A;       /* AA on white for the italic heading */
  --gr-light-blue: #EAF5FF;
  --gr-body: #4D6280;
  --gr-muted: #7B8BA3;

  /* ---- Type ---- */
  --gr-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --gr-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gr-title-size: clamp(2.4rem, 4vw, 4.4rem);

  /* ---- Cards ---- */
  --gr-cols: 3;
  --gr-gap: clamp(14px, 1.1vw, 20px);
  --gr-radius: 24px;
  --gr-photo-w: clamp(120px, 8.6vw, 156px);
  --gr-pad: clamp(16px, 1.3vw, 24px);
  --gr-clamp-lines: 6;

  --gr-ease: cubic-bezier(0.22, 1, 0.36, 1);

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(64px, 5.6vw, 104px) 0 clamp(72px, 6vw, 112px);
  background:
    radial-gradient(55% 40% at 50% 20%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F1F7FF 0%, var(--gr-light-blue) 55%, #E5F0FC 100%);
  font-family: var(--gr-font-body);
  color: var(--gr-body);
  -webkit-font-smoothing: antialiased;
}

.grid-review-section *,
.grid-review-section *::before,
.grid-review-section *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Background (decorative only)
   -------------------------------------------------------------------------- */
.grid-review-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.grid-review-bg-glow {
  position: absolute;
  border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
}

.grid-review-bg-glow--left {
  left: -14%;
  top: 22%;
  width: 46vw;
  height: 40vw;
  background: radial-gradient(closest-side, rgba(188, 216, 246, 0.6), rgba(188, 216, 246, 0));
}

.grid-review-bg-glow--right {
  right: -12%;
  top: -16%;
  width: 46vw;
  height: 44vw;
  background: radial-gradient(closest-side, rgba(198, 222, 248, 0.65), rgba(198, 222, 248, 0));
}

.grid-review-bg-waves {
  position: absolute;
  left: -4%;
  top: 0;
  width: 108%;
  height: 100%;
}

.grid-review-bg-tooth {
  position: absolute;
  left: clamp(-30px, 1.5vw, 40px);
  top: clamp(24px, 4vw, 60px);
  width: clamp(130px, 13.6vw, 250px);
  aspect-ratio: 100 / 110;
  opacity: 0.85;
  filter: drop-shadow(0 20px 30px rgba(11, 53, 109, 0.08));
}

.grid-review-bg-tooth svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.grid-review-container {
  position: relative;
  z-index: 1;
  width: min(92%, 1640px);           /* the reference grid spans ~92% of the width */
  margin: 0 auto;
}

.grid-review-header {
  max-width: 820px;
  margin: 0 auto clamp(28px, 2.4vw, 40px);
  text-align: center;
}

.grid-review-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(16px, 1.6vw, 26px);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gr-navy);
}

.grid-review-eyebrow-line {
  display: block;
  width: 52px;
  height: 2px;
  border-radius: 2px;
  background: var(--gr-orange);
  transform-origin: right center;
}

.grid-review-title {
  margin: 0 0 clamp(16px, 1.6vw, 26px);
  font-family: var(--gr-font-display);
  font-size: var(--gr-title-size);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--gr-navy);
}

/* Line masks — padding leaves room for italic overhang + descenders */
.grid-review-title-line {
  display: block;
  overflow: hidden;
  padding: 0 0.1em 0.12em;
  margin-bottom: -0.12em;
}

.grid-review-title-text,
.grid-review-title-highlight {
  display: inline-block;
}

.grid-review-title-highlight {
  font-style: italic;
  color: var(--gr-orange-text);
}

.grid-review-intro {
  max-width: 40em;
  margin: 0 auto;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  color: var(--gr-navy-text);
}

/* --------------------------------------------------------------------------
   Grid + cards
   -------------------------------------------------------------------------- */
.grid-review-grid {
  display: grid;
  grid-template-columns: repeat(var(--gr-cols), minmax(0, 1fr));
  gap: var(--gr-gap);
}

.grid-review-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--gr-photo-w) minmax(0, 1fr);
  gap: clamp(14px, 1.5vw, 28px);
  padding: var(--gr-pad);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--gr-radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px -28px rgba(11, 53, 109, 0.3), 0 2px 6px rgba(11, 53, 109, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.6s var(--gr-ease), box-shadow 0.6s ease;
}

/* Orange accent line — becomes visible on hover */
.grid-review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gr-pad) + var(--gr-photo-w) + clamp(14px, 1.5vw, 28px));
  width: 64px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gr-orange), rgba(255, 106, 33, 0));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: opacity 0.5s ease, transform 0.6s var(--gr-ease);
}

.grid-review-photo {
  position: relative;
  align-self: start;
  margin: 0;
  aspect-ratio: 144 / 202;
  overflow: hidden;
  border-radius: 16px;
  background: #DCE8F6;
}

.grid-review-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--gr-ease);
}

.grid-review-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 4px;
}

.grid-review-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Stars: CSS-masked shapes, so colour and size come from CSS */
.grid-review-stars {
  display: flex;
  gap: 3px;
  margin: 8px 0 0;
}

.grid-review-star {
  width: 19px;
  height: 19px;
  background: linear-gradient(180deg, #FF9A3D, var(--gr-orange));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.1l-5.9 3.2 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.1l-5.9 3.2 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.grid-review-star--empty {
  background: #D3DFEE;
}

.grid-review-quote-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(40px, 2.8vw, 48px);
  height: clamp(40px, 2.8vw, 48px);
  margin: -2px -4px 0 0;
  border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%;
  background: #E1EFFD;
  color: #1E7BE0;
  transition: transform 0.6s var(--gr-ease), background-color 0.5s ease;
}

.grid-review-quote-icon svg {
  width: 56%;
  height: 56%;
  fill: currentColor;
}

.grid-review-quote {
  margin: 0 0 14px;
}

.grid-review-text {
  margin: 0;
  font-size: clamp(0.9375rem, 0.98vw, 1.0625rem);
  line-height: 1.55;
  color: var(--gr-body);
}

.grid-review-text::before { content: "\201C"; }
.grid-review-text::after  { content: "\201D"; }

/* Long reviews are clamped once JS has measured them (see .is-clamped) */
.grid-review-card.is-clamped:not(.is-expanded) .grid-review-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--gr-clamp-lines);
  line-clamp: var(--gr-clamp-lines);
  overflow: hidden;
}

.grid-review-more {
  align-self: flex-start;
  margin: -6px 0 12px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--gr-navy);
  font: 600 0.875rem/1.3 var(--gr-font-body);
  text-decoration: underline;
  text-decoration-color: rgba(255, 106, 33, 0.6);
  text-underline-offset: 4px;
  cursor: pointer;
}

.grid-review-more:hover {
  text-decoration-color: var(--gr-orange);
}

.grid-review-more:focus-visible {
  outline: 2px solid var(--gr-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.grid-review-author {
  margin-top: auto;
}

.grid-review-name {
  margin: 0 0 2px;
  font-size: clamp(1rem, 1.02vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gr-navy);
}

.grid-review-location {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gr-muted);
}

/* --------------------------------------------------------------------------
   Hover (pointer devices only)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .grid-review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -28px rgba(11, 53, 109, 0.4), 0 2px 6px rgba(11, 53, 109, 0.04);
  }

  .grid-review-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .grid-review-card:hover .grid-review-photo img {
    transform: scale(1.03);
  }

  .grid-review-photo:hover img,
  .grid-review-card:hover .grid-review-photo:hover img {
    transform: scale(1.04);
  }

  .grid-review-card:hover .grid-review-quote-icon {
    transform: translate(-2px, -2px) rotate(-6deg);
    background: #D5E8FC;
  }
}

/* --------------------------------------------------------------------------
   Reveal pre-state + fail-safe
   -------------------------------------------------------------------------- */
.grid-review-section:not(.is-animated) [data-grid-review-reveal] {
  opacity: 0;
  animation: grid-review-failsafe 0.8s ease 1.8s forwards;
}

@keyframes grid-review-failsafe {
  to { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop: still 3 × 2, tighter photo */
@media (max-width: 1365px) {
  .grid-review-section {
    --gr-photo-w: clamp(108px, 9vw, 124px);
    --gr-clamp-lines: 7;
  }

  .grid-review-card::before {
    left: calc(var(--gr-pad) + var(--gr-photo-w) + 16px);
  }
}

/* iPad landscape + portrait: 2 columns */
@media (max-width: 1199px) {
  .grid-review-section {
    --gr-cols: 2;
    --gr-title-size: clamp(2.3rem, 5vw, 3.4rem);
    --gr-photo-w: clamp(110px, 13vw, 140px);
    --gr-clamp-lines: 6;
  }

  .grid-review-bg-tooth {
    width: 130px;
    left: -24px;
    opacity: 0.6;
  }
}

/* iPad portrait + mobile: compact card — small photo beside stars and
   author, review text running the full card width underneath */
@media (max-width: 899px) {
  .grid-review-section {
    --gr-photo-w: clamp(76px, 11vw, 96px);
    --gr-pad: 18px;
    --gr-radius: 20px;
    --gr-clamp-lines: 7;
  }

  .grid-review-card {
    grid-template-columns: var(--gr-photo-w) minmax(0, 1fr);
    grid-template-areas:
      "photo meta"
      "photo author"
      "quote quote"
      "more  more";
    grid-template-rows: auto auto auto 1fr;   /* spare height (row-stretched cards) goes to the end */
    column-gap: 16px;
    row-gap: 0;
    align-content: start;
  }

  .grid-review-body {
    display: contents;
  }

  .grid-review-photo {
    grid-area: photo;
    aspect-ratio: 1;
    border-radius: 14px;
  }

  .grid-review-photo img {
    object-position: 50% 22%;
  }

  .grid-review-meta {
    grid-area: meta;
    margin-bottom: 6px;
  }

  .grid-review-stars {
    margin-top: 4px;
  }

  .grid-review-author {
    grid-area: author;
    align-self: start;
    margin: 0;
  }

  .grid-review-quote {
    grid-area: quote;
    margin: 16px 0 0;
  }

  .grid-review-more {
    grid-area: more;
    align-self: start;
    justify-self: start;
    margin: 10px 0 0;
  }

  .grid-review-card::before {
    left: var(--gr-pad);
  }

  .grid-review-star {
    width: 16px;
    height: 16px;
  }

  .grid-review-quote-icon {
    width: 36px;
    height: 36px;
  }
}

/* Mobile: 1 column, photo stays beside the text */
@media (max-width: 639px) {
  .grid-review-section {
    --gr-cols: 1;
    --gr-title-size: clamp(2.1rem, 10vw, 2.75rem);
    --gr-photo-w: clamp(88px, 26vw, 120px);
    --gr-clamp-lines: 7;
    padding-top: 56px;
  }

  .grid-review-eyebrow {
    gap: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
  }

  .grid-review-eyebrow-line {
    width: 32px;
  }

  .grid-review-intro {
    font-size: 0.9375rem;
  }

  .grid-review-bg-tooth {
    width: 90px;
    top: 10px;
    left: -22px;
    opacity: 0.45;
  }
}

/* Very narrow phones: slightly smaller photo + quote badge */
@media (max-width: 379px) {
  .grid-review-section {
    --gr-photo-w: 68px;
    --gr-pad: 16px;
  }

  .grid-review-quote-icon {
    width: 32px;
    height: 32px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .grid-review-section:not(.is-animated) [data-grid-review-reveal] {
    animation-delay: 0.6s;
  }

  .grid-review-card,
  .grid-review-card::before,
  .grid-review-photo img,
  .grid-review-quote-icon {
    transition: none;
  }

  .grid-review-section .grid-review-card:hover,
  .grid-review-section .grid-review-card:hover .grid-review-photo img,
  .grid-review-section .grid-review-card:hover .grid-review-quote-icon {
    transform: none;
  }
}