/* 
   Modern Minimalistic Blog Design 
   Typography: Playfair Display (Headings), Roboto (Body)
*/

/* --- Global Blog Section --- */
.blog-section {
    background-color: #ffffff !important;
    /* Pure white background */
    padding-top: 100px !important;
    color: #1a1a1a;
}

/* --- Typography --- */
.blog-section h1,
.blog-section h2,
.blog-section h3,
.blog-section h4 {
    font-family: 'Playfair Display', serif;
    color: #111 !important;
    line-height: 1.3;
}

.blog-section p,
.blog-section li {
    font-family: 'Roboto', sans-serif;
    color: #333 !important;
    line-height: 1.8;
    font-weight: 300;
}

/* --- Blog Listing (Index) --- */
.blog-list-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-list-header h1 {
    font-size: 4em;
    margin-bottom: 20px;
}

.blog-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 60px;
    /* More breathing room */
    list-style: none;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Clean Grid Item - No Card Style */
.blog-list-item {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-list-item:hover {
    transform: translateY(-5px);
    box-shadow: none;
}

.blog-list-item .featured-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
    /* Subtle radius */
    margin-bottom: 25px;
}

.blog-list-item h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    font-weight: 700;
}

.blog-list-item h2 a {
    text-decoration: none;
    color: #111;
    background-image: linear-gradient(#111, #111);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s;
}

.blog-list-item h2 a:hover {
    color: #111;
    background-size: 100% 1px;
    /* Underline animation */
}

.blog-list-item p {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-list-item .meta {
    font-size: 0.85em;
    color: #888;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto;
}

/* --- Blog Post (Single) --- */
.blog-post {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 740px;
    /* Standard reading width */
    margin: 0 auto;
}

.blog-post h1 {
    font-size: 3.5em;
    /* Large editorial title */
    margin-bottom: 0.3em;
    text-align: center;
}

.blog-post .meta {
    text-align: center;
    color: #777 !important;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 50px;
    display: block;
}

.blog-post .featured-image {
    width: 100vw;
    max-width: 100vw;
    /* Break out of container */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height: 60vh;
    object-fit: cover;
    margin-bottom: 60px;
    border-radius: 0;
}

/* Content Typography */
.blog-post p {
    font-size: 1.25em;
    /* Larger body text */
    line-height: 1.8;
    margin-bottom: 2em;
    color: #222 !important;
}

.blog-post h2 {
    font-size: 2.2em;
    margin-top: 2em;
    margin-bottom: 0.8em;
}

.blog-post blockquote {
    border-left: 4px solid #111;
    padding-left: 30px;
    margin: 3em 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6em;
    font-style: italic;
    color: #111 !important;
    background: transparent;
    line-height: 1.4;
}

/* Author Section - Minimal */
.author-section {
    margin-top: 80px;
    padding-top: 50px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.author-info h3 {
    font-size: 1.2em !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1em !important;
}

.consultation-box {
    background: #f9f9f9;
    border: none;
    padding: 40px;
}

/* --- Read Next Section --- */
.read-next-section {
    background: #f9f9f9;
    padding: 80px 0;
    margin-top: 100px;
}

.read-next-container {
    max-width: 1200px;
    /* Matches grid */
    margin: 0 auto;
    padding: 0 20px;
}

.read-next-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    margin-bottom: 40px;
    text-align: center;
}

/* --- Nav Overrides --- */
/* Keep nav dark but minimal */
.blog-page .panel.top {
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: none;
}

.blog-page .panel.top .menu li a {
    color: #111;
}

.blog-page .panel.top .left img {
    filter: invert(1);
}

/* --- Fix Footer on Blog Page --- */
.blog-page .panel.bottom {
    display: none !important;
    /* Hide global footer */
}

.blog-footer {
    padding: 40px 20px;
    background: #fff;
    border-top: 1px solid #eee;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}

.blog-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

.blog-footer a {
    text-decoration: none;
    color: #555;
    font-size: 0.9em;
    font-weight: 500;
}

.blog-footer a:hover {
    color: #111;
}

/* Ensure full width image behaves correctly */
.blog-hero-image {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    margin-bottom: 60px;
    display: block;
}

/* Hide the "Next Slide" arrow on blog pages since it's a scroll */
.blog-page .panel.bottom .center {
    display: none !important;
}

/* --- Fix Featured Image Breakout --- */
/* Ensure containers don't clip the full-width image */
.blog-page .slide,
.blog-page .container,
.blog-page .wrap {
    overflow: visible !important;
}

/* --- QR Code Styles --- */
.qr-code {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-code img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.qr-code span {
    font-size: 0.8em !important;
    color: #888 !important;
}