/* wp-content\themes\gtmotor\assets\css\components\card-post.css
   News + Offers card. Shares the PDP offer-card visual language
   (see .gtm-offer-card in assets/css/pages/pdp.css): a brand-washed media
   strip carrying the photo, a white badge pill jutting from the top-left,
   a bold uppercase title, an excerpt, and a white CTA. Tokens are global
   (base.css) or literal here; the --pdp-* tokens are scoped to
   .gtm-pdp-container and are deliberately NOT relied on. */

/* --- CARD SHELL (a <div>; the only <a> is the CTA) ----------------------- */
.gtm-card-post{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    height:480px;
    min-height:340px;
    padding:0;
    border-radius:16px;
    overflow:hidden;
    background:#2a252d;
    color:#fff;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
    transition:box-shadow 0.2s ease;
}
.gtm-card-post:hover{box-shadow:0 14px 26px -12px rgba(0,0,0,0.4);transform:none;}

/* Legacy fixed-width surfaces (old .gtm-scroller-track) keep a set card width;
   inside the unified carousel the item owns the width (rule further down). */
.gtm-scroller-track .gtm-card-post{flex:0 0 450px;width:450px;}

/* --- MEDIA STRIP: brand wash + optional photo + jutting badge ------------ */
/* The gradient is the base layer; a real featured image (when present) is
   layered on top via ::before at reduced opacity, driven by --card-photo so
   the wash underneath survives. --card-brand is set per-card inline. */
.gtm-card-post__media{
    position:relative;
    height:150px;
    min-height:150px;
    flex:0 0 150px;
    overflow:hidden;
    background:
        radial-gradient(120% 140% at 82% 0%, rgba(255,255,255,0.16), transparent 55%),
        linear-gradient(135deg, var(--card-brand, #342E37) 0%, #201c22 118%);
}
.gtm-card-post__media--photo::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--card-photo);
    background-size:cover;
    background-position:center;
    opacity:0.55;
    mix-blend-mode:luminosity;
}

/* Jutting badge pill (white, bleeds off the left edge). */
.gtm-card-post-badge{
    position:absolute;
    top:20px;
    left:0;
    z-index:3;
    display:inline-flex;
    align-items:center;
    background:#FFF;
    color:#111;
    padding:7px 20px 7px 24px;
    border-radius:0 999px 999px 0;
    font-size:11px;
    font-weight:900;
    letter-spacing:0.1em;
    text-transform:uppercase;
    box-shadow:none;
}
.gtm-card-post-badge .gtm-brandmark{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--card-brand, #342E37);
    margin-right:7px;
    vertical-align:baseline;
}

/* --- BODY --------------------------------------------------------------- */
.gtm-card-post-content{
    position:relative;
    z-index:2;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:24px 28px 28px;
    width:100%;
    color:#fff;
}

/* "Offer ends DD/MM/YYYY" pill (offers only). */
.gtm-card-post__ends{
    display:inline-flex;
    align-items:center;
    gap:7px;
    align-self:flex-start;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(255,255,255,0.14);
    padding:5px 12px;
    border-radius:999px;
}
.gtm-card-post__ends svg{width:13px;height:13px;flex:0 0 auto;}

.gtm-post-titles{display:flex;flex-direction:column;gap:6px;}
.gtm-post-title{
    color:#FFF;
    font-size:24px;
    font-weight:900;
    line-height:1.08;
    letter-spacing:0.005em;
    text-transform:uppercase;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.gtm-post-subtitle{
    color:rgba(255,255,255,0.82);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:0;
}
.gtm-post-excerpt{
    color:rgba(255,255,255,0.86);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
    margin:0;
    max-width:56ch;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* White CTA pill (the single anchor in the card). */
.gtm-post-btn{
    margin-top:auto;
    align-self:flex-start;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    width:fit-content;
    padding:12px 26px;
    border-radius:999px;
    background:#FFF;
    color:#161318;
    font-size:14px;
    font-weight:800;
    letter-spacing:0.03em;
    text-transform:uppercase;
    text-decoration:none;
    box-shadow:none;
    border:none;
    cursor:pointer;
    transition:box-shadow 0.2s ease, transform 0.15s ease;
}
.gtm-post-btn:hover{color:#161318;box-shadow:0 8px 18px -6px rgba(0,0,0,0.5);transform:none;}
.gtm-post-btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform 0.18s ease;}
.gtm-post-btn:hover svg{transform:translateX(3px);}
/* CTA stays white to match the PDP offer card (arrow reads on every brand).
   The brand accent lives in the media wash and badge dot; a brand-filled CTA
   such as Kawasaki green with white text would fail WCAG AA. */

/* --- SKELETON ----------------------------------------------------------- */
.gtm-card-post-skeleton{flex:0 0 450px;width:450px;height:480px;background:#e0e0e0;border-radius:16px;position:relative;overflow:hidden;}
.gtm-card-post-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);transform:translateX(-100%);animation:skeleton-shimmer 1.5s infinite;}

@media (max-width:768px){
    .gtm-card-post,.gtm-scroller-track .gtm-card-post,.gtm-card-post-skeleton{flex:0 0 85vw;width:85vw;max-width:85vw;height:440px;}
    .gtm-card-post{padding:0;}
    .gtm-card-post-content{padding:20px 22px 24px;}
    .gtm-post-title{font-size:22px;}
}

/* --- Inside the unified carousel: card fills its .gtm-carousel__item.
   The base 450px / 85vw widths above still govern the legacy
   .gtm-scroller-track surfaces; this scoped rule only overrides the card
   when it is a carousel item. */
.gtm-carousel__item .gtm-card-post{flex:1 1 auto;width:100%;max-width:100%;min-width:0;height:100%;}
.gtm-carousel__item .gtm-card-post-skeleton{flex:1 1 auto;width:100%;max-width:100%;min-width:0;height:480px;}

/* News/Offers carousel caps at 3-up (owner-approved): these cards are denser
   than the bike cards, so we hold the engine's 1 -> 2 -> 3 -> 4 ladder at 3
   from 992px up. Scoped to the .gtm-carousel--posts modifier so other unified
   carousels (in-stock, explore) keep their own column counts. The doubled
   .gtm-carousel.gtm-carousel--posts selector (2 classes) outranks the engine's
   single-class breakpoint rules regardless of stylesheet load order. */
.gtm-carousel.gtm-carousel--posts{--gtm-cards:1;}
@media (min-width:768px){.gtm-carousel.gtm-carousel--posts{--gtm-cards:2;}}
@media (min-width:992px){.gtm-carousel.gtm-carousel--posts{--gtm-cards:3;}}

/* Whole card is the link (single CTA); mirror the button hover on card hover. */
.gtm-card-post:hover .gtm-post-btn{box-shadow:0 8px 18px -6px rgba(0,0,0,0.5);}
.gtm-card-post:hover .gtm-post-btn svg{transform:translateX(3px);}