/* -- Button hover states -- */
.hero-btn-primary {
    transition: filter 0.2s ease, transform 0.15s ease;
}
.hero-btn-primary:hover,
.hero-btn-primary:focus {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.hero-btn-outline-secondary {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-secondary:hover,
.hero-btn-outline-secondary:focus {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
    border-color: var(--bs-secondary) !important;
    transform: translateY(-1px);
}

.hero-btn-outline-primary-light {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-primary-light:hover,
.hero-btn-outline-primary-light:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-1px);
}
/* About v10 — tab visibility and active state (no palette in CSS) */

.guide-sq-8  { width: 2rem;   height: 2rem;   flex-shrink: 0; }
.guide-sq-12 { width: 3rem;   height: 3rem;   flex-shrink: 0; }
.guide-sq-16 { width: 4rem;   height: 4rem;   flex-shrink: 0; }
.guide-sq-20 { width: 5rem;   height: 5rem;   flex-shrink: 0; }

.guide-ab10-tab-panel.guide-ab10-tab-panel-hidden {
    display: none;
}

.guide-ab10-tab-btn.guide-ab10-tab-active {
    font-weight: 700;
    transform: translateY(-1px);
}

.guide-ab10-tab-btn.guide-ab10-tab-inactive {
    font-weight: 500;
    opacity: 0.9;
}

.content-col-grow {
    flex: 1 1 0%;
    min-width: 0;
}

.content-img-fill {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    min-width: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.narrative-chapter__column-inset {
    padding: 4rem;
}

/* Як v2: inner + CTA-падінги; v3 — картка-плитка collection-stock__tile + прозорість у Blade */

.collection-stock__inner {
    padding: 0.875rem 1rem;
}

@media (min-width: 576px) {
    .collection-stock__inner {
        padding: 1.125rem;
    }
}

/* BS: прозоре тіло картки (узгоджено з tw: bg-white/80 …) */
.collection-stock__tile.card .collection-stock__inner {
    background-color: color-mix(in srgb, var(--bs-body-bg, #fff) 82%, transparent);
}

@media (prefers-color-scheme: dark) {
    .collection-stock__tile.card .collection-stock__inner {
        background-color: color-mix(in srgb, var(--bs-body-bg, #212529) 55%, transparent);
    }
}

[data-bs-theme='dark'] .collection-stock__tile.card .collection-stock__inner {
    background-color: color-mix(in srgb, var(--bs-body-bg, #212529) 55%, transparent);
}

.collection-stock__tile.card:hover {
    border-color: var(--bs-primary) !important;
}

.collection-stock__tile.card:hover .collection-stock__more {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.1));
}

.collection-stock__tile.card:hover .collection-stock__more-icon {
    transform: translateX(0.25rem);
}

/*
 * TW: прев’ю Tailwind не задає --bs-primary (лише --tw-primary-* на :root).
 * BS-гілка .card:hover лишається на var(--bs-primary); тут — той самий візуальний намір через шкалу TW + fallback на BS, якщо змінні є на сторінці.
 */
a.collection-stock__tile:not(.card):hover {
    border-color: var(--bs-primary, rgb(var(--tw-primary-500) / 1)) !important;
}

a.collection-stock__tile:not(.card):hover .collection-stock__more {
    color: var(--bs-primary, rgb(var(--tw-primary-600) / 1)) !important;
    background-color: var(
        --bs-primary-bg-subtle,
        rgb(var(--tw-primary-50) / 0.92)
    );
}

.dark a.collection-stock__tile:not(.card):hover .collection-stock__more {
    color: var(--bs-primary, rgb(var(--tw-primary-400) / 1)) !important;
    background-color: var(
        --bs-primary-bg-subtle,
        rgb(var(--tw-primary-950) / 0.55)
    );
}

a.collection-stock__tile:not(.card):hover .collection-stock__more-icon {
    transform: translateX(0.25rem);
}

.collection-stock__preview--glow {
    transition: transform 0.5s ease;
    transform: scale(1);
    transform-origin: center center;
}

a.collection-stock__tile:not(.card):hover .collection-stock__preview--glow,
a.collection-stock__tile:not(.card) .collection-stock__preview--glow:hover {
    transform: scale(1.05);
}

/*
 * Уся картка — <a>; браузер/глобальні стилі дають посиланню синій колір, діти успадковують.
 * Без явного кольора для «Детальніше» воно залишається синім навіть без :hover.
 */
a.collection-stock__tile:not(.card) .collection-stock__more {
    color: rgb(30 41 59);
    background-color: transparent;
}

.dark a.collection-stock__tile:not(.card) .collection-stock__more {
    color: rgb(241 245 249);
}

/* Іконка стрілки: inline-block для transform з Tailwind (hover на батьківському <a>) */
.collection-stock__more-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}

.collection-stock__tile.card:hover .collection-stock__preview--glow,
.collection-stock__tile.card .collection-stock__preview--glow:hover {
    transform: scale(1.05);
}

.collection-stock__region--mb-2xl {
    margin-bottom: 4rem;
}

/* TW: ціна / період не підфарбовуються під колір посилання */
a.collection-stock__tile:not(.card):hover .collection-stock__price,
a.collection-stock__tile:not(.card):focus-visible .collection-stock__price {
    color: rgb(15 23 42);
}

.dark a.collection-stock__tile:not(.card):hover .collection-stock__price,
.dark a.collection-stock__tile:not(.card):focus-visible .collection-stock__price {
    color: rgb(241 245 249);
}

a.collection-stock__tile:not(.card):hover .collection-stock__meta,
a.collection-stock__tile:not(.card):focus-visible .collection-stock__meta {
    color: rgb(148 163 184);
}

.dark a.collection-stock__tile:not(.card):hover .collection-stock__meta,
.dark a.collection-stock__tile:not(.card):focus-visible .collection-stock__meta {
    color: rgb(100 116 139);
}

/* glossary gazette — multi-column flow (not CSS grid), brick avoid breaks, footnote icon */
.glossary-gazette__columns {
    column-count: 1;
    column-gap: 1.25rem;
}

@media (min-width: 768px) {
    .glossary-gazette__columns {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .glossary-gazette__columns {
        column-count: 3;
    }
}

.glossary-gazette__brick {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.glossary-gazette__note-ico {
    width: 3.25rem;
    height: 3.25rem;
}

.glossary-gazette__note-icon {
    font-size: 1.25rem;
    line-height: 1;
}