/* ==========================================================================
   avinashanandsingh.com/results.php — the testimonial gallery
   Rebuilt 20 Sep 2026.

   The site's own language: cream ground, Cinzel display, Montserrat body, gold
   as the single accent — the same palette the home page's "Results &
   Transformations" strip uses, because this page is the full version of it.

   The testimonial images are branded purple cards with their own artwork, so
   the page deliberately stays light and quiet around them: a warm neutral
   ground, thin gold rules, and frames that hold the images without competing
   with them.
   ========================================================================== */

.rs {
   --ground: #faf7f2;
   --ground-2: #f2ece2;
   --ink: #2a2118;
   --muted: #6f6355;
   --gold: #c2a74e;
   --gold-soft: rgba(194, 167, 78, 0.14);
   --line: rgba(42, 33, 24, 0.12);
   --card: #efe9e1;
   --serif: "Cinzel", Georgia, serif;

   background: var(--ground);
   color: var(--ink);
   font-family: "Montserrat", system-ui, sans-serif;
}

.rs .wrap {
   width: min(100% - 32px, 1200px);
   margin-inline: auto;
}

/* ----------------------------------------------------------------- head -- */

.rs-head {
   padding: clamp(40px, 6vw, 84px) 0 clamp(28px, 4vw, 44px);
   text-align: center;
   background:
      radial-gradient(
         700px 320px at 50% -10%,
         var(--gold-soft),
         transparent 70%
      ),
      var(--ground);
}

.rs-eyebrow {
   display: inline-block;
   margin: 0 0 14px;
   padding: 6px 16px;
   border: 1px solid var(--gold);
   border-radius: 999px;
   background: #fff;
   color: var(--gold);
   font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.73rem);
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.rs-head h1 {
   margin: 0 0 14px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.2rem);
   line-height: 1.14;
   color: var(--ink);
   text-wrap: balance;
}

.rs-head p {
   max-width: 62ch;
   margin: 0 auto;
   font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
   line-height: 1.65;
   color: var(--muted);
}

.rs-count {
   margin-top: 18px;
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--gold);
}

/* ----------------------------------------------------------------- tabs -- */
/*
   Horizontally scrollable on a phone rather than wrapping to three rows —
   six categories will not fit across 360px and a wrapped tab bar pushes the
   gallery below the fold. The negative margin lets it run to the screen edge
   so it reads as scrollable.
*/
.rs-tabs {
   position: sticky;
   top: 0;
   z-index: 20;
   padding: 14px 0;
   background: rgba(250, 247, 242, 0.94);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--line);
}

.rs-tabs .inner {
   display: flex;
   gap: 10px;
   width: min(100% - 32px, 1200px);
   margin-inline: auto;
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.rs-tabs .inner::-webkit-scrollbar {
   display: none;
}

@media (min-width: 760px) {
   .rs-tabs .inner {
      flex-wrap: wrap;
      justify-content: center;
      overflow: visible;
   }
}

.rs-tab {
   flex: none;
   min-height: 42px;
   padding: 0 18px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: #fff;
   color: var(--ink);
   font-family: inherit;
   font-size: 0.86rem;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
   touch-action: manipulation;
   transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rs-tab:hover {
   border-color: var(--gold);
   color: var(--gold);
}

.rs-tab.active {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
}

.rs-tab:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 2px;
}

/* --------------------------------------------------------------- gallery -- */

.rs-gallery {
   padding: clamp(28px, 4.5vw, 56px) 0 clamp(48px, 7vw, 96px);
}

.rs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: clamp(12px, 2vw, 22px);
}

@media (min-width: 620px) {
   .rs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
   .rs-grid { grid-template-columns: repeat(4, 1fr); }
}

.rs-item {
   /* The source images are ~0.58 portrait. Holding that ratio means the grid
      never reflows as pictures arrive, and nothing is cropped. */
   aspect-ratio: 9 / 15.5;
   margin: 0;
   border: 1px solid var(--line);
   border-radius: 14px;
   overflow: hidden;
   background: var(--card);
   box-shadow: 0 6px 16px rgba(42, 33, 24, 0.08);
   cursor: zoom-in;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rs-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 30px rgba(42, 33, 24, 0.16);
}

.rs-item img,
.rs-item video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
}

.rs-item video {
   cursor: default;
   object-fit: contain;
   background: #000;
}

.rs-empty {
   padding: 60px 20px;
   text-align: center;
   color: var(--muted);
   font-size: 0.95rem;
}

/* -------------------------------------------------------------- lightbox -- */
/*
   Not decoration. These are screenshots of written messages; in a 300px grid
   cell not one word is readable, so without a way to open them the gallery
   shows that testimonials exist without letting anyone read one.
*/
.rs-lightbox {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: none;
   place-items: center;
   padding: clamp(16px, 4vw, 48px);
   background: rgba(20, 15, 10, 0.92);
}

.rs-lightbox.open {
   display: grid;
}

.rs-lightbox img {
   max-width: 100%;
   max-height: 88vh;
   border-radius: 12px;
   box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.rs-lb-close,
.rs-lb-nav {
   position: absolute;
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.45);
   color: #fff;
   font-size: 1.2rem;
   line-height: 1;
   cursor: pointer;
   touch-action: manipulation;
}

.rs-lb-close { top: 18px; right: 18px; }
.rs-lb-nav.prev { left: 14px; top: 50%; translate: 0 -50%; }
.rs-lb-nav.next { right: 14px; top: 50%; translate: 0 -50%; }

.rs-lb-close:hover,
.rs-lb-nav:hover { background: var(--gold); border-color: var(--gold); }

.rs-lb-count {
   position: absolute;
   bottom: 18px;
   left: 50%;
   translate: -50% 0;
   font-size: 0.8rem;
   letter-spacing: 0.1em;
   color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
   .rs-item,
   .rs-tab { transition: none; }
   .rs-item:hover { transform: none; }
}