/**
 * Asteris Blocks Pro — premium blocks front-end styles.
 * Loaded only on pages where a Pro block renders.
 */

/* ── Query Loop ─────────────────────────────────────────────────────────── */
.asteris-ql__grid { display: grid; gap: 24px; }
.asteris-ql--cols-1 .asteris-ql__grid { grid-template-columns: 1fr; }
.asteris-ql--cols-2 .asteris-ql__grid { grid-template-columns: repeat(2, 1fr); }
.asteris-ql--cols-3 .asteris-ql__grid { grid-template-columns: repeat(3, 1fr); }
.asteris-ql--cols-4 .asteris-ql__grid { grid-template-columns: repeat(4, 1fr); }
.asteris-ql--cols-5 .asteris-ql__grid { grid-template-columns: repeat(5, 1fr); }
.asteris-ql--cols-6 .asteris-ql__grid { grid-template-columns: repeat(6, 1fr); }
.asteris-ql--masonry .asteris-ql__grid { display: block; column-gap: 24px; }
.asteris-ql--masonry.asteris-ql--cols-2 .asteris-ql__grid { column-count: 2; }
.asteris-ql--masonry.asteris-ql--cols-3 .asteris-ql__grid { column-count: 3; }
.asteris-ql--masonry.asteris-ql--cols-4 .asteris-ql__grid { column-count: 4; }
.asteris-ql--masonry .asteris-ql__item { break-inside: avoid; margin-bottom: 24px; }
.asteris-ql--list .asteris-ql__grid { display: flex; flex-direction: column; gap: 20px; }
.asteris-ql--list .asteris-ql__item { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; }
.asteris-ql__item { border: 1px solid #e7e9ee; border-radius: 12px; overflow: hidden; background: #fff; }
.asteris-ql--list .asteris-ql__item { border-radius: 12px; }
.asteris-ql__thumb img, .asteris-ql__img { display: block; width: 100%; height: auto; object-fit: cover; }
.asteris-ql__body { padding: 16px 18px; }
.asteris-ql__title { margin: 0 0 6px; font-size: 1.1em; line-height: 1.3; }
.asteris-ql__title a { text-decoration: none; color: inherit; }
.asteris-ql__meta { font-size: .82em; color: #6b7280; margin-bottom: 8px; }
.asteris-ql__excerpt { margin: 0; color: #4b5563; font-size: .92em; }
.asteris-ql__more { text-align: center; margin-top: 28px; }
.asteris-ql__more-btn { background: #111827; color: #fff; border: 0; border-radius: 999px; padding: 12px 28px; font-weight: 600; cursor: pointer; }
.asteris-ql__more-btn.is-loading { opacity: .6; cursor: progress; }

/* ── Post Carousel ──────────────────────────────────────────────────────── */
.asteris-pcar { position: relative; }
.asteris-pcar__viewport { overflow: hidden; }
.asteris-pcar__track { display: flex; transition: transform .4s ease; }
.asteris-pcar__slide { box-sizing: border-box; padding: 0 12px; }
.asteris-pcar__item { border: 1px solid #e7e9ee; border-radius: 12px; overflow: hidden; background: #fff; height: 100%; }
.asteris-pcar__thumb img { display: block; width: 100%; height: auto; }
.asteris-pcar__body { padding: 14px 16px; }
.asteris-pcar__title { margin: 0 0 6px; font-size: 1.05em; }
.asteris-pcar__title a { color: inherit; text-decoration: none; }
.asteris-pcar__excerpt { margin: 0; font-size: .9em; color: #4b5563; }
.asteris-pcar__nav, .asteris-sld__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(17,24,39,.85); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; }
.asteris-pcar__prev, .asteris-sld__prev { left: -6px; }
.asteris-pcar__next, .asteris-sld__next { right: -6px; }
.asteris-pcar__dots, .asteris-sld__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.asteris-pcar__dot, .asteris-sld__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #cbd5e1; cursor: pointer; padding: 0; }
.asteris-pcar__dot.is-active, .asteris-sld__dot.is-active { background: #111827; }

/* ── Content Slider ─────────────────────────────────────────────────────── */
.asteris-sld { position: relative; --asteris-sld-min: 360px; }
.asteris-sld__viewport { overflow: hidden; }
.asteris-sld__track { display: flex; transition: transform .5s ease; }
.asteris-sld__slide { flex: 0 0 100%; min-height: var(--asteris-sld-min); }
.asteris-sld--fade .asteris-sld__track { display: block; position: relative; }
.asteris-sld--fade .asteris-sld__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.asteris-sld--fade .asteris-sld__viewport { position: relative; min-height: var(--asteris-sld-min); }

/* ── Portfolio ──────────────────────────────────────────────────────────── */
.asteris-pf__filter, .asteris-gp__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.asteris-pf__chip, .asteris-gp__chip { border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 7px 16px; font-size: .88em; cursor: pointer; }
.asteris-pf__chip.is-active, .asteris-gp__chip.is-active { background: #111827; color: #fff; border-color: #111827; }
.asteris-pf__grid { display: grid; gap: 16px; }
.asteris-pf--cols-2 .asteris-pf__grid { grid-template-columns: repeat(2, 1fr); }
.asteris-pf--cols-3 .asteris-pf__grid { grid-template-columns: repeat(3, 1fr); }
.asteris-pf--cols-4 .asteris-pf__grid { grid-template-columns: repeat(4, 1fr); }
.asteris-pf--cols-5 .asteris-pf__grid { grid-template-columns: repeat(5, 1fr); }
.asteris-pf__item { margin: 0; position: relative; overflow: hidden; border-radius: 12px; }
.asteris-pf__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.asteris-pf__item:hover .asteris-pf__media img { transform: scale(1.05); }
.asteris-pf__caption { position: absolute; inset: auto 0 0 0; padding: 14px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.asteris-pf__caption a { color: #fff; text-decoration: none; font-weight: 600; }

/* ── Gallery Pro ────────────────────────────────────────────────────────── */
.asteris-gp { --asteris-gp-cols: 3; --asteris-gp-gap: 12px; }
.asteris-gp--grid .asteris-gp__grid { display: grid; grid-template-columns: repeat(var(--asteris-gp-cols), 1fr); gap: var(--asteris-gp-gap); }
.asteris-gp--masonry .asteris-gp__grid { column-count: var(--asteris-gp-cols); column-gap: var(--asteris-gp-gap); }
.asteris-gp--masonry .asteris-gp__item { break-inside: avoid; margin: 0 0 var(--asteris-gp-gap); }
.asteris-gp__item { margin: 0; overflow: hidden; border-radius: 10px; }
.asteris-gp__item img { display: block; width: 100%; height: auto; }
.asteris-gp__caption { font-size: .82em; color: #6b7280; padding: 6px 2px; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.asteris-lb { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 99999; }
.asteris-lb.is-open { display: flex; }
.asteris-lb__figure { margin: 0; max-width: 88vw; max-height: 88vh; text-align: center; }
.asteris-lb__img { max-width: 88vw; max-height: 80vh; border-radius: 6px; }
.asteris-lb__cap { color: #e5e7eb; margin-top: 10px; }
.asteris-lb__close, .asteris-lb__prev, .asteris-lb__next { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; border-radius: 50%; }
.asteris-lb__close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 28px; }
.asteris-lb__prev, .asteris-lb__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.asteris-lb__prev { left: 18px; }
.asteris-lb__next { right: 18px; }

/* ── Modal / Popup ──────────────────────────────────────────────────────── */
.asteris-modal__open { background: #111827; color: #fff; border: 0; border-radius: 8px; padding: 12px 24px; font-weight: 600; cursor: pointer; }
.asteris-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.asteris-modal.is-open { opacity: 1; }
.asteris-modal__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.6); }
.asteris-modal__box { position: relative; background: #fff; border-radius: 14px; width: 92%; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: translateY(12px); transition: transform .25s ease; max-height: 88vh; overflow: auto; }
.asteris-modal.is-open .asteris-modal__box { transform: translateY(0); }
.asteris-modal__close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #6b7280; }

/* ── Advanced Tabs ──────────────────────────────────────────────────────── */
.asteris-tabs { --asteris-tab-active: #4f46e5; }
.asteris-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #e5e7eb; }
.asteris-tabs__tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 12px 18px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.asteris-tabs__tab.is-active { color: var(--asteris-tab-active); border-bottom-color: var(--asteris-tab-active); }
.asteris-tabs__panels { padding: 24px 4px; }
.asteris-tabs--vertical { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.asteris-tabs--vertical .asteris-tabs__nav { flex-direction: column; border-bottom: 0; border-right: 2px solid #e5e7eb; }
.asteris-tabs--vertical .asteris-tabs__tab { border-bottom: 0; border-right: 3px solid transparent; margin: 0 -2px 0 0; text-align: left; justify-content: flex-start; }
.asteris-tabs--vertical .asteris-tabs__tab.is-active { border-right-color: var(--asteris-tab-active); }

/* ── Content Switcher ───────────────────────────────────────────────────── */
.asteris-switch { --asteris-switch-active: #4f46e5; text-align: center; }
.asteris-switch__toggle { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 4px; margin-bottom: 24px; }
.asteris-switch__btn { border: 0; background: transparent; padding: 9px 22px; border-radius: 999px; font-weight: 600; cursor: pointer; color: #475569; position: relative; }
.asteris-switch__btn.is-active { background: var(--asteris-switch-active); color: #fff; }
.asteris-switch__badge { display: inline-block; margin-left: 6px; font-size: .72em; background: #16a34a; color: #fff; border-radius: 999px; padding: 2px 8px; }
.asteris-switch__panel { text-align: initial; }

/* ── Pricing Table Pro ──────────────────────────────────────────────────── */
.asteris-price { --asteris-price-accent: #4f46e5; text-align: center; }
.asteris-price__toggle { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 4px; margin-bottom: 32px; }
.asteris-price__term { border: 0; background: transparent; padding: 9px 22px; border-radius: 999px; font-weight: 600; cursor: pointer; color: #475569; }
.asteris-price__term.is-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); color: #111827; }
.asteris-price__save { display: inline-block; margin-left: 6px; font-size: .72em; background: #16a34a; color: #fff; border-radius: 999px; padding: 2px 8px; }
.asteris-price__grid { display: grid; gap: 20px; }
.asteris-price--cols-2 .asteris-price__grid { grid-template-columns: repeat(2, 1fr); }
.asteris-price--cols-3 .asteris-price__grid { grid-template-columns: repeat(3, 1fr); }
.asteris-price--cols-4 .asteris-price__grid { grid-template-columns: repeat(4, 1fr); }
.asteris-price__plan { border: 1px solid #e5e7eb; border-radius: 16px; padding: 32px 26px; background: #fff; text-align: center; position: relative; display: flex; flex-direction: column; height: 100%; }
.asteris-price__plan.is-featured { border-color: var(--asteris-price-accent); box-shadow: 0 16px 40px rgba(79,70,229,.16); transform: scale(1.03); }
.asteris-price__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--asteris-price-accent); color: #fff; font-size: .72em; font-weight: 700; padding: 4px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.asteris-price__name { margin: 0 0 4px; font-size: 1.3em; }
.asteris-price__desc { color: #6b7280; margin: 0 0 16px; }
.asteris-price__amount { margin-bottom: 20px; }
.asteris-price__currency { font-size: 1.2em; vertical-align: top; }
.asteris-price__value { font-size: 3em; font-weight: 800; }
.asteris-price__per { color: #6b7280; }
.asteris-price__features { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; flex: 1 0 auto; }
.asteris-price__features li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid #f1f5f9; }
.asteris-price__features li::before { content: "✓"; position: absolute; left: 0; color: var(--asteris-price-accent); font-weight: 700; }
.asteris-price__cta,
.asteris-price__cta:link,
.asteris-price__cta:visited,
.asteris-price__cta:hover,
.asteris-price__cta:focus,
.asteris-price__cta:active { display: block; margin-top: auto; background: var(--asteris-price-accent); color: #fff !important; text-decoration: none !important; padding: 12px; border-radius: 10px; font-weight: 600; }
.asteris-price__plan:not(.is-featured) .asteris-price__cta { background: #111827; }

/* ── Flip Box ───────────────────────────────────────────────────────────── */
.asteris-flip { --asteris-flip-min: 280px; perspective: 1200px; }
.asteris-flip__inner { position: relative; width: 100%; min-height: var(--asteris-flip-min); transition: transform .6s; transform-style: preserve-3d; }
.asteris-flip--hover:hover .asteris-flip__inner,
.asteris-flip--click.is-flipped .asteris-flip__inner { transform: rotateY(180deg); }
.asteris-flip--vertical.asteris-flip--hover:hover .asteris-flip__inner,
.asteris-flip--vertical.asteris-flip--click.is-flipped .asteris-flip__inner { transform: rotateX(180deg); }
.asteris-flip__face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; border-radius: 16px; color: var(--asteris-flip-text); }
.asteris-flip__front { background: var(--asteris-flip-front); }
.asteris-flip__back { background: var(--asteris-flip-back); transform: rotateY(180deg); }
.asteris-flip--vertical .asteris-flip__back { transform: rotateX(180deg); }
.asteris-flip__icon { font-size: 40px; width: 40px; height: 40px; margin-bottom: 14px; }
.asteris-flip__title { margin: 0 0 8px; color: inherit; }
.asteris-flip__text { margin: 0; opacity: .92; }
.asteris-flip__btn { margin-top: 16px; background: rgba(255,255,255,.18); color: inherit; text-decoration: none; padding: 9px 20px; border-radius: 8px; font-weight: 600; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.asteris-tl { --asteris-tl-line: #e5e7eb; --asteris-tl-accent: #4f46e5; position: relative; padding: 8px 0; }
.asteris-tl__line { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--asteris-tl-line); }
.asteris-tl--alternate .asteris-tl__line { left: 50%; transform: translateX(-50%); }
.asteris-tl--left .asteris-tl__line { left: 19px; }
.asteris-tl__item { position: relative; margin-bottom: 32px; }
.asteris-tl--alternate .asteris-tl__item { width: 50%; }
.asteris-tl--alternate .asteris-tl__item:nth-child(even) { margin-left: 50%; padding-left: 40px; }
.asteris-tl--alternate .asteris-tl__item:nth-child(odd) { padding-right: 40px; text-align: right; }
.asteris-tl--left .asteris-tl__item { padding-left: 56px; }
.asteris-tl__dot { position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--asteris-tl-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.asteris-tl--alternate .asteris-tl__item:nth-child(odd) .asteris-tl__dot { right: -20px; }
.asteris-tl--alternate .asteris-tl__item:nth-child(even) .asteris-tl__dot { left: -20px; }
.asteris-tl--left .asteris-tl__dot { left: 0; }
.asteris-tl__card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 20px; }
.asteris-tl__date { display: inline-block; font-size: .8em; font-weight: 700; color: var(--asteris-tl-accent); margin-bottom: 4px; }
.asteris-tl__title { margin: 0 0 6px; font-size: 1.1em; }
.asteris-tl__text { margin: 0; color: #4b5563; }

/* ── Evergreen Countdown ────────────────────────────────────────────────── */
.asteris-cd { --asteris-cd-accent: #111827; text-align: center; }
.asteris-cd__units { display: inline-flex; gap: 16px; }
.asteris-cd__unit { background: var(--asteris-cd-accent); color: #fff; border-radius: 12px; padding: 16px 10px; min-width: 76px; }
.asteris-cd__num { display: block; font-size: 2.2em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.asteris-cd__label { display: block; font-size: .72em; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-top: 6px; }
.asteris-cd--small .asteris-cd__num { font-size: 1.5em; }
.asteris-cd--small .asteris-cd__unit { min-width: 56px; padding: 10px 8px; }
.asteris-cd--large .asteris-cd__num { font-size: 3em; }
.asteris-cd--large .asteris-cd__unit { min-width: 100px; padding: 22px 14px; }
.asteris-cd__expired { font-size: 1.2em; font-weight: 600; }

/* ── Animated Headline ──────────────────────────────────────────────────── */
.asteris-ah { --asteris-ah-highlight: #facc15; }
.asteris-ah__rotate { display: inline-block; position: relative; }
.asteris-ah__word { display: inline-block; color: var(--asteris-ah-highlight); transition: opacity .3s ease, transform .3s ease; }
.asteris-ah--highlight .asteris-ah__word { background: var(--asteris-ah-highlight); color: #111827; padding: 0 .2em; border-radius: 4px; }
.asteris-ah--type .asteris-ah__word::after { content: "|"; margin-left: 2px; animation: asteris-ah-blink 1s step-end infinite; color: currentColor; }
.asteris-ah__word.is-out { opacity: 0; transform: translateY(-8px); }
@keyframes asteris-ah-blink { 50% { opacity: 0; } }

/* ── Data Table Pro ─────────────────────────────────────────────────────── */
.asteris-dt { --asteris-dt-accent: #4f46e5; }
.asteris-dt__search { margin-bottom: 14px; }
.asteris-dt__input { width: 100%; max-width: 320px; padding: 9px 14px; border: 1px solid #d1d5db; border-radius: 8px; }
.asteris-dt__scroll { overflow-x: auto; }
.asteris-dt__table { width: 100%; border-collapse: collapse; }
.asteris-dt__table th, .asteris-dt__table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.asteris-dt--compact th, .asteris-dt--compact td { padding: 7px 12px; }
.asteris-dt__table thead th { background: #f8fafc; font-weight: 700; }
.asteris-dt--striped tbody tr:nth-child(even) { background: #f8fafc; }
.asteris-dt__th { cursor: pointer; user-select: none; white-space: nowrap; }
.asteris-dt__arrow::after { content: "↕"; opacity: .4; margin-left: 6px; }
.asteris-dt__th.is-asc .asteris-dt__arrow::after { content: "↑"; opacity: 1; color: var(--asteris-dt-accent); }
.asteris-dt__th.is-desc .asteris-dt__arrow::after { content: "↓"; opacity: 1; color: var(--asteris-dt-accent); }
.asteris-dt__empty { color: #6b7280; padding: 16px; }

/* ── Breadcrumbs Pro ────────────────────────────────────────────────────── */
.asteris-bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .9em; }
.asteris-bc__item { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; }
.asteris-bc__item a { color: inherit; text-decoration: none; }
.asteris-bc__item a:hover { text-decoration: underline; }
.asteris-bc__item [aria-current="page"] { color: #111827; font-weight: 600; }
.asteris-bc__sep { color: #9ca3af; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	.asteris-ql--cols-3 .asteris-ql__grid, .asteris-ql--cols-4 .asteris-ql__grid,
	.asteris-ql--cols-5 .asteris-ql__grid, .asteris-ql--cols-6 .asteris-ql__grid { grid-template-columns: repeat(2, 1fr); }
	.asteris-ql--list .asteris-ql__item { grid-template-columns: 1fr; }
	.asteris-price__grid, .asteris-pf__grid { grid-template-columns: 1fr !important; }
	.asteris-price__plan.is-featured { transform: none; }
	.asteris-tabs--vertical { grid-template-columns: 1fr; }
	.asteris-tabs--vertical .asteris-tabs__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 2px solid #e5e7eb; }
	.asteris-tl--alternate .asteris-tl__line { left: 19px; transform: none; }
	.asteris-tl--alternate .asteris-tl__item { width: auto; padding: 0 0 0 56px !important; text-align: left !important; margin-left: 0 !important; }
	.asteris-tl--alternate .asteris-tl__dot { left: 0 !important; right: auto !important; }
}
@media (max-width: 600px) {
	.asteris-gp--masonry .asteris-gp__grid, .asteris-gp--grid .asteris-gp__grid { column-count: 2; grid-template-columns: repeat(2, 1fr); }
	/* Countdown: let the 4 units wrap + shrink so they never overflow a phone
	   (was inline-flex with min-width 76px / 100px on --large → 448px row). */
	.asteris-cd__units { gap: 8px; flex-wrap: wrap; justify-content: center; }
	.asteris-cd__unit,
	.asteris-cd--large .asteris-cd__unit { min-width: 62px; padding: 12px 8px; }
	.asteris-cd--large .asteris-cd__num { font-size: 1.9em; }
	/* Data table: keep cells nowrap but guarantee the scroll wrapper contains them
	   instead of pushing the page wider. */
	.asteris-dt, .asteris-dt__scroll { max-width: 100%; }
	.asteris-dt__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.asteris-dt__table td { white-space: nowrap; }
}
@media (max-width: 480px) {
	/* On small phones, drop every multi-column grid to a single column so cards
	   are never cramped/cut off (these only fall to 2-col at the 600/781 stops). */
	.asteris-ql__grid,
	.asteris-pf__grid,
	.asteris-gp--masonry .asteris-gp__grid,
	.asteris-gp--grid .asteris-gp__grid { grid-template-columns: 1fr !important; column-count: 1 !important; }
	/* Carousel/slider: one slide per view on a phone. */
	.asteris-pcar__slide, .asteris-sld__slide { min-width: 100% !important; flex: 0 0 100% !important; }
}