/*
 * Jo-Bloom — homepage section structure.
 * Layout skeleton + responsive behaviour. Colours, typography, spacing,
 * borders and radius are driven by Elementor controls on each widget.
 */

/* Shared boxed content wrapper — keeps section backgrounds full-bleed
 * while constraining and centring the content. Max width is overridable
 * per-section via the "Content Max Width" control. */
.jobloom-inner { width: 100%; max-width: var(--jb-max, 1200px); margin-left: auto; margin-right: auto; }

/* Shared eyebrow */
.jobloom-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.jobloom-eyebrow__line { width: 24px; height: 1px; background: currentColor; opacity: .9; }
.jobloom-eyebrow__text { display: inline-block; }

/* Shared image zone */
.jobloom-imgzone { position: relative; overflow: hidden; width: 100%; }
.jobloom-imgzone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jobloom-imgzone__bar { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }

/* ---------------------------------------------------------------- HERO */
.jobloom-hero { position: relative; overflow: hidden; text-align: center; }
.jobloom-hero > * { position: relative; z-index: 1; }
.jobloom-hero__glow {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 560px; height: 560px; border-radius: 50%; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse, rgba(200,75,47,0.09) 0%, transparent 65%);
}
.jobloom-hero__rule { height: 1px; margin: 26px auto; }
.jobloom-hero__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jobloom-hero__tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jobloom-hero__tag { display: inline-block; }

/* --------------------------------------------------------------- TRUST */
.jobloom-trust__inner { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px; }
.jobloom-trust__item { text-align: center; }
.jobloom-trust__num { display: block; }

/* --------------------------------------------------------------- LOGOS */
.jobloom-logos__label { text-align: center; }
.jobloom-logos__viewport { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); }
.jobloom-logos__track { display: flex; gap: var(--jb-logo-gap, 56px); width: max-content; animation: jb-logos-marquee var(--jb-marquee-dur, 30s) linear infinite; will-change: transform; }
.jobloom-logos__viewport:hover .jobloom-logos__track { animation-play-state: paused; }
@keyframes jb-logos-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.jobloom-logos__slot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 8px; }
.jobloom-logos__slot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
	.jobloom-logos__track { animation: none; }
}

/* ------------------------------------------------------------ SERVICES */
.jobloom-services__top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.jobloom-grid { display: grid; grid-template-columns: repeat(var(--jb-cols, 4), 1fr); }
.jobloom-services__col a { text-decoration: none; display: inline-block; }
.jobloom-services__icon,
.jobloom-industries__icon { display: inline-flex; align-items: center; justify-content: center; }
.jobloom-services__icon i,
.jobloom-services__icon svg,
.jobloom-industries__icon i,
.jobloom-industries__icon svg { width: 50%; height: 50%; max-width: 28px; max-height: 28px; }
.jobloom-services__icon svg,
.jobloom-industries__icon svg { fill: currentColor; }

/* ---------------------------------------------------------- INDUSTRIES */
.jobloom-industries__top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }

/* ------------------------------------------------------------- RESULTS */
.jobloom-results__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* min-width:0 on the grid children is what actually enforces half-half;
 * without it, the stats row / testimonial card can grow past 50% and
 * squeeze the other column or overflow the section. */
.jobloom-results__left,
.jobloom-results__right { min-width: 0; max-width: 100%; }
.jobloom-results__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.jobloom-results__stat { min-width: 0; text-align: center; }
.jobloom-results__stat:last-child { border-right: none !important; }
.jobloom-results__stat-num { display: block; word-break: break-word; margin-bottom: 4px; }
.jobloom-results__stat-label { display: block; word-break: break-word; }
/* Carousel must occupy exactly the right column's width so the testimonial
 * card can never expand the column. */
.jobloom-results__right .jobloom-testi-carousel { width: 100%; max-width: 100%; }
.jobloom-results__right .jobloom-testi { box-sizing: border-box; }
.jobloom-testi__open { display: block; line-height: .6; }
.jobloom-testi__q { display: block; font-style: italic; margin-bottom: 26px; }
.jobloom-testi__author { display: flex; align-items: center; gap: 14px; padding-top: 22px; margin-top: 4px; }
.jobloom-testi__avatar { flex-shrink: 0; border-radius: 50%; overflow: hidden; width: 36px; height: 36px; }
.jobloom-testi__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- FOUNDER */
.jobloom-founder__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.jobloom-founder__creds { display: flex; gap: 6px; flex-wrap: wrap; }
.jobloom-founder__link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.jobloom-cred { display: inline-block; }
.jobloom-founder__photo { height: 300px; }

