@import url("teachers.css");

body{
background:#f7f7f7;
}


/* Hero overrides */

.teacher-search-form{
grid-template-columns:1fr 1fr 1fr auto;
max-width:1000px;
margin:auto;
align-items:end;
gap:20px;
}



.teacher-search-form .btn-search{
height:44px;
padding:0 22px;
background:#FFC000;
border:none;
border-radius:8px;
font-weight:700;
cursor:pointer;
}

.teacher-search-form .btn-search:hover{
background:#e6ad00;
}


/* GRID */
.academy-list{
padding:40px 0;
}

.academy-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}


/* CARD */
.academy-card{
background:#fff;
border-radius:10px;
padding:12px;
box-shadow:0 3px 10px rgba(0,0,0,0.07);
transition:.2s;
text-align:center;
}



.academy-card:hover{
transform:translateY(-3px);
}



.academy-image img{
width:100%;
height:110px;
object-fit:cover;
border-radius:6px;
margin-bottom:8px;
}

.academy-name{
font-size:14px;
font-weight:700;
margin-bottom:4px;
}

.academy-location{
font-size:12px;
color:#777;
margin-bottom:6px;
}

.academy-meta{
font-size:12px;
margin-bottom:8px;
}

.academy-social{
display:flex;
justify-content:center;
gap:8px;
font-size:11px;
}

.academy-social a{
color:#666;
text-decoration:none;
}


.academy-cta{
display:block;
margin-top:10px;
background:#FFC000;
color:#000;
text-align:center;
padding:7px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
text-decoration:none;
transition:.2s;
}

.academy-cta:hover{
background:#e6ad00;
}


/* FILTERS */

.academy-filters{
background:#f2f2f2;
padding:30px 0;
display: flex;
gap:20px;
}

.academy-filters .container{
display:flex;
gap:10px;
align-items:center;
}

.academy-filters select{
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:13px;
  background:#fff;
  min-width:180px;
}


.filter-reset-btn{
background:#FFC000;
color:#000;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-size:14px;
margin-right:10px;
display:inline-block;
}

.filter-reset-btn:hover{
opacity:.85;
}

.academy-pagination{
display:flex;
justify-content:center;
gap:8px;
margin-top:40px;
flex-wrap:wrap;
}

.page-btn{
padding:8px 14px;
border-radius:8px;
background:#eee;
text-decoration:none;
color:#333;
font-size:14px;
}

.page-btn.active{
background:#FFC000;
color:#000;
font-weight:bold;
}


.teacher-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;   /* 🔥 این باعث میشه وسط بیاد */
  margin: 20px 0 30px;
}


.teacher-filters span {
  font-size: 14px;
  color: #444;
  font-weight: bold;
}

.filter-btn {
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 13px;
}

.filter-btn.active,
.filter-btn:hover {
  background: #FFC000;
  color: #222;
  border-color: #FFC000;
}

.teacher-filters select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
}


/* ===============================
RESPONSIVE
=============================== */

/* Tablet */
@media (max-width: 1024px){

.academy-grid{
grid-template-columns:repeat(3,1fr);
}

.teacher-search-form{
grid-template-columns:1fr 1fr;
}

}


/* Mobile */
@media (max-width: 768px){

.teacher-search-form{
grid-template-columns:1fr;
gap:12px;
}

.teacher-search-form .btn-search{
width:100%;
}

.academy-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.academy-image img{
height:90px;
}

.academy-card{
padding:10px;
}

.academy-filters .container{
flex-direction:column;
align-items:stretch;
gap:10px;
}

.academy-filters select{
width:100%;
}

.teacher-filters{
justify-content:center;
gap:8px;
}

}


/* Small Mobile */
@media (max-width: 480px){

.academy-grid{
grid-template-columns:1fr;
}

.academy-image img{
height:120px;
}

.academy-name{
font-size:15px;
}

.academy-meta{
font-size:13px;
}

.page-btn{
padding:6px 10px;
font-size:13px;
}

}
