/* Components: cards, steps, check-mark boxes, quotes, tabs, details */

/* Cards and grids */
:is(.ttt-card,.is-style-ttt-card){background:var(--wp--preset--color--card);color:var(--wp--preset--color--card-text);border-radius:16px;padding:18px}
:is(.ttt-card,.is-style-ttt-card) :where(h3,h4){font-family:var(--wp--preset--font-family--body);font-weight:700;font-size:18px;color:var(--wp--preset--color--card-text);margin-block:6px}
:is(.ttt-card,.is-style-ttt-card) p{font-size:15px;margin:0}
:is(.ttt-card,.is-style-ttt-card) .ttt-icon{width:26px;height:26px}
.ttt-icon{display:inline-block;width:24px;height:24px;color:currentColor}
:is(.ttt-card,.is-style-ttt-card) p.ttt-quote,.ttt-quote{font-family:var(--wp--custom--heading-font,var(--wp--preset--font-family--display));font-size:calc(24px * var(--ttt-hs) * var(--ttt-sz));line-height:1.15;margin:0 0 10px;color:var(--wp--preset--color--card-text)}
.ttt-section:has(.ttt-quote)>.is-layout-grid,.ttt-grid-fit.is-layout-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))!important}
.ttt-more{margin-block-start:18px!important}
.wp-block-post-template.is-layout-grid>li{display:flex}
.wp-block-post-template.is-layout-grid>li>:is(.ttt-card,.is-style-ttt-card){flex:1}
:is(.ttt-card,.is-style-ttt-card) .ttt-eyebrow a,.wp-block-post-terms a{color:var(--wp--preset--color--heading);text-decoration:none;font-weight:700}
.ttt-card-title{font-family:var(--wp--preset--font-family--body)!important;font-weight:700!important;font-size:18px!important;line-height:1.3;margin-block:6px!important;color:var(--wp--preset--color--card-text)}
.ttt-card-title a{color:inherit;text-decoration:none}
.ttt-card-title a:hover{text-decoration:underline}
.ttt-card-act{display:flex;flex-direction:column}
.ttt-card-act>.wp-block-buttons{margin-top:auto;padding-top:10px}
.ttt-card-act .ttt-icon+h3{margin-top:10px}
.ttt-person{width:100%;height:100%;display:block}

/* Impact numbers and chart */
.ttt-chart{list-style:none;padding:0;margin:8px 0 0;display:flex;align-items:flex-end;gap:10px;height:96px}
.ttt-chart li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:var(--wp--preset--color--muted);gap:4px}
.ttt-chart .ttt-bar{width:100%;max-width:40px;height:0;background:var(--wp--preset--color--accent);border-radius:4px 4px 0 0;transition:height 1s ease}
.ttt-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin:6px 0 18px}
.ttt-stat-grid>div>*{margin:0}
.ttt-count{font-size:calc(46px * var(--ttt-hs) * var(--ttt-sz));margin:0;font-family:var(--wp--preset--font-family--display);font-weight:400;line-height:1;color:var(--wp--preset--color--heading)}

/* Numbered steps */
.ttt-steps>*{opacity:.35;transform:translateY(8px);transition:opacity .5s,transform .5s}
.ttt-steps.is-on>*{opacity:1;transform:none}
.editor-styles-wrapper .ttt-steps>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.ttt-steps>*,.ttt-chart .ttt-bar{transition:none}
}
.ttt-step-h{display:flex;align-items:center;gap:12px}
.ttt-stepnum{display:inline-grid;place-items:center;flex:none;width:1.1em;height:1.1em;border-radius:50%;background:var(--wp--preset--color--button);color:var(--wp--preset--color--button-text);font-size:.7em;line-height:1}

