/* ТТС Новини */

/* ---------- Банер: небо над Києвом ---------- */
.tts-hero {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: clamp(420px, 52vw, 560px);
	background: linear-gradient(180deg, #021634 0%, #042352 38%, #1F4485 72%, #6E8FD0 100%);
	color: #fff;
	display: flex; align-items: center;
}
.tts-hero.alignfull { margin-top: 0; }
.tts-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tts-hero__sun { position: absolute; width: 220px; height: 220px; right: 12%; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 182, 206, .55), rgba(249, 22, 101, 0) 68%); }

/* Хмари — м'які овали, пливуть з різною швидкістю */
.tts-hero__cloud { position: absolute; left: -30%; height: 60px; width: 220px; border-radius: 60px; background: rgba(255, 255, 255, .16); filter: blur(1px); animation: tts-cloud linear infinite; }
.tts-hero__cloud::before, .tts-hero__cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.tts-hero__cloud::before { width: 110px; height: 90px; left: 30px; top: -42px; }
.tts-hero__cloud::after { width: 80px; height: 70px; left: 110px; top: -30px; }
.tts-hero__cloud--1 { top: 16%; animation-duration: 70s; animation-delay: -10s; }
.tts-hero__cloud--2 { top: 34%; transform: scale(.7); animation-duration: 95s; animation-delay: -60s; opacity: .8; }
.tts-hero__cloud--3 { top: 8%; transform: scale(1.25); animation-duration: 120s; animation-delay: -35s; opacity: .6; }
.tts-hero__cloud--4 { top: 48%; transform: scale(.55); animation-duration: 80s; animation-delay: -5s; opacity: .7; }
@keyframes tts-cloud { from { translate: 0 0; } to { translate: 170vw 0; } }

/* Літак зі слідом — пролітає раз на ~22 с */
.tts-hero__plane { position: absolute; top: 18%; left: -160px; display: flex; align-items: center; color: #fff; animation: tts-plane 22s 1.5s linear infinite; }
.tts-hero__plane .tts-ticon { width: 34px; height: 30px; }
.tts-hero__trail { width: 140px; height: 2px; margin-right: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)); border-radius: 2px; }
@keyframes tts-plane {
	0% { transform: translate(0, 40px); opacity: 0; }
	4% { opacity: 1; }
	45% { transform: translate(calc(100vw + 320px), -40px); opacity: 1; }
	46%, 100% { transform: translate(calc(100vw + 320px), -40px); opacity: 0; }
}

