/* custom.css */

/* --- General Utilities --- */
.tbnrs {
	position: absolute;
	right: 1rem;
	top: 6.4rem;
	justify-content: center;
	align-items: center;
	z-index: 10;
	gap: 5px;
	display: none;
}

@media screen and (min-width: 800px) {
	.tbnrs {
		display: flex;
	}
}

.footer__bnrs {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1rem;
}

.gap {
	gap: 0.5rem;
}

/* --- About Us Section Styles --- */
.aboutus__content {
	height: 100%;
	overflow: auto;
}

.aboutus__btns {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 3.125rem;
}

[data-open-tab-active="false"].aboutus__btntabopen {
	opacity: 0.5;
}

[data-open-tab-active="true"].aboutus__btntabopen {
	opacity: 1;
}

.btns {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0;
}

.aboutus__content a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-light-rgb);
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.aboutus__content a:hover {
    color: #ffba70;
    border-color: #ffba70;
    background-color: rgba(255, 186, 112, 0.1);
}

.aboutus__content .aboutus__list-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

@media screen and (min-width: 992px) {
    .aboutus__content {
        columns: 2;
        column-gap: 2rem;
    }
    .aboutus__content a {
        break-inside: avoid-column;
        margin-bottom: 1rem;
    }
}

.aboutus__content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .aboutus__content-wrapper {
        align-items: initial;
    }
}

.aboutus__content {
    width: 100%;
    max-width: 100%;
}

.aboutus__premium-text {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffba70;
    margin: 1.5rem 0;
    width: 100%;
}

.aboutus__content br {
    display: none; /* Видаляємо теги <br>, щоб вони не заважали Flexbox/Grid */
}

/* --- News Section Styles --- */

/* Контейнер для слайдів Swiper (news__swiper-wrapper) */
.news__swiper-wrapper {
    display: flex; /* Swiper сам керує цим для горизонтального слайдингу */
    /* Swiper додає свої власні стилі для позиціонування та ширини слайдів.
       Уникайте тут flex-wrap, justify-content, align-items, оскільки це може конфліктувати
       з логікою Swiper. Якщо потрібні відступи між слайдами, це зазвичай робиться
       через опції Swiper.js (spaceBetween) або margin-right на .swiper-slide. */
}

/* Окремий слайд Swiper */
.news__swiper-slide.swiper-slide {
    flex-shrink: 0; /* Важливо для коректної роботи Swiper */
    /* Swiper.js зазвичай встановлює ширину через inline-стилі.
       Якщо потрібно, тут можна задати min-width або max-width для адаптивності,
       але будьте обережні, щоб не конфліктувати з шириною, встановленою Swiper. */
}

/* Стилі для кожної окремої картки новини (.news__post.post) */
.news__post.post {
    display: flex;
    flex-direction: column; /* Вміст картки (зображення, body) - у колонку */
    background-color: #1a0c08;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-decoration: none;
    color: inherit;
    width: 450px; /* Фіксована ширина для кожної новини, налаштуйте за потребою */
    min-width: 180px; /* Мінімальна ширина для адаптивності */
    max-width: 100%;
    height: 100%; /* Важливо для того, щоб картки розтягувалися на однакову висоту */
}

.news__post.post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Блок для зображення (.post__pic) */
.post__pic {
    width: 100%;
    flex-shrink: 0; /* Щоб зображення не стискалося */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.post__pic .post__img {
    width: 100%;
    height: 150px; /* Фіксована висота зображення */
    object-fit: cover; /* Зображення покриває контейнер, зберігаючи пропорції */
    display: block; /* Видаляємо зайвий простір під зображенням */
}

/* Блок з основним вмістом новини (.post__body) */
.post__body {
    display: flex;
    flex-direction: column; /* Вміст body: content та bar - у колонку */
    flex-grow: 1; /* Дозволяє post__body розтягуватися і займати весь доступний простір по висоті */
    padding: 15px; /* Внутрішні відступи для всього блоку body */
}

/* Блок з текстом новини (.post__content) */
.post__content {
    display: flex;
    flex-direction: column; /* Вміст content: info, title, desc - у колонку */
    flex-grow: 1; /* Дозволяє content розтягуватися */
}

/* Інформаційний блок (дата) (.post__info) */
.post__info {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    text-align: right; /* Дата справа */
    margin-bottom: 5px; /* Відступ під info */
}

.post__date {
    /* Додаткові стилі для дати, якщо потрібно */
}

/* Заголовок новини (.post__title) */
.post__title {
    font-family: 'Philosopher', serif;
    font-size: 1.2em; /* Трохи менший розмір, щоб поміщався */
    font-weight: 700;
    color: #f7e6c3;
    text-align: center;
    margin-bottom: 10px; /* Відступ під заголовком */
    line-height: 1.2; /* Висота рядка для кращого вигляду */
}

/* Опис новини (.post__desc) */
.post__desc {
    font-family: 'Spectral', serif;
    font-size: 0.9em; /* Трохи менший розмір для опису */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    flex-grow: 1; /* Дозволяє опису займати весь доступний простір, "виштовхуючи" кнопку вниз */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Обмежуємо опис 3 рядками (або більше, на ваш розсуд) */
    -webkit-box-orient: vertical;
    margin-bottom: 15px; /* Відступ перед кнопкою */
}

/* Блок з кнопкою "Читати" (.post__bar) */
.post__bar {
    margin-top: auto; /* Це ключова властивість: відштовхує .post__bar до низу .post__body */
    text-align: center; /* Центруємо кнопку */
}

.post__btn.btn.btn_type_2 {
    display: inline-block; /* Щоб можна було задати padding та ширину */
    padding: 8px 15px;
    background-color: #5d4037; /* Темно-коричневий або схожий колір для кнопки */
    color: #f7e6c3; /* Золотистий колір тексту кнопки */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Spectral', serif; /* Або ваш основний шрифт для кнопок */
    font-size: 0.9em;
}

.post__btn.btn.btn_type_2:hover {
    background-color: #7b584d; /* Світліший колір при наведенні */
}

/* Стилі для заголовків секції новин (залишаємо як є) */
.news__subtitle {
    font-family: 'Spectral', serif;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-bottom: 5px;
}

.news__title {
    font-family: 'Philosopher', serif;
    font-size: 2.2em;
    font-weight: 700;
    color: #f7e6c3;
    text-align: center;
    margin-bottom: 30px;
}