/*
Theme Name: Portfolio 2025
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: A modern portfolio theme with an asymmetric grid for projects.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio-2025
*/

/* Basic Reset & Variables */
:root {
    /* Fonts: Heavy Inter for headings, Jakarta Sans for body */
    --font-family-heading: 'Inter', sans-serif;
    --font-family-body: 'Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Colors from original portfolio */
    --bg: #f9f9f9;
    --fg: #222222;
    --card: #ffffff; /* For hover cards/items */
    --panel-bg: rgba(14,26,43,0.65); /* semi-transparent navy for hover panel */
    --panel-sub: #d0d6e0; /* Subtext in hover panel */
    --accent: #ff4d00;
    --ring: rgba(255,77,0,0.20); /* For logo ring */
    --text-light: #555; /* For secondary text elements */
    --separator-color: #ddd; /* General subtle separator */
    --heavy-separator-color: #222222; /* New, bold separator color */
    --heavy-separator-height: 2px; /* New, bold separator thickness */

    /* Spacing & Sizes */
    --max-content-width: 1440px; /* Updated max width as requested */
    --page-padding-desktop: 70px; /* New desktop padding as requested */
    --section-padding-large: 96px;
    --section-padding-medium: 64px;
    --gap-medium: 48px;
    --gap-small: 24px;
    --border-radius-large: 16px; /* For hero image, general items */
    --border-radius-medium: 12px; /* For buttons */
    --border-radius-small: 8px; /* For logo */

    /* Font Sizes (adjusted for consistent typography across pages) */
    --fs-base: 16px;
    --fs-nav-name: 18px;
    --fs-case-hero: 72px; /* Adjusted: Larger for main project title (H1) */
    --fs-case-subtitle: 24px; /* Still 24px for sub-title/meta */
    --fs-intro-paragraph: 20px;
    --fs-section-number: 14px;
    --fs-section-heading: 48px; /* For H2 section headers (like "Other Case Studies") */
    --fs-sub-section-heading: 36px; /* NEW: For H3 section titles (like "Defining the Problem") */
    --fs-body-paragraph: 18px;
    --fs-project-title: 18px;
    --fs-project-meta: 13px;
    --fs-footer: 16px;
    --fs-about-hero: 48px;
    --fs-about-para: 20px;
    --fs-projects-header: 40px;
}

/* Global Styles */
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-family-body);
    font-weight: 400;
    font-size: var(--fs-base); /* This is the base font size for the entire document */
    line-height: 1.6;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header (Copied from original homepage) */
header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg,var(--accent),#ff9ac1);
    box-shadow: 0 0 0 3px var(--ring),0 10px 25px rgba(0,0,0,0.06);
}
.brand h1 {
    font-size: var(--fs-nav-name);
    font-weight: 900; /* Inter Black */
    margin: 0;
    font-family: var(--font-family-heading);
}
.controls {
    display: flex;
    gap: 12px;
    align-items: center;
}
.btn {
    padding: 10px 16px;
    border-radius: var(--border-radius-medium);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease-out, background 0.2s ease; /* For button press effect */
}
/* Button press effect */
.btn:active {
    transform: scale(0.98);
    background: #e64400; /* Darker shade for active state */
}

.icon-linkedin {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.1s ease-out, box-shadow 0.2s ease; /* For button press effect */
}
.icon-linkedin svg {
    fill: currentColor;
}
/* LinkedIn icon press effect */
.icon-linkedin:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Main content wrapper */
main {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--page-padding-desktop);
    /* Removed vertical borders */
}

/* About Section (from original homepage) */
.about {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--section-padding-large) 0; /* Horizontal padding handled by main */
    margin-bottom: 0; /* Separator will handle spacing */
}
.about-text {
    flex: 1 1 60%;
    font-size: var(--fs-about-hero); /* Larger for expressive typography */
    font-family: var(--font-family-heading);
    line-height: 1.05;
    font-weight: 900; /* Inter Black for heading */
}
.about-text p {
    font-size: var(--fs-about-para);
    margin-top: 16px;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
}
.about-image {
    flex: 1 1 35%;
    display: flex;
    justify-content: flex-end;
}
.about-image .circle-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* Horizontal Separator */
.horizontal-separator {
    width: 100%;
    height: var(--heavy-separator-height);
    background: var(--heavy-separator-color);
    margin: var(--gap-medium) 0; /* Spacing around the separator */
}

/* Projects Header (from original homepage) */
.projects-header {
    text-align: center;
    font-size: var(--fs-projects-header); /* Larger for expressive typography */
    font-family: var(--font-family-heading);
    font-weight: 900; /* Inter Black for heading */
    margin-bottom: 32px;
    margin-top: var(--gap-medium); /* Add space above from separator */
}