/* Green and red boxes, check-mark lists */
:is(.ttt-take,.is-style-ttt-take),:is(.ttt-cant,.is-style-ttt-cant){border-radius:16px;padding:16px 18px}
:is(.ttt-take,.is-style-ttt-take) h3,:is(.ttt-cant,.is-style-ttt-cant) h3{font-family:var(--wp--preset--font-family--body);font-size:17px;font-weight:700;margin:0 0 8px;display:flex;gap:8px;align-items:center}
:is(.ttt-take,.is-style-ttt-take) h3::before,:is(.ttt-cant,.is-style-ttt-cant) h3::before,:is(.ttt-checks,.is-style-ttt-checks) li::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ttt-mk) center/contain no-repeat;mask:var(--ttt-mk) center/contain no-repeat}
:is(.ttt-take,.is-style-ttt-take){background:rgba(157,180,159,.18);border:2px solid rgba(94,138,95,.55);--ttt-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
:is(.ttt-cant,.is-style-ttt-cant){background:rgba(217,102,72,.08);border:2px solid rgba(192,70,42,.45);--ttt-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
:is(.ttt-take,.is-style-ttt-take) h3::before,:is(.ttt-take,.is-style-ttt-take) li::before{color:#5E8A5F}
:is(.ttt-cant,.is-style-ttt-cant) h3::before,:is(.ttt-cant,.is-style-ttt-cant) li::before{color:#C0462A}
:is(.ttt-checks,.is-style-ttt-checks) li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--ttt-line)}
:is(.ttt-take,.is-style-ttt-take) p{font-size:14px;margin:10px 0 0}
.ttt-section :is(.ttt-take,.is-style-ttt-take),.ttt-section :is(.ttt-cant,.is-style-ttt-cant){align-self:start}
:is(.ttt-checks,.is-style-ttt-checks){list-style:none;padding:0;margin:0;font-size:15px;--ttt-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
:is(.ttt-checks,.is-style-ttt-checks) li::before{width:16px;height:16px;margin-top:4px;color:#5E8A5F}
:is(.ttt-cant,.is-style-ttt-cant) :is(.ttt-checks,.is-style-ttt-checks){--ttt-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
:is(.ttt-cant,.is-style-ttt-cant) li::before{color:#C0462A}
html[data-mode=dark] :is(.ttt-checks,.is-style-ttt-checks) li::before{color:#9DB49F}
html[data-mode=dark] :is(.ttt-cant,.is-style-ttt-cant) li::before{color:#E08A70}

/* Quotes and video */
.ttt-voices{gap:28px!important;margin-top:14px}
.ttt-qlist{display:grid;gap:12px;align-content:start}
.ttt-qlist .ttt-qcard,.wp-block-quote.ttt-qcard{margin:0;background:var(--wp--preset--color--card);color:var(--wp--preset--color--card-text);border:0;border-radius:16px;padding:16px 20px}
.ttt-qcard p{margin:0;font-family:var(--wp--preset--font-family--body);font-weight:700;font-size:16px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ttt-qcard.is-open p{-webkit-line-clamp:unset;display:block}
.ttt-qcard cite{display:block;font-size:13px;font-style:normal;margin-top:4px}
.ttt-qmore{font:inherit;font-size:13px;font-weight:700;background:none;border:0;padding:6px 0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.ttt-qmore[hidden]{display:none}
.ttt-video{margin:0}
.ttt-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:16px;overflow:hidden;background:#000;cursor:pointer}
.ttt-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s;transform:scale(1.07)}
.ttt-yt:hover img{opacity:1}
.ttt-yt-play{position:absolute;inset:0;display:grid;place-items:center}
.ttt-yt:hover .ttt-yt-play path:first-child{fill:#f00;fill-opacity:1}
.ttt-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:16px}
.ttt-video figcaption{font-size:13px;color:var(--wp--preset--color--muted);margin:8px 0 0;text-align:left}
.ttt-video.wp-has-aspect-ratio iframe,.ttt-video iframe{position:static!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/9}

/* Forms from other services */
.ttt-embed{margin:14px 0}
.ttt-embed iframe{width:100%;min-height:640px;border:0;border-radius:12px;background:#fff}
.ttt-embed-empty{background:var(--wp--preset--color--card);color:var(--wp--preset--color--card-text);border-radius:16px;padding:18px 20px}
.ttt-embed-empty p{margin:0 0 10px}
.ttt-embed-empty p:last-child{margin:0}
.ttt-embed a.ttt-btn{text-decoration:none;display:inline-flex}
.ttt-embed-empty~.ttt-note,.ttt-embed-empty+.ttt-note{display:none}
.ttt-embed-frame iframe{display:block;width:100%;height:1150px;min-height:0;border:0;border-radius:12px;background:#fff}
@media (max-width:639px){
.ttt-embed-frame iframe{height:1350px}
}

/* Tabs */
.ttt-tablist{display:flex;gap:4px;border-bottom:2px solid var(--ttt-line);margin:0 0 26px;overflow-x:auto}
.ttt-tab{font:700 17px/1.2 var(--wp--preset--font-family--body);background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:12px 16px;cursor:pointer;color:var(--wp--preset--color--muted);white-space:nowrap}
.ttt-tab[aria-selected=true]{color:var(--wp--preset--color--heading);border-bottom-color:var(--wp--preset--color--accent)}
.ttt-tab:hover{color:var(--wp--preset--color--heading)}
.is-style-ttt-tabs>[role=tabpanel]:focus{outline:none}
.is-style-ttt-tabs .wp-block-columns{margin-bottom:24px}

/* Expanding details */
.wp-block-details{border:1.5px solid var(--ttt-line);border-radius:14px;padding:12px 16px;background:var(--wp--preset--color--surface);margin:10px 0 0}
.wp-block-details summary{font-weight:700;cursor:pointer}
.wp-block-details[open] summary{margin-bottom:6px}
.wp-block-details p{margin:0;font-size:15px}