/* The deck page prints its own heading, so the theme's archive title goes -
   the same arrangement every other block here already has. Nothing was
   hiding it, which is why this page kept a band of space nobody asked for
   even after the wrapper around it was collapsed. */
body:has(.ta-wrap) .wp-block-query-title,
body:has(.ta-wrap) .wp-block-post-title,
body:has(.ta-wrap) .archive-title,
body:has(.ta-wrap) .page-title{display:none !important;}

.ta-wrap{max-width:1200px;margin:0 auto;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:var(--wp--preset--color--contrast,#16181d);}
.ta-head{display:flex;align-items:center;gap:28px;margin:0 0 24px;}
.ta-head-left{flex:0 0 auto;text-align:left;}
.ta-head-divider{flex:0 0 2px;align-self:center;background:#4f46e5;height:56px;}
.ta-wrap .ta-eyebrow-lbl{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;}
.ta-wrap .ta-heading{font-size:34px;margin:0;color:#16181d;}
.ta-wrap .ta-sub{flex:1;max-width:480px;text-align:left;color:#8a8f98;font-size:15px;line-height:1.6;margin:0;}
.ta-wrap .ta-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;}
.ta-wrap .ta-search{
	margin-left:auto;font-size:15px;padding:8px 15px;border-radius:999px;border:1px solid #e6e7eb;
	background:#fff;color:#16181d;font-family:inherit;min-width:200px;
}
.ta-wrap .ta-search:focus{outline:none;border-color:#4f46e5;}
.ta-wrap .ta-filter{font-size:15px;font-weight:500;padding:8px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;}
.ta-wrap .ta-filter:hover{border-color:#4f46e5;color:var(--wp--preset--color--contrast,#16181d);}
.ta-wrap .ta-filter.active{background:#4f46e5;border-color:#4f46e5;color:#fff;}
.ta-wrap .ta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:start;}
/* Only real cards show here. The escape hatch matters: a guard written
   as "> *:not(.x)" hides the whole block the moment anything runs the markup
   through wpautop and it comes back with the children wrapped in a <p> - the
   <p> is not .x, so it is hidden, and everything inside it goes with it.
   That took the banners off a page once already. A stray <p> is unwrapped
   instead of hidden. */
.ta-wrap .ta-grid > p{display:contents;}
.ta-wrap .ta-grid > *:not(.ta-card):not(p){display:none;}
@media(max-width:1100px){.ta-wrap .ta-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:760px){.ta-wrap .ta-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.ta-wrap .ta-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
	.ta-head{flex-direction:column;align-items:flex-start;gap:12px;}
	.ta-head-left{text-align:left;}
	.ta-head-divider{display:none;}
	.ta-wrap .ta-filters{justify-content:center;}
	.ta-wrap .ta-search{margin-left:0;width:100%;order:99;}
}
.ta-wrap .ta-card{display:block;height:fit-content;align-self:start;border:1px solid #e6e7eb;border-radius:5px;overflow:hidden;background:#fff;cursor:pointer;text-decoration:none;color:inherit;transition:box-shadow .2s, transform .2s, opacity .25s;}
.ta-wrap .ta-card:hover{box-shadow:0 8px 20px -8px rgba(16,20,30,.15);transform:translateY(-2px);}
.ta-wrap .ta-card:focus,.ta-wrap .ta-card:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;border-radius:5px;}
.ta-wrap .ta-card.ta-hidden{opacity:0;transform:scale(.94);pointer-events:none;position:absolute;visibility:hidden;}
.ta-wrap .ta-thumb{aspect-ratio:1144/1919;background:#f4f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ta-wrap .ta-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ta-wrap .ta-thumb .ta-noimg{color:#8a8f98;font-size:15px;text-align:center;padding:10px;}
.ta-wrap .ta-name{padding:6px 8px 7px;text-align:center;font-size:15px;font-weight:600;border-top:1px solid #e6e7eb;line-height:1.25;}
.ta-wrap .ta-empty{color:#8a8f98;font-style:italic;padding:40px 0;text-align:center;}
.ta-wrap .ta-empty.ta-empty-hidden{display:none;padding:0;}
.ta-wrap .ta-card p:empty{display:none;margin:0;padding:0;height:0;}
.ta-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(15,17,23,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100000;opacity:0;visibility:hidden;transition:opacity .2s;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:#16181d;}
.ta-overlay.show{opacity:1;visibility:visible;}
.ta-box{background:#fff;border-radius:20px;max-width:1000px;width:100%;min-height:560px;max-height:88vh;display:flex;overflow:hidden;box-shadow:0 30px 70px -20px rgba(15,17,23,.4);transform:scale(.92) translateY(12px);opacity:0;transition:transform .25s, opacity .25s;position:relative;}
.ta-overlay.show .ta-box{transform:scale(1) translateY(0);opacity:1;}
.ta-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:#f4f5f7;color:#8a8f98;font-size:20px;line-height:1;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;}
.ta-close:hover{background:#e6e7eb;color:var(--wp--preset--color--contrast,#16181d);}
.ta-art{flex:0 0 300px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px;}
.ta-art img{width:100%;height:100%;object-fit:contain;display:block;}
.ta-art .ta-noimg{color:#8a8f98;font-size:15px;}
.ta-info{flex:1;padding:30px 32px;overflow-y:auto;display:flex;flex-direction:column;}
.ta-info > p{display:contents;}
.ta-info .ta-eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;}
.ta-info h2{font-size:34px;margin:0 0 12px;color:#16181d;}
.ta-kw{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.ta-kw span{font-size:15px;color:#8a8f98;background:#f4f5f7;border-radius:999px;padding:6px 13px;}
.ta-themes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.ta-themes button{font-size:15px;font-weight:500;padding:8px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;}
.ta-themes button:hover{border-color:#4f46e5;color:var(--wp--preset--color--contrast,#16181d);}
.ta-themes button.active{background:#4f46e5;border-color:#4f46e5;color:#fff;}
.ta-section{border-left:3px solid #e6e7eb;padding-left:16px;margin-bottom:20px;}
.ta-section.up{border-left-color:#4f46e5;}
.ta-section .lbl{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:6px;}
.ta-section .txt{font-size:19px;font-weight:400;line-height:1.6;}
.ta-section.desc .txt{color:#8a8f98;font-style:italic;}
.ta-fulllink{display:inline-block;align-self:flex-end;margin-left:auto;margin-top:8px;font-size:15px;font-weight:600;color:#4f46e5;text-decoration:none;padding:9px 16px;border-radius:8px;background:#f4f5f7;}
.ta-fulllink:hover{background:#e6e7eb;}
/* Phones: the popup takes the whole screen. A dialogue floating inside a
   20px margin leaves no room for anything, and the close button used to be
   pulled out of the flow with a negative margin, which is what clipped it. */
@media(max-width:640px){
	.ta-overlay{padding:0;align-items:stretch;justify-content:stretch;}
	.ta-box{
		flex-direction:column;width:100%;max-width:none;border-radius:0;
		min-height:100vh;min-height:100dvh;max-height:none;
		overflow-y:auto;transform:translateY(14px);
	}
	.ta-overlay.show .ta-box{transform:none;}
	/* The box no longer carries a transform once open, so a fixed button
	   really is fixed to the screen and stays put while the text scrolls. */
	.ta-close{
		position:fixed;top:12px;top:max(12px,env(safe-area-inset-top));right:12px;
		width:40px;height:40px;margin:0;font-size:22px;
		background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(16,20,30,.18);
	}
	.ta-art{flex:0 0 auto;padding:56px 20px 0;}
	.ta-art img{width:auto;max-width:100%;height:auto;max-height:44vh;margin:0 auto;}
	.ta-info{overflow-y:visible;padding:22px 20px calc(28px + env(safe-area-inset-bottom));}
	.ta-info .ta-eyebrow,.ta-info h2{text-align:center;}
	.ta-kw{justify-content:center;}
	.ta-themes{justify-content:center;}
	.ta-fulllink{align-self:center;margin-left:auto;margin-right:auto;}
}

/* --- yes or no, in the card popup ---------------------------------------
   The block itself carries [hidden] in the markup and the script takes it
   off once there is something to show, so nothing here sets a display on
   .ta-yesno - that would override the attribute and leave an empty heading
   on any card without a verdict. */
.ta-yesno-rows{display:flex;flex-direction:column;gap:10px;}
.ta-yesno-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.ta-yesno-side{font-size:15px;font-weight:600;color:#8a8f98;min-width:104px;}
.ta-yesno-chip{font-size:15px;font-weight:700;line-height:1;border-radius:999px;padding:7px 14px;background:#f4f5f7;color:#16181d;}
.ta-yesno-chip.ta-lean-yes{background:#e7f5ec;color:#1b7a3e;}
.ta-yesno-chip.ta-lean-no{background:#fdecea;color:#b3261e;}
.ta-yesno-chip.ta-lean-mixed{background:#f4f3ff;color:#4f46e5;}
.ta-yesno-why{flex:1 1 100%;font-size:17px;line-height:1.55;color:#16181d;}
@media(max-width:640px){
	.ta-yesno-row{justify-content:center;text-align:center;}
	.ta-yesno-side{min-width:0;}
}


/* --- the block's own width, against the theme's layout rule ---------------

   Block themes print a layout rule of their own - .wp-container-… > * - that
   clamps every child of the post content to the theme's content size (620px
   in Twenty Twenty-Four). It carries the same specificity as a plain class
   and lands in <head> after our stylesheet, so it wins on order alone and
   the block is squeezed into a column meant for prose. Naming the content
   container puts our width back in front on specificity, without
   !important, which would also override the narrower widths this block sets
   for itself on small screens.

   Last in the file on purpose: @media adds no specificity, so a later plain
   rule wins on paper as well as on screen. */
.entry-content .ta-wrap,
.wp-block-post-content .ta-wrap,
.wp-site-blocks .ta-wrap{max-width:1200px;}