/* Projects Grid (Homepage main projects grid) */
.projects {
    display: grid;
    gap: var(--gap-small); /* Consistent gap for all grid items */
    grid-template-columns: repeat(12,1fr); /* 12-column grid system */
    grid-auto-rows: 280px; /* Ensure a consistent height for items */
    margin-bottom: var(--section-padding-medium); /* Use variable for consistent spacing */
}

/* Back Button (for single project page) */
.back-button {
    display: inline-block;
    margin-top: var(--gap-small);
    margin-bottom: var(--gap-medium);
    padding: 8px 16px;
    border-radius: 8px;
    background: #e0e0e0;
    color: var(--text-light);
    font-weight: 600;
    transition: background 0.3s;
}
.back-button:hover {
    background: #d0d0d0;
}

/* Hero Section: Large Image (for single project page) */
.hero-image-container {
    width: 100%;
    padding: 0; /* No padding here, image controls its own spacing */
    margin-bottom: var(--gap-medium); /* Space between image and text */
}
.hero-image {
    width: 100%;
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Hero Text & Separator (for single project page) */
.hero-text {
    text-align: center;
    padding: 0; /* Text will align with main content padding */
}
.hero-text h1 {
    font-family: var(--font-family-heading);
    font-size: var(--fs-case-hero); /* This is the main project title */
    line-height: 1.1;
    margin: 0;
    padding: 0;
    font-weight: 900; /* Inter Black for heading */
}
.hero-text p {
    font-size: var(--fs-case-subtitle);
    margin-top: 10px;
    color: var(--text-light);
}

/* Two-column Intro Section (for single project page) */
/* The .intro-section itself should span full width and handle its own inner padding/gap */
.intro-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: var(--gap-medium); /* Gap between columns */
    padding: var(--gap-medium) 0; /* Vertical padding */
    /* No max-width or margins here, it fills its parent (.single-project-container or main content) */
}

/* This class sets the two-column layout for the content block. */
/* Apply this class to the outer 'Columns' block in the editor. */
.intro-text-flow {
    column-count: 2; /* Divides the text into 2 columns */
    column-gap: var(--gap-medium); /* Uses your defined gap variable */
    text-align: left; /* Ensures hanging left alignment, not justified */
    width: 100%; /* Ensures it takes the full width of its column container */
    margin-left: 0; /* Ensures no unintended left margin */
    margin-right: 0; /* Ensures no unintended right margin */
    
    /* Ensures content doesn't break awkwardly across columns */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* NEW CLASS: This handles the specific styling properties for the intro paragraph text. */
/* Apply this class directly to the INDIVIDUAL PARAGRAPH BLOCKS inside your two columns. */
p.intro-paragraph-style {
    font-size: var(--fs-intro-paragraph); /* Explicitly ensures 20px */
    line-height: 1.7; /* Your preferred line height */
    letter-spacing: 0.5px; /* Your preferred letter spacing */
    text-align: left; /* Ensures left alignment, not justified */
    max-width: none; /* Override any potential max-width from other rules */
    width: auto; /* Override any potential width from other rules */
    margin-left: 0; /* Ensure no unintended left margin */
    margin-right: 0; /* Ensure no unintended right margin */
}


/* Generic Content Section for text blocks and image grids (for single project page) */
.content-section {
    padding: var(--section-padding-medium) 0; /* Consistent vertical padding */
}

/* Default styling for paragraphs within single project content */
/* These paragraphs will be 18px, full width, and left-aligned by default */
.single-project-content p {
    font-size: var(--fs-body-paragraph); /* Should be 18px */
    line-height: 1.7; /* Keep consistent line height */
    margin-top: var(--gap-small); /* Add some top margin for spacing */
    text-align: left; /* Default to left alignment */
    /* No max-width or custom margins here by default */
}

/* Section Title (e.g., "01 / The Problem") (for single project page) */
/* These titles will be full width and left-aligned by default */
.section-title {
    margin-bottom: var(--gap-small); /* Space below the title */
    text-align: left; /* Ensure text is left-aligned */
    /* No max-width or custom margins here by default */
}
.section-title span { /* "01 /" part */
    font-family: var(--font-family-body);
    font-size: var(--fs-section-number);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light);
    display: block; /* Ensures it's on its own line */
    margin-bottom: 4px; /* Small space between number and heading */
}
.section-title h3 { /* "The Problem" part */
    font-family: var(--font-family-heading);
    font-size: var(--fs-sub-section-heading); /* Uses new variable for H3s */
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-weight: 900; /* Inter Black for heading */
    text-align: left; /* Ensure text is left-aligned */
}

