/* ==========================================================================
   INDIAN VIBE - BLOG STYLES
   --------------------------------------------------------------------------
   Used by index.html, blog.html and blog-details.html.
   Everything here is prefixed .iv- (or scoped to .blog-card) so it cannot
   affect the rest of the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Blog cards (listing on blog.html and the section on index.html)
   -------------------------------------------------------------------------- */
.blog-card.style-5 .blog-img img {
    width: 100%;
    height: 345px;
    object-fit: cover;
    /* anchor the crop to the top so a masthead or headline stays visible */
    object-position: top center;
}

.iv-card-photo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 345px;
    padding: 20px;
    border: 2px dashed var(--theme-color5, #c9ab81);
    background: #faf6ef;
    color: var(--theme-color1, #5a2d40);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. The post itself (blog-details.html)
   -------------------------------------------------------------------------- */
.iv-post {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* never let a picture push the page sideways */
.iv-post img {
    max-width: 100%;
}

/* --- Press clipping: a tall newspaper image, framed and never cropped --- */
.iv-post .iv-clipping {
    max-width: 430px;
    margin: 0 auto 36px;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(90, 45, 64, .12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(90, 45, 64, .16);
    text-align: center;
}

.iv-post .iv-clipping img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 8px;
}

.iv-post .iv-clipping figcaption {
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    color: var(--body-color, #6c6c6c);
}

/* --- In-article photos: small, centred cards --- */
.iv-post .iv-figure {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 320px;
    margin: 30px auto;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(90, 45, 64, .14);
}

/* --- A portrait photo, e.g. the chef --- */
.iv-post .iv-portrait {
    max-width: 280px;
    height: 340px;
}

/* --- Wide picture at the very top of a post --- */
.iv-post .iv-banner {
    max-width: 100%;
    height: 380px;
    margin-top: 0;
}

/* --- Two photos shown side by side --- */
.iv-post .iv-figure-row {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}

.iv-post .iv-figure-row .iv-figure {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
}

/* --- Placeholder box for a photo that has not arrived yet --- */
.iv-photo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    margin: 30px 0;
    padding: 24px;
    border: 2px dashed var(--theme-color5, #c9ab81);
    border-radius: 10px;
    background: #faf6ef;
    color: var(--theme-color1, #5a2d40);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

.iv-photo-slot.iv-photo-wide {
    min-height: 380px;
}

.iv-photo-slot small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--body-color, #6c6c6c);
}

/* --- Headings --------------------------------------------------------
   H1 = the post title (.blog-title)
   H2 = each major section
   H3 = an individual dish, or an individual FAQ question
   Do not skip a level; use CSS, not heading tags, to change size.
   -------------------------------------------------------------------- */
.iv-post h2 {
    margin-top: 36px;
    margin-bottom: 14px;
    color: var(--theme-color1, #5a2d40);
}

.iv-post h3 {
    margin-top: 26px;
    margin-bottom: 8px;
    font-size: 18px;
    color: #b0402a;
}

/* an FAQ question is an H3 wrapping the accordion button - it must not
   pick up the heading spacing or colour above */
.iv-post h3.accordion-header {
    margin: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* --- Bulleted list --- */
.iv-list {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc outside;
}

.iv-list li {
    display: list-item;
    margin-bottom: 10px;
    color: var(--body-color, #6c6c6c);
    font-size: 16px;
    line-height: 1.75;
    visibility: visible;
    opacity: 1;
}

.iv-list li::marker {
    color: var(--theme-color1, #5a2d40);
}

/* --- A dish with a price --- */
.iv-dish {
    margin-bottom: 20px;
}

.iv-post h3.iv-dish-head {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color1, #5a2d40);
}

.iv-dish-head .iv-dish-price {
    color: #b0402a;
}

/* --- Highlighted box, e.g. opening times --- */
.iv-service-box {
    margin: 26px 0;
    padding: 22px 26px;
    border-left: 4px solid var(--theme-color1, #5a2d40);
    border-radius: 8px;
    background: var(--smoke-color, #f7f2e2);
}

.iv-service-box p:last-child {
    margin-bottom: 0;
}

/* --- Note for something still to come from the client --- */
.iv-client-note {
    margin: 16px 0;
    padding: 14px 18px;
    border: 1px dashed var(--theme-color3, #ff9924);
    border-radius: 8px;
    background: #fdf1e3;
    color: #a9601a;
    font-style: italic;
}

/* --- Buttons at the end of a post --- */
.iv-cta {
    margin-top: 24px;
}

.iv-cta .th-btn {
    margin: 6px 10px 6px 0;
}

/* ==========================================================================
   3. Responsive
   ========================================================================== */

/* --- Tablet and below --- */
@media (max-width: 991px) {
    .blog-card.style-5 .blog-img img,
    .iv-card-photo-slot {
        height: 300px;
    }

    .iv-post .iv-banner {
        height: 320px;
    }

    .iv-post .iv-figure {
        height: 300px;
    }

    .iv-post h2 {
        margin-top: 30px;
        font-size: 26px;
    }
}

/* --- Small tablet / large phone --- */
@media (max-width: 767px) {
    .blog-card.style-5 .blog-img img,
    .iv-card-photo-slot {
        height: 260px;
    }

    .iv-post .iv-banner {
        height: 260px;
    }

    .iv-post .iv-figure {
        max-width: 100%;
        height: 280px;
    }

    /* side-by-side photos stack rather than becoming slivers */
    .iv-post .iv-figure-row {
        flex-direction: column;
        gap: 16px;
    }

    .iv-post .iv-figure-row .iv-figure {
        height: 260px;
    }

    .iv-post h2 {
        font-size: 24px;
    }
}

/* --- Phone --- */
@media (max-width: 575px) {
    .blog-card.style-5 .blog-img img,
    .iv-card-photo-slot {
        height: 220px;
    }

    .iv-post .iv-banner {
        height: 200px;
    }

    .iv-post .iv-figure {
        height: 220px;
        margin: 22px auto;
        border-radius: 10px;
    }

    .iv-post .iv-figure-row .iv-figure {
        height: 220px;
    }

    .iv-post .iv-portrait {
        max-width: 220px;
        height: 280px;
    }

    .iv-post .iv-clipping {
        max-width: 100%;
        padding: 10px;
    }

    .iv-post h2 {
        margin-top: 26px;
        font-size: 22px;
    }

    .iv-post h3 {
        font-size: 17px;
    }

    .iv-post h3.iv-dish-head {
        font-size: 17px;
    }

    .iv-service-box {
        padding: 16px 18px;
    }

    .iv-client-note {
        padding: 12px 14px;
        font-size: 14px;
    }

    .iv-photo-slot {
        min-height: 200px;
        padding: 16px;
        font-size: 13px;
    }

    .iv-photo-slot.iv-photo-wide {
        min-height: 240px;
    }

    /* full-width buttons so they never overflow a narrow screen */
    .iv-cta .th-btn {
        display: block;
        width: 100%;
        margin: 10px 0 0;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   4. "Back to Blogs" link at the top of a post
   -------------------------------------------------------------------------- */
.iv-post .iv-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 18px 9px 14px;
    border: 1px solid rgba(90, 45, 64, .18);
    border-radius: 40px;
    background: #fff;
    color: var(--theme-color1, #5a2d40);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.iv-post .iv-back i {
    font-size: 14px;
    transition: transform .25s ease;
}

.iv-post .iv-back:hover,
.iv-post .iv-back:focus {
    border-color: var(--theme-color1, #5a2d40);
    background: var(--theme-color1, #5a2d40);
    color: #fff;
}

.iv-post .iv-back:hover i {
    transform: translateX(-3px);
}

@media (max-width: 575px) {
    .iv-post .iv-back {
        margin-bottom: 18px;
        padding: 8px 15px 8px 12px;
        font-size: 14px;
    }
}