/* projects.css */

/* 1. Layout Container */
main, section {
    width: 100%;
    
    box-sizing: border-box;
}

/* 2. Responsive Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 2rem;
    background: #ffffff;
    border-radius: 0.75rem;
    margin-top: 2rem;
}

.final-row {
    margin-bottom: 0;
}

.title-row {
    background: none;
}

.prototype-row {
    margin-bottom: 0;
}

#chc-site {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Apply flex and gap to the container */
.image-grid-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; 
    padding: 1rem; /* Keeps images from touching the edge of the row background */
    justify-content: center;
    background: none;
}

/* Redefine col-4 width to account for the gap */
/* Formula: (100% / columns) - (total gap space / columns) */
.image-grid-gap .col-4 {
    width: calc(33.33% - 0.67rem); 
    background: none;
}

/* Column logic - allows columns to scale inside the window */
.col-12 { width: 100%; }
.col-11 { width: 91.6%; }
.col-10 { width: 83.33%; }
.col-8 { width: 66%; }
.col-6  { width: 50%; }
.col-5 { width: 41.66%; }
.col-4  { width: 33.33%; }
.col-3  { width: 25%; }
.col-2  { width: 16.66%; }
.col-1 { width: 8.33%; }
.col-05 { width: 4.16%; }

/* 3. Media Scaling (Images & Video) */
/* This ensures media scales to the window and resizes dynamically */
.big-image, 
.medium-image, 
.small-image, 
.extra-small-image,
.prototype {
    width: 100%; 
    height: auto; /* Maintains aspect ratio */
    display: block;
    object-fit: contain;
}

.prototype-container {
    width: 100%;       /* Or your desired width */
    height: 500px;     /* Set this to your desired window height */
    overflow: hidden;  /* This is the "guillotine" that cuts the bar */
    position: relative;
    border-radius: 8px; /* Optional: makes it look cleaner */
}

.interactive-prototype {
    width: 100%;
    height: calc(100% + 60px); /* Makes iframe taller than the container */
    margin-bottom: -40px;      /* Pulls the bottom up to hide the footer */
    border: none;
}

.no-bottom-image {
    margin-bottom: 0;
}

.no-top-image {
    margin-top: 0;
}

/* 4. Typography & Styling */
.project-title {
    font-family: 'SFBold', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.project-sub-title {
    font-family: 'SFMedium', sans-serif;
    font-size: 0.75rem;
     color: var(--text-color);
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 0;
}

.project-section-title {
    font-family: 'SFBold', sans-serif;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

/* Requested Project Body Background */
.project-body {
    font-family: 'SFRegular', sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 0rem;
    margin-top: 0px;
    padding-bottom: 1.5rem;
    color: color-mix(in srgb, var(--text-color), transparent 10%);
    /* text-align: justify; */
}

.project-body-list {
    font-size: 1.1rem;
    font-family: 'SFMedium';
}

.project-body-small {
    font-family: 'SFRegular', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
     color: var(--text-color);
    padding-left: 1rem;
}

/* 5. Lists */
.project-bullet, .project-numbered {
    padding-left: 20px;
    margin: 1rem 0;
}

.project-bullet li, .project-numbered li {
    margin-bottom: 10px;
}

/* 6. Centering utilities */
center {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* projects.css */

@keyframes content-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Initial state for project content */
main {
    opacity: 0;
}

/* Adding .visible unconditionally plays the animation from scratch */
main.visible {
    animation: content-slide-up 0.55s ease-out 0.35s both;
}

/* general.css */

/* Target the text in all windows */
.window-title, 
.window-content {
    color: var(--text-color);
    /* Adding a transition makes the text fade smoothly like the wallpaper */
    transition: color 0.6s ease-in-out;
}

/* Ensure project-specific text also follows the theme */
.project-title,
.project-section-title{
    color: var(--text-color) !important;
}

.chc-temp {
    text-align: center;
    font-family: "SFMedium";
    font-size: 2rem;
    padding: .2rem;
    margin: 0;
    color: var(--text-color) !important;
}

.chc-temp-small {
    margin-top: 3rem;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.vogro-list{
    padding-bottom: 0;
    padding-top: 0;
}

.marcopolo-analysis {
    display: flex;
    align-items: center; 
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.marcopolo-analysis-text {
    font-size: 1.2rem;
} 

.marcopolo-quote {
    width: auto;
    text-align: center;
    font-family: 'SFItalic';
}

.marcopolo-stats {
    text-align: center;
    font-size: 2rem;    
    font-family: "SFBold";
    margin-left: 4rem;
    margin-right: 4rem;
    color: var(--text-color);
    margin-bottom: 0;
}

.vogro-mini-stat {
    text-align: center;
}

.vogro-specific-row {
    background: #f9f9f9;
}

.bettermind-unique {
    padding-top: 0;
    margin-top: 0;
}

.bettermind-unique-image {
    padding-bottom: 1rem;;
}

.hero-statement {
    font-family: "SFBold";
    font-size: 4rem;
    padding-top: 2rem;
    margin-top: 0;
    padding-bottom: 2rem;
    margin-bottom: 0;
}

.context-list {
    opacity: 80%;
    font-size: 0.9rem;
}

.context-list-bold {
    opacity: 95%;
}

.bold {
    color: var(--text-color);
}

#impact-summary {
    padding-top: 2rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

#about-1 {
    font-size: 8.4rem;
    padding: 0;
    margin: 0;
    line-height: .8;
}

#about-2 {
    text-align: right;
    font-size: 8.3rem;
    padding: 0;
    margin: 0;
     line-height: .8;
     margin-bottom: 3rem;
}

.quick-summary {
    position: relative
}

.about-sticker {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
}

.mini-title {
    font-size: 0.8rem;
    opacity: 80%;
}

.mini {
    font-size: 0.9rem;
    padding-bottom: 0;
}

.row-divider {
    width: 91.3%;          /* Controls how wide the line is */
    margin: 2rem auto 0; /* Centers the line and adds top spacing */
    border: 0;
    border-top: 1px solid var(--text-color);
    opacity: 0.2;        /* Makes the line subtle */
}

.divider-row {
    margin-top: 2rem;
    margin-bottom: 4rem;
}

#project-prototype {
    padding: 0;
    margin: 0;
}

.blurb-row {
    padding-top: 0rem;
    margin-top: 0;
    padding-bottom: 3rem;
}

/* Stop scroll exactly at last content element — no trailing space */
.window-content main > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.big-image {
    margin-bottom: 3rem;
}

.bettermind-cover {
    border-radius: 20px;
}

.small-statistic {
    font-size: 1rem;
    color: #2e2bfb;
}

/* REMOVE WHEN UPDATES */
.temporary-bot {
    text-align: center;
    opacity: 20%;
    font-size: 1rem;
}