.homepage-grid { 
display: grid; 
grid-template-columns: 1fr 320px; 
gap: 2rem !important; 
margin-top: 4rem; 
align-items: stretch; } .grid-2-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
section { margin-bottom: 4rem; } 
.spacing-section { margin-top: 3rem; margin-bottom: 3rem; }
.section-header { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 0.5rem; border-bottom: 2px solid #000; }
.section-header h2 { font-size: 2rem; font-weight: 700; text-transform: uppercase; margin: 0;}
.section-header .header-link a { font-size: 0.9rem; font-weight: 600; color: var(--colorGold); text-decoration: none;}
.black { background-color: #000; color: var(--colorGold); }
.gold { background-color: #777; color: #fff; }
.black .section-header { border-color: var(--colorGold); }
.gold .section-header { border-color: #fff; }
.gold .header-link a { color: #fff; } .main-content { min-width: 0; }
.hero-section .card.cover { min-height: 500px; } 
.hero-section .card.cover .card-image { aspect-ratio: unset; height: 100%; border-radius: 12px; }
.hero-section .card.cover .card-title { font-size: 2.8rem; margin-bottom: 1rem; } .sidebar-container { 
height: 100%; 
min-height: 100%; 
position: relative; 
}
.sidebar-news {
position: -webkit-sticky;
position: sticky;
top: calc(100vh - 100% - 20px); background-color: #fff;
padding: 2rem 1.5rem;
border-radius: 20px;
box-shadow: 0 4px 25px rgba(0,0,0,0.05);
border: 1px solid #f2f2f2;
}
.feed-wrapper { 
display: flex; 
flex-direction: column; 
max-height: none !important; 
overflow: visible !important; 
}
.feed-item { padding-block: 1rem; border-bottom: 1px solid #eee; }
.feed-item:first-child { padding-top: 0; }
.feed-item:last-child { border-bottom: none; }
.feed-desktop-view a { display: block; text-decoration: none; }
.feed-desktop-view:hover .feed-title { color: var(--colorGold); }
.feed-mobile-view { display: none; } .feed-title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; color: #000; }
.feed-details { font-size: 0.75rem; color: #888; font-weight: 600; text-transform: uppercase; align-items: center; display: flex; }
.feed-time { margin-right: 0.5rem; padding-right: 0.5rem; border-right: 1px solid #ccc; }
.feed-category { color: var(--colorGold); }
.feed-ad-container { margin-block: 15px; }
.all-news-btn { margin-top: 1.5rem; text-align: center; }
.all-news-btn .btn-primary { display: block; background-color: var(--colorGold); color: #000; font-weight: 700; text-transform: uppercase; padding: 0.75rem 1rem; border-radius: 8px; }
.all-news-btn .btn-primary:hover { background-color: #000; color: var(--colorGold); }
@media screen and (min-width:661px) {
.ad-height-box {}
}
@media screen and (min-width:768px) {
.ad-height-banner {height:90px}
}
@media screen and (min-width:1400px) {
.ad-height-banner {height:250px;display:flex;align-items: center;justify-content: center;}
}  .shorts-full-bg {
background-color: #0f0f0f; padding-block: 4rem;
margin-bottom: 4rem;
}
.shorts-full-bg .home-shorts { margin-bottom: 0; }
.shorts-full-bg .section-header { border-bottom: 2px solid #333; }
.shorts-full-bg .section-header h2 { color: #fff; } .shorts-grid { 
display: flex; gap: 1rem; overflow-x: auto; 
scroll-snap-type: x mandatory; padding-bottom: 1rem; 
cursor: grab; scrollbar-width: none; }
.shorts-grid::-webkit-scrollbar { display: none; } .shorts-grid.dragging { 
cursor: grabbing; 
scroll-snap-type: none; }
.shorts-grid.dragging .social-video { 
pointer-events: none; 
} .social-video { 
flex: 0 0 240px; aspect-ratio: 9/16; border-radius: 12px; position: relative; 
overflow: hidden; cursor: pointer; background: #000; scroll-snap-align: start; 
transition: transform 0.3s ease; 
}
.social-video:hover { transform: scale(1.03); }
.social-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s; }
.social-video:hover img { opacity: 1; } .social-video .play-icon { 
position: absolute; top: 50%; left: 50%; 
transform: translate(-50%, -50%); 
width: 65px; height: 65px; 
display: flex; justify-content: center; align-items: center; 
pointer-events: none; transition: transform 0.3s ease;
}
.social-video:hover .play-icon { transform: translate(-50%, -50%) scale(1.1); } .short-share-btn {
position: absolute; top: 12px; right: 12px;
background: rgba(0,0,0,0.6); padding: 8px;
border-radius: 50%; z-index: 10;
display: flex; align-items: center; justify-content: center;
transition: background 0.3s ease, transform 0.3s ease;
}
.short-share-btn:hover { background: var(--colorGold); transform: scale(1.1); } .social-video::after {
content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
pointer-events: none; z-index: 2;
} .short-title {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 1rem 1rem 1.25rem 1rem; z-index: 5; color: #fff;
}
.short-title h3 {
font-family: "Fira Sans Extra Condensed", sans-serif;
font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 0;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
} .shorts-footer {
margin-top: 2rem; gap: 1rem; padding-top: 1.5rem;
border-top: 1px solid #333;
}
.shorts-footer .follow-text { color: #fff; font-size: 1.25rem; letter-spacing: 1px; }
.shorts-footer .social li { filter: invert(1); transition: filter 0.3s ease; }
.shorts-footer .social li:hover { filter: var(--filterGold); } .shorts-panel { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.shorts-panel.show { display: flex; }
.shorts-panel.on { opacity: 1; pointer-events: all; }
.short-outer { width: 100%; max-width: 400px; max-height: 90vh; aspect-ratio: 9/16; background: #000; border-radius: 12px; overflow: hidden; position: relative; }
.short-outer iframe { width: 100% !important; height: 100% !important; border-radius: 12px; }
.shorts-panel .close-panel { 
position: absolute; top: 2rem; right: 2rem; width: 3rem; height: 3rem; 
background-color: var(--colorGold); cursor: pointer; border: 2px solid #fff; 
border-radius: 5px; z-index: 99999 !important; display: block;
}
.shorts-panel .close-panel .line { border-top: 2px solid #fff; width: 80%; left: 10%; top: 50%; position: absolute; transform-origin: center; transform: rotate(45deg); }
.shorts-panel .close-panel .line:last-of-type { transform: rotate(-45deg); }  .card.blog { overflow: initial; min-height: 160px; display: flex; align-items:center; position: relative; background-color: #fff; border-radius: 12px; border: 1px solid #f2f2f2;}
.card.blog .card-image { width: 120px; height: 120px; position: absolute; left: 1rem; border-radius: 10px; overflow: hidden;}
.card.blog .card-info { padding-left: 160px; padding-right: 1rem; }
.card.blog .card-title { font-style: italic; font-weight: 400; font-size: 1.25rem; font-family: "Open Sans", sans-serif; line-height: 1.3;}
.card.blog .card-title a { color: #000; }
.card.blog .card-author { font-weight: 700; font-size: 1rem; color: var(--colorGold); margin-top: 0.5rem;}
.bloggers-container > div { container-name: blog-card; container-type: inline-size; }
@container blog-card (width < 480px) { 
.card.blog { min-height: 120px; } 
.card.blog .card-image { width: 100px; height: 100px; } 
.card.blog .card-info { padding-left: 130px; } 
} .latest-game { position: relative; padding-block: 4rem; }
.latest-game::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1;}
.latest-game .bg-img { filter: grayscale(1); position: absolute; inset: 0; background-position: center; background-size: cover; z-index: 0;}
.latest-game--wrapper { justify-content: center; align-items: center; gap: 3rem; height: 100%; position: relative; z-index: 2;}
.latest-game-info { color: #fff; text-align: center; }
.latest-game-info h2 { font-size: 24px; margin-bottom: 0.5rem; color: var(--colorGold); }
.latest-game-info h3 { font-size: 16px; margin-bottom: 1.5rem; }
.latest-game-teams { background-color: rgba(255, 255, 255, 0.9); padding: 1rem 2rem; border-radius: 12px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; color: #000; align-items: center;}
.latest-game-teams .home, .latest-game-teams .away { font-weight: 700; font-size: 1.5rem; text-transform: uppercase;}
.latest-game-teams .score { background: #000; color: #fff; padding: 0.5rem 1rem; border-radius: 8px; font-size: 2.5rem; font-weight: 700; }
.latest-video.card-wrapper { max-width: 400px; width: 100%; } .paok-basket-feed-section { margin: 40px auto; }
.paok-basket-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; position: relative; padding-top: 15px; }
.paok-basket-header::before { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 3px; background-color: #b5955a; }
.paok-basket-title { font-size: 26px; font-weight: bold; text-transform: uppercase; color: #111; margin: 0; letter-spacing: 1px; }
.paok-basket-view-more { font-size: 13px; font-weight: 700; color: #b5955a; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
.paok-basket-view-more:hover { color: #000; }
.paok-basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.paok-basket-card { position: relative; height: 290px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.paok-basket-card:hover { transform: translateY(-5px); }
.paok-basket-card-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 1; transition: transform 0.5s ease; }
.paok-basket-card:hover .paok-basket-card-bg { transform: scale(1.06); }
.paok-basket-card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.95) 100%); z-index: 2; }
.paok-basket-badge { position: absolute; top: 15px; left: 15px; background-color: #000000; color: #ffffff; padding: 5px 12px; font-size: 10px; font-weight: 800; letter-spacing: 1px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3); z-index: 3; text-transform: uppercase; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.paok-basket-card-content { position: relative; z-index: 3; padding: 20px 18px; }
.paok-basket-card-title { margin: 0 0 10px 0; font-size: 17px; line-height: 1.35; font-weight: 700; }
.paok-basket-card-title a { color: #ffffff; text-decoration: none; }
.paok-basket-card-title a:hover { color: #e6e6e6; }
.paok-basket-card-meta { font-size: 11px; color: #b3b3b3; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.paok-basket-separator { color: #b5955a; font-weight: bold; }
@media screen and (max-width:1136px) {
.paok-basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
}
@media screen and (max-width:800px) {
.paok-basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
}
@media screen and (max-width:420px) {
.paok-basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 20px; }
} @media screen and (max-width: 1024px) { .homepage-grid { grid-template-columns: 1fr; }
.grid-4-cols { grid-template-columns: repeat(2, 1fr); }
.hero-section .card.cover .card-title { font-size: 2.2rem; }
.latest-game--wrapper { flex-direction: column; } .sidebar-container { height: auto; min-height: auto; }
.sidebar-news { position: static; background: none; padding: 0; box-shadow: none; border: none; }
.feed-desktop-view { display: none !important; }
.feed-mobile-view { display: block !important; height: 100%; }
.feed-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem !important; }
.feed-item { padding-block: 0; border-bottom: none; display: flex; flex-direction: column; }
.feed-ad-container { grid-column: 1 / -1; margin-block: 0; } .grid-3-cols, .special-grid-layout { 
grid-template-columns: repeat(2, 1fr) !important; 
}
.grid-3-cols > article:first-child, .special-grid-layout > .card-wrapper:first-child {
grid-column: 1 / -1; }	
}
@media screen and (max-width: 650px) { .grid-2-cols, .grid-3-cols, .grid-4-cols { grid-template-columns: 1fr; }
.feed-wrapper { grid-template-columns: 1fr; } .hero-section .card.cover { min-height: 450px; }
.hero-section .card.cover .card-title { font-size: 1.8rem; }
.latest-game-teams { gap: 1rem; padding: 1rem; }
.latest-game-teams .home, .latest-game-teams .away { font-size: 1.2rem; }
.latest-game-teams .score { font-size: 2rem; }
.grid-3-cols, .special-grid-layout { 
grid-template-columns: 1fr !important; 
}
.grid-3-cols > article:first-child, .special-grid-layout > .card-wrapper:first-child {
grid-column: auto; }
}
@media screen and (max-width: 520px) { .shorts-panel .close-panel { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; } 
} .covers-full-bg { 
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); 
padding-block: 5rem; 
position: relative; 
overflow: hidden; 
border-top: 4px solid var(--colorGold);
}
.covers-image img { 
width: 100% !important; 
height: auto !important; max-width: 400px; object-fit: unset !important; border-radius: 8px; 
box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
transform: perspective(1000px) rotateY(-10deg); 
transition: transform 0.5s ease; 
margin-inline: auto;
}
.covers-image:hover img { 
transform: perspective(1000px) rotateY(0deg) scale(1.02); }
.highlights-full-bg {
background-color: var(--colorGold);
color: #fff;
}
.highlights-full-bg .section-header { border-color: #fff; }
.highlights-full-bg .header-link a { color: #fff; }
@media screen and (max-width: 768px) {
.covers-text h2 { font-size: 2.5rem !important; }
.covers-image img { transform: none; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
}  .special-banner-wrapper {
margin-bottom: 2rem;
border-radius: 12px;
overflow: hidden;
}
.special-banner-wrapper img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.special-header h2 {
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
margin: 0px;
}
.special-header h2::before {
display:none;
}
.special-header {
border-bottom: 2px solid #777;
}
span.special-span {
display: block;
margin: 1rem 0;
font-size: 11px;
opacity: 0.9;
} .special-tag-section[style*="background"], 
.preseason-section[style*="background"] {
margin-inline: 0;
}
.special-spon {
text-align: center;
display: block;
margin: 0;
font-style: italic;
font-size: 14px;
}
@media screen and (min-width:1024px) {
.narrow-space {margin: 0 -1.5em;}
}