/* ==========================================================================
   Testimonials page — recreates the "Testimonials" UI kit from The Writers
   Central design system. All design tokens are scoped to `.twc-testimonials`
   and every class is prefixed (tw-/twc-) so this file cannot leak into or
   collide with the existing site theme (vendor.css / style.css).
   Review content is placeholder copy — swap for real verified reviews before
   adding Review/AggregateRating structured data.
   Fonts, button colors and filter tabs are matched to the existing site theme
   (Outfit / Josefin Sans, brand green #06D6A0 + deep teal #073B4C gradient).
   ========================================================================== */

.twc-testimonials {
  /* --- Brand: teal-green --- */
  --green-50:#EEFBF7; --green-100:#D7F6EC; --green-200:#AEEBD8; --green-300:#6FE0BF;
  --green-400:#2DD3A4; --green-500:#06D6A0; --green-600:#05B488; --green-700:#058F6C;
  --green-800:#0A6B53; --green-900:#0C4D3D;
  /* --- Ink --- */
  --ink-900:#08191F; --ink-800:#0E2730; --ink-700:#163742; --ink-600:#234B57; --ink-500:#345E6B;
  /* --- Warm neutrals --- */
  --neutral-0:#FFFFFF; --neutral-50:#F7FAF9; --neutral-100:#EFF3F2; --neutral-200:#E2E9E7;
  --neutral-300:#CDD8D5; --neutral-400:#A2B0AC; --neutral-500:#74837F; --neutral-600:#4F5D59;
  --neutral-700:#38433F; --neutral-800:#232C29;
  /* --- Accent gold --- */
  --gold-300:#FFD166; --gold-400:#FFB703; --gold-500:#F59E0B;
  /* --- Platform colors --- */
  --trustpilot-green:#00B67A; --trustpilot-dark:#191919;
  --google-blue:#4285F4; --google-red:#EA4335; --google-yellow:#FBBC05; --google-green:#34A853;
  --clutch-red:#FF3D2E; --clutch-dark:#17313B;

  /* --- Semantic aliases --- */
  --brand:var(--green-500); --brand-hover:var(--green-600); --brand-press:var(--green-700);
  --brand-soft:var(--green-100); --brand-soft-2:var(--green-50); --brand-contrast:var(--ink-900);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--neutral-500);
  --text-ondark:var(--neutral-50); --text-ondark-muted:#9FB4AE; --text-link:var(--green-700);
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-100);
  --surface-dark:var(--ink-900); --surface-dark-2:var(--ink-800); --surface-brand:var(--green-500);
  --border:var(--neutral-200); --border-strong:var(--neutral-300); --border-ondark:rgba(255,255,255,0.12);
  --star:var(--gold-400); --star-empty:var(--neutral-300); --focus-ring:var(--green-400);

  /* --- Type (matched to site theme: Josefin Sans headings, Outfit body) --- */
  --font-serif:"Josefin Sans",sans-serif;
  --font-sans:"Outfit",sans-serif;
  --font-display:var(--font-serif); --font-heading:var(--font-serif);
  --font-body:var(--font-sans); --font-ui:var(--font-sans);
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.875rem; --text-4xl:3.75rem; --text-5xl:4.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.12em;

  /* --- Spacing / radii / shadows / motion --- */
  --container-sm:640px; --container-md:880px; --container-lg:1120px; --container-xl:1280px;
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(8,25,31,0.06); --shadow-sm:0 2px 6px rgba(8,25,31,0.07);
  --shadow-md:0 8px 24px -8px rgba(8,25,31,0.14); --shadow-lg:0 18px 48px -16px rgba(8,25,31,0.20);
  --shadow-xl:0 32px 70px -24px rgba(8,25,31,0.26); --shadow-brand:0 14px 34px -12px rgba(6,214,160,0.45);
  --shadow-focus:0 0 0 4px rgba(45,211,164,0.35);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:400ms;

  background:var(--surface-page);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Zero-specificity baseline so component classes below always win */
.twc-testimonials :where(*,*::before,*::after){box-sizing:border-box;}
.twc-testimonials :where(h1,h2,h3,h4,h5){margin:0;font-family:var(--font-heading);color:var(--text-strong);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);}
.twc-testimonials :where(p){margin:0;}
.twc-testimonials :where(a){color:var(--text-link);text-decoration:none;}
.twc-testimonials :where(a):hover{text-decoration:none;}
.twc-testimonials :where(svg){display:inline-block;vertical-align:middle;}

.tw-eyebrow{
  font-family:var(--font-ui); font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand-press);
}

/* ---------- Avatar ---------- */
.twc-avatar{
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  overflow:hidden; flex:none; font-family:var(--font-ui); font-weight:var(--weight-bold);
  background:var(--green-100); color:var(--brand-press); border:2px solid var(--neutral-0);
  box-shadow:var(--shadow-xs); user-select:none;
}
.twc-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.twc-avatar--sm{width:32px;height:32px;font-size:12px;}
.twc-avatar--md{width:44px;height:44px;font-size:15px;}
.twc-avatar--lg{width:60px;height:60px;font-size:20px;}

