/* ==========================================================
   JOURNAL / BLOG — post layout + index
   Rides on style.css theme tokens (var(--text) etc.)
   ========================================================== */

/* The shared nav include ships a Virtual Tour modal that property.css hides;
   the blog does not load property.css, so hide it here. */
.tour-modal { display: none; }

/* ---------- Post hero ---------- */
.post-hero {
    position: relative;
    min-height: clamp(320px, 44vw, 460px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #1E1D1A;
}
.post-hero img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.7;
}
.post-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,29,26,0.1) 0%, rgba(30,29,26,0.75) 100%);
}
.post-hero-inner {
    position: relative; z-index: 2;
    max-width: 900px; width: 100%;
    margin: 0 auto;
    padding: 0 24px clamp(32px, 5vw, 60px);
    color: #FFF;
}
.post-cat {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    opacity: 0.85; margin-bottom: 14px;
}
.post-hero-inner h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1.08; margin-bottom: 16px;
    max-width: 18ch;
}
.post-meta { font-size: 14px; opacity: 0.85; }

/* ---------- Article body ---------- */
.post-article {
    max-width: 720px; margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) 24px;
    color: var(--text);
}
.post-article > p:first-of-type { font-size: 19px; opacity: 1; }
.post-article p {
    font-size: 17px; line-height: 1.85;
    margin-bottom: 22px; opacity: 0.9;
}
.post-article h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(24px, 3.5vw, 34px);
    line-height: 1.15; margin: 46px 0 16px;
}
.post-article h3 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(20px, 2.6vw, 26px);
    margin: 32px 0 12px;
}
.post-article a { color: #3E8DA0; text-decoration: underline; text-underline-offset: 2px; }
.post-article a:hover { color: #33788A; }
.post-article ul, .post-article ol { margin: 0 0 24px 22px; }
.post-article li { font-size: 17px; line-height: 1.8; margin-bottom: 8px; opacity: 0.9; }
.post-article blockquote {
    border-left: 3px solid #E2726D;
    padding-left: 22px; margin: 28px 0;
    font-style: italic; opacity: 0.85;
}
.post-article strong { font-weight: 600; }

/* ---------- Closing CTA ---------- */
.post-cta {
    background: var(--section-alt);
    text-align: center;
    padding: clamp(48px, 7vw, 84px) 24px;
}
.post-cta h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(26px, 4vw, 40px);
    margin-bottom: 14px;
}
.post-cta p { opacity: 0.65; max-width: 460px; margin: 0 auto 28px; font-size: 16px; }
.post-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Blog index ---------- */
.blog-head {
    text-align: center;
    padding: clamp(90px, 11vw, 150px) 24px clamp(24px, 4vw, 44px);
}
.blog-head h1 { font-family: 'DM Serif Display', serif; font-size: clamp(38px, 6vw, 66px); }
.blog-head p { opacity: 0.6; margin-top: 12px; font-size: 17px; }
.blog-grid {
    max-width: 1120px; margin: 0 auto;
    padding: 0 24px clamp(60px, 8vw, 110px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 34px;
}
.blog-card { display: block; text-decoration: none; color: var(--text); }
.blog-card-img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: #e6e4dc; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-cat { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #3E8DA0; margin: 16px 0 6px; }
.blog-card h2 { font-family: 'DM Serif Display', serif; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.blog-card p { font-size: 15px; line-height: 1.6; opacity: 0.7; }
.blog-card-meta { font-size: 13px; opacity: 0.5; margin-top: 10px; }

@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }