/* C:\Dropbox\dvlpmnt\web_dev\chzr.llc\sites\CHZR\it\testimonials\testimonials.css */
/* /sites/CHZR/it/testimonials/testimonials.css */
/*
   Ported from pending/testimonials/public/assets/css/app.css, keeping the
   design exactly (hero, marquee, 3D-hover card wall, Staatliches font) per the
   owner's explicit request. Every selector is prefixed .tst- (was bare .card/
   .btn/.badge/.table/etc. in the original) since this page loads alongside
   core/inc/header.php's own global chzr.css on the SAME page -- those generic
   names are already used platform-wide with different styling, and colliding
   would break either this page or the shared header/footer chrome around it.
*/
:root {
    --tst-primary: #f59e0b;
    --tst-primary-600: #d97706;
    --tst-primary-50: #fffbeb;
    --tst-violet: #8b5cf6;
    --tst-ink: #0f172a;
    --tst-ink-2: #334155;
    --tst-muted: #64748b;
    --tst-border: #e2e8f0;
    --tst-bg: #f8fafc;
    --tst-card-bg: #ffffff;
    --tst-radius: 16px;
    --tst-radius-sm: 10px;
    --tst-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --tst-shadow: 0 6px 14px -4px rgba(15, 23, 42, .12);
    --tst-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .22);
    --tst-font-display: "Staatliches", "Segoe UI", system-ui, sans-serif;
}