/* Class for text that you want to be constrained (narrower) and left-aligned */
/* Apply this class to any paragraph or heading block you want to constrain. */
.constrained-text {
    max-width: 910px; /* Constrain width to approx 70% of 1300px content area */
    margin-left: 0; /* Ensure left alignment */
    margin-right: auto; /* Allow content to push to left */
    text-align: left; /* Explicitly left-align content within this width */
}


/* Image Grid (for single project page content) */
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap-small); /* Vertical space between rows of images (24px) */
    column-gap: 40px; /* Horizontal space set to 40px (var(--gap-small) + 16px) */
    margin-top: var(--gap-small); /* Space above the grid */
}
.image-grid.one-column {
    grid-template-columns: 1fr; /* Override for 1 image per row */
}
.image-grid img,
.image-grid figure img, /* Added specificity for gallery images */
.image-grid .gallery-item img { /* Further specificity for gallery images */
    max-width: 100%; /* Ensure images don't overflow their grid cells */
    height: auto;
    display: block;
    border-radius: var(--border-radius-large);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    object-fit: contain; /* Remains 'contain' for galleries on single project page */
}

/* Other Projects Section (for single project page) */
.other-projects-header {
    text-align: center; /* Keep text centered as per previous state */
    font-size: var(--fs-section-heading); /* This is the H2 for "Other Case Studies" */
    font-family: var(--font-family-heading);
    font-weight: 900; /* Inter Black for heading */
    margin-top: var(--section-padding-large); /* Generous spacing above this section */
    margin-bottom: var(--gap-medium); /* Space below header */
    max-width: 910px; /* Constrain width */
    margin-left: auto; /* Center the block itself */
    margin-right: auto; /* Center the block itself */
}

/* Projects Grid Container for Other Projects (on single project page) */
.projects-grid-container {
    margin-bottom: var(--section-padding-medium); /* Space between projects and footer */
}
.projects-row { /* This is the row inside projects-grid-container */
    display: grid;
    gap: var(--gap-small); /* Using consistent gap variable */
    grid-template-columns: repeat(12,1fr); /* 12-column grid system for nested row */
    grid-auto-rows: 280px; /* Consistent height for items */
}
/* If you ever had multiple projects-rows in this section, add top margin */
.projects-row + .projects-row {
    margin-top: var(--gap-small);
}


/* Styling for the individual project items - applies to both homepage and "Other Projects" section */
.item {
    position:relative;
    overflow:hidden;
    border-radius:var(--border-radius-large); /* Using the variable for consistency */
    background:var(--card);
    border:1px solid rgba(0,0,0,0.08);
    cursor:pointer;
    transition: transform 0.34s cubic-bezier(.23,1,.32,1), box-shadow .34s;
    height:100%; /* Make item fill its grid cell */
    width:100%;
}
.item img{
    width:100%;
    height:100%;
    object-fit: cover; /* Set to 'cover' to fill the thumbnail tile */
    display:block;
    transition:transform 0.6s ease,filter 0.35s ease;
}

.item:focus{outline:2px solid rgba(0,0,0,0.08);}

/* no bounce, just subtle zoom */
.item:hover{ transform: scale(0.96); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.item:hover img{ transform: scale(1.03); }

/* Split panel with frosted gradient blur */
.split-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:-46%;
    height:46%;
    background:linear-gradient(to top,
        rgba(14,26,43,0.65) 0%,
        rgba(14,26,43,0.45) 60%,
        rgba(14,26,43,0.25) 100%);
    backdrop-filter:blur(2px);
    color:#fff;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    box-shadow:0 -6px 30px rgba(14,26,43,0.25);
    transition: bottom 0.48s cubic-bezier(.2,.9,.2,1);
    z-index:3;
}

.split-panel h3{
    margin:0;
    font-size:var(--fs-project-title);
    font-family:var(--font-family-body);
    font-weight:700;
    transform: translateY(10px);
    opacity:0;
    transition: transform 0.4s ease 0.18s, opacity 0.4s ease 0.18s;
    
}
.split-panel p{
    margin:0;
    margin-top:6px;
    font-size:var(--fs-project-meta);
    color:var(--panel-sub);
    transform: translateY(12px);
    opacity:0;
    transition: transform 0.4s ease 0.26s, opacity 0.4s ease 0.26s;
}

.split-panel { pointer-events: none; }
.item:hover .split-panel { bottom:0; pointer-events: auto; }
.item:hover .split-panel h3{ transform: translateY(0); opacity:1; }
.item:hover .split-panel p{ transform: translateY(0); opacity:1; }


/* Footer (from original homepage with improved spacing) */
footer{
    font-size:var(--fs-footer);
    text-align:center;
    opacity:.8;
    padding: var(--gap-medium) 0 var(--gap-small); /* Improved top and bottom padding */
    border-top: 1px solid rgba(0,0,0,0.06); /* Subtle border for separation */
    margin-top: var(--section-padding-medium); /* Ensure enough space from content above */
}

