/* ========================================
   TABLET OPTIMIZATIONS
   For displays 768px - 1023px
   (iPad, Android tablets)
   ======================================== */

/* === 1. TYPOGRAPHY SCALING === */
body {
    font-size: 15px; /* down from 16px */
}

header h1 {
    font-size: 38px; /* down from 48px */
    margin-left: 10px;
}

header h1 .subtext {
    font-size: 14px; /* down from 16px */
    margin-top: -32px;
}

nav ul li {
    font-size: 18px; /* down from 20px */
    margin-bottom: 8px;
}

header {
    padding-bottom: 10px;
}

/* === 2. CONTAINER & LAYOUT === */
.container {
    padding: 15px;
    max-width: 100%;
}

.left-column {
    flex: 0 0 15%;
    padding-right: 15px;
}

.right-column {
    padding-left: 0;
    width: 100%;
}

.projects-container {
    width: 100%;
}

/* === 3. GRID ADJUSTMENTS === */
/* Homepage project grid - 2 columns */
#home-projects.projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 950px;
}

/* Section project grids - 2 columns */
.projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 950px;
}

/* Make section pages match homepage layout */
.projects-container .projects-grid .project-tile {
    /* tiles already inherit the grid settings */
}

/* Ensure section page tiles are square like homepage */
.projects-container .project-image {
    height: auto;
    aspect-ratio: 1 / 1;
}

.projects-container .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Match homepage tile sizing */
.projects-container .projects-grid {
    max-width: 950px;
}

.projects-container .project-tile {
    max-width: 300px; /* this controls individual tile size */
}

/* Image tile grids - 2 columns */
.image-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-right: 0;
}

/* === 4. PROJECT TILES === */
.project-image {
    height: auto;
    aspect-ratio: 1 / 1; /* makes it square */
}

#home-projects .project-image {
    height: auto;
    aspect-ratio: 1 / 1; /* makes it square */
}

#home-projects .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.tile-image {
    height: 350px; /* reduced from 450px */
}

.project-info h3 {
    font-size: 18px; /* reduced from 24px */
}

.project-info p {
    font-size: 14px; /* reduced from 16px */
}

/* === 5. FIXED ELEMENTS === */
.COOPER-BOWMAN-LOGO {
    right: 20px;
    bottom: 5px;
}

.COOPER-BOWMAN-LOGO img {
    height: 60px; /* down from 80px */
}

.social-container {
    left: 15px;
    bottom: 7.5px;
    gap: 12px;
}

.social-icon {
    width: 26px; /* down from 28px */
    height: 26px;
}

/* === 6. FOOTER === */
footer {
    font-size: 12px;
    padding: 8px 15px 8px 15px; /* reduced top and bottom padding */
    bottom: 10px;
}

/* === 7. NAVIGATION DROPDOWN === */
.dropdown-menu {
    margin: 0.2rem 0 0 0.8rem;
}

.dropdown-menu a {
    font-size: 16px; /* down from 17px */
}

/* === 8. ABOUT PAGE === */
.about-content {
    flex-direction: column; /* stack vertically */
    gap: 30px;
    align-items: center;
}

.profile-image {
    width: 100%;
    max-width: 400px; /* reduced from 400px */
    height: auto;
    aspect-ratio: 2/3;
    margin: 0 auto; /* centers it */
    display: block;
}

.about-text {
    max-width: 100%;
}

.about-text p {
    font-size: 15px; /* reduced from 17px */
    line-height: 1.5;
    text-align: left; /* centers the text under the image */
}

/* === 9. PAGES SECTION === */
.pages-list {
    max-width: 100%;
}

.page-title {
    font-size: 20px; /* down from 22px */
}

.page-date {
    font-size: 13px; /* down from 14px */
}

.page-excerpt {
    font-size: 15px; /* down from 16px */
}

/* === 10. CONTACT PAGE === */
.contact-item h3 {
    font-size: 20px; /* down from 24px */
}

.contact-item p,
.contact-item a {
    font-size: 22px; /* down from 28px */
}

/* === 11. PROJECT DETAIL PAGES === */
.page-title {
    font-size: 34px; /* down from 42px */
}

.description {
    font-size: 16px;
    max-width: 100%;
    padding: 0 15px;
}

/* Project sections on detail pages */
.project-section {
    grid-template-columns: 1fr; /* single column */
    gap: 25px;
    padding-right: 0;
    margin-bottom: 60px;
}

.main-image,
.detail-grid,
.project-description {
    grid-column: 1; /* all span full width */
    grid-row: auto;
}

.project-description {
    position: static; /* remove sticky */
    padding: 15px;
    margin-bottom: 20px;
}

.project-description h3 {
    font-size: 20px;
}

.project-description p {
    font-size: 15px;
}

.main-image {
    padding-right: 0;
}

.detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.detail-grid img {
    height: 200px; /* reduced from 300px */
}

/* === 12. POST PAGES === */
.post-title {
    font-size: 36px; /* down from 42px */
}

.post-date {
    font-size: 13px; /* down from 14px */
}

.post-content {
    font-size: 16px; /* down from 18px */
    max-width: 100%;
}

.post-content p {
    margin-bottom: 20px;
}

.back-link {
    bottom: 25px;
    left: 25px;
    font-size: 15px;
}

/* === 13. MODAL === */
.modal img {
    max-width: 95%;
    max-height: 90%;
}

/* === 14. HOVER EFFECTS === */
/* Keep hover effects for tablets with mouse/trackpad */
.tile-image:hover,
.project-tile:hover {
    /* maintain existing hover effects */
}