/* ==========================================================
   SCCORIA PROGRAM ARCHIVE V2 ULTRA PREMIUM
   File: archive-program.css
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root{

--navy:#071529;
--navy2:#0F2748;
--gold:#D4AF37;
--gold2:#F5C542;
--white:#ffffff;
--light:#F7F9FC;
--border:#E8EDF3;
--text:#64748B;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

.sccoria-programs-archive-v2{

font-family:'Plus Jakarta Sans',sans-serif;
background:#fff;
overflow:hidden;

}

.spa-container{

max-width:1500px;
margin:auto;
padding:0 25px;

}

/* ==================================================
   HERO
================================================== */

.spa-hero{

padding:140px 0 170px;

background:
linear-gradient(
135deg,
#071529 0%,
#0F2748 50%,
#123D7A 100%
);

position:relative;

overflow:hidden;

}

.spa-hero:before{

content:'';

position:absolute;

width:650px;
height:650px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(212,175,55,.15),
transparent
);

top:-250px;
right:-150px;

}

.spa-hero:after{

content:'';

position:absolute;

width:550px;
height:550px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.05),
transparent
);

bottom:-250px;
left:-150px;

}

.spa-hero-content{

max-width:1000px;

position:relative;

z-index:2;

}

.spa-badge{

display:inline-flex;

padding:12px 22px;

border-radius:100px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

color:#fff;

font-size:12px;

font-weight:700;

letter-spacing:2px;

margin-bottom:25px;

}

.spa-hero h1{

font-size:clamp(42px,6vw,90px);

font-weight:800;

line-height:1.05;

color:#fff;

margin-bottom:25px;

}

.spa-hero p{

font-size:20px;

line-height:1.9;

max-width:850px;

color:rgba(255,255,255,.92);

}

/* ==================================================
   FEATURED
================================================== */

.spa-featured{

margin-top:-90px;

position:relative;

z-index:5;

padding-bottom:90px;

}

.spa-heading{

text-align:center;

margin-bottom:50px;

}

.spa-heading span{

display:block;

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:#D4AF37;

margin-bottom:10px;

}

.spa-heading h2{

font-size:clamp(30px,4vw,58px);

font-weight:800;

line-height:1.1;

color:#08162D;

}

.spa-featured-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.spa-featured-card{

background:#fff;

border-radius:32px;

overflow:hidden;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

transition:.35s;

}

.spa-featured-card:hover{

transform:translateY(-10px);

}

.spa-featured-card a{

display:block;

text-decoration:none;

}

.spa-featured-image{

background:#fff;

}

.spa-featured-image img{

width:100%;
height:auto;

display:block;

}

.spa-featured-content{

padding:30px;

}

.spa-category{

display:inline-flex;

padding:8px 16px;

border-radius:100px;

background:
linear-gradient(
135deg,
#D4AF37,
#F5C542
);

color:#08162D;

font-size:12px;

font-weight:700;

margin-bottom:18px;

}

.spa-featured-content h3{

font-size:28px;

font-weight:800;

line-height:1.4;

color:#08162D;

margin-bottom:15px;

}

.spa-meta{

font-size:15px;

font-weight:600;

color:#64748B;

margin-bottom:20px;

}

/* ==================================================
   PROGRAM GRID
================================================== */

.spa-programs{

padding:0 0 100px;

}

.spa-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.spa-card{

background:#fff;

border-radius:32px;

overflow:hidden;

border:1px solid #E8EDF3;

transition:.35s;

}

.spa-card:hover{

transform:translateY(-10px);

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.spa-card a{

display:block;

text-decoration:none;

height:100%;

}

.spa-image{

background:#fff;

}

.spa-image img{

width:100%;
height:auto;

display:block;

}

.spa-content{

padding:28px;

}

.spa-content h3{

font-size:24px;

font-weight:800;

line-height:1.4;

color:#08162D;

margin:15px 0;

}

.spa-content p{

font-size:15px;

line-height:1.9;

color:#64748B;

margin-bottom:20px;

}

.spa-details{

display:grid;

grid-template-columns:
1fr 1fr;

gap:15px;

margin-bottom:25px;

}

.spa-details div{

background:#F7F9FC;

padding:14px;

border-radius:18px;

}

.spa-details strong{

display:block;

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

margin-bottom:5px;

color:#94A3B8;

}

.spa-details span{

font-size:14px;

font-weight:700;

color:#08162D;

}

.spa-btn{

display:flex;

align-items:center;
justify-content:center;

height:50px;

border-radius:100px;

background:#08162D;

color:#fff;

font-size:14px;

font-weight:700;

}

/* ==================================================
   PAGINATION
================================================== */

.spa-pagination{

display:flex;

justify-content:center;

margin-top:70px;

gap:10px;

flex-wrap:wrap;

}

.spa-pagination .page-numbers{

display:flex;

align-items:center;
justify-content:center;

width:48px;
height:48px;

border-radius:14px;

background:#fff;

border:1px solid #E8EDF3;

text-decoration:none;

font-weight:700;

color:#08162D;

transition:.3s;

}

.spa-pagination .page-numbers:hover,
.spa-pagination .current{

background:#08162D;

color:#fff;

border-color:#08162D;

}

/* ==================================================
   TABLET
================================================== */

@media(max-width:1024px){

.spa-featured-grid{

grid-template-columns:
1fr 1fr;

}

.spa-grid{

grid-template-columns:
1fr 1fr;

}

}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

.spa-container{

padding:0 16px;

}

.spa-hero{

padding:90px 0 120px;

text-align:center;

}

.spa-hero p{

font-size:16px;

}

.spa-featured-grid{

grid-template-columns:
1fr 1fr;

gap:12px;

}

.spa-grid{

grid-template-columns:
1fr 1fr;

gap:12px;

}

.spa-featured-content,
.spa-content{

padding:18px;

}

.spa-featured-content h3,
.spa-content h3{

font-size:18px;

}

.spa-details{

grid-template-columns:
1fr;

gap:10px;

}

}

/* ==================================================
   SMALL MOBILE
================================================== */

@media(max-width:480px){

.spa-hero h1{

font-size:34px;

}

.spa-hero p{

font-size:15px;

}

.spa-featured-grid{

grid-template-columns:
1fr;

}

.spa-grid{

grid-template-columns:
1fr;

}

.spa-heading h2{

font-size:30px;

}

}