.child-pages-title {
   text-align: center;
   font-size: clamp(22px, 5vw, 50px);
   margin-top: 30px;
   margin-bottom: 20px;
}

.child-pages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
   justify-content: center;
}

.child-page-card {
   position: relative;
   min-width: 0;
   background: #000;
   border-radius: 20px;
   overflow: hidden;
   height: 300px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.28s cubic-bezier(0.26, 0.65, 0.38, 0.99);
   will-change: box-shadow;
}

.child-page-card:hover {
   box-shadow: 0 8px 38px rgba(0, 0, 0, 0.26);
}

.child-page-image {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   transition: transform 0.65s cubic-bezier(0.18, 0.92, 0.36, 1.1);
   will-change: transform;
}

.child-page-card:hover .child-page-image {
   transform: scale(1.06);
}

.child-page-title {
   position: absolute;
   bottom: 30px;
   left: 50%;
   width: 80%;
   max-width: 90%;
   color: #fff;
   font-size: 1em;
   text-align: center;
   font-weight: 600;
   padding: 10px 5px;
   background: rgba(203, 56, 41, 0.92);
   border-radius: 16px;
   pointer-events: none;
   box-shadow: 0 2px 8px rgba(150, 16, 14, 0.11);
   transform: translateX(-50%);
   transition: transform 0.6s cubic-bezier(0.19, 1, 0.29, 0.97),
      opacity 0.6s cubic-bezier(0.19, 1, 0.29, 0.97), width 0.6s ease;
   z-index: 3;
   overflow: visible;
}

.child-page-card:hover .child-page-title {
   opacity: 0;
   transform: translateX(-50%) translateY(-110%);
   width: 60%;
}

.child-page-overlay {
   position: absolute;
   inset: 0;
   background: rgba(17, 19, 24, 0.5);
   border-radius: 20px;
   opacity: 0;
   pointer-events: none;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 30px 20px;
   box-sizing: border-box;
   transition: opacity 0.5s ease, transform 0.5s ease;
   transform: translateY(100%);
   z-index: 4;
   font-size: 0.96em;
   line-height: 1.3;
   overflow: hidden;
   margin: 10px;
}

.child-page-card:hover .child-page-overlay {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

.child-page-desc {
   margin-bottom: 20px;
   text-align: center;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   max-height: 5.8em;
}

.child-page-btn {
   padding: 10px 18px;
   font-size: 1em;
   background: transparent;
   color: #fff;
   border: 1px solid #ce3c2f;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
   box-shadow: 0 0 7px rgba(150, 16, 14, 0.1);
   transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.child-page-btn:hover,
.child-page-btn:focus {
   background: #ce3c2f;
   color: #fff;
   border-color: #ce3c2f;
}

.child-page-link {
   position: absolute;
   inset: 0;
   z-index: 10;
}

.child-page-parent-title {
   position: absolute;
   padding: 4px 8px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 10px;
   font-size: 0.9em;
   font-weight: 600;
   z-index: 5;
}

.pashtet-parent-title-top-left {
   top: 8px;
   left: 8px;
}

.pashtet-parent-title-top-right {
   top: 8px;
   right: 8px;
}

.pashtet-parent-title-bottom-left {
   bottom: 8px;
   left: 8px;
}

.pashtet-parent-title-bottom-right {
   bottom: 8px;
   right: 8px;
}

.pashtet-pagination {
   margin-top: 30px;
}

.pashtet-pagination ul {
   display: inline-flex;
   list-style: none;
   padding-left: 0;
   gap: 8px;
}

.pashtet-pagination ul li {
   margin: 0;
}

.pashtet-pagination ul li a,
.pashtet-pagination ul li span {
   display: block;
   padding: 6px 14px;
   border: 1px solid #ccc;
   border-radius: 8px;
   color: #333;
   text-decoration: none;
   transition: background-color 0.3s ease, color 0.3s ease;
}

.pashtet-pagination ul li a:hover {
   background-color: #ce3c2f;
   color: #fff;
   border-color: #ce3c2f;
}

.pashtet-pagination ul li.active span {
   background-color: #cb3829;
   color: #fff;
   border-color: #cb3829;
}