/* ==========================================================
   BLOG
========================================================== */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
}


/* ==========================================================
   CARD
========================================================== */

.blog-card{
    position:relative;
    padding:30px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
    transition:.35s ease;
}

.blog-card:hover{
    transform:translateY(-8px);
}


/* alternance */

.card-light{

    background-image:url("/wp-content/themes/laterredescampette/img/fond-carte-1.png");

}

.card-beige{

    background-image:url("/wp-content/themes/laterredescampette/img/fond-carte-2.png");

}


/* ==========================================================
   DATE
========================================================== */

.blog-card-date{
	border: 2px solid #2b4a3c;
	color: #2b4a3c;
	font-size: 16px;
	padding: 0px 10px;
    text-transform:uppercase;
    font-family:"Raleway", sans-serif;
	margin: 0 auto 10px auto;
	width: 120px;
	line-height:1.4;
}


/* ==========================================================
   TITRE
========================================================== */

.blog-card-title{
    margin-bottom:0 !important;
	font-family:"Raleway", sans-serif;
    font-size:18px;
	color:#27463d;
	font-weight:bold;
    line-height:1.2;
    text-transform:uppercase;
}

.blog-card-title a{
    color:var(--vert-fonce);
    text-decoration:none;
}

.blog-card-title a:hover{

    color:var(--terracotta);

}


/* ==========================================================
   IMAGE
========================================================== */

.blog-card-image{
    width:73%;
    margin:0 auto -10px;
	aspect-ratio:1.45;
}

.blog-card-image img{
    width:100%;
    display:block;
    transition:.4s ease;
	mask-size:100% 90%;
	height:100%;
	object-fit:cover;
	object-position:center;

    -webkit-mask-image:url("/wp-content/themes/laterredescampette/img/brush-mask.png");
    mask-image:url("/wp-content/themes/laterredescampette/img/brush-mask.png");

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:100% 90%;
}

.blog-card:hover .blog-card-image img{

    transform:scale(1.05);

}


/* ==========================================================
   EXTRAIT
========================================================== */

.blog-card-excerpt{

    color:var(--vert-fonce);
    margin-bottom:10px;
    line-height:1.7;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}


/* ==========================================================
   BOUTON
========================================================== */

.btn-blog{
    margin-top:auto;
}

.btn-green {
  background: #a7ac8f;
  color: #fff;
}


/* ==========================================================
   PAGINATION
========================================================== */

.blog-pagination{

    margin-top:80px;

    display:flex;

    justify-content:center;

}

.blog-pagination .page-numbers{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 6px;

    border-radius:50%;

    text-decoration:none;

    color:var(--vert-fonce);

    background:#fff;

    transition:.3s;

}

.blog-pagination .current{

    background:var(--terracotta);

    color:#fff;

}

.blog-pagination a:hover{

    background:var(--vert-fonce);

    color:#fff;

}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width:1024px){

.blog-grid{

grid-template-columns:1fr;

}

.blog-card{

max-width:650px;

margin:auto;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.blog-grid{

gap:40px;

}

.blog-card{

padding:35px 25px;

}

.blog-card-title{

font-size:1.6rem;

}

}