/* ==========================================================
   SCCORIA CAMPUSES ARCHIVE ULTRA PREMIUM
   File: archive-campuses.css
========================================================== */

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

:root{

--navy:#08162D;
--navy-light:#123D7A;
--gold:#D4AF37;
--gold-light:#F5C542;
--white:#FFFFFF;
--light:#F7F9FC;
--border:#E8EDF3;
--text:#5B6475;

}

.sccoria-campus-archive{

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

}

.archive-container{

max-width:1450px;
margin:auto;
padding:0 24px;

}

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

.archive-hero{

padding:120px 0;

background:
linear-gradient(
135deg,
#08162D,
#123D7A
);

text-align:center;

position:relative;

overflow:hidden;

}

.archive-hero:before{

content:'';

position:absolute;

width:500px;
height:500px;

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

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

}

.archive-badge{

display:inline-flex;

padding:10px 20px;

border-radius:100px;

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

backdrop-filter:blur(10px);

color:#fff;

font-size:12px;

font-weight:700;

letter-spacing:2px;

margin-bottom:25px;

}

.archive-hero h1{

font-size:clamp(40px,6vw,82px);

font-weight:800;

line-height:1.05;

color:#fff;

max-width:1000px;

margin:auto auto 25px;

}

.archive-hero p{

font-size:20px;

line-height:1.9;

max-width:850px;

margin:auto;

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

}

/* ==========================================================
   STATS
========================================================== */

.archive-stats{

margin-top:-60px;

position:relative;

z-index:10;

padding-bottom:90px;

}

.archive-stats .archive-container{

display:grid;

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

gap:20px;

}

.stat-box{

background:#fff;

padding:35px;

border-radius:28px;

text-align:center;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

}

.stat-box strong{

display:block;

font-size:34px;

font-weight:800;

color:#08162D;

margin-bottom:8px;

}

.stat-box span{

font-size:15px;

font-weight:600;

color:#64748B;

}

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

.campus-archive-grid-section{

padding:20px 0 100px;

}

.campus-grid{

display:grid;

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

gap:30px;

}

/* ==========================================================
   CARD
========================================================== */

.campus-card{

background:#fff;

border-radius:32px;

overflow:hidden;

border:1px solid #E8EDF3;

transition:.4s;

box-shadow:
0 10px 30px rgba(0,0,0,.03);

}

.campus-card:hover{

transform:translateY(-10px);

box-shadow:
0 30px 70px rgba(0,0,0,.10);

}

.campus-card a{

display:block;

text-decoration:none;

height:100%;

}

.campus-image{

background:#fff;

overflow:hidden;

}

.campus-image img{

width:100%;

height:auto;

display:block;

transition:.4s;

}

.campus-card:hover img{

transform:scale(1.04);

}

.campus-content{

padding:28px;

}

.campus-content h2{

font-size:28px;

font-weight:800;

line-height:1.3;

color:#08162D;

margin-bottom:18px;

}

.campus-meta{

display:flex;

align-items:flex-start;

gap:10px;

font-size:15px;

line-height:1.8;

color:#64748B;

margin-bottom:12px;

}

.campus-btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:50px;

padding:0 24px;

margin-top:15px;

border-radius:100px;

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

color:#08162D;

font-size:14px;

font-weight:700;

}

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

.archive-pagination{

display:flex;

justify-content:center;

margin-top:70px;

gap:10px;

flex-wrap:wrap;

}

.archive-pagination .page-numbers{

display:flex;

align-items:center;

justify-content:center;

width:48px;
height:48px;

border-radius:14px;

text-decoration:none;

background:#fff;

border:1px solid #E8EDF3;

font-weight:700;

color:#08162D;

transition:.3s;

}

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

background:#08162D;

color:#fff;

border-color:#08162D;

}

/* ==========================================================
   EMPTY
========================================================== */

.no-campus{

text-align:center;

padding:120px 20px;

}

.no-campus h3{

font-size:32px;

font-weight:800;

color:#08162D;

}

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

@media(max-width:1024px){

.archive-stats .archive-container{

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

}

.campus-grid{

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

}

}

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

@media(max-width:768px){

.archive-container{

padding:0 16px;

}

.archive-hero{

padding:80px 0;

}

.archive-hero h1{

font-size:42px;

}

.archive-hero p{

font-size:16px;

}

.archive-stats{

margin-top:-40px;

padding-bottom:60px;

}

.archive-stats .archive-container{

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

gap:12px;

}

.stat-box{

padding:20px;

border-radius:20px;

}

.stat-box strong{

font-size:24px;

}

.campus-grid{

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

gap:12px;

}

.campus-content{

padding:18px;

}

.campus-content h2{

font-size:18px;

margin-bottom:12px;

}

.campus-meta{

font-size:13px;

line-height:1.6;

}

.campus-btn{

width:100%;

height:46px;

font-size:13px;

}

}

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

@media(max-width:480px){

.archive-stats .archive-container{

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

}

.campus-grid{

grid-template-columns:
1fr;

}

.archive-hero h1{

font-size:34px;

}

.archive-hero p{

font-size:15px;

}

.stat-box{

padding:16px;

}

.stat-box strong{

font-size:22px;

}

.campus-card{

border-radius:24px;

}

.campus-content h2{

font-size:20px;

}

}