/* Scroll-triggered Fade-in Animations (Lazy Load Fade-in) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Optimize for animation */
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive adjustment: On smaller screens, revert to single column for readability */
@media (max-width: 768px) {
    .intro-text-flow {
        column-count: 1;
    }
}


/* Responsive Styles */
@media (max-width:900px){
    main {
        padding: 0 var(--gap-small); /* Less padding on medium screens */
    }
    .about{padding:40px 16px;} /* Adjusted for internal about section padding */
    .about-text {
        font-size: calc(var(--fs-about-hero) * 0.8); /* Scale down expressive typography */
    }
    .projects-header {
        font-size: calc(var(--fs-projects-header) * 0.8);
    }
    .projects, .projects-row { /* Apply to both main projects and other projects */
        grid-auto-rows: 220px; /* Adjust height for medium screens */
    }
    /* Scale down main project H1 for tablet */
    .hero-text h1 {
        font-size: calc(var(--fs-case-hero) * 0.8);
    }
    /* Scale down section headings (H2, H3) for tablet */
    .single-project-content h2,
    .other-projects-header { /* Only H2s here */
        font-size: calc(var(--fs-section-heading) * 0.8);
        max-width: 100%; /* Allow headers to expand on smaller screens */
        margin-left: auto;
        margin-right: auto;
    }
    .single-project-content h3,
    .section-title h3 { /* Only H3s here */
        font-size: calc(var(--fs-sub-section-heading) * 0.8);
        max-width: 100%; /* Allow headers to expand on smaller screens */
        margin-left: auto;
        margin-right: auto;
    }
    /* Scale down body paragraphs */
    .single-project-content p {
        font-size: calc(var(--fs-body-paragraph) * 0.9); /* Slightly smaller on tablets */
        max-width: 100%; /* Allow paragraphs to expand on smaller screens */
        margin-left: auto;
        margin-right: auto;
    }
    /* Constrained text also expands on smaller screens */
    .constrained-text {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width:520px){
    .projects, .projects-row{grid-template-columns:repeat(2,1fr);} /* Two columns on small screens */
    .projects, .projects-row {
        grid-auto-rows: 200px; /* Adjust height for small screens */
    }
    .about{padding:40px 16px;}
    .about-text {
        font-size: 32px; /* Fixed small size for very small screens */
    }
    .about-text p {
        font-size: 18px;
    }
    .projects-header {
        font-size: 32px;
    }
    /* Fixed smaller size for main project H1 on very small mobile */
    .hero-text h1 {
        font-size: 48px;
    }
    /* Fixed smaller size for section headings (H2, H3) on very small mobile */
    .single-project-content h2,
    .other-projects-header { /* Only H2s here */
        font-size: 32px;
        max-width: 100%; /* Ensure full width on smallest screens */
        margin-left: auto;
        margin-right: auto;
    }
    .single-project-content h3,
    .section-title h3 { /* Only H3s here */
        font-size: 28px; /* Slightly smaller for H3 on smallest screen */
        max-width: 100%; /* Ensure full width on smallest screens */
        margin-left: auto;
        margin-right: auto;
    }
    /* Fixed smaller size for body paragraphs on very small mobile */
    .single-project-content p {
        font-size: 16px; /* Revert to base size on smallest screens */
        max-width: 100%; /* Ensure full width on smallest screens */
        margin-left: auto;
        margin-right: auto;
    }
    /* Constrained text also expands on smallest screens */
    .constrained-text {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Specificity Boost: Ensure H2s and H3s within main project content always get the correct size and alignment */
/* By default, these will be full width and left-aligned */
.single-project-content h2 {
    font-family: var(--font-family-heading);
    font-weight: 900;
    line-height: 1.2;
    font-size: var(--fs-section-heading);
    margin-top: var(--gap-medium);
    margin-bottom: var(--gap-small);
    text-align: left; /* Explicitly ensure left-aligned */
    /* No max-width or custom margins here by default */
}
.single-project-content h3 {
    font-family: var(--font-family-heading);
    font-weight: 900;
    line-height: 1.2;
    font-size: var(--fs-sub-section-heading);
    margin-top: var(--gap-medium);
    margin-bottom: var(--gap-small);
    text-align: left; /* Explicitly ensure left-aligned */
    /* No max-width or custom margins here by default */
}
/* Bento Box Grid Styles */
.projects {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 24px;
    padding: 0 4vw;
}

.projects a {
    /* No need for the row div anymore, the a tag is now the grid item */
}

/* Optional: Add media queries for different screen sizes */
@media (max-width: 768px) {
    .projects {
        grid-template-columns: 1fr;
    }

    .projects a {
        grid-column: span 12 !important;
    }
}