/* ==========================================================================
   Tarabichi — catalog.css
   Built-in catalogue views: services archive/single, products archive /
   category / single, industries, positions & careers.
   ========================================================================== */

/* ---- Services archive ---- */
.tpp-srvIntro .tpp-split { margin-block-end: 2rem; }
.tpp-srvIntro .tpp-secHead { margin-block-end: 0; }
.tpp-filter--jump { margin-block-end: 1rem; }
.tpp-srvRows { margin-block-start: 1.5rem; }
.tpp-srvRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); border-block-start: 1px solid var(--tpp-line); }
.tpp-srvRow.is-rev .tpp-srvRow__txt { order: 2; }
.tpp-srvRow__top { display: flex; align-items: center; gap: .9rem; }
.tpp-srvRow__title { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.05rem); letter-spacing: -.025em; margin-block: 1.25rem .25rem; }
.tpp-srvRow__title a:hover { color: var(--tpp-primary); }
.tpp-srvRow .tpp-lead { font-size: 1.02rem; }
.tpp-srvRow .tpp-chips { margin-block: 1.25rem 1.4rem; }
.tpp-srvRow__img { display: block; aspect-ratio: 1.35 / 1; }
.tpp-srvRow:hover .tpp-ibox { background: var(--tpp-primary); color: #fff; }

.tpp-prepress .tpp-arcs { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: #fff; opacity: .07; }
.tpp-prepress .tpp-container { position: relative; }
.tpp-prepress .tpp-btn { margin-block-start: .5rem; }
.tpp-darkCard { border: 1px solid #2E3038; border-radius: var(--tpp-radius); padding: 1.6rem; transition: border-color .45s var(--tpp-ease), transform .45s var(--tpp-ease), background-color .45s; }
.tpp-darkCard:hover { border-color: rgba(var(--tpp-accent-rgb), .55); background: rgba(255, 255, 255, .025); transform: translateY(-4px); }
.tpp-darkCard h3 { font-size: 1rem; margin-block-start: 1.1rem; }
.tpp-darkCard p { margin: .35rem 0 0; font-size: .86rem; color: #A6A9B1; }
.tpp-finishes .tpp-chip .tpp-ic { color: var(--tpp-primary); }
.tpp-finishes .tpp-chip:hover { border-color: var(--tpp-primary); transform: translateY(-2px); }

/* ---- With sidebar ---- */
.tpp-withSide { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.tpp-withSide--wide { grid-template-columns: minmax(0, 1fr) 20rem; }
.tpp-side { display: grid; gap: 1.25rem; position: sticky; inset-block-start: calc(var(--tpp-header-h) + 1.5rem); }
.tpp-sideList { padding: .9rem; }
.tpp-sideList .tpp-eyebrow { margin: .6rem .7rem .8rem; }
.tpp-sideList nav { display: grid; gap: .15rem; }
.tpp-sideList a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 12px; font-weight: 600; font-size: .92rem; color: var(--tpp-ink); transition: all .35s var(--tpp-ease); }
.tpp-sideList a .tpp-ar { opacity: .35; transition: all .35s var(--tpp-ease); }
.tpp-sideList a:hover { background: var(--tpp-bg-soft); }
.tpp-sideList a:hover .tpp-ar { opacity: 1; transform: translateX(3px); }
.tpp-sideList a.is-active { background: var(--tpp-primary); color: #fff; }
.tpp-sideList a.is-active .tpp-ar { opacity: 1; }
.tpp-sideCta { position: relative; overflow: hidden; isolation: isolate; background: var(--tpp-primary-dark); color: #fff; border-radius: var(--tpp-radius); padding: 1.75rem; }
.tpp-sideCta .tpp-arcs { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: #fff; opacity: .2; z-index: -1; }
.tpp-sideCta h3 { color: #fff; font-size: 1.15rem; }
.tpp-sideCta p { color: rgba(255, 255, 255, .78); font-size: .9rem; margin: .6rem 0 1.25rem; }
.tpp-sideCta__contact { margin-block-start: 1.4rem; padding-block-start: 1.2rem; border-block-start: 1px solid rgba(255, 255, 255, .18); display: grid; gap: .6rem; font-size: .88rem; }
.tpp-sideCta__contact a { display: flex; align-items: center; gap: .6rem; }
.tpp-sideCta__contact a:hover { color: var(--tpp-accent); }
.tpp-single__hero { aspect-ratio: 1.85 / 1; }
.tpp-mini { display: flex; align-items: center; gap: 1rem; padding: .9rem; }
.tpp-mini__img { inline-size: 6rem; block-size: 4.6rem; border-radius: 12px; flex: none; }
.tpp-mini b { display: block; color: var(--tpp-ink); font-size: .95rem; }
.tpp-mini span span { font-size: .84rem; }

/* ---- Products archive ---- */
.tpp-filter--sticky { position: sticky; inset-block-start: calc(var(--tpp-header-h) + .75rem); z-index: 5; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); padding: .6rem; margin-inline: -.6rem; border-radius: 999px; }
.tpp-catBlock { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(1.75rem, 1rem + 3vw, 3rem); padding-block: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); border-block-start: 1px solid var(--tpp-line); }
.tpp-catBlock:first-of-type { border-block-start: 0; }
.tpp-catBlock__aside { align-self: start; position: sticky; inset-block-start: calc(var(--tpp-header-h) + 5.5rem); }
.tpp-catBlock__img { display: block; aspect-ratio: 4 / 3; margin-block-end: 1.35rem; }
.tpp-catBlock__title { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.75rem); letter-spacing: -.02em; margin-block-start: .9rem; }
.tpp-catBlock__title a:hover { color: var(--tpp-primary); }
.tpp-catBlock__desc { margin: .6rem 0 0; font-size: .94rem; }
.tpp-catBlock__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-content: start; }
.tpp-catBlock__items.is-single { grid-template-columns: minmax(0, 1fr); }
.tpp-prodItem { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; }
.tpp-prodItem__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.tpp-prodItem__head b { color: var(--tpp-ink); font-size: 1.02rem; line-height: 1.35; transition: color .3s; }
.tpp-prodItem__go { color: var(--tpp-primary); flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; transition: all .45s var(--tpp-ease); }
.tpp-prodItem:hover .tpp-prodItem__go { background: var(--tpp-primary); color: #fff; transform: rotate(45deg); }
.tpp-prodItem:hover .tpp-prodItem__head b { color: var(--tpp-primary); }
.tpp-prodItem__txt { font-size: .88rem; line-height: 1.6; }
.tpp-prodItem.has-img { padding: 0 0 1.4rem; overflow: hidden; }
.tpp-prodItem.has-img > :not(.tpp-prodItem__img) { padding-inline: 1.4rem; }
.tpp-prodItem__img { aspect-ratio: 4 / 3; border-radius: 0; margin-block-end: .6rem; }

/* ---- Single product ---- */
.tpp-gal { display: grid; gap: .85rem; position: sticky; inset-block-start: calc(var(--tpp-header-h) + 1.5rem); }
.tpp-gal__main { aspect-ratio: 4 / 3; }
.tpp-gal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--tpp-ease); }
.tpp-gal__slide.is-active { opacity: 1; }
.tpp-gal__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tpp-gal__main:hover .tpp-gal__slide.is-active img { transform: scale(1.04); }
.tpp-gal__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.tpp-gal__thumb { aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--tpp-bg-soft); transition: border-color .35s, transform .35s var(--tpp-ease); }
.tpp-gal__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tpp-gal__thumb:hover { transform: translateY(-2px); }
.tpp-gal__thumb.is-active { border-color: var(--tpp-primary); }
.tpp-product__title { font-size: var(--tpp-h2); letter-spacing: -.028em; margin-block: 1.1rem .25rem; }
.tpp-product__info .tpp-lead { margin-block-start: 1rem; }
.tpp-entry--tight > :first-child { margin-block-start: 0; }
.tpp-note { margin-block-start: 1.75rem; padding: 1.15rem 1.3rem; border-radius: var(--tpp-r-sm); background: var(--tpp-bg-soft); display: flex; gap: 1rem; align-items: center; }
.tpp-note p { margin: 0; font-size: .9rem; }
.tpp-note b { color: var(--tpp-ink); }

/* ---- Industries archive ---- */
.tpp-indGrid { gap: 1.5rem; }
.tpp-indCard { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.tpp-indCard__img { border-radius: 0; min-block-size: 18rem; }
.tpp-indCard__img img, .tpp-indCard__img .tpp-ph { position: absolute; inset: 0; }
.tpp-indCard__body { padding: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.tpp-indCard__title { color: var(--tpp-ink); font-size: 1.2rem; margin-block-start: .65rem; }
.tpp-indCard__txt { font-size: .9rem; line-height: 1.6; }

/* ---- Careers ---- */
.tpp-miniStats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-block-start: 2rem; }
.tpp-miniStats b { display: block; font-size: 2.1rem; color: var(--tpp-ink); letter-spacing: -.03em; line-height: 1.1; }
.tpp-miniStats b i { font-style: normal; color: var(--tpp-primary); font-size: .75em; }
.tpp-miniStats span { font-size: .84rem; }
.tpp-deps { padding-block-start: 0; }
.tpp-jobs { display: grid; gap: .85rem; }
.tpp-job { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .7fr) auto; gap: 1.25rem; align-items: center; padding: 1.35rem 1.6rem; }
.tpp-job__main b { display: block; color: var(--tpp-ink); font-size: 1.1rem; letter-spacing: -.01em; transition: color .3s; }
.tpp-job__main span { font-size: .86rem; }
.tpp-job:hover .tpp-job__main b { color: var(--tpp-primary); }
.tpp-job__meta { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; }
.tpp-job__meta .tpp-ic { color: var(--tpp-primary); }
.tpp-job:hover .tpp-btn--outline { border-color: var(--tpp-ink); }
.tpp-emptyRow { display: flex; gap: 1rem; align-items: center; color: var(--tpp-body); }
.tpp-emptyRow .tpp-ic { color: var(--tpp-primary); }
.tpp-emptyRow p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
	.tpp-withSide, .tpp-withSide--wide { grid-template-columns: minmax(0, 1fr); }
	.tpp-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpp-indCard { grid-template-columns: minmax(0, 1fr); }
	.tpp-indCard__img { min-block-size: 0; aspect-ratio: 16 / 9; }
	.tpp-job { grid-template-columns: minmax(0, 1fr) auto auto; }
	.tpp-job .tpp-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
	.tpp-srvRow, .tpp-catBlock { grid-template-columns: minmax(0, 1fr); }
	.tpp-srvRow.is-rev .tpp-srvRow__txt { order: 0; }
	.tpp-srvRow__img { order: -1; }
	.tpp-catBlock__aside, .tpp-gal { position: static; }
	.tpp-catBlock__img { aspect-ratio: 16 / 8; }
}
@media (max-width: 620px) {
	.tpp-side { grid-template-columns: minmax(0, 1fr); }
	.tpp-catBlock__items { grid-template-columns: minmax(0, 1fr); }
	.tpp-filter--sticky { position: static; background: none; backdrop-filter: none; padding: 0; margin: 0; border-radius: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: .25rem; }
	.tpp-filter--sticky::-webkit-scrollbar { display: none; }
	.tpp-filter--sticky .tpp-filter__it { flex: none; }
	.tpp-job { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
	.tpp-gal__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}