/* ---------- Button ---------- */
.twc-btn{
  --_bg:var(--brand); --_fg:var(--brand-contrast); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-ui); font-weight:var(--weight-bold); line-height:1; white-space:nowrap;
  border:1.5px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-pill); cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.twc-btn:hover{text-decoration:none;}
.twc-btn:active{transform:translateY(1px) scale(0.99);}
.twc-btn--sm{font-size:var(--text-sm);padding:9px 16px;}
.twc-btn--md{font-size:var(--text-base);padding:13px 24px;}
.twc-btn--lg{font-size:var(--text-md);padding:17px 32px;}
.twc-btn--primary{--_bg:var(--brand);--_fg:var(--brand-contrast);box-shadow:var(--shadow-brand);}
.twc-btn--primary:hover{--_bg:var(--brand-hover);}
.twc-btn--secondary{--_bg:var(--ink-900);--_fg:var(--neutral-50);}
.twc-btn--secondary:hover{--_bg:var(--ink-800);}
.twc-btn--outline{--_bg:transparent;--_fg:var(--text-strong);--_bd:var(--border-strong);}
.twc-btn--outline:hover{--_bd:var(--brand);--_fg:var(--brand-press);}

/* ---------- Star rating ---------- */
.twc-stars{display:inline-flex;align-items:center;gap:3px;line-height:1;}
.twc-stars__icon{display:block;}
.twc-stars--trustpilot .twc-stars__tile{background:var(--trustpilot-green);border-radius:3px;padding:2px;display:inline-flex;}
.twc-stars--trustpilot .twc-stars__tile--empty{background:var(--neutral-300);}

/* ---------- Source badge ---------- */
.twc-source{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-ui);
  font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--text-body); line-height:1;
}
.twc-source__glyph{display:inline-flex;flex:none;}
.twc-source__name{font-weight:var(--weight-bold);color:var(--text-strong);}
.twc-source__verified{display:inline-flex;align-items:center;gap:4px;color:var(--green-700);font-size:var(--text-xs);font-weight:var(--weight-bold);}

/* ---------- Source filter ---------- */
.twc-filter{
  display:inline-flex; align-items:center; gap:4px; background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px; flex-wrap:wrap;
}
.twc-filter__btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui);
  font-weight:var(--weight-bold); font-size:var(--text-sm); color:var(--text-body);
  background:transparent; border:none; cursor:pointer; padding:9px 16px;
  border-radius:var(--radius-pill); line-height:1;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.twc-filter__btn:hover{color:var(--text-strong);}
.twc-filter__btn[aria-pressed="true"]{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-sm);}
.twc-filter__count{
  font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-muted);
  background:var(--surface-sunken); border-radius:var(--radius-pill); padding:2px 7px; line-height:1.4;
}
.twc-filter__btn[aria-pressed="true"] .twc-filter__count{background:var(--brand-soft);color:var(--brand-press);}