/* -------------------------------------------------------------- ENGAGE */
.jobloom-engage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jobloom-engage__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.jobloom-etag { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 13px; line-height: 1; border-width: 0.5px; border-style: solid; letter-spacing: 0.2px; }
.jobloom-engage__ey { display: block; margin-bottom: 12px; }

/* ------------------------------------------------------------- PROCESS */
.jobloom-process__grid { display: grid; grid-template-columns: repeat(var(--jb-cols, 4), 1fr); }
/* Align first card's content with section heading (and last card with the right edge). */
.jobloom-process__grid > .jobloom-proc:first-child { padding-left: 0; }
.jobloom-process__grid > .jobloom-proc:last-child { padding-right: 0; }

/* ----------------------------------------------------------------- CTA */
.jobloom-cta { text-align: center; }
.jobloom-cta__inner { display: flex; flex-direction: column; align-items: center; }
.jobloom-cta__heading,
.jobloom-cta__sub { margin-left: auto; margin-right: auto; }
.jobloom-cta__sub { max-width: 560px; }
.jobloom-cta__btn { display: inline-block; text-decoration: none; }

/* ============================ TESTIMONIAL CAROUSEL =================== */
.jobloom-testi-carousel { position: relative; overflow: hidden; }
.jobloom-testi-track { display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1); will-change: transform; }
.jobloom-testi-track > .jobloom-testi { flex: 0 0 100%; min-width: 0; box-sizing: border-box; }

/* ============================ SUBTLE ANIMATIONS ====================== */
/* Card hover lift */
.jobloom-services__col,
.jobloom-industries__card,
.jobloom-cred-card,
.jobloom-team-card,
.jobloom-value,
.jobloom-proc,
.jobloom-engage__card { transition: transform .35s ease, box-shadow .35s ease; }
.jobloom-services__col:hover,
.jobloom-industries__card:hover,
.jobloom-cred-card:hover,
.jobloom-team-card:hover,
.jobloom-engage__card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,23,20,0.08); }

