.fmpg-wrap{width:100%;box-sizing:border-box}.fmpg-wrap *{box-sizing:border-box}.fmpg-grid{display:grid;grid-template-columns:repeat(var(--fmpg-cols-desktop,3),minmax(0,1fr));gap:28px}.fmpg-item{margin:0;min-width:0}.fmpg-link{display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;background:#fff;height:100%;transition:transform .35s ease,box-shadow .35s ease}.fmpg-thumb{display:block;position:relative;overflow:hidden;background:#e9eef2}.fmpg-thumb:before{content:"";display:block;padding-top:var(--fmpg-ratio,75%)}.fmpg-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .48s ease,filter .48s ease,opacity .48s ease}.fmpg-content{display:block}.fmpg-title{display:block;font-weight:700;font-size:18px;line-height:1.45}.fmpg-date{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:#6b7280}.fmpg-excerpt{display:block;margin-top:10px;font-size:14px;line-height:1.7;color:#555}.fmpg-button{display:inline-block;margin-top:15px;padding:9px 17px;background:#f3f4f6;color:#333;border:1px solid #d8dde5;font-size:14px;text-shadow:none}.fmpg-layout-grid-hover-1 .fmpg-link,.fmpg-layout-grid-hover-2 .fmpg-link,.fmpg-layout-grid-hover-3 .fmpg-link{background:#111;color:#fff}.fmpg-layout-grid-hover-1 .fmpg-link:before,.fmpg-layout-grid-hover-2 .fmpg-link:before,.fmpg-layout-grid-hover-3 .fmpg-link:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:1;transition:background .42s ease}.fmpg-layout-grid-hover-1 .fmpg-content,.fmpg-layout-grid-hover-3 .fmpg-content{position:absolute;inset:8%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;text-shadow:0 2px 10px rgba(0,0,0,.62);z-index:3}.fmpg-layout-grid-hover-1 .fmpg-date,.fmpg-layout-grid-hover-1 .fmpg-excerpt,.fmpg-layout-grid-hover-1 .fmpg-button,.fmpg-layout-grid-hover-3 .fmpg-date,.fmpg-layout-grid-hover-3 .fmpg-excerpt,.fmpg-layout-grid-hover-3 .fmpg-button{opacity:0;transform:translateY(8px);transition:opacity .36s ease,transform .36s ease;color:#fff}.fmpg-layout-grid-hover-1 .fmpg-link:hover:before,.fmpg-layout-grid-hover-2 .fmpg-link:hover:before,.fmpg-layout-grid-hover-3 .fmpg-link:hover:before{background:rgba(0,0,0,.55)}.fmpg-layout-grid-hover-1 .fmpg-link:hover .fmpg-date,.fmpg-layout-grid-hover-1 .fmpg-link:hover .fmpg-excerpt,.fmpg-layout-grid-hover-1 .fmpg-link:hover .fmpg-button,.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt,.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{opacity:1;transform:translateY(0)}.fmpg-layout-grid-hover-3 .fmpg-link:after{content:"";position:absolute;inset:7%;border:2px solid rgba(255,255,255,.95);z-index:2;opacity:0;transform:scale(.985);transition:opacity .36s ease,transform .36s ease}.fmpg-layout-grid-hover-3 .fmpg-link:hover:after{opacity:1;transform:scale(1)}.fmpg-layout-grid-hover-2 .fmpg-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 20px;text-align:left;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));transform:translateY(calc(100% - 62px));transition:transform .42s ease}.fmpg-layout-grid-hover-2 .fmpg-link:hover .fmpg-content{transform:translateY(0)}.fmpg-layout-grid-hover-2 .fmpg-date,.fmpg-layout-grid-hover-2 .fmpg-excerpt{color:#fff}.fmpg-layout-grid-1 .fmpg-link,.fmpg-layout-grid-2 .fmpg-link,.fmpg-layout-grid-5 .fmpg-link{border:1px solid #e4e8ed;box-shadow:0 6px 18px rgba(0,0,0,.06)}.fmpg-layout-grid-1 .fmpg-content,.fmpg-layout-grid-2 .fmpg-content,.fmpg-layout-grid-5 .fmpg-content,.fmpg-layout-grid-6 .fmpg-content{padding:18px 18px 20px}.fmpg-layout-grid-2 .fmpg-thumb:before{padding-top:62%}.fmpg-layout-grid-3 .fmpg-link{border-left:5px solid #6d5dfc;box-shadow:0 4px 14px rgba(0,0,0,.06)}.fmpg-layout-grid-3 .fmpg-content{padding:16px}.fmpg-layout-grid-4 .fmpg-link{background:transparent}.fmpg-layout-grid-4 .fmpg-content{padding:12px 0 0}.fmpg-layout-grid-5 .fmpg-title{font-size:16px}.fmpg-layout-grid-5 .fmpg-excerpt{display:none}.fmpg-layout-grid-6 .fmpg-link{box-shadow:0 10px 30px rgba(0,0,0,.10)}.fmpg-layout-grid-6 .fmpg-item:first-child{grid-column:span 2}.fmpg-layout-grid-6 .fmpg-item:first-child .fmpg-title{font-size:24px}.fmpg-layout-grid-7 .fmpg-link{display:grid;grid-template-columns:42% 1fr;align-items:stretch;border:1px solid #e5e7eb}.fmpg-layout-grid-7 .fmpg-content{padding:18px}.fmpg-layout-grid-8 .fmpg-content{position:absolute;left:0;right:0;bottom:0;padding:13px 16px;background:rgba(255,255,255,.92)}.fmpg-layout-list-1 .fmpg-grid,.fmpg-layout-list-2 .fmpg-grid,.fmpg-layout-list-3 .fmpg-grid{display:block}.fmpg-layout-list-1 .fmpg-item,.fmpg-layout-list-2 .fmpg-item,.fmpg-layout-list-3 .fmpg-item{margin-bottom:22px}.fmpg-layout-list-1 .fmpg-link,.fmpg-layout-list-2 .fmpg-link,.fmpg-layout-list-3 .fmpg-link{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:center;border:1px solid #e5e7eb}.fmpg-layout-list-1 .fmpg-content,.fmpg-layout-list-2 .fmpg-content,.fmpg-layout-list-3 .fmpg-content{padding:18px}.fmpg-layout-list-2 .fmpg-link{grid-template-columns:1fr 260px}.fmpg-layout-list-2 .fmpg-thumb{order:2}.fmpg-layout-list-3 .fmpg-link{border:0;border-bottom:1px solid #e5e7eb}.fmpg-hover-zoom-in .fmpg-link:hover .fmpg-thumb img{transform:scale(1.08)}.fmpg-hover-zoom-out .fmpg-thumb img{transform:scale(1.08)}.fmpg-hover-zoom-out .fmpg-link:hover .fmpg-thumb img{transform:scale(1)}.fmpg-hover-slide-up .fmpg-link:hover .fmpg-thumb img{transform:translateY(-8px) scale(1.04)}.fmpg-hover-slide-down .fmpg-link:hover .fmpg-thumb img{transform:translateY(8px) scale(1.04)}.fmpg-hover-flip .fmpg-thumb{perspective:900px}.fmpg-hover-flip .fmpg-link:hover .fmpg-thumb img{transform:rotateY(12deg) scale(1.04)}.fmpg-hover-rotate .fmpg-link:hover .fmpg-thumb img{transform:rotate(2deg) scale(1.08)}.fmpg-hover-blur .fmpg-link:hover .fmpg-thumb img{filter:blur(2px) brightness(.86)}.fmpg-hover-grayscale .fmpg-link:hover .fmpg-thumb img{filter:grayscale(1)}.fmpg-hover-lift .fmpg-link:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(0,0,0,.14)}.fmpg-hover-none .fmpg-thumb img,.fmpg-hover-none .fmpg-link,.fmpg-hover-none .fmpg-content,.fmpg-hover-none .fmpg-link:before,.fmpg-hover-none .fmpg-link:after{transition:none}.fmpg-pagination{display:flex;gap:6px;justify-content:center;align-items:center;margin:34px 0 0;flex-wrap:wrap}.fmpg-page{min-width:42px;height:42px;padding:0 13px;border:0;background:#b7b7b7;color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1}.fmpg-page:hover,.fmpg-page.is-active{background:#8f8f8f;outline:1px solid #1263ff}.fmpg-dots{padding:0 5px;color:#333}.fmpg-loading{position:relative;opacity:.55;pointer-events:none}.fmpg-not-found{grid-column:1/-1;padding:24px;background:#f7f7f7;text-align:center;color:#666}@media(max-width:991px){.fmpg-grid{grid-template-columns:repeat(var(--fmpg-cols-tablet,2),minmax(0,1fr));gap:22px}.fmpg-layout-grid-6 .fmpg-item:first-child{grid-column:span 1}.fmpg-layout-grid-7 .fmpg-link{grid-template-columns:1fr}.fmpg-layout-list-1 .fmpg-link,.fmpg-layout-list-2 .fmpg-link,.fmpg-layout-list-3 .fmpg-link{grid-template-columns:210px 1fr}.fmpg-layout-list-2 .fmpg-link{grid-template-columns:1fr 210px}}@media(max-width:767px){.fmpg-grid{grid-template-columns:repeat(var(--fmpg-cols-mobile,1),minmax(0,1fr));gap:18px}.fmpg-layout-grid-hover-1 .fmpg-content,.fmpg-layout-grid-hover-3 .fmpg-content{inset:6%;padding:14px}.fmpg-title{font-size:16px}.fmpg-page{min-width:38px;height:38px}.fmpg-layout-list-1 .fmpg-link,.fmpg-layout-list-2 .fmpg-link,.fmpg-layout-list-3 .fmpg-link{grid-template-columns:1fr}.fmpg-layout-list-2 .fmpg-thumb{order:0}}


/* v0.2.1: The Post Grid Pro Grid Hover 3 compatible movement
   Normal: title centered. Hover: title slides upward; date/excerpt/button fade in; white border fades in. */
.fmpg-layout-grid-hover-3 .fmpg-content{
    position:absolute;
    inset:7%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:22px 24px;
    text-shadow:0 2px 10px rgba(0,0,0,.66);
    z-index:3;
    transition:transform .42s ease;
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    color:#fff;
    transform:translateY(0);
    transition:transform .42s ease;
    max-width:100%;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-excerpt,
.fmpg-layout-grid-hover-3 .fmpg-button{
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:opacity .34s ease .08s, transform .34s ease .08s, visibility .34s ease .08s;
}
.fmpg-layout-grid-hover-3 .fmpg-link:before{
    background:rgba(0,0,0,.32);
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:before{
    background:rgba(0,0,0,.58);
}
.fmpg-layout-grid-hover-3 .fmpg-link:after{
    content:"";
    position:absolute;
    inset:7%;
    border:2px solid rgba(255,255,255,.95);
    z-index:2;
    opacity:0;
    transform:scale(.985);
    transition:opacity .34s ease, transform .34s ease;
    pointer-events:none;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:after{
    opacity:1;
    transform:scale(1);
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    transform:translateY(-18px);
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.fmpg-layout-grid-hover-3 .fmpg-date{
    color:#fff;
    font-size:13px;
    margin-top:0;
}
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    color:#fff;
    max-width:92%;
    margin-top:8px;
}
.fmpg-layout-grid-hover-3 .fmpg-button{
    margin-top:14px;
    background:#d9d9d9;
    color:#555;
    border:1px solid rgba(255,255,255,.8);
    padding:10px 18px;
    line-height:1.2;
    text-shadow:none;
}
.fmpg-layout-grid-hover-3 .fmpg-button:hover{
    background:#fff;
    color:#333;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-content{inset:6%;padding:16px 18px;}
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{transform:translateY(-12px);}
}

/* v0.2.2: Grid Hover 3 adjusted after checking The Post Grid structure/CSS.
   Important: hidden elements do not reserve height before hover. The title is exactly centered,
   then the meta/excerpt/button area expands under it, so the title appears to slide upward naturally. */
.fmpg-layout-grid-hover-3 .fmpg-link{
    background:#111;
    color:#fff;
}
.fmpg-layout-grid-hover-3 .fmpg-thumb img{
    transition:transform .48s ease,filter .48s ease,opacity .48s ease;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-thumb img{
    filter:brightness(.72);
}
.fmpg-layout-grid-hover-3 .fmpg-link:before{
    background:rgba(0,0,0,.30);
    transition:background .48s ease;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:before{
    background:rgba(0,0,0,.46);
}
.fmpg-layout-grid-hover-3 .fmpg-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px 30px;
    z-index:3;
    text-shadow:0 2px 10px rgba(0,0,0,.68);
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    display:block;
    color:#fff;
    font-size:20px;
    line-height:1.35;
    font-weight:700;
    max-width:100%;
    margin:0;
    transform:none !important;
    transition:margin .6s ease;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-excerpt,
.fmpg-layout-grid-hover-3 .fmpg-button{
    display:block;
    overflow:hidden;
    max-height:0;
    margin-top:0;
    margin-bottom:0;
    opacity:0;
    visibility:hidden;
    transform:none !important;
    transition:max-height .6s ease, margin .6s ease, opacity .45s ease, visibility .45s ease;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    margin-bottom:12px;
    transform:none !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date{
    max-height:36px;
    margin-bottom:10px;
    opacity:1;
    visibility:visible;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    max-height:90px;
    margin-bottom:12px;
    opacity:1;
    visibility:visible;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{
    max-height:46px;
    opacity:1;
    visibility:visible;
}
.fmpg-layout-grid-hover-3 .fmpg-date{
    color:#fff;
    font-size:13px;
    line-height:1.4;
}
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    color:#fff;
    font-size:14px;
    line-height:1.55;
    max-width:92%;
}
.fmpg-layout-grid-hover-3 .fmpg-button{
    display:inline-block;
    width:auto;
    padding:9px 18px;
    background:rgba(230,230,230,.92);
    color:#555 !important;
    border:1px solid rgba(255,255,255,.75);
    text-shadow:none !important;
    font-size:14px;
    line-height:1.2;
}
.fmpg-layout-grid-hover-3 .fmpg-button:hover{
    background:#fff;
    color:#333 !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:after{
    content:"";
    position:absolute;
    inset:7%;
    border:2px solid rgba(255,255,255,.95);
    z-index:2;
    opacity:0;
    transform:none;
    transition:opacity .45s ease;
    pointer-events:none;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:after{
    opacity:1;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-content{padding:16px 18px;}
    .fmpg-layout-grid-hover-3 .fmpg-title{font-size:17px;}
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{max-height:70px;}
}

/* v0.2.3: Grid Hover 3 precise motion + category display
   - Title: centered before hover, then moves upward and slightly shrinks.
   - Date/category/excerpt: fade in while zooming out into place.
   - Read More: fade in only. */
.fmpg-category{
    display:block;
    margin-top:8px;
    font-size:13px;
    line-height:1.4;
    color:#6b7280;
}
.fmpg-layout-grid-hover-1 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-category{
    color:#fff;
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    transform:translateY(0) scale(1) !important;
    transition:transform .58s cubic-bezier(.22,.8,.24,1), margin .58s cubic-bezier(.22,.8,.24,1) !important;
    transform-origin:center center;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    transform:translateY(-12px) scale(.93) !important;
    margin-bottom:10px;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    display:block;
    overflow:hidden;
    max-height:0;
    margin-top:0;
    margin-bottom:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.10) translateY(8px) !important;
    transform-origin:center top;
    transition:max-height .56s cubic-bezier(.22,.8,.24,1), margin .56s cubic-bezier(.22,.8,.24,1), opacity .42s ease .10s, transform .46s cubic-bezier(.22,.8,.24,1) .10s, visibility .42s ease .10s !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    opacity:1;
    visibility:visible;
    transform:scale(1) translateY(0) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date{
    max-height:28px;
    margin-bottom:6px;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category{
    max-height:32px;
    margin-bottom:8px;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    max-height:92px;
    margin-bottom:12px;
}
.fmpg-layout-grid-hover-3 .fmpg-button{
    transform:none !important;
    transition:max-height .50s ease, opacity .45s ease .16s, visibility .45s ease .16s, background .25s ease, color .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{
    transform:none !important;
}
.fmpg-layout-grid-hover-2 .fmpg-category{
    color:#fff;
}
.fmpg-layout-grid-hover-1 .fmpg-category,
.fmpg-layout-grid-hover-2 .fmpg-category{
    margin-top:8px;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
        transform:translateY(-8px) scale(.94) !important;
    }
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
        max-height:68px;
    }
}


/* v0.2.4: Grid Hover 3 motion rebuilt closer to The Post Grid hover sample.
   Title is truly centered before hover. On hover it slides upward, then settles smaller.
   Date/category/excerpt fade in while zooming out. Read More remains a clean fade-in. */
.fmpg-layout-grid-hover-3 .fmpg-link{overflow:hidden;}
.fmpg-layout-grid-hover-3 .fmpg-content{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    padding:0 30px !important;
    text-align:center;
    z-index:3;
    pointer-events:none;
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    position:absolute;
    left:30px;
    right:30px;
    top:50%;
    margin:0 !important;
    color:#fff;
    font-size:20px;
    line-height:1.36;
    font-weight:700;
    transform:translateY(-50%) scale(1) !important;
    transform-origin:center center;
    transition:top .50s cubic-bezier(.20,.78,.25,1), transform .56s cubic-bezier(.20,.78,.25,1), opacity .28s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    top:27%;
    transform:translateY(-50%) scale(.92) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    position:absolute;
    left:36px;
    right:36px;
    display:block;
    overflow:visible;
    max-height:none !important;
    margin:0 !important;
    opacity:0;
    visibility:hidden;
    transform:scale(1.16) translateY(10px) !important;
    transform-origin:center center;
    color:#fff;
    transition:opacity .42s ease .12s, transform .48s cubic-bezier(.20,.78,.25,1) .12s, visibility .42s ease .12s !important;
}
.fmpg-layout-grid-hover-3 .fmpg-date{top:38%;font-size:13px;line-height:1.35;}
.fmpg-layout-grid-hover-3 .fmpg-category{top:45%;font-size:13px;line-height:1.35;}
.fmpg-layout-grid-hover-3 .fmpg-excerpt{top:54%;font-size:14px;line-height:1.55;max-width:none;}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    opacity:1;
    visibility:visible;
    transform:scale(1) translateY(0) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-button{
    position:absolute;
    left:50%;
    top:75%;
    display:inline-block;
    max-height:none !important;
    margin:0 !important;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) !important;
    pointer-events:auto;
    transition:opacity .42s ease .20s, visibility .42s ease .20s, background .25s ease, color .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:after{
    inset:7%;
    opacity:0;
    transform:scale(.985);
    transition:opacity .42s ease, transform .42s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:after{
    opacity:1;
    transform:scale(1);
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-content{padding:0 18px !important;}
    .fmpg-layout-grid-hover-3 .fmpg-title{left:18px;right:18px;font-size:17px;}
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{top:26%;transform:translateY(-50%) scale(.93) !important;}
    .fmpg-layout-grid-hover-3 .fmpg-date,.fmpg-layout-grid-hover-3 .fmpg-category,.fmpg-layout-grid-hover-3 .fmpg-excerpt{left:22px;right:22px;}
    .fmpg-layout-grid-hover-3 .fmpg-date{top:38%;}.fmpg-layout-grid-hover-3 .fmpg-category{top:45%;}.fmpg-layout-grid-hover-3 .fmpg-excerpt{top:53%;font-size:13px;line-height:1.45;}
    .fmpg-layout-grid-hover-3 .fmpg-button{top:76%;}
}

/* v0.2.5: Grid Hover 3 exact sequence adjustment.
   Title: center -> move upward -> shrink, not simultaneous.
   Date/category/excerpt: fixed-position fade + zoom-out only, no vertical slide.
   Category display filtering is handled in PHP so non-selected terms are not shown. */
.fmpg-layout-grid-hover-3 .fmpg-title{
    top:50% !important;
    transform:translateY(-50%) scale(1) !important;
    transition:none !important;
    animation:none;
    transform-origin:center center;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    animation:fmpg-gh3-title-sequence .64s cubic-bezier(.22,.76,.26,1) forwards !important;
}
@keyframes fmpg-gh3-title-sequence{
    0%{top:50%;transform:translateY(-50%) scale(1);}
    68%{top:27%;transform:translateY(-50%) scale(1);}
    100%{top:27%;transform:translateY(-50%) scale(.92);}
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    transform:scale(1.16) !important;
    transition:opacity .42s ease .14s, transform .48s cubic-bezier(.22,.76,.26,1) .14s, visibility .42s ease .14s !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    transform:scale(1) !important;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
        animation:fmpg-gh3-title-sequence-mobile .64s cubic-bezier(.22,.76,.26,1) forwards !important;
    }
    @keyframes fmpg-gh3-title-sequence-mobile{
        0%{top:50%;transform:translateY(-50%) scale(1);}
        68%{top:26%;transform:translateY(-50%) scale(1);}
        100%{top:26%;transform:translateY(-50%) scale(.93);}
    }
}


/* v0.2.6: Grid Hover 3 final motion correction.
   Title: center -> quick move upward -> delayed shrink.
   Return: slightly slower than hover-in.
   Meta/category/excerpt: no vertical movement, fixed position zoom-out + fade-in only. */
.fmpg-layout-grid-hover-3 .fmpg-content{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    padding:0 30px !important;
    text-align:center !important;
    z-index:3 !important;
    pointer-events:none !important;
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    position:absolute !important;
    left:30px !important;
    right:30px !important;
    top:50% !important;
    margin:0 !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.36 !important;
    font-weight:700 !important;
    transform:translateY(-50%) scale(1) !important;
    transform-origin:center center !important;
    opacity:1 !important;
    transition-property:top, transform, opacity !important;
    transition-duration:.48s, .30s, .25s !important;
    transition-delay:.04s, 0s, 0s !important;
    transition-timing-function:cubic-bezier(.22,.75,.28,1), cubic-bezier(.22,.75,.28,1), ease !important;
    will-change:top,transform !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    top:27% !important;
    transform:translateY(-50%) scale(.92) !important;
    transition-property:top, transform, opacity !important;
    transition-duration:.22s, .20s, .20s !important;
    transition-delay:0s, .22s, 0s !important;
    transition-timing-function:cubic-bezier(.12,.86,.22,1), cubic-bezier(.18,.72,.24,1), ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    position:absolute !important;
    left:36px !important;
    right:36px !important;
    display:block !important;
    overflow:visible !important;
    max-height:none !important;
    margin:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    color:#fff !important;
    transform:scale(1.42) !important;
    transform-origin:center center !important;
    transition-property:opacity, transform, visibility !important;
    transition-duration:.42s, .50s, .42s !important;
    transition-delay:.16s, .16s, .16s !important;
    transition-timing-function:ease, cubic-bezier(.16,.72,.24,1), ease !important;
    will-change:opacity,transform !important;
}
.fmpg-layout-grid-hover-3 .fmpg-date{top:38% !important;font-size:13px !important;line-height:1.35 !important;}
.fmpg-layout-grid-hover-3 .fmpg-category{top:45% !important;font-size:13px !important;line-height:1.35 !important;}
.fmpg-layout-grid-hover-3 .fmpg-excerpt{top:54% !important;font-size:14px !important;line-height:1.55 !important;}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    opacity:1 !important;
    visibility:visible !important;
    transform:scale(1) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-button{
    position:absolute !important;
    left:50% !important;
    top:75% !important;
    display:inline-block !important;
    max-height:none !important;
    margin:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateX(-50%) !important;
    pointer-events:auto !important;
    background:#e5e5e5 !important;
    color:#333 !important;
    border:1px solid rgba(255,255,255,.8) !important;
    text-shadow:none !important;
    transition:opacity .42s ease .24s, visibility .42s ease .24s, background .25s ease, color .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-button{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) !important;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-title{font-size:17px !important;}
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{top:28% !important;}
    .fmpg-layout-grid-hover-3 .fmpg-date{top:39% !important;}
    .fmpg-layout-grid-hover-3 .fmpg-category{top:46% !important;}
    .fmpg-layout-grid-hover-3 .fmpg-excerpt{top:55% !important;font-size:13px !important;line-height:1.45 !important;}
}


/* v0.2.7: Grid Hover 3 Post Grid-like motion final override.
   - remove old hover keyframe overrides that caused jump/warp
   - title moves upward smoothly first, then scale is delayed
   - return movement is slightly slower
   - meta/category/excerpt zoom out from larger fixed position; no Y movement */
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    animation:none !important;
}
.fmpg-layout-grid-hover-3 .fmpg-title{
    position:absolute !important;
    left:30px !important;
    right:30px !important;
    top:50% !important;
    margin:0 !important;
    transform:translateY(-50%) scale(1) !important;
    transform-origin:center center !important;
    transition-property:top, transform, opacity !important;
    transition-duration:.46s, .28s, .25s !important;
    transition-delay:0s, 0s, 0s !important;
    transition-timing-function:cubic-bezier(.20,.72,.24,1), cubic-bezier(.20,.72,.24,1), ease !important;
    will-change:top,transform !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    top:27% !important;
    transform:translateY(-50%) scale(.92) !important;
    transition-property:top, transform, opacity !important;
    transition-duration:.24s, .20s, .20s !important;
    transition-delay:0s, .24s, 0s !important;
    transition-timing-function:cubic-bezier(.10,.92,.20,1), cubic-bezier(.18,.70,.22,1), ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-excerpt{
    transform:scale(1.72) !important;
    transform-origin:center center !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition-property:opacity, transform, visibility !important;
    transition-duration:.40s, .52s, .40s !important;
    transition-delay:.16s, .16s, .16s !important;
    transition-timing-function:ease, cubic-bezier(.12,.75,.22,1), ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-date,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-category,
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-excerpt{
    transform:scale(1) !important;
    opacity:1 !important;
    visibility:visible !important;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
        top:28% !important;
        transform:translateY(-50%) scale(.93) !important;
    }
}

/* v0.2.8: Grid Hover 3 motion refinement.
   Title: center -> upward slide -> immediately smooth shrink, without a pause.
   Border: fade-in while zooming out from outside, like The Post Grid hover frame. */
.fmpg-layout-grid-hover-3 .fmpg-title{
    top:50% !important;
    transform:translateY(-50%) scale(1) !important;
    animation:none !important;
    transition:top .50s cubic-bezier(.25,.70,.25,1), transform .50s cubic-bezier(.25,.70,.25,1), opacity .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    animation:fmpg-gh3-title-smooth-sequence .42s cubic-bezier(.18,.72,.22,1) forwards !important;
    transition:none !important;
}
@keyframes fmpg-gh3-title-smooth-sequence{
    0%{top:50%;transform:translateY(-50%) scale(1);}
    62%{top:27%;transform:translateY(-50%) scale(1);}
    100%{top:27%;transform:translateY(-50%) scale(.92);}
}
.fmpg-layout-grid-hover-3 .fmpg-link:after{
    opacity:0 !important;
    transform:scale(1.16) !important;
    transform-origin:center center !important;
    transition:opacity .36s ease, transform .46s cubic-bezier(.16,.74,.24,1) !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover:after{
    opacity:1 !important;
    transform:scale(1) !important;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
        animation:fmpg-gh3-title-smooth-sequence-mobile .42s cubic-bezier(.18,.72,.22,1) forwards !important;
    }
    @keyframes fmpg-gh3-title-smooth-sequence-mobile{
        0%{top:50%;transform:translateY(-50%) scale(1);}
        62%{top:28%;transform:translateY(-50%) scale(1);}
        100%{top:28%;transform:translateY(-50%) scale(.93);}
    }
}


/* v0.2.9: Grid Hover 3 title motion fix.
   Keep top fixed at 50% and animate transform only to prevent warp.
   JS adds fmpg-gh3-moving first, then fmpg-gh3-shrunk, so the sequence is:
   center -> upward slide -> slight shrink. */
.fmpg-layout-grid-hover-3 .fmpg-title{
    top:50% !important;
    transform:translateY(-50%) scale(1) !important;
    animation:none !important;
    transition:transform .56s cubic-bezier(.24,.66,.28,1), opacity .25s ease !important;
    will-change:transform !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link:hover .fmpg-title{
    top:50% !important;
    transform:translateY(-50%) scale(1) !important;
    animation:none !important;
    transition:transform .24s cubic-bezier(.10,.88,.18,1), opacity .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link.fmpg-gh3-moving .fmpg-title,
.fmpg-layout-grid-hover-3 .fmpg-link:hover.fmpg-gh3-moving .fmpg-title{
    top:50% !important;
    transform:translateY(calc(-50% - 76px)) scale(1) !important;
    animation:none !important;
    transition:transform .24s cubic-bezier(.10,.88,.18,1), opacity .25s ease !important;
}
.fmpg-layout-grid-hover-3 .fmpg-link.fmpg-gh3-moving.fmpg-gh3-shrunk .fmpg-title,
.fmpg-layout-grid-hover-3 .fmpg-link:hover.fmpg-gh3-moving.fmpg-gh3-shrunk .fmpg-title{
    top:50% !important;
    transform:translateY(calc(-50% - 76px)) scale(.92) !important;
    animation:none !important;
    transition:transform .20s cubic-bezier(.18,.72,.22,1), opacity .25s ease !important;
}
@media(max-width:767px){
    .fmpg-layout-grid-hover-3 .fmpg-link.fmpg-gh3-moving .fmpg-title,
    .fmpg-layout-grid-hover-3 .fmpg-link:hover.fmpg-gh3-moving .fmpg-title{
        transform:translateY(calc(-50% - 54px)) scale(1) !important;
    }
    .fmpg-layout-grid-hover-3 .fmpg-link.fmpg-gh3-moving.fmpg-gh3-shrunk .fmpg-title,
    .fmpg-layout-grid-hover-3 .fmpg-link:hover.fmpg-gh3-moving.fmpg-gh3-shrunk .fmpg-title{
        transform:translateY(calc(-50% - 54px)) scale(.93) !important;
    }
}


/* v0.3.0 responsive typography controls */
.fmpg-wrap .fmpg-title{font-size:var(--fmpg-title-size-desktop,20px) !important;}
.fmpg-wrap .fmpg-date,.fmpg-wrap .fmpg-category{font-size:var(--fmpg-meta-size-desktop,13px) !important;}
.fmpg-wrap .fmpg-excerpt{font-size:var(--fmpg-excerpt-size-desktop,14px) !important;}
.fmpg-wrap .fmpg-button{font-size:var(--fmpg-button-size-desktop,14px) !important;}
@media(max-width:991px){
    .fmpg-wrap .fmpg-title{font-size:var(--fmpg-title-size-tablet,18px) !important;}
    .fmpg-wrap .fmpg-date,.fmpg-wrap .fmpg-category{font-size:var(--fmpg-meta-size-tablet,13px) !important;}
    .fmpg-wrap .fmpg-excerpt{font-size:var(--fmpg-excerpt-size-tablet,14px) !important;}
    .fmpg-wrap .fmpg-button{font-size:var(--fmpg-button-size-tablet,14px) !important;}
}
@media(max-width:767px){
    .fmpg-wrap .fmpg-title{font-size:var(--fmpg-title-size-mobile,17px) !important;}
    .fmpg-wrap .fmpg-date,.fmpg-wrap .fmpg-category{font-size:var(--fmpg-meta-size-mobile,12px) !important;}
    .fmpg-wrap .fmpg-excerpt{font-size:var(--fmpg-excerpt-size-mobile,13px) !important;}
    .fmpg-wrap .fmpg-button{font-size:var(--fmpg-button-size-mobile,13px) !important;}
}
