*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#f4f4f4;color:#333}

/* Header */
header{background:#111;padding:15px 20px}
.navbar{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:15px}
.logo{color:#fff;font-size:22px;text-decoration:none}
.nav-links{list-style:none;display:flex;gap:20px}
.nav-links a{color:#fff;text-decoration:none}
.nav-links a:hover{text-decoration:underline}

.search-section{max-width:300px}
.mobile-search-icon{display:none;font-size:22px;color:#fff;cursor:pointer}

/* Search Overlay */
.search-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;justify-content:center;align-items:center}
.search-overlay.active{display:flex}
.overlay-content{background:#fff;padding:20px;border-radius:10px;width:90%;max-width:400px}
#closeOverlay{background:none;border:none;font-size:18px;cursor:pointer;float:right}

/* Layout */
.container{max-width:1200px;margin:30px auto;padding:0 15px}
h1{margin-bottom:20px}

.magazine-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:25px;
}

.magazine-card{
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    transition:transform .3s ease,box-shadow .3s ease;
}
.magazine-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.magazine-link{text-decoration:none;color:inherit;display:block}
.magazine-card img{
    width:100%;
    aspect-ratio:350/480;
    object-fit:contain;
    background:#eee;
}
.magazine-info{padding:10px}
.magazine-info h2{font-size:16px}

/* Pagination */
.pagination{margin:40px 0;display:flex;justify-content:center;gap:10px}

/* Footer */
footer{background:#111;color:#ccc;text-align:center;padding:15px;margin-top:40px}

/* Mobile */
@media(max-width:768px){
.nav-links,.search-section{display:none}
.mobile-search-icon{display:block}
}

/* Pagination links */
.pagination a,
.pagination span {
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.pagination a:hover {
    background: #111;
    color: #fff;
}

.pagination .active {
    background: #111;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

.pagination .ellipsis {
    background: transparent;
    box-shadow: none;
    padding: 8px 6px;
}

/* Responsive Pagination */
.pagination {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Compact pagination on mobile */
@media (max-width: 480px) {
    .pagination a,
    .pagination span {
        padding: 6px 8px;
        font-size: 13px;
    }

    .pagination .nav-link {
        flex-basis: 100%;
        text-align: center;
    }
}

.intro-text {
  max-width: 900px;
  margin: 12px auto 28px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  text-align: center;
}


.view-all-btn {
  display: inline-block;
  margin: 30px auto 10px;
  padding: 12px 26px;
  background-color: #111;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.view-all-btn:hover,
.view-all-btn:focus {
  background-color: #333;
  transform: translateY(-1px);
  color: #fff;
}
.view-all-wrap {
  text-align: center;
}