/**
* Theme Name: Zeen Child
* Description: Zeen child theme.
* Author: Codetipi
* Template: zeen
* Version: 1.0.0
*/



/* ─── ZEEN THEME COMPATIBILITY ───────────────────────────────────────────────
 *
 * WordPress automatically adds 'type-{post_type}' to post classes, so link
 * posts receive 'type-link' on their <article> element. Zeen renders its own
 * image (.mask), title (.title-wrap), excerpt (.excerpt), and meta (.byline-)
 * for every post. These rules suppress all of that for link posts so only our
 * lpt-link-card is visible.
 *
 * Zeen's article structure for each post:
 *   <article class="type-link ...">
 *     <div class="preview-mini-wrap">
 *       <div class="mask">...</div>          ← featured image (suppress)
 *       <div class="meta">
 *         <div class="byline ...">...</div>  ← date/author/cats (suppress)
 *         <div class="title-wrap">...</div>  ← title (suppress)
 *         <div class="excerpt ...">...</div> ← excerpt text (suppress)
 *         <article class="lpt-link-card">    ← our card (show)
 *       </div>
 *     </div>
 *   </article>
 * ─────────────────────────────────────────────────────────────────────────── */

/* Suppress Zeen's featured image */
article.type-link .mask { display: none !important; }

/* Suppress Zeen's title block */
article.type-link .title-wrap { display: none !important; }

/* Suppress Zeen's byline (date, author, category — all share .byline- prefix) */
article.type-link [class*="byline"] { display: none !important; }

/* Suppress Zeen's excerpt */
article.type-link .excerpt { display: none !important; }

/* Remove padding Zeen adds to the meta container so our card sits flush */
article.type-link .meta { padding: 0 !important; }

/* Ensure our card is visible and fills the container */
article.type-link .lpt-link-card { display: block; }








/* Hide the date and any post meta row on link-type posts */
.lpt-is-link-post .entry-date,
.lpt-is-link-post .posted-on,
.lpt-is-link-post .entry-meta,
.wp-block-post-date.has-small-font-size {
    display: none;
}



/* =============================================================
   Zeen Standard Post Card — Visual Parity
   File: add to your child theme's style.css

   Makes Zeen's native <article class="type-post"> cards match
   the shared card design used by Link Post Type Plus (lpt-link-card)
   and Social Embed Plugin (sep-card).

   Scope: all rules are scoped to article.type-post so they only
   affect standard posts. Link posts (type-link) and social posts
   (type-social_post) are handled by their respective plugins.

   Zeen's HTML structure per standard post card:

     <article class="type-post preview-classic with-fi ...">
       <div class="preview-mini-wrap">

         <div class="mask">                        ← image area
           <div class="byline byline-1">...</div>  ← optional category
                                                       badge overlaid on
                                                       image — preserved
           <a class="mask-img" href="...">
             <img src="..." />
           </a>
         </div>

         <div class="meta">                        ← text area
           <div class="byline byline-2">...</div>  ← above-title meta
           <div class="title-wrap">
             <h3 class="title">
               <a href="...">Post Title</a>
             </h3>
           </div>
           <div class="byline byline-3">...</div>  ← below-title meta
           <div class="excerpt body-color">...</div>
           <div class="byline byline-4">...</div>  ← footer meta
         </div>

       </div>
     </article>

   Shared card design values (source: lpt-link-card / sep-card):
     border-radius ........... 12px
     background .............. #ffffff
     image aspect-ratio ....... 16 / 9
     body padding ............. 1.25rem 1.5rem
     title font-size .......... 1.1rem  (1rem on mobile)
     title font-weight ........ 700
     title color .............. #0f172a
     title color (hover) ...... #1d4ed8
     excerpt font-size ........ 0.88rem
     excerpt color ............ #475569
     excerpt line-height ...... 1.6
     excerpt line-clamp ....... 3 lines
     meta/date font-size ...... 0.78rem
     meta/date color .......... #94a3b8
     footer border-top ........ 1px solid #f1f5f9
     image hover scale ........ 1.03
   ============================================================= */


