/* that one IT friend — widget component styles.
   The widgets' own design (versioned with the plugin). Colors/fonts match the source design.
   Heading font Space Grotesk, body Hanken Grotesk (loaded globally by the kit). */

/* ---------------- Pillar Card ---------------- */
.elementor-widget-toitf_pillar_card,
.elementor-widget-toitf_pillar_card > .elementor-widget-container{height:100%;}
.toitf-pcard{
	background:linear-gradient(180deg,#ffffff,#f6f8fb);
	border:1px solid #dfe4ea;border-radius:20px;padding:30px 26px;
	box-shadow:0 12px 30px rgba(16,42,74,.10),0 2px 6px rgba(16,42,74,.06);
	height:100%;
}
.toitf-pcard__dot{display:block;width:14px;height:14px;border-radius:50%;margin-bottom:18px;}
.toitf-pcard__title{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:24.5px;font-weight:800;line-height:1.2;color:#0B0E14;margin:0;}
.toitf-pcard__desc{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;margin-top:10px;color:#3b4a5c;font-size:17.5px;line-height:1.5;}

/* ---------------- Category Chip ---------------- */
.toitf-chip{
	display:inline-block;align-self:flex-start;
	font-family:'Space Grotesk',Helvetica,Arial,sans-serif;
	font-size:13.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
	padding:6px 12px;border-radius:999px;border:1.5px solid;line-height:1;
}

/* ---------------- Post Card (loop card) ---------------- */
/* Fill the loop-grid cell so min-height:100% gives equal-height rows. */
.elementor-widget-toitf_post_card,
.elementor-widget-toitf_post_card > .elementor-widget-container{height:100%;}
.toitf-bcard{
	position:relative;display:flex;flex-direction:column;height:100%;min-height:100%;
	background:#fff;border:1px solid #dfe4ea;border-top:3px solid var(--toitf-c,#3E9BEE);
	border-radius:16px;padding:28px 26px 26px;
	box-shadow:0 10px 26px rgba(16,42,74,.09),0 2px 6px rgba(16,42,74,.05);
	transition:border-color .15s ease;
}
.toitf-bcard:hover{border-color:#3E9BEE;}
.toitf-bcard .toitf-chip{margin-bottom:16px;position:relative;z-index:2;}
.toitf-bcard__overlay{position:absolute;inset:0;z-index:1;border-radius:16px;}
.toitf-bcard__title{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:24.5px;font-weight:800;line-height:1.22;letter-spacing:-.5px;margin:0;position:relative;z-index:2;}
.toitf-bcard__title a{color:#0B0E14;text-decoration:none;}
.toitf-bcard__title a:hover{color:#0B0E14;}
.toitf-bcard__excerpt{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;margin-top:12px;color:#3b4a5c;font-size:17.5px;line-height:1.55;flex:1;position:relative;z-index:2;pointer-events:none;}
.toitf-bcard__meta{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;margin-top:16px;color:#6b7683;font-size:14.5px;font-weight:600;position:relative;z-index:2;pointer-events:none;}
.toitf-bcard__readmore{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;margin-top:14px;color:#3E9BEE;font-weight:800;font-size:16px;position:relative;z-index:2;pointer-events:none;}

/* ---------------- Subscribe Band ---------------- */
.toitf-band{
	background:linear-gradient(135deg,rgba(62,155,238,.14),rgba(62,155,238,.04));
	border:1.5px solid #dfe4ea;border-radius:24px;padding:44px;text-align:center;
}
.toitf-band__title{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:33.5px;font-weight:900;letter-spacing:-1px;line-height:1.1;color:#0B0E14;margin:0;}
.toitf-band__sub{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;margin-top:10px;color:#3b4a5c;font-size:18px;line-height:1.5;}
.toitf-band__form{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.toitf-band__input{background:#fff;border:1.5px solid #cfd6df;border-radius:11px;padding:13px 16px;font-size:17px;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;color:#0B0E14;min-width:260px;}
.toitf-band__input:focus{outline:none;border-color:#3E9BEE;}
.toitf-band__btn{background:#3E9BEE;color:#07121d;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:800;font-size:17px;border:none;border-radius:11px;padding:13px 22px;cursor:pointer;transition:filter .15s ease;}
.toitf-band__btn:hover{filter:brightness(1.08);color:#fff;}

/* Compact subscribe (sidebar) — sits inside a card, no gradient/border of its own. */
.toitf-band--compact{background:none;border:none;border-radius:0;padding:0;text-align:left;}
.toitf-band--compact .toitf-band__title{font-size:14.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#3b4a5c;line-height:1.2;}
.toitf-band--compact .toitf-band__sub{font-size:15.5px;margin-top:12px;}
.toitf-band--compact .toitf-band__form{margin-top:14px;flex-direction:column;gap:10px;justify-content:flex-start;}
.toitf-band--compact .toitf-band__input{min-width:0;width:100%;padding:12px;border-radius:10px;}
.toitf-band--compact .toitf-band__btn{width:100%;padding:12px;border-radius:10px;}

/* ---------------- Post Reel ---------------- */
/* Reels are vertical 9:16 — force the portrait aspect (the <video> element defaults to a landscape
   box until metadata loads) and center it. */
.toitf-reel{max-width:400px;margin-left:auto;margin-right:auto;border-radius:16px;overflow:hidden;border:1.5px solid #dfe4ea;background:#000;line-height:0;}
.toitf-reel video{width:100%;aspect-ratio:9 / 16;height:auto;display:block;background:#000;object-fit:cover;}
.toitf-reel__cap{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;color:#3b4a5c;font-size:15px;font-weight:600;margin-top:6px;text-align:center;}

/* ---------------- Post Slides (swipeable portrait carousel) ---------------- */
.toitf-slides-wrap{position:relative;}
.toitf-slides{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.toitf-slides::-webkit-scrollbar{display:none;}
.toitf-slides__item{flex:0 0 auto;width:min(62%, 460px);scroll-snap-align:start;margin:0;}
.toitf-slides__item img{width:100%;height:auto;display:block;border-radius:14px;border:1.5px solid #dfe4ea;}
.toitf-slides__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:1.5px solid #dfe4ea;background:#fff;color:#0B0E14;font-size:26px;line-height:1;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(16,42,74,.16);transition:opacity .18s ease,border-color .15s ease,color .15s ease,background .15s ease;padding:0 0 3px;opacity:0;}
.toitf-slides-wrap:hover .toitf-slides__nav,.toitf-slides__nav:focus{opacity:1;}
@media (hover:none){.toitf-slides__nav{opacity:1;}}
.toitf-slides-wrap .toitf-slides__nav:hover,.toitf-slides-wrap .toitf-slides__nav:focus,.toitf-slides-wrap .toitf-slides__nav:active,.toitf-slides-wrap .toitf-slides__nav:focus-visible{background:#3E9BEE !important;border-color:#3E9BEE !important;color:#fff !important;outline:none !important;box-shadow:0 6px 18px rgba(62,155,238,.35);}
.toitf-slides__nav--prev{left:-10px;}
.toitf-slides__nav--next{right:-10px;}

/* ---------------- Post Media (center-mode carousel: reel + slides) ---------------- */
/* Active card centered; neighbors peek and dim; the track carries half a card of padding on each
   end so the first (reel) and last card still land dead center. Arrows ride the peek gutters. */
.toitf-media{--titem:400px;position:relative;max-width:1200px;margin:0 auto;}
.toitf-media__vp{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
	cursor:grab;user-select:none;-webkit-user-select:none;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.toitf-media__vp::-webkit-scrollbar{display:none;}
.toitf-media__vp.is-dragging{cursor:grabbing;scroll-behavior:auto;}
.toitf-media__track{display:flex;gap:22px;align-items:center;padding-inline:calc(50% - var(--titem)/2);padding-bottom:10px;}
.toitf-media__item{flex:0 0 auto;width:var(--titem);scroll-snap-align:center;opacity:.5;transform:scale(.94);transition:opacity .25s ease,transform .25s ease;}
.toitf-media__item.is-active{opacity:1;transform:scale(1);}
.toitf-media__slide{margin:0;}
.toitf-media__item img{width:100%;height:auto;display:block;border-radius:16px;border:1.5px solid #dfe4ea;-webkit-user-drag:none;}
.toitf-media__item--reel .toitf-reel{width:100%;max-width:none;margin:0;}
/* single item (no video or one slide) — just center it, no controls */
.toitf-media--single .toitf-media__track{justify-content:center;}
.toitf-media--single .toitf-media__item{opacity:1;transform:none;}
/* arrows */
.toitf-media__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
	border:1.5px solid #dfe4ea;background:#fff;color:#0B0E14;font-size:24px;line-height:1;
	font-family:'Space Grotesk',Helvetica,Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 18px rgba(16,42,74,.18);z-index:3;padding:0 0 3px;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.toitf-media__nav--prev{left:2px;}
.toitf-media__nav--next{right:2px;}
.toitf-media__nav:hover,.toitf-media__nav:focus,.toitf-media__nav:active,.toitf-media__nav:focus-visible{background:#3E9BEE !important;border-color:#3E9BEE !important;color:#fff !important;outline:none !important;}
/* dots */
.toitf-media__dots{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.toitf-media__dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#dfe4ea;cursor:pointer;transition:background .2s ease,width .2s ease;}
.toitf-media__dots button:hover,.toitf-media__dots button:focus{background:#b9c3cf !important;outline:none;}
.toitf-media__dots button.is-on,.toitf-media__dots button.is-on:hover,.toitf-media__dots button.is-on:focus{background:#3E9BEE !important;width:22px;border-radius:5px;}
@media (max-width:640px){.toitf-media{--titem:78vw;}}

/* ---------------- Post Meta ---------------- */
.toitf-pmeta{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;color:#3b4a5c;font-size:15.5px;font-weight:600;}

/* ---------------- Info Card ---------------- */
.toitf-icard{background:#f6f8fb;border:1.5px solid #dfe4ea;border-radius:16px;padding:22px 24px;}
.toitf-icard__title{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:18px;font-weight:800;color:#0B0E14;margin:0;}
.toitf-icard__body{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;color:#3b4a5c;font-size:17px;margin-top:6px;line-height:1.5;}

/* ---------------- Margin note (handwriting in the gutter) ----------------
   Reads like someone annotated the page. Three tiers:
   - phones: centered block inline with the text.
   - tablet/laptop: normal right-float inside the text column.
   - wide desktop (>=1360px, where the no-sidebar layout leaves an empty gutter):
     pushed out into the right margin via negative margin so body text keeps full width. */
.toitf-marginnote{float:right;clear:right;width:320px;max-width:48%;margin:6px 0 16px 26px;}
.toitf-marginnote img{width:100%;height:auto;display:block;-webkit-user-drag:none;}
@media (max-width:600px){
	.toitf-marginnote{float:none;clear:both;width:86%;max-width:380px;margin:16px auto;}
}
@media (min-width:1520px){
	.toitf-marginnote{width:360px;max-width:none;margin:4px -372px 20px 22px;transform:rotate(-1.6deg);}
}