@font-face{font-family:"Outfit";src:url("/wp-content/themes/junj/assets/fonts/Outfit-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("/wp-content/themes/junj/assets/fonts/Outfit-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Outfit";src:url("/wp-content/themes/junj/assets/fonts/Outfit-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Orbitron";src:url("/wp-content/themes/junj/assets/fonts/orbitron-bold.otf") format("opentype");font-weight:900;font-display:swap}

.blog-page{--green:#008c11;--deep:#14363f;--muted:#97a29c;--line:#b8d8bc;--banner:#f9fbfa;--tabs:#cce0d7;width:100%;max-width:100%;color:var(--deep);font-family:"Outfit",Arial,sans-serif}
.blog-page,.blog-page *{box-sizing:border-box}
.blog-page a,.blog-page a:hover,.blog-page a:focus,.blog-page a:active{color:inherit;text-decoration:none}

.blog-page .banner{padding:108px 20px 83px;background-color:var(--banner);background-position:center;background-size:cover}
.blog-page .banner-text{width:min(100%,960px);margin:0 auto;text-align:center}
.blog-page .banner-text h1{margin:0 0 68px;color:var(--green);font-family:"Orbitron",sans-serif;font-size:96px;font-weight:900;line-height:1}
.blog-page .banner-text p{margin:0 auto 59px;color:var(--deep);font-size:16px;line-height:1.7}
.blog-page .menu-wrap{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;width:min(100%,575px);margin:0 auto;padding:8px 19px;overflow:hidden;border-radius:30px;background:var(--tabs)}
.blog-page .menu-wrap a{display:flex;min-height:34px;align-items:center;justify-content:center;padding:8px 14px;border-radius:20px;color:var(--deep);font-size:16px;font-weight:700;line-height:1.1;white-space:nowrap;transition:color .25s ease,background-color .25s ease}
.blog-page .menu-wrap a:hover,.blog-page .menu-wrap a.active{color:var(--green);background:#fff}

.blog-page .box-list-wrap{width:min(calc(100% - 80px),1640px);margin:0 auto;padding:34px 0}
.blog-page .box-item{display:grid;grid-template-columns:386px 120px minmax(0,800px);column-gap:167px;align-items:start;padding:83px 0;border-bottom:1px solid var(--line)}
.blog-page .box-item:last-of-type{border-color:var(--deep)}
.blog-page .box-item .left,.blog-page .box-item .left a{display:block;width:386px;height:252px}
.blog-page .box-item .left{overflow:hidden;border-radius:8px;background:#eef3f1}
.blog-page .box-item .left img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.blog-page .box-item .left:hover img{transform:scale(1.03)}
.blog-page .box-item .center{width:120px;padding-top:20px;text-align:left}
.blog-page .box-item .day{margin-bottom:22px;color:var(--deep);font-size:64px;font-weight:400;line-height:1}
.blog-page .box-item .mon-year{color:#d9d9d9;font-size:20px;line-height:1.2;white-space:nowrap}
.blog-page .box-item .right{width:100%;min-width:0;padding-top:14px}
.blog-page .box-item .right h4{min-height:68px;margin:0 0 26px;color:#000;font-size:28px;font-weight:700;line-height:1.21;text-transform:capitalize;transition:color .25s ease}
.blog-page .box-item:hover .right h4,.blog-page .box-item:focus-within .right h4{color:var(--green)}
.blog-page .box-item .right p{min-height:78px;margin:0 0 37px;color:var(--muted);font-size:18px;font-weight:400;line-height:1.45}
.blog-page .box-item .button{margin:0}
.blog-page .box-item .pill-link.white{height:66px;padding:0 9px 0 28px;font-size:18px;letter-spacing:.01em;transition:color .28s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .28s ease}
.blog-page .box-item .pill-link.white i{inline-size:46px;block-size:46px;margin-left:20px}
.blog-page .box-item:hover .pill-link.white,.blog-page .box-item:focus-within .pill-link.white{color:#fff;border-color:var(--green);border-radius:999px;background:var(--green);box-shadow:0 8px 20px rgba(0,140,17,.18);transform:translateY(-2px)}
.blog-page .box-item:hover .pill-link.white i,.blog-page .box-item:focus-within .pill-link.white i{color:var(--green);background:#eaf6ec}
.blog-page .box-page{padding:90px 0}
.blog-page .blog-empty{padding:80px 0;color:var(--muted);font-size:18px;line-height:1.5;text-align:center}

@media(max-width:1760px){
 .blog-page .box-item{grid-template-columns:minmax(300px,386px) 100px minmax(0,1fr);column-gap:clamp(48px,7vw,140px)}
 .blog-page .box-item .left,.blog-page .box-item .left a{width:100%}
 .blog-page .box-item .center{width:100px}
}

@media(max-width:1440px){
 .blog-page .banner{padding:72px 20px 64px}
 .blog-page .banner-text h1{margin-bottom:36px;font-size:56px}
 .blog-page .banner-text p{margin-bottom:36px}
 .blog-page .box-list-wrap{width:min(calc(100% - 64px),1280px)}
 .blog-page .box-item{grid-template-columns:minmax(280px,34%) 90px minmax(0,1fr);column-gap:clamp(32px,5vw,72px);padding:64px 0}
 .blog-page .box-item .left,.blog-page .box-item .left a{height:auto;aspect-ratio:386/252}
 .blog-page .box-item .center{width:90px}
 .blog-page .box-item .day{font-size:48px}
 .blog-page .box-item .right h4{min-height:58px;font-size:24px}
 .blog-page .box-item .right p{min-height:66px;font-size:16px}
}

@media(max-width:1024px){
 .blog-page .banner{padding:52px 20px 48px}
 .blog-page .banner-text h1{margin-bottom:26px;font-size:40px}
 .blog-page .banner-text p{margin-bottom:28px}
 .blog-page .box-list-wrap{width:min(calc(100% - 40px),920px);padding-top:40px}
 .blog-page .box-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .blog-page .box-item{display:grid;grid-template-columns:1fr auto;gap:18px 14px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff}
 .blog-page .box-item:last-of-type{border-color:var(--line)}
 .blog-page .box-item .left{grid-column:1/-1;width:100%}
 .blog-page .box-item .left,.blog-page .box-item .left a{height:auto;aspect-ratio:386/252}
 .blog-page .box-item .center{display:flex;grid-column:1/-1;width:100%;align-items:baseline;gap:8px;padding:0}
 .blog-page .box-item .day{margin:0;font-size:28px}
 .blog-page .box-item .mon-year{font-size:14px}
 .blog-page .box-item .right{grid-column:1/-1;padding:0}
 .blog-page .box-item .right h4,.blog-page .box-item .right p{min-height:0}
 .blog-page .box-item .right h4{margin-bottom:14px;font-size:20px}
 .blog-page .box-item .right p{margin-bottom:20px;font-size:15px}
 .blog-page .box-page{padding:44px 0 54px}
}

@media(max-width:768px){
 .blog-page .banner{padding:42px 16px 38px}
 .blog-page .banner-text h1{margin-bottom:20px;font-size:32px}
 .blog-page .banner-text p{margin-bottom:22px;font-size:14px;line-height:1.55}
 .blog-page .menu-wrap{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;border-radius:10px}
 .blog-page .menu-wrap a{padding:10px;border-radius:8px;font-size:14px;white-space:normal}
 .blog-page .box-list-wrap{width:min(calc(100% - 32px),620px);padding-top:30px}
 .blog-page .box-list{grid-template-columns:1fr}
 .blog-page .box-item .right h4{font-size:19px}
}

@media(max-width:480px){
 .blog-page .banner{padding-inline:14px}
 .blog-page .banner-text h1{font-size:28px}
 .blog-page .menu-wrap{grid-template-columns:1fr}
 .blog-page .box-list-wrap{width:calc(100% - 28px)}
 .blog-page .box-item{padding:14px}
}