/* ── Article container ───────────────────────────────────────────
   Match the rounded, flat card container. Zeen does not add
   border/shadow by default, but we reset them explicitly in case
   a child theme or plugin has added them.
   ─────────────────────────────────────────────────────────────── */
article.type-post {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: none;
    box-shadow: none;
}


/* ── Stack image above text ──────────────────────────────────────
   Zeen's .preview-mini-wrap is already block-level, but some
   layout modes make it flex row. Force column so image is always
   stacked above the meta text, matching lpt-link-card.
   ─────────────────────────────────────────────────────────────── */
article.type-post .preview-mini-wrap {
    display: flex;
    flex-direction: column;
}


/* ── Image block (.mask) ─────────────────────────────────────────
   Zeen renders images at a registered crop size (e.g. 770×570,
   roughly 4:3). We override the container to enforce a 16:9
   display ratio matching the custom cards, without changing the
   actual image file. object-fit: cover handles the reframing.
   ─────────────────────────────────────────────────────────────── */
article.type-post .mask {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9; /* placeholder colour while image loads */
    flex-shrink: 0;
    /* Reset any explicit height Zeen may have set via inline style */
    height: auto !important;
}

/* <a class="mask-img"> wraps the <img> — make it fill the container */
article.type-post .mask a.mask-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* The image itself */
article.type-post .mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Image zoom on card hover — matches lpt-link-card and sep-card */
article.type-post:hover .mask img {
    transform: scale(1.03);
}


/* ── Text area (.meta) ───────────────────────────────────────────
   .meta is Zeen's equivalent of our __body div.
   gap: 0.5rem spaces out title, bylines, and excerpt without
   needing per-element margin overrides.
   ─────────────────────────────────────────────────────────────── */
article.type-post .meta {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Zeen sometimes adds its own padding-bottom via customizer —
       normalize it so all four sides are consistent */
    padding-bottom: 1.25rem !important;
}


/* ── Title ───────────────────────────────────────────────────────
   .title-wrap contains the <h3 class="title">.
   We target the <a> for colour so we don't fight Zeen's h3 resets.
   ─────────────────────────────────────────────────────────────── */
article.type-post .title-wrap {
    margin: 0;
}

article.type-post .title-wrap .title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

article.type-post .title-wrap .title a {
    color: #0f172a;
    text-decoration: none;
}

article.type-post:hover .title-wrap .title a {
    color: #1d4ed8;
}


/* ── Excerpt ─────────────────────────────────────────────────────
   Zeen's .excerpt also carries .body-color which sets colour from
   the Customizer. We override with a specific selector to win
   without !important, matching our excerpt colour exactly.
   ─────────────────────────────────────────────────────────────── */
article.type-post .meta .excerpt {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    /* Clamp to 3 lines — matches lpt-link-card and sep-card */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── Bylines (date, author, category) ───────────────────────────
   Zeen renders up to four byline blocks (byline-1 through -4)
   depending on Customizer settings. We style them all to share
   the same small, muted typography as the custom card footers.
   byline-1 sits inside .mask as a category badge — we leave its
   positioning alone and only adjust colour/size.
   ─────────────────────────────────────────────────────────────── */
article.type-post .byline {
    font-size: 0.78rem;
    color: #94a3b8;
    /* Remove any top margin Zeen adds between byline and adjacent elements */
    margin-top: 0;
    margin-bottom: 0;
}

/* Individual byline parts inherit the muted colour */
article.type-post .byline .byline-part,
article.type-post .byline .byline-part a,
article.type-post .byline .byline-detail {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Footer byline (byline-4) — adds the top separator line matching
   the custom card footer row */
article.type-post .byline-4 {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}


/* ── No featured image ───────────────────────────────────────────
   When a post has no featured image Zeen adds .no-fi to the
   article and skips rendering .mask entirely. The card still
   looks clean — meta padding provides the top breathing room.
   ─────────────────────────────────────────────────────────────── */
article.type-post.no-fi .meta {
    padding-top: 1.25rem;
}


/* ── Responsive ──────────────────────────────────────────────────
   Match the mobile adjustments in lpt-link-card and sep-card.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    article.type-post .meta {
        padding: 1rem;
    }
    article.type-post .title-wrap .title {
        font-size: 1rem;
    }
}