@font-face {
    font-family: "Staatliches";
    src: url("https://chzr.llc/public/fonts/staatliches-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

.tst-page { color: var(--tst-ink); }
.tst-page img { max-width: 100%; }
.tst-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.tst-narrow { max-width: 720px; }
.tst-muted { color: var(--tst-muted); }

/* buttons */
.tst-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; font-size: .92rem; font-weight: 600;
    padding: 10px 18px; border-radius: var(--tst-radius-sm); border: 1px solid transparent;
    cursor: pointer; transition: all .15s ease; text-decoration: none; line-height: 1.2;
}
.tst-btn:hover { transform: translateY(-1px); }
.tst-btn-primary { background: linear-gradient(135deg, var(--tst-primary), var(--tst-primary-600)); color: #fff; box-shadow: var(--tst-shadow-sm); }
.tst-btn-primary:hover { filter: brightness(1.05); color: #fff; }
.tst-btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.25); }
.tst-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.tst-btn-lg { padding: 13px 24px; font-size: 1rem; border-radius: 12px; }
.tst-btn-block { width: 100%; }

/* hero */
.tst-hero { position: relative; background: #0f172a; color: #fff; overflow: hidden; padding: 64px 0 56px; border-radius: var(--tst-radius); }
.tst-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(55% 70% at 85% 5%, rgba(139, 92, 246, .28), transparent 60%),
        radial-gradient(50% 65% at 8% 25%, rgba(245, 158, 11, .22), transparent 60%),
        radial-gradient(40% 55% at 60% 100%, rgba(99, 102, 241, .2), transparent 60%);
}
.tst-hero-inner { position: relative; text-align: center; }
.tst-hero-eyebrow {
    display: inline-block; padding: 6px 16px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: var(--tst-primary); font-weight: 700; font-size: .8rem; margin-bottom: 20px;
}
.tst-hero-title {
    font-family: var(--tst-font-display); font-weight: 400; letter-spacing: .01em;
    font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08;
    max-width: 860px; margin: 0 auto 18px; color: #fff;
}
.tst-hero-sub { color: #cbd5e1; font-size: 1.05rem; max-width: 640px; margin: 0 auto; }
.tst-hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.tst-hero-stats { display: flex; justify-content: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.tst-hero-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 150px; padding: 16px 22px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px; backdrop-filter: blur(6px);
}
.tst-hero-stat-num { font-family: var(--tst-font-display); font-size: 2rem; line-height: 1; color: var(--tst-primary); }
.tst-hero-stat-label { color: #cbd5e1; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: 3px; }

/* marquee */
.tst-marquee { background: linear-gradient(90deg, var(--tst-primary), var(--tst-primary-600)); overflow: hidden; padding: 13px 0; position: relative; margin-top: 1.2rem; border-radius: var(--tst-radius-sm); }
.tst-marquee-track { display: flex; gap: 40px; white-space: nowrap; animation: tst-marquee 30s linear infinite; width: max-content; }
.tst-marquee:hover .tst-marquee-track { animation-play-state: paused; }
.tst-marquee-item { font-family: var(--tst-font-display); font-size: 1.2rem; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
@keyframes tst-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* sections */
.tst-section { padding: 48px 0; }
.tst-section-title { font-size: 1.6rem; text-align: center; margin-bottom: 6px; color: var(--tst-ink); }
.tst-section-sub { color: var(--tst-muted); text-align: center; margin-bottom: 28px; }
.tst-featured-section { background: linear-gradient(180deg, var(--tst-bg), #fff8eb); border-radius: var(--tst-radius); }
.tst-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* testimonial cards */
.tst-wall { columns: 3; column-gap: 18px; }
@media (max-width: 960px) { .tst-wall, .tst-featured-grid { columns: 2; grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tst-wall { columns: 1; } .tst-featured-grid { grid-template-columns: 1fr; } }

.tst-card {
    position: relative; break-inside: avoid; margin-bottom: 18px;
    background: var(--tst-card-bg); border: 1px solid var(--tst-border); border-radius: var(--tst-radius);
    padding: 22px; box-shadow: var(--tst-shadow-sm);
    transform: perspective(900px) rotateX(0) rotateY(0);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tst-card:hover { transform: perspective(900px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-3px); box-shadow: var(--tst-shadow-lg); border-color: rgba(245,158,11,.45); }
.tst-card-featured { border-color: rgba(245,158,11,.55); background: linear-gradient(180deg, #fffdf5, #fff); box-shadow: 0 0 0 1px rgba(245,158,11,.2), var(--tst-shadow); }
.tst-featured-badge {
    position: absolute; top: 14px; right: 14px;
    background: linear-gradient(135deg, var(--tst-primary), var(--tst-primary-600));
    color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
    padding: 4px 10px; border-radius: 999px;
}
.tst-quote-mark { font-family: Georgia, serif; font-size: 3.2rem; line-height: 0; color: var(--tst-primary); height: 26px; margin: 4px 0 10px; }
.tst-message { color: var(--tst-ink-2); font-size: .95rem; margin-bottom: 16px; }
.tst-footer { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.tst-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--tst-border); }
.tst-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.tst-name { font-size: .95rem; color: var(--tst-ink); font-weight: 700; }
.tst-role { color: var(--tst-muted); font-size: .78rem; }
.tst-service { display: inline-block; margin-top: 3px; padding: 1px 8px; background: var(--tst-primary-50); color: var(--tst-primary-600); border-radius: 999px; font-size: .7rem; font-weight: 700; }

/* stars */
.tst-stars { display: inline-flex; gap: 1px; color: var(--tst-primary); }
.tst-star.on { color: var(--tst-primary); }
.tst-star { color: #cbd5e1; }

/* form */
.tst-form-section { background: linear-gradient(180deg, #fff8eb, var(--tst-bg)); border-radius: var(--tst-radius); }
.tst-form-card { background: var(--tst-card-bg); border: 1px solid var(--tst-border); border-radius: var(--tst-radius); box-shadow: var(--tst-shadow); padding: 24px; }
.tst-form { display: flex; flex-direction: column; gap: 14px; }
.tst-form-group { display: flex; flex-direction: column; gap: 6px; }
.tst-form-group label { font-weight: 600; font-size: .86rem; color: var(--tst-ink-2); }
.tst-form-group input[type="text"], .tst-form-group input[type="email"],
.tst-form-group select, .tst-form-group textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--tst-border); border-radius: var(--tst-radius-sm);
    font: inherit; color: var(--tst-ink); background: #fff; transition: all .15s ease;
}
.tst-form-group input:focus, .tst-form-group select:focus, .tst-form-group textarea:focus {
    outline: none; border-color: var(--tst-primary); box-shadow: 0 0 0 3px var(--tst-primary-50);
}
.tst-form-group textarea { resize: vertical; }
.tst-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tst-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.tst-form-error { color: #dc2626; font-weight: 600; font-size: .9rem; }

.tst-star-picker { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.tst-star-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tst-star-picker label { cursor: pointer; color: #cbd5e1; transition: color .12s ease, transform .12s ease; }
.tst-star-picker label:hover, .tst-star-picker label:hover ~ label { color: var(--tst-primary); transform: scale(1.12); }
.tst-star-picker input:checked ~ label { color: var(--tst-primary); }

/* notices */
.tst-notice { padding: 14px 16px; border-radius: var(--tst-radius-sm); margin-bottom: 18px; font-size: .92rem; border: 1px solid transparent; }
.tst-notice-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.tst-notice-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.tst-notice-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* thanks + empty */
.tst-thanks-card { text-align: center; padding: 44px 30px; background: var(--tst-card-bg); border: 1px solid var(--tst-border); border-radius: var(--tst-radius); box-shadow: var(--tst-shadow-sm); }
.tst-thanks-emoji { font-size: 3rem; display: block; margin-bottom: 12px; }
.tst-empty-state { text-align: center; padding: 48px 20px; color: var(--tst-muted); border: 1px dashed var(--tst-border); border-radius: var(--tst-radius); }
.tst-empty-icon { font-size: 2.2rem; display: block; margin-bottom: 10px; }

@media (max-width: 640px) {
    .tst-form-row-2 { grid-template-columns: 1fr; }
    .tst-hero { padding: 44px 0 40px; }
    .tst-section { padding: 34px 0; }
}