.yt-main-container {
font-family: Arial, sans-serif;
}

/* ആദ്യത്തെ 2 വലിയ വീഡിയോകൾ */
.yt-featured-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 25px;
}

/* താഴെ വരുന്ന 3 എണ്ണം വീതമുള്ള വീഡിയോകൾ */
.yt-sub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 30px;
}

@media (max-width: 768px) {
.yt-featured-grid { grid-template-columns: 1fr; }
.yt-sub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
.yt-sub-grid { grid-template-columns: 1fr; }
}

.yt-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: transform 0.2s;
}
.yt-card:hover {
transform: translateY(-4px);
}

.yt-thumbnail-wrapper {
position: relative;
padding-top: 56.25%;
background: #111;
}
.yt-thumbnail-wrapper img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}

.yt-play-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 44px; height: 44px;
background: rgba(220, 38, 38, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.yt-play-icon::after {
content: ”;
display: block;
width: 0; height: 0;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #ffffff;
margin-left: 2px;
}

.yt-content {
padding: 12px;
}
.yt-meta {
font-size: 11px;
color: #dc2626;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 6px;
}

.yt-featured-grid .yt-title {
font-size: 16px;
font-weight: bold;
line-height: 1.4;
margin: 0;
color: #111;
}

.yt-sub-grid .yt-title {
font-size: 13px;
font-weight: bold;
line-height: 1.3;
margin: 0;
color: #111;
}

.yt-watch-more-btn {
text-align: center;
margin-top: 10px;
}
.yt-watch-more-btn a {
display: inline-block;
background-color: #dc2626;
color: #ffffff;
padding: 12px 28px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border-radius: 25px;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
}
.yt-watch-more-btn a:hover {
background-color: #b91c1c;
transform: scale(1.03);
}

(function() {
const CHANNEL_ID = ‘UCv_omVikeu1h2sxbIA1hStg’;
const FEED_URL = ‘https://api.allorigins.win/get?url=’ + encodeURIComponent(‘https://www.youtube.com/feeds/videos.xml?channel_id=’ + CHANNEL_ID);

fetch(FEED_URL)
.then(response => {
if (response.ok) return response.json();
throw new Error(‘Network error’);
})
.then(data => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(data.contents, “text/xml”);
const entries = xmlDoc.getElementsByTagName(“entry”);

const featuredContainer = document.getElementById(‘yt-featured-section’);
const subContainer = document.getElementById(‘yt-sub-section’);

if (entries.length === 0) {
featuredContainer.innerHTML = ‘

വീഡിയോകൾ ലഭ്യമല്ല.

‘;
return;
}

for (let i = 0; i < entries.length; i++) {
let entry = entries[i];
let videoId = entry.getElementsByTagName("yt:videoId")[0].textContent;
let title = entry.getElementsByTagName("title")[0].textContent;
let pubDate = new Date(entry.getElementsByTagName("published")[0].textContent).toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});

let link = `https://www.youtube.com/watch?v=${videoId}`;

// തമ്പ്നെയ്ലുകൾ ഉറപ്പാക്കാൻ img.youtube.com ലിങ്ക് കൊടുക്കുന്നു
let thumbnail = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;

let cardHTML = `

VIDEO • ${pubDate}

${title}

`;

if (i {
console.error(err);
document.getElementById(‘yt-featured-section’).innerHTML = ‘

വീഡിയോകൾ ലോഡ് ചെയ്യാൻ സാധിച്ചില്ല.

‘;
});
})();