/* ---------- Rating summary ---------- */
.twc-summary{
  display:flex; flex-direction:column; gap:10px; background:var(--surface-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px;
  box-shadow:var(--shadow-sm); min-width:0;
}
.twc-summary__head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.twc-summary__score-row{display:flex;align-items:baseline;gap:10px;}
.twc-summary__score{font-family:var(--font-heading);font-weight:var(--weight-extra);font-size:var(--text-3xl);color:var(--text-strong);line-height:1;letter-spacing:var(--tracking-tight);}
.twc-summary__out{font-size:var(--text-md);color:var(--text-muted);font-family:var(--font-ui);font-weight:var(--weight-semibold);}
.twc-summary__count{font-size:var(--text-sm);color:var(--text-muted);font-family:var(--font-ui);}
.twc-summary__count b{color:var(--text-strong);font-weight:var(--weight-bold);}
.twc-summary--dark{background:var(--ink-800);border-color:var(--border-ondark);box-shadow:none;}
.twc-summary--dark .twc-summary__score{color:#fff;}
.twc-summary--dark .twc-summary__count{color:var(--text-ondark-muted);}
.twc-summary--dark .twc-summary__count b{color:#fff;}
.twc-summary--dark .twc-source__name{color:#fff;}

/* ---------- Review card ---------- */
.twc-review{
  display:flex; flex-direction:column; gap:14px; background:var(--surface-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  break-inside:avoid;
}
.twc-review--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.twc-review--featured{border-color:transparent;box-shadow:var(--shadow-lg);outline:2px solid var(--brand);outline-offset:-2px;}
.twc-review__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.twc-review__who{display:flex;align-items:center;gap:12px;min-width:0;}
.twc-review__name{font-family:var(--font-ui);font-weight:var(--weight-bold);color:var(--text-strong);font-size:var(--text-md);line-height:1.2;}
.twc-review__meta{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px;}
.twc-review__title{font-family:var(--font-heading);font-weight:var(--weight-bold);color:var(--text-strong);font-size:var(--text-lg);line-height:1.25;margin:0;}
.twc-review__quote{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);margin:0;}
.twc-review__quote::before{content:"\201C";color:var(--brand);font-family:var(--font-heading);font-weight:700;}
.twc-review__quote::after{content:"\201D";color:var(--brand);font-family:var(--font-heading);font-weight:700;}
.twc-review__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;border-top:1px solid var(--border);margin-top:2px;}
.twc-review__date{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-ui);}

/* ---------- Hero ---------- */
.tw-hero{
  background:radial-gradient(900px 420px at 85% -10%, rgba(6,214,160,0.18), transparent 60%), var(--ink-900);
  color:var(--text-ondark); 
  /* padding:88px 0 72px; */
}
.tw-hero__inner{
  margin:0 auto; padding-inline:32px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}
.tw-hero__eyebrow{color:var(--green-400);}
.tw-hero__title{
  font-family:var(--font-display); color:#fff; font-size:var(--text-4xl); line-height:1.04;
  letter-spacing:var(--tracking-tight); margin:16px 0 18px; font-weight:var(--weight-bold);
}
.tw-hero__lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-ondark-muted);max-width:46ch;}
.tw-hero__lede b{color:#fff;font-weight:var(--weight-bold);}
.tw-hero__overall{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border-ondark);
}
.tw-hero__overall-score{font-family:var(--font-heading);font-weight:var(--weight-extra);font-size:var(--text-xl);color:#fff;}
.tw-hero__overall-sub{font-size:var(--text-sm);color:var(--text-ondark-muted);}
.tw-hero__ratings{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tw-hero__ratings > :first-child{grid-column:1 / -1;}
@media (max-width:980px){
  .tw-hero__inner{grid-template-columns:1fr;gap:36px;}
  .tw-hero__title{font-size:var(--text-3xl);}
}
@media (max-width:560px){.tw-hero__ratings{grid-template-columns:1fr;}}

/* ---------- Grid section ---------- */
.tw-grid-section{padding:64px 0 24px;}
.tw-grid-section__inner{max-width:var(--container-xl);margin:0 auto;padding-inline:32px;}
.tw-grid-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.tw-grid-toolbar__title{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--text-strong);margin:0;}
.tw-grid-toolbar__sub{font-size:var(--text-base);color:var(--text-muted);margin-top:6px;}
.tw-masonry{columns:3 320px;column-gap:20px;}
.tw-masonry > *{margin-bottom:20px;}
@media (max-width:700px){.tw-masonry{columns:1;}}
.tw-grid-more{display:flex;justify-content:center;padding:28px 0 8px;}

/* ---------- CTA band ---------- */
.tw-cta{padding:28px 0 80px;}
.tw-cta__inner{
  /* max-width:var(--container-lg);  */
  margin:0 auto; padding:64px 40px; text-align:center;
  border-radius:var(--radius-2xl);
  background:radial-gradient(700px 300px at 50% 120%, rgba(8,25,31,0.18), transparent 60%), var(--brand);
  box-shadow:var(--shadow-lg);
}
.tw-cta__eyebrow{color:var(--ink-800);}
.tw-cta__title{font-family:var(--font-display);color:var(--ink-900);font-size:var(--text-3xl);line-height:1.08;margin:14px auto 14px;max-width:30ch;}
.tw-cta__sub{font-size:var(--text-md);color:var(--ink-800);max-width:56ch;margin:0 auto 28px;line-height:var(--leading-relaxed);}
.tw-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ==========================================================================
   Theme match — buttons & filter tabs aligned to the site's existing styling
   (Josefin Sans, uppercase, brand gradient #073B4C → #06D6A0).
   ========================================================================== */
.twc-testimonials .twc-btn{
  font-family:"Josefin Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
/* Solid CTAs use the site's signature teal→green gradient with white text */
.twc-testimonials .twc-btn--primary,
.twc-testimonials .twc-btn--secondary{
  background:linear-gradient(166deg,#073b4c 5%,#06d6a0 100%);
  color:#fff; border-color:transparent; box-shadow:var(--shadow-md);
}
.twc-testimonials .twc-btn--primary:hover,
.twc-testimonials .twc-btn--secondary:hover{
  background:linear-gradient(166deg,#06d6a0 5%,#073b4c 100%);
  color:#fff;
}
/* Outline buttons: deep-teal border (readable on both light & green surfaces),
   fill with the brand gradient on hover like the site's .btn */
.twc-testimonials .twc-btn--outline{
  background:transparent; color:#073b4c; border-color:#073b4c;
}
.twc-testimonials .twc-btn--outline:hover{
  background:linear-gradient(166deg,#073b4c 5%,#06d6a0 100%);
  color:#fff; border-color:transparent;
}
/* Filter tabs: active pill uses the brand gradient + white, matching site CTAs */
.twc-testimonials .twc-filter__btn{ font-family:"Josefin Sans",sans-serif; }
.twc-testimonials .twc-filter__btn[aria-pressed="true"]{
  background:linear-gradient(166deg,#073b4c 5%,#06d6a0 100%);
  color:#fff; box-shadow:var(--shadow-sm);
}
.twc-testimonials .twc-filter__btn[aria-pressed="true"] .twc-filter__count{
  background:rgba(255,255,255,0.22); color:#fff;
}