/*
Theme Name: Struktur Child
Theme URI: http://struktur.select-themes.com
Description: A child theme of Struktur Theme
Author: Select Themes
Author URI: http://themeforest.net/user/select-themes
Version: 1.0.0
Text Domain: struktur
Template: struktur
*/

/* --- Banner --------------------------------------------------------------- */
.case-study-banner {
    background: #f8f8f8;
    padding: 0 5%;
    min-height: 95.9442vh;
    display: flex;
    align-items: center;
}

.single-case-study .single-post {
    padding: 40px 0 50px !important;
}

.qodef-container-inner.case-study-container {
    width: 100%;
    padding: 0 5%;
}

.case-study-banner .qodef-container-inner {
    width: 100%;
}

.case-study-banner h1 {
    margin: 0;
    color: #E84945;
    font-family: Roboto, sans-serif;
    font-size: 96px;
    font-weight: 700;
    line-height: 106px;
}

.case-study-banner p {
    margin: 10px 0 0;
    color: #000;
    font-family: Roboto, sans-serif;
    font-size: 50px;
    font-weight: 300;
    line-height: 1.2;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.cs-breadcrumb {
    padding: 35px 0 20px;
    font-size: 15px;
    color: #464646;
}

.cs-breadcrumb a {
    color: #464646;
}

.cs-breadcrumb a:hover {
    color: #E84945;
}

.cs-breadcrumb .breadcrumb_last {
    color: #000;
    font-weight: 500;
}

/* --- Grid ----------------------------------------------------------------- */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    padding-bottom: 50px;
}

.case-study-card {
    background: #fff;
    border: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    transition: box-shadow .4s linear;
}

.case-study-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* --- Card image ----------------------------------------------------------- */
.case-study-image {
    display: block;
    overflow: hidden;
    background: #f8f8f8;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.04);
}

/* --- Card content --------------------------------------------------------- */
.case-study-content {
    padding: 20px 25px 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-study-content h3 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.case-study-content h3 a {
    color: #1a1a1a;
    transition: color .4s linear;
}

.case-study-content h3 a:hover {
    color: #E84945;
}

.case-study-content p {
    margin: 0 0 15px;
    color: #464646;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
}

.read-more {
    margin-top: auto;
    align-self: flex-start;
    color: #1a1a1a;
    font-size: 17px;
    text-decoration: underline;
    transition: color .4s linear;
}

.read-more:hover {
    color: #E84945;
}

/* --- Load more ------------------------------------------------------------ */
.load-more-wrap {text-align: center;margin: 20px 0 80px;}

#load-more-case-study {display: inline-flex;align-items: center;justify-content: center;gap: 10px;
/*     min-width: 160px; */
background: #1a1a1a;color: #fff;border: 2px solid #1a1a1a;border-radius: 8px;padding: 14px 32px;font-size: 16px;font-weight: 400;line-height: 1;cursor: pointer;transition: all .4s linear;
}
#load-more-case-study:hover {background: #E84945;border-color: #E84945;color: #fff;}

#load-more-case-study[disabled],
#load-more-case-study.is-loading {
    opacity: .6;
    pointer-events: none;}

/* --- Spinner --- */
.cs-spinner {display: none;width: 14px;height: 14px;border: 2px solid rgba(255, 255, 255, .35);border-top-color: #fff;border-radius: 50%;animation: cs-spin .7s linear infinite;flex-shrink: 0;}

#load-more-case-study.is-loading .cs-spinner {display: inline-block;}
@keyframes cs-spin {to { transform: rotate(360deg); }}

/*recent case study*/
.recent-case-study {display: flex;flex-direction: column;gap: 20px;}
.recent-case-study .case-study-item p {color: #000000; font-weight: 600;}

/* --- Responsive ----------------------------------------------------------- */
@media screen and (max-width: 1367px) {
    .case-study-banner h1 { font-size: 70px; line-height: normal; }
    .case-study-banner p  { font-size: 35px; }
}

@media screen and (max-width: 1024px) {
    .case-study-content h3 { font-size: 24px; }
    .case-study-content p  { font-size: 16px; }
}

@media screen and (max-width: 900px) {
    .case-study-banner {
        min-height: auto;
        padding: 100px 5%;
    }
    .case-study-banner h1 { font-size: 43px; line-height: normal; }
    .case-study-banner p  { font-size: 25px; margin-top: 15px; }
}

@media screen and (max-width: 767px) {
    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .case-study-content { padding: 18px 18px 22px; }
    .case-study-content h3 { font-size: 22px; }
}

/*case study stiky*/
@media (min-width: 1025px) {
  body.single-case-study,
  body.single-case-study .qodef-wrapper,
  body.single-case-study .qodef-wrapper-inner,
  body.single-case-study .qodef-content,
  body.single-case-study .qodef-content-inner {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.single-case-study .qodef-sidebar-holder {position: sticky;top: 80px;height: fit-content;}  
}

/*portfolio sections stiky*/
.portfolio-page body,
body.portfolio-page {
  overflow-x: clip !important;overflow-y: visible !important;}

.portfolio-page .qodef-wrapper,
.portfolio-page .qodef-wrapper-inner {overflow: visible !important;}

@media (min-width: 768px) {
  .portfolio-page .newdgn_port > .vc_col-sm-3 {position: -webkit-sticky !important;position: sticky !important;top: 100px;z-index: 5;}
  .portfolio-page .newdgn_port .vc_col-sm-3 .wpb_wrapper {position: static !important;top: auto !important;}
}

/*blog side bar */
.recent-case-study-widget img {width: 100%;margin-bottom: 10px;}
.recent-case-study-widget {display: flex;flex-direction: column;gap: 10px;}
/* Full-width image with a fixed 3:2 crop, same feel as the case study cards */
#category-posts-2-internal .cat-post-thumbnail .cat-post-crop img,
#category-posts-3-internal .cat-post-thumbnail .cat-post-crop img,
#category-posts-2-internal .cat-post-item img,
#category-posts-3-internal .cat-post-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover !important;
    margin: 0 !important;
    max-width: 100% !important;
}
/* Title below the image */
#category-posts-2-internal .cat-post-title,
#category-posts-3-internal .cat-post-title {font-size: 16px;font-weight: 500;color: #000;}

.recent-case-study-widget li a {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: color 0.3s linear;
}