/* css/style.css */
/* Custom styles for li Betlej Portfolio */

/* --- Font Definitions --- */
/* Jost is now linked via Google Fonts in header.php, so @font-face rules are removed. */

/* --- Global Styles --- */
html { overflow-y: scroll; }
body { font-family: 'Jost', sans-serif; font-weight: 400; line-height: 1.6; color: #333; background-color: #ffffff; padding-top: 2rem; padding-bottom: 2rem; }
/* Updated default heading weight to 600. */
h1, h2, h3, h4, h5, h6 { font-family: 'Jost', sans-serif; font-weight: 600; }
h1.page-title, .project-detail h1.page-title { font-size: 1.8rem; text-align: center; margin-bottom: 1.5rem; } /* Inherits 600 weight */
.project-detail h1.page-title { margin-bottom: 0.5rem; } /* Inherits 600 weight */
p, .breadcrumb-item, .project-card .card-text { font-family: 'Jost', sans-serif; font-weight: 400; }
a { color: #000000; text-decoration: underline; transition: color 0.3s ease; }
a:hover { color: #555555; }
.container { max-width: 1140px; }

/* --- Header --- */
.logo { margin-bottom: 0.5rem; }
.logo a { font-size: 2.5rem; color: #000000; text-decoration: none; font-weight: 600; /* Logo weight remains 600 (Jost Semi-Bold) */ }
.logo a:hover { color: #000000; text-decoration: none; }
.breadcrumb { background-color: transparent; padding: 0; margin-bottom: 2rem; font-size: 0.9rem; }
.breadcrumb-item { font-weight: 300; /* Jost Light */ }
.breadcrumb-item a { color: #555555; }
.breadcrumb-item a:hover { color: #000000; }
.breadcrumb-item.active { color: #000000; font-weight: 400; /* Jost Regular */ }


/* --- Project Cards --- */
.project-card { margin-bottom: 1.5rem; border: none; background-color: transparent; }
.project-card a { text-decoration: none; color: inherit; display: block; }
.project-card a:hover { text-decoration: none; }
.project-card .card-body a { text-decoration: underline; }
.project-card .card-body a:hover { text-decoration: underline; }
.project-card .card-img-wrapper { overflow: hidden; margin-bottom: 0.5rem; background-color: #f8f9fa; border-radius: 0; }
.project-card .card-img-wrapper .ratio { --bs-aspect-ratio: calc(4 / 5 * 100%); /* 5:4 */ }
.project-card .card-img-top { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; border-radius: 0 !important; }
.project-card a:hover .card-img-top { opacity: 0.85; }
.project-card .card-body { padding: 0; }
.project-card .card-title { font-size: 1.1rem; margin-bottom: 0.1rem; font-weight: 600; /* Jost Semi-Bold */ }
.project-card .card-text { font-size: 0.8rem; color: #6c757d; margin-bottom: 0; font-weight: 300; /* Jost Light */ }

/* --- Project Detail Page --- */
.project-detail .project-meta { font-size: 1rem; color: #6c757d; margin-bottom: 1.5rem; font-weight: 300; /* Jost Light */ }
.project-detail .project-description { margin-bottom: 2rem; font-weight: 400; /* Jost Regular */ }
.project-detail .project-graphic,
.project-detail .project-video,
.project-detail .project-sketchfab,
.project-detail .project-images { margin-bottom: 2rem; }
.project-detail .project-graphic img,
.project-detail .project-video iframe,
.project-detail .project-sketchfab iframe { margin-bottom: 0; }
.project-images .lightbox-thumbnail { margin-bottom: 0; display: block; transition: opacity 0.3s ease; }
.project-images .lightbox-thumbnail:hover { opacity: 0.8; }
.project-images img { width: 100%; height: auto; background-color: #f8f9fa; border-radius: 0; }

/* --- Project Navigation (Prev/Next Links) --- */
.project-navigation { margin-top: 5rem; }

/* --- About Page --- */
.about-content { margin-top: 0; }
.about-content h1.page-title { margin-top: 0; font-weight: 600; /* Jost Semi-Bold */ }
.about-content h2 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; /* Jost Semi-Bold */ }
/* Style for H3 Skill Titles */
.about-content h3 {
    font-size: 1.1rem;
    font-weight: 600; /* Jost Semi-Bold */
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.skill-item p { /* General paragraph styling within skill items */
    font-weight: 400; /* Jost Regular */
}
.skill-item p:first-of-type { /* Targeting the 'Tools: ... Goal: ...' paragraph */
    font-size: 0.9rem; /* Slightly smaller */
    color: #555;
    font-weight: 500; /* Jost Medium for emphasis */
    margin-bottom: 0.5rem;
}


/* --- Contact Links --- */
.contact-links p { margin-top: 1rem; font-size: 1rem; text-align: center; }
.contact-links a { font-weight: 400; /* Jost Regular - Changed from 500 */ margin: 0 0.5rem; }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .logo a { font-size: 2rem; }
    h1.page-title, .project-detail h1.page-title { font-size: 1.6rem; } /* Inherits 600 weight */
    .about-content h2 { font-size: 1.4rem; } /* Inherits 600 weight */
    .about-content h3 { font-size: 1.0rem; } /* Inherits 600 weight */
    .project-navigation { margin-top: 4rem; }
}

@media (max-width: 576px) {
    body { padding-top: 1rem; }
    .logo a { font-size: 1.8rem; }
    .breadcrumb { margin-bottom: 1rem; }
    .contact-links p { font-size: 0.9rem; }
    h1.page-title, .project-detail h1.page-title { font-size: 1.5rem; } /* Inherits 600 weight */
     .about-content h2 { font-size: 1.3rem; } /* Inherits 600 weight */
     .about-content h3 { font-size: 0.95rem; } /* Inherits 600 weight */
    .project-card .card-img-wrapper .ratio { --bs-aspect-ratio: 100%; /* 1:1 */ }
    .project-navigation { margin-top: 3rem; }
}

/* --- Lightbox Customization (Optional) --- */
.lb-data .lb-caption { font-family: 'Jost', sans-serif; font-weight: 400; /* Jost Regular */ }
.lb-data .lb-number { font-family: 'Jost', sans-serif; font-weight: 300; /* Jost Light */ }

/* --- Aspect Ratios --- */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-vertical { --bs-aspect-ratio: 177.77777777%; /* Corresponds to 9:16, e.g. 1080/608 * 100 or 1920/1080 for vertical video */ }