/* --- Tablet Responsive Styles (601px - 999px) --- */

/* --- Header --- */
header {
    padding: 0 1.5rem;
}

header nav {
    gap: 1.5rem;
}

/* Prevent Overlap Smaller Tablets */
@media screen and (max-width: 850px) {
    .nav-meta {
        display: none;
    }
}

h2 {
    font-size: clamp(2.4rem, 8.4vw, 8.4rem);
}











/* --- Hero --- */
#hero {
height: 100vh;
}

#hero-text {
    font-size: 1.75rem;
    margin-bottom: 2.5rem;
}

.hero-spin {
    margin-bottom: 3rem;
}











/* --- Portfolio Grid --- */
.portfolio-main-header {
    font-size: clamp(4rem, 12vw, 10rem);
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 0;
}

.projects-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 0;
}

.project-info {
    padding: 12px 18px;
    gap: 8px;
    transform: translateY(0); 
}

.project-info .num {
    font-size: clamp(15px, 1.3vw, 18px);
}

.project-info .title {
    font-size: clamp(13px, 1.1vw, 16px);
}

.project-info .tags p {
    font-size: clamp(8.5px, 1vw, 10.5px);
    padding: 2px 6px;
}











/* --- Project Details --- */
.project-header {
    grid-template-columns: 1fr; 
    gap: 1.5rem;
    margin: 2rem 1.5rem;
}

.project-header h2 {
    font-size: clamp(48px, 12vw, 84px);
}

.project-meta {
    padding-top: 0;
}

.project-tags p {
    font-size: clamp(10px, 1.5vw, 11.5px);
}











/* --- About Page --- */
.aboutmain {
    flex-direction: row; 
    align-items: stretch;
    text-align: left;
    padding: 40px;
    margin: 3rem 1.5rem;
}

.aboutmain p {
    max-width: 380px; 
}

.aboutsocials {
    justify-content: flex-start;
}

.aboutbanner-img {
    width: 250px; 
    margin-top: 0;
}











/* --- Footer --- */
footer {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

footer a {
    overflow-wrap: anywhere; 
}

.footer-top {
    grid-template-columns: 2fr 1fr 1fr;
    text-align: left;
    gap: 2rem;
}

.footer-top > div:first-child {
    grid-column: auto;
    text-align: left;
    margin-bottom: 0;
    min-width: 0;
}

.footer-top > div:nth-child(2),
.footer-top > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 0;
}

.footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
}

.socials {
    justify-content: flex-end;
}