/* YouTube Channel + Events & News — homepage sections and their full pages */

.media-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 50px; }
.media-head .heading-section { max-width: 640px; margin-bottom: 0; }
.media-head .label { display: inline-flex; align-items: center; gap: 8px; background: rgba(152, 202, 77, .16); color: var(--black-4); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.media-head .label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--global); }
.media-head .title h2 { margin-bottom: 14px; }
.media-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* YouTube */
.yt-section { background: var(--gray-6); border-radius: 30px; padding: 100px 0; }
.yt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.yt-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid transparent; transition: .3s; height: 100%; }
.yt-card:hover { border-color: var(--global); box-shadow: 0 18px 40px rgba(32, 38, 91, .08); transform: translateY(-4px); }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black-4); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.yt-card:hover .yt-thumb img { transform: scale(1.05); }
.yt-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 38, 91, 0) 50%, rgba(32, 38, 91, .45)); }
.yt-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: .3s; }
.yt-play::before { content: ''; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #e62117; }
.yt-card:hover .yt-play { background: var(--global); transform: scale(1.08); }
.yt-card:hover .yt-play::before { border-left-color: #fff; }
.yt-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.yt-body h3 { font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--black-4); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yt-body h3 a { color: inherit; }
.yt-body h3 a:hover { color: var(--global); }
.yt-meta { position: relative; margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-paragraph); }
/* YouTube badge: red rounded box (::before) with a white play triangle (::after) */
.yt-meta::before { content: ''; width: 18px; height: 13px; border-radius: 4px; background: #e62117; flex: none; }
.yt-meta::after { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #fff; }

/* Events & News */
.ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 20px; }
.ev-grid.is-home .ev-item:first-child { grid-column: span 2; grid-row: span 2; }
.ev-item { position: relative; display: block; overflow: hidden; border-radius: 20px; background: var(--gray-6); }
.ev-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ev-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 38, 91, 0) 45%, rgba(32, 38, 91, .75)); opacity: 0; transition: .3s; }
.ev-item:hover img { transform: scale(1.06); }
.ev-item:hover::after, .ev-item:focus-visible::after { opacity: 1; }
.ev-tag { position: absolute; z-index: 1; left: 16px; top: 16px; background: #fff; color: var(--black-4); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.ev-zoom { position: absolute; z-index: 1; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--global); color: #fff; display: grid; place-items: center; font-size: 22px; line-height: 1; opacity: 0; transform: translateY(10px); transition: .3s; }
.ev-item:hover .ev-zoom, .ev-item:focus-visible .ev-zoom { opacity: 1; transform: none; }
.ev-page .ev-grid { grid-auto-rows: 280px; }

.media-count { color: var(--color-paragraph); font-size: 15px; }
.media-count strong { color: var(--black-4); }

.mfp-title { font-size: 14px; }

@media (max-width: 1199px) {
    .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ev-grid.is-home .ev-item:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 767px) {
    .yt-section { padding: 70px 0; border-radius: 20px; }
    .media-head { margin-bottom: 34px; }
    .yt-grid { grid-template-columns: 1fr; gap: 20px; }
    .ev-grid, .ev-page .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 12px; }
    .ev-grid.is-home .ev-item:first-child { grid-column: span 2; grid-row: span 1; }
    .ev-item { border-radius: 14px; }
    .ev-zoom { opacity: 1; transform: none; width: 36px; height: 36px; font-size: 18px; right: 10px; bottom: 10px; }
}