/* Силует Києва: два шари з легким паралаксом */
.tts-hero__city { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(110px, 16vw, 200px); }
.tts-hero__city--back path { fill: #15356B; }
.tts-hero__city--front path { fill: #021634; }
.tts-hero__city--back { animation: tts-drift 40s ease-in-out infinite alternate; }
@keyframes tts-drift { from { transform: translateX(-12px); } to { transform: translateX(12px); } }

/* Вміст банера */
.tts-hero__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 24px clamp(120px, 15vw, 190px); }
.tts-hero__slide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.tts-hero__slide:not(:has(.tts-hero__media)) { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.tts-hero__slide-body { display: flex; flex-direction: column; gap: 16px; }
.tts-hero__label { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #FFB3CB; }
.tts-hero__title { margin: 0; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.15; font-weight: 800; color: #fff; }
.tts-hero__title a { color: inherit; text-decoration: none; }
.tts-hero__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tts-hero__more { align-self: flex-start; background: var(--tts-pink); color: #fff; font-weight: 800; padding: 12px 22px; border-radius: 12px; text-decoration: none; transition: transform .25s var(--tts-ease), background-color .25s; }
.tts-hero__more:hover { background: var(--tts-pink-text); color: #fff; transform: translateY(-2px); }
.tts-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 50px rgba(10, 16, 40, .45); display: block; }
.tts-hero__slide.is-active .tts-hero__slide-body > * { animation: tts-rise .8s var(--tts-ease) both; }
.tts-hero__slide.is-active .tts-hero__slide-body > *:nth-child(2) { animation-delay: .08s; }
.tts-hero__slide.is-active .tts-hero__slide-body > *:nth-child(3) { animation-delay: .16s; }
.tts-hero__slide.is-active .tts-hero__media { animation: tts-zoomin 1.1s var(--tts-ease) both; }
@keyframes tts-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tts-zoomin { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Банер з логотипом: новини ліворуч, анімований логотип праворуч */
.tts-hero__inner--logo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.tts-hero__inner--logo .tts-hero__logo { order: 2; --tts-logo-size: 380px; margin: 0 auto; }
.tts-hero__inner--logo .tts-hero__slider { order: 1; }
@media (max-width: 782px) {
	.tts-hero__inner--logo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.tts-hero__inner--logo .tts-hero__logo { order: 0; --tts-logo-size: 220px; }
}

.tts-hero__controls { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.tts-hero__controls .tts-slider__dots { justify-content: flex-start; }
.tts-hero .tts-slider__prev, .tts-hero .tts-slider__next { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.tts-hero .tts-slider__prev:hover, .tts-hero .tts-slider__next:hover { background: #fff; color: var(--tts-navy); }

.tts-hero__cta { position: absolute; z-index: 2; top: 20px; right: max(24px, calc((100% - 1200px) / 2 + 24px)); background: var(--tts-pink); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; padding: 12px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 10px 24px rgba(10, 16, 40, .3); }
.tts-hero__cta:hover { background: #fff; color: var(--tts-pink-text); }

@media (max-width: 782px) {
	.tts-hero__slide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.tts-hero__media { order: -1; }
	.tts-hero__media img { aspect-ratio: 16 / 9; }
	.tts-hero__cta { position: static; display: inline-block; margin: 16px 24px 0; }
	.tts-hero { flex-direction: column; align-items: stretch; }
}

/* ---------- Картка новини ---------- */
.tts-news-card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--tts-line); border-radius: var(--tts-r); overflow: hidden;
	color: var(--tts-ink); text-decoration: none;
	transition: transform .35s var(--tts-ease), box-shadow .35s var(--tts-ease), border-color .35s;
}
.tts-news-card:hover { transform: translateY(-4px); box-shadow: var(--tts-shadow); border-color: #CCD3E6; color: var(--tts-ink); }
.tts-news-card__media { display: block; aspect-ratio: 16 / 10; background: #E8EBF5; overflow: hidden; }
.tts-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--tts-ease); }
.tts-news-card:hover .tts-news-card__media img { transform: scale(1.05); }
.tts-news-card__ph { display: grid; place-items: center; width: 100%; height: 100%; color: #C5CDE3; }
.tts-news-card__ph .tts-ticon { width: 56px; height: 56px; }
.tts-news-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.tts-news-card__label { font-size: 12px; font-weight: 800; color: var(--tts-pink-text); text-transform: uppercase; letter-spacing: .7px; }
.tts-news-card__title { font-size: 16px; font-weight: 700; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tts-news-card__date { margin-top: auto; font-size: 13px; color: var(--tts-muted); }

/* ---------- Секція рубрики ---------- */
.tts-news-cat__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tts-news-cat--featured .tts-news-cat__grid > :first-child { grid-row: span 2; }
.tts-news-cat--featured .tts-news-cat__grid > :first-child .tts-news-card__media { aspect-ratio: auto; flex: 1; min-height: 240px; }
.tts-news-cat--featured .tts-news-cat__grid > :first-child .tts-news-card__body { flex: 0; }
.tts-news-cat--featured .tts-news-cat__grid > :first-child .tts-news-card__title { font-size: 20px; }
.tts-news-cat--featured .tts-news-cat__grid > .tts-news-card:not(:first-child) { flex-direction: row; }
.tts-news-cat--featured .tts-news-cat__grid > .tts-news-card:not(:first-child) .tts-news-card__media { flex: 0 0 38%; aspect-ratio: auto; }
.tts-news-cat--featured .tts-news-cat__grid > .tts-news-card:not(:first-child) .tts-news-card__title { -webkit-line-clamp: 3; font-size: 15px; }
.tts-news-cat { margin-block: var(--wp--preset--spacing--60, 56px); }
@media (max-width: 1000px) {
	.tts-news-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tts-news-cat--featured .tts-news-cat__grid > :first-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
	.tts-news-cat__grid { grid-template-columns: minmax(0, 1fr); }
	.tts-news-cat--featured .tts-news-cat__grid > .tts-news-card:not(:first-child) { flex-direction: column; }
}

/* ---------- Карусель ---------- */
.tts-news-carousel { margin-block: var(--wp--preset--spacing--60, 56px); }
.tts-news-carousel .tts-carousel__track > li { list-style: none; }

@media (prefers-reduced-motion: reduce) {
	.tts-hero__cloud, .tts-hero__plane, .tts-hero__city--back { animation: none !important; }
	.tts-hero__plane { display: none; }
}