/* Button hover lift */
.jobloom-hero__btn1,
.jobloom-hero__btn2,
.jobloom-header__cta,
.jobloom-cta__btn,
.jobloom-cta-center__btn,
.jobloom-404__btn,
.jobloom-services__explore,
.jobloom-founder__link { transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.jobloom-hero__btn1:hover,
.jobloom-header__cta:hover,
.jobloom-cta__btn:hover,
.jobloom-cta-center__btn:hover,
.jobloom-404__btn:hover { transform: translateY(-1px); }

/* Logo slots, social, footer link micro transitions */
.jobloom-header__nav a,
.jobloom-footer__col a,
.jobloom-footer__social a { transition: color .2s ease; }

/* Scroll-triggered fade up */
.jobloom-fade-up { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.jobloom-fade-up.jobloom-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.jobloom-fade-up { opacity: 1; transform: none; transition: none; }
}

/* Shared link reset for section anchors */
.jobloom-services a, .jobloom-industries a, .jobloom-founder a, .jobloom-hero a { text-decoration: none; }

/* --------------------------------------------------------- RESPONSIVE */
@media (max-width: 960px) {
	.jobloom-services__top,
	.jobloom-industries__top,
	.jobloom-results__inner,
	.jobloom-founder__inner { grid-template-columns: 1fr; gap: 24px; }
	.jobloom-grid,
	.jobloom-process__grid,
	.jobloom-engage__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	/* Engage cards carry dense content (description + tag pills + button),
	 * so they need the full row width below tablet portrait. */
	.jobloom-engage__grid { grid-template-columns: 1fr; }
	/* Results stats fit 3-across on a narrow column; let them wrap. */
	.jobloom-results__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.jobloom-grid,
	.jobloom-process__grid,
	.jobloom-engage__grid { grid-template-columns: 1fr; }
	/* On phones stats stack vertically — each gets a full readable row. */
	.jobloom-results__stats { grid-template-columns: 1fr; }
	.jobloom-results__stat { border-right: none !important; border-bottom: 0.5px solid var(--jb-divider, #D9D3C9); }
	.jobloom-results__stat:last-child { border-bottom: none !important; }
}

/* =====================================================================
 * INTERIOR PAGES (About, Services, etc.)
 * ===================================================================== */

/* Brand red eyebrow line/text by default (text colour still overridable) */
.jobloom-eyebrow { color: #C84B2F; }

/* Page hero (interior pages) */
.jobloom-phero { position: relative; overflow: hidden; }
.jobloom-phero > * { position: relative; z-index: 1; }
.jobloom-phero__glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	top: 50%; right: -60px; width: 400px; height: 400px;
	background: radial-gradient(ellipse, rgba(200,75,47,0.07) 0%, transparent 65%); }

/* About — intro */
.jobloom-about-intro__inner { display: grid; grid-template-columns: 240px 1fr; gap: 52px; align-items: start; }
.jobloom-about-intro__photo { height: 280px; }
.jobloom-about-intro__creds { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 24px; }

/* About — story */
.jobloom-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.jobloom-pullquote { position: relative; overflow: hidden; border-radius: 4px; }
.jobloom-pullquote::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #c84b2f; }
.jobloom-pullquote q { font-style: italic; display: block; quotes: none; position: relative; z-index: 1; }

/* About / interior — values */
.jobloom-values__top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.jobloom-values__grid { display: grid; grid-template-columns: repeat(var(--jb-cols, 2), 1fr); }
.jobloom-value { position: relative; }
.jobloom-value__num { position: absolute; top: 16px; right: 20px; line-height: 1; }
.jobloom-value__title { max-width: 200px; }

/* Credentials grid */
.jobloom-creds__grid { display: grid; grid-template-columns: repeat(var(--jb-cols, 3), 1fr); }

/* Team */
.jobloom-team__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.jobloom-team__right { display: flex; flex-direction: column; }
.jobloom-team-card { display: flex; gap: 12px; align-items: center; }
.jobloom-team-card__av { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; }
.jobloom-team-card__tag { margin-left: auto; flex-shrink: 0; }

/* Standalone testimonial */
.jobloom-testimonial__card { max-width: 680px; }

/* Centered CTA */
.jobloom-cta-center { position: relative; overflow: hidden; text-align: center; }
.jobloom-cta-center > * { position: relative; z-index: 1; }
.jobloom-cta-center__glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	top: -80px; left: 50%; transform: translateX(-50%); width: 500px; height: 260px; }
.jobloom-cta-center__btn { display: inline-block; text-decoration: none; }

@media (max-width: 860px) {
	.jobloom-about-intro__inner,
	.jobloom-story__inner,
	.jobloom-team__inner,
	.jobloom-values__top { grid-template-columns: 1fr; gap: 28px; }
	.jobloom-values__grid,
	.jobloom-creds__grid { grid-template-columns: 1fr; }
}

/* --------------------------------- MOBILE READABILITY GUARDS --------- */
/* Caps oversized desktop headings on small screens so they remain
 * readable without overflowing. Elementor responsive controls can still
 * override these per-widget via mobile breakpoint controls. */
@media (max-width: 760px) {
	.jobloom-hero__heading { font-size: clamp(36px, 8vw, 56px) !important; }
	.jobloom-phero__statement { font-size: clamp(32px, 7vw, 44px) !important; }
	.jobloom-services__heading,
	.jobloom-industries__heading,
	.jobloom-results__heading,
	.jobloom-founder__heading,
	.jobloom-engage__heading,
	.jobloom-process__heading,
	.jobloom-cta__heading,
	.jobloom-cta-center__heading,
	.jobloom-story__heading,
	.jobloom-values__heading,
	.jobloom-creds__heading,
	.jobloom-team__heading,
	.jobloom-testimonial__heading,
	.jobloom-about-intro__name { font-size: clamp(28px, 7vw, 36px) !important; }
	.jobloom-404__heading,
	.jobloom-404__code { font-size: clamp(40px, 12vw, 80px) !important; }
}