/**
 * Project Single Layout - Classic Theme
 * Title, meta, hero image, and body text aligned on same column grid
 */

/* =========================
   Base container
   ========================= */

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 ;
    padding: 0 75px;
}

/* =========================
   Title (separate header)
   ========================= */

/* Title header spacing */
.entry-header-single {
    padding: 20px 0 20px;
}

/* Make the title's container a 3:7 grid */
.entry-header-single .container {
    display: grid;
    grid-template-columns: 2.5fr 7.5fr; /* 25:75 */
    column-gap: 40px;
    align-items: start;
}

/* Put the H1 into column 2 so it aligns with image/body text */
.entry-title-single {
    grid-column: 2;
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
}

/* =========================
   Hero section (meta + image)
   ========================= */

.hero-section {
    padding: 0 0 20px;
}

/* Container already has width; hero-grid does the column layout */
.hero-grid {
    display: grid;
    grid-template-columns: 2.5fr 7.5fr; /* 25:75 */
    column-gap: 40px;
    align-items: start;
}

/* Left column: metadata */
.post-meta-sidebar {
    grid-column: 1;
    align-self: end;
    padding-bottom: 0;
}

.meta-item {
    margin-bottom: 20px;
}

.meta-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.meta-value {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Right column: hero image */
.post-hero-image {
    grid-column: 2;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================
   Main content (body text)
   ========================= */

.entry-content-wrapper {
    padding: 20px 0px 20px 0px;
}

/* THIS is the grid parent for content */
.entry-content-grid {
    display: grid;
    grid-template-columns: 2.5fr 7.5fr;
    column-gap: 40px;
}

/* Empty left column just to keep the alignment with meta column */
.content-spacer {
    grid-column: 1;
}

/* Body text in column 2 (same left edge as title + image) */
.entry-content {
    grid-column: 2;
    font-size: 1rem;
    line-height: 1.7;
}

.entry-content p {
    margin-bottom: 1rem;
}


/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {

    .container {
    padding: 0 15px;
    }
    
    .entry-header-single .container,
    .hero-grid,
    .entry-content-grid,
    .entry-footer-single .container {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 20px;
    }

    .entry-title-single {
        grid-column: 1;
        font-size: 2rem;
    }

    .post-meta-sidebar,
    .post-hero-image,
    .entry-content,
    .entry-footer-content {
        grid-column: 1;
    }

    .content-spacer,
    .footer-spacer {
        display: none;
    }
}