/*
 * Shared stylesheet for case-study detail pages (wp-content/themes/ninja/case-studies/*.php)
 * and the single-case-studies.php CPT single template. Enqueued only there — see
 * load_case_study_assets() in functions.php.
 */

/* ============ "casestudy-details-*" layout (used by single-case-studies.php + case-studies/*.php) ============ */
.casestudy-details-top-img{margin-top:40px;}
.casestudy-details-top-img > img{width:100%;border-radius:30px;}
.casestudy-top-text{margin:0 auto 58px;max-width:1200px;}
.casestudy-top-text h1{margin-bottom:22px;}
.casestudy-top-text p{font-weight:400;}
.casestudy-details-top .row{margin:0 -20px;}
.casestudy-details-top [class^="col-"]{padding:0 20px;}
.casestudy-details-text h2{font-size:60px;font-weight:500;line-height:86px;letter-spacing:-1.2px;color:#121212;}
.casestudy-details-text p{font-weight:400;color:rgba(0,0,0,0.50);max-width:700px;margin-left:auto;margin-bottom:15px;}
.case-sec-space{padding:120px 0;}
.casestudy-app-design{background:#000;padding-bottom:100px;position:relative;}
.casestudy-app-design .casestudy-details-text p{color:rgba(255,255,255,0.50);}
.casestudy-app-design .casestudy-details-text h2{color:#fff;}
.app-design-gallery{padding-bottom:100px;margin:0 -20px;}
.app-design-gallery .col-lg-4:nth-child(2){margin-top:100px;}
.app-design-gallery .col-lg-4 > img{max-width:383px;padding-bottom:30px;width:100%;}
.conclusion-app-design .row:last-child .casestudy-details-top-img:first-child{margin-top:0;}
.conclusion-images{margin:0 -20px;}
.conclusion-images .casestudy-details-top-img{padding:0 20px;}
.app-design-gallery .col-lg-4{padding:0 20px;}
.casestudy-details-text p span{font-weight:700;}
.casestudy-details-inner{max-width:680px;margin-left:auto;}
.casestudy-details-inner ul{margin-bottom:15px;}
.casestudy-details-inner ul li{font-size:20px;font-style:normal;font-weight:400;color:rgba(0,0,0,0.50);line-height:26px;margin-bottom:5px;}
.casestudy-details-inner ul li strong{font-weight:700;margin-bottom:5px;display:block;}
.casestudy-details-inner ul li::marker{display:none;}
.casestudy-details-inner ul li ul{margin:0 0 20px 15px;}
@media (min-width:1200px) and (max-width:1299px){
.casestudy-details-text h2{font-size:50px;line-height:75px;}
.casestudy-top-text{max-width:1000px;margin-bottom:0;}
}
@media (max-width:1199px){
.case-sec-space{padding:60px 0;}
.app-design-gallery{padding-bottom:60px;}
.casestudy-top-text{margin:0 auto 0;}
.casestudy-details-text h2{font-size:45px;line-height:70px;}
}
@media (max-width:991px){
.casestudy-details-text h2{font-size:35px;line-height:60px;}
}
@media (min-width:320px) and (max-width:767px){
section.casestudy-app-design:after{height:15%;}
.case-sec-space.conclusion-app-design{padding-bottom:60px;}
.app-design-gallery{padding-bottom:40px;margin:0 -12px;}
.casestudy-top-text{margin-bottom:10px;}
.casestudy-details-text h2{margin-bottom:10px;font-size:30px;line-height:55px;}
.casestudy-details-top-img > img{border-radius:12px;}
.app-design-gallery .col-lg-4 > img{margin:0 auto;}
.casestudy-details-top-img{margin-top:20px;}
.app-design-gallery .col-lg-4:nth-child(2){margin-top:50px;}
.app-design-gallery .col-lg-4{padding:0 12px;flex:0 0 33.33%;}
}

/* ============ "Related posts" blog section (moved from style.css/responsive.css) ============ */
.blog-section{background-color:#f8f8f8;padding:91px 0 126px 0;position:relative;}
.blog-shape{position:absolute;bottom:150px;left:-80px;z-index:11;background:var(--Gradients-G-01,linear-gradient(90deg,#8A2387 31.86%,#E94057 64.79%,#F27121 97.99%));opacity:0.15;filter:blur(97px);width:340px;height:470px;    flex-shrink:0;}
.blog-parent{z-index:111;position:relative;}
.blog-block{transition:all 0.5s ease;}
.blog-block-image{border-radius:12px;position:relative;z-index:1;}
.blog-block-image::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-2px;opacity:0;transition:all 0.5s ease;border-radius:inherit;background:linear-gradient(93.3deg,#8A2387 4.23%,#E94057 50.82%,#F27121 97.8%);}
.blog-block:hover .blog-block-image::before{opacity:1;}
.blog-block-image img{width:100%;height:260px;object-fit:cover;border-radius:12px;object-fit:fill;}
.blog-block h5{color:#fff;line-height:32px;font-weight:300;margin:24px 0 0 0;}
.blog-block h5 strong{font-weight:500;}
@media (min-width:992px) and (max-width:1199px){
.blog-section{padding:40px 0 80px 0;}
.blog-block-image img{height:200px;}
.blog-block h5,section.blog-section.blog-home-sec .blog-block h3{line-height:27px;}
}
@media (min-width:768px) and (max-width:991px){
.blog-section{padding:50px 0;}
.blog-block{margin-bottom:30px;}
.blog-block-image img{height:200px;}
.blog-block h5,section.blog-section.blog-home-sec .blog-block h3{margin-top:20px;font-size:18px;line-height:26px;}
.blog-parent .btn.mobile-btn{margin:0 auto;}
}
@media (min-width:320px) and (max-width:767px){
.blog-section{padding:50px 0;}
.blog-block{margin-bottom:30px;}
.blog-block-image img{height:auto;}
.blog-block h5,section.blog-section.blog-home-sec .blog-block h3{margin-top:20px;font-size:18px;line-height:26px;}
.blog-parent .btn.mobile-btn{margin:0 auto;}
}

/* ============ "Figma redesign" case-study layout (macir-*) ============ */
.macir-page{
  --c-ink:#121212;
  --c-title2:#1e1e1e;
  --c-body:#797979;
  --c-nav:#5e5e5e;
  --c-label:#949494;
  --c-orange:#ff5b2e;
  --c-card:#f8f8f8;
  --c-border-warm:#f2ece9;
  --c-approach-bg:#fff7f5;
  --c-border-light:#ededed;
  --c-border-lighter:#f2f2f2;
  --f-head:'Roboto',sans-serif;
  --f-body:'DM Sans',sans-serif;
  --macir-sticky-top:104px;
  color:var(--c-ink);
  font-family:var(--f-body);
  background:#fff;
}
.macir-page *{box-sizing:border-box;}
.macir-page img{max-width:100%;height:auto;}
.macir-page a{text-decoration:none;}
.macir-page [id^="macir-"]{scroll-margin-top:calc(var(--macir-sticky-top) + 16px);}
section.introduction-sec {
    margin-top: 70px;
}

/* -------- striped decorative background (hero / CTA) -------- */
.macir-striped{
  background-image: url("/wp-content/themes/ninja/assets/images/common/case-study-ban-img.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
section.macir-cta.macir-striped.case-cta-bg {
    background-image: url("/wp-content/themes/ninja/assets/images/common/case-study-ban-img.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

/* -------- breadcrumbs -------- */
.macir-crumbs{
  display:flex;align-items:center;justify-content:space-between; margin-bottom: 50px;
  font-family:var(--f-body);font-weight:500;font-size:18px; padding: 0;
}
.macir-crumb-link{
  display:inline-flex;align-items:center;gap:8px;
  background-image:linear-gradient(105deg,#ff5b2e 7%,#f5e12d 127%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap; font-size: 20px; line-height: normal;
}
.macir-crumb-link img{width:18px;height:18px;}
.macir-crumb-next img{transform:scaleY(-1);}

/* -------- hero -------- */
.macir-hero{padding:159px 0 65px;position:relative;z-index:1;}
.macir-hero-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px;}
.macir-hero-grid>div{flex:1 1 420px;min-width:0;}
.macir-hero-title{
  font-family:var(--f-head);font-weight:700;color:var(--c-ink);
  font-size:clamp(30px,4.2vw,58px);line-height:1.2;margin:0 0 20px;text-align: left;
}
.macir-hero-title{
text-align: left;;
}
.macir-hero-desc{
  font-family:var(--f-body);font-weight:500;color:var(--c-body);
  font-size:18px;line-height:26px;margin:0;max-width:640px;
}
.macir-hero-media{position:relative;border-radius:20px;overflow:hidden;height:100%;min-height:260px;}
.macir-hero-photo{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;border-radius:20px;}
.macir-hero-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58%;max-width:305px;border-radius:999px;
}

/* -------- layout: main + sticky aside -------- */
.macir-layout{display:flex;gap:78px;padding-bottom:132px;}
.macir-main{flex:1;display:flex;flex-direction:column;gap:90px;min-width:0;}
.macir-aside{width:280px;flex-shrink:0;}
.macir-aside-inner{
  background:var(--c-card);border-radius:20px;padding:28px 20px;
  position:sticky;top:var(--macir-sticky-top);
}
.macir-aside-inner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;}
.macir-aside-inner li a{
  font-family:var(--f-head);font-weight:400;font-size:20px;color:var(--c-nav);
  position:relative;padding-left:20px;display:block;
}
.macir-aside-inner li a::before{
  content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--c-nav);
}
.macir-aside-inner li a.is-active{color:var(--c-orange);font-weight:600;}
.macir-aside-inner li a.is-active::before{background:var(--c-orange);}

/* -------- section heading -------- */
.macir-section h2{
  font-family:var(--f-head);font-weight:700;color:var(--c-ink);
  font-size:clamp(26px,3.2vw,52px);line-height:1.2;margin:0 0 40px;
}
.macir-section h3{
  font-family:var(--f-head);font-weight:600;color:var(--c-ink);
  font-size:clamp(22px,2.6vw,42px);line-height:1.2;margin:40px 0 40px;
}

/* -------- introduction -------- */
.macir-intro-text{display:flex;flex-direction:column;gap:24px;margin-bottom:32px;}
.macir-intro-text p{font-family:var(--f-body);font-weight:500;font-size:18px;line-height:26px;color:var(--c-body);margin:0;}
.macir-stat-box{border:1px solid var(--c-border-warm);border-radius:16px;display:flex;flex-wrap:wrap;}
.macir-stat-box .macir-stat{
  flex:1 1 0;min-width:150px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;
  border-left:1px solid var(--c-border-warm);
}
.macir-stat-box .macir-stat:first-child{border-left:0;}
.macir-stat-label{font-family:var(--f-head);font-weight:400;font-size:18px;color:var(--c-label);}
.macir-stat-value{font-family:var(--f-head);font-weight:500;font-size:18px;color:var(--c-ink);}

.macir-tech-box{border:1px solid var(--c-border-warm);border-radius:16px;display:flex;flex-wrap:wrap;align-items:center;padding:20px 30px;gap:0;}
.macir-tech-icon{
  flex:1 1 0;min-width:70px;display:flex;align-items:center;justify-content:center;
  padding:12px 20px;border-left:1px solid var(--c-border-warm);
}
.macir-tech-icon:first-child{border-left:0;}
.macir-tech-icon img{width:50px;height:50px;object-fit:contain;}

/* -------- numbered list (Challenges / Our Approach) -------- */
.macir-numbered-list{list-style:none;counter-reset:macir-count;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;}
.macir-numbered-list li{counter-increment:macir-count;position:relative;padding-left:30px;}
.macir-numbered-list li::before{
  content:counter(macir-count)".";position:absolute;left:0;top:0;
  font-family:var(--f-head);font-weight:500;font-size:20px;color:var(--c-ink);
}
.macir-li-title{display:block;font-family:var(--f-head);font-weight:500;font-size:20px;color:var(--c-ink);}
.macir-numbered-list li p{font-family:var(--f-body);font-weight:400;font-size:18px;line-height:26px;color:var(--c-body);margin:13px 0 0;}

.macir-approach-card{background:var(--c-approach-bg);border-radius:20px;padding:clamp(24px,3vw,40px);}
.macir-approach-card .macir-numbered-list{border-left:3px solid var(--c-orange);padding-left:30px;margin-left:2px;}
.macir-approach-card .macir-numbered-list li{padding-left:30px;}

/* -------- key features -------- */
.macir-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.macir-feature-card{background:var(--c-card);border-radius:16px;padding:30px;height:100%;display:flex;flex-direction:column;gap:20px;}
.macir-feature-icon{
  width:32px;height:32px;border-radius:100px;background:var(--c-orange);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.macir-feature-icon img{width:15px;height:15px;filter:brightness(0) invert(1); object-fit: contain;}
.macir-feature-card h4{font-family:var(--f-body);font-weight:600;font-size:18px;color:var(--c-title2);margin:0;}
.macir-feature-card p{font-family:var(--f-body);font-weight:400;font-size:18px;line-height:26px;color:var(--c-body);margin:0;}
.macir-feature-card b{color:var(--c-ink);font-weight:600;}

/* -------- results & impact -------- */
.macir-results-text{font-family:var(--f-body);font-weight:500;font-size:18px;line-height:26px;color:var(--c-body);margin:0 0 30px;}
.macir-results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:90px;}
.macir-result-card{background:#fff;border:1px solid var(--c-border-light);border-radius:16px;padding:30px;height:100%;display:flex;flex-direction:column;gap:14px;}
.macir-result-value{font-family:var(--f-body);font-weight:700;font-size:28px;color:var(--c-title2);}
.macir-result-label{font-family:var(--f-body);font-weight:500;font-size:16px;color:var(--c-body);}

/* -------- pill CTA buttons -------- */
.macir-btn{
  display:inline-flex;align-items:center;gap:12px;background:var(--c-orange);color:#fff;
  font-family:var(--f-body);font-weight:700;font-size:16px;padding:13px 8px 13px 26px;
  border-radius:30px;box-shadow:0 14px 54px rgba(255,91,46,.2);border:none;white-space:nowrap;
  margin-top:36px;
}
.macir-btn-icon{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.macir-btn-icon img{width:15px;height:15px;transform:rotate(90deg);filter:brightness(0) invert(1);}
.macir-btn-cta{font-size:18px;padding:15px 8px 15px 30px;margin-top:0;}

/* -------- CTA section -------- */
.macir-cta{padding:100px 0;text-align:center;position:relative;z-index:1;}
.macir-cta h2{font-family:var(--f-head);font-weight:600;font-size:clamp(30px,5vw,64px);line-height:1.2;color:var(--c-ink);margin:0 0 20px;}
.macir-cta p{font-family:var(--f-body);font-weight:500;font-size:20px;color:var(--c-body);max-width:1096px;margin:0 auto 60px;}

/* -------- see more case studies -------- */
.macir-seemore{padding:130px 0;}
.macir-seemore h2{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,3.2vw,44px);color:var(--c-ink);margin:0 0 16px; line-height: normal;}
.macir-seemore>.container>p{font-family:var(--f-head);font-weight:400;font-size:18px;color:var(--c-body);margin:0 0 40px;}
.macir-seemore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.macir-sm-card{border:1px solid var(--c-border-lighter);border-radius:20px;padding:20px 16px;height:100%;background:#fff;}
.macir-sm-card-media{border-radius:16px;overflow:hidden;aspect-ratio:412/302;background:#0a614d;}
.macir-sm-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.macir-sm-card p{font-family:var(--f-head);font-weight:500;font-size:19px;line-height:1.45;color:var(--c-ink);margin:20px 6px 6px;}
.macir-seemore p {font-size: 20px !important; margin: 0 0 64px;}
.macir-seemore .macir-seemore-grid .macir-sm-card p {padding-top: 30px; margin: 0 0 5px;}

/* -------- start your engagement -------- */
.macir-engagement{position:relative;padding:0 0 100px;overflow:hidden;}
.macir-engagement-bg{position:absolute;inset:0;top:150px;z-index:0;pointer-events:none;opacity:.9;}
.macir-engagement-bg img{position:absolute;}
.macir-blob-1{left:1.3%;top:60%;width:22%;}
.macir-blob-2{left:27.3%;top:60%;width:19%;}
.macir-blob-3{left:49.5%;top:52%;width:9%;}
.macir-blob-4{left:53.8%;top:83%;width:41%;}
.macir-blob-5{left:53.6%;top:95%;width:30%;}
.macir-engagement-card{
  position:relative;z-index:1;max-width:914px;margin:0 auto;background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);border:1px solid var(--c-border-lighter);border-radius:20px;
  padding:50px clamp(20px,5vw,60px);
}
.macir-engagement-card h2{font-family:var(--f-head);font-weight:700;font-size:28px;text-align:center;color:var(--c-title2);margin:0 0 40px;}
.macir-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;}
.macir-field{margin-bottom:24px;}
.macir-field--full{grid-column:1 / -1;}
.macir-field .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.macir-field input,.macir-field select,.macir-field textarea{
  width:100%;border:none;border-bottom:1px solid var(--c-border-lighter);border-radius:0;
  font-family:var(--f-body);font-size:16px;color:var(--c-ink);padding:0 0 12px;background:transparent;
}
.macir-field input::placeholder,.macir-field textarea::placeholder{color:var(--c-body);opacity:1;}
.macir-field select:invalid{color:var(--c-body);}
.macir-field--filled input{color:var(--c-ink);font-weight:500;}
.macir-field input:focus,.macir-field select:focus,.macir-field textarea:focus{outline:none;border-bottom-color:var(--c-orange);}
.macir-field select{appearance:none;background-image:url("/wp-content/themes/ninja/assets/images/common/dropdown-caret.svg");background-repeat:no-repeat;background-position:right center;background-size:16px;}
.macir-field textarea{resize:vertical;min-height:60px;}
.macir-engagement-submit{display:flex;justify-content:center;margin-top:10px;}

/* -------- responsive -------- */
@media (max-width:1199.98px){
  .macir-aside{display:none;}
  .macir-layout{gap:0;}
}
@media (max-width:991.98px){
  .macir-hero-grid>div{flex:1 1 100%;}
  .macir-hero-media{margin-top:8px;min-height:220px;}
  .macir-hero-photo{min-height:220px;}
  .macir-tech-icon{min-width:60px;padding:10px 12px;}
  .macir-tech-icon img{width:34px;height:34px;}
  .macir-results-grid{grid-template-columns:repeat(2,1fr);}
  .macir-seemore-grid{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
  .macir-crumbs{font-size:15px;}
  .macir-stat-box .macir-stat{flex:1 1 50%;border-left:0;border-top:1px solid var(--c-border-warm);}
  .macir-stat-box .macir-stat:nth-child(1),.macir-stat-box .macir-stat:nth-child(2){border-top:0;}
  .macir-tech-box{padding:16px; flex-wrap: nowrap;}
  .macir-tech-icon{flex:1 1 30%;}
  .macir-approach-card{padding:24px;}
  .macir-approach-card .macir-numbered-list{padding-left:18px;}
  .macir-features-grid{grid-template-columns:1fr;}
  .macir-cta{padding:64px 0;}
  .macir-seemore{padding:56px 0;}
  .macir-engagement-card{padding:36px 20px;}
  .macir-form-grid{grid-template-columns:1fr;}
  .macir-field--full{grid-column:auto;}
  .macir-crumb-link {font-size: 16px;}
  .macir-hero {padding: 120px 0 45px;}
  .macir-hero-desc {font-size: 16px; line-height: 23px;}
  section.introduction-sec {margin-top: 20px;}
  .macir-intro-text p {font-size: 16px; line-height: 23px;}
  .macir-section h2 {margin: 0 0 20px;}
  .macir-stat-box .macir-stat {padding: 16px 20px; gap: 6px;}
  .macir-stat-label {font-size: 16px;}
  .macir-stat-value {font-size: 16px;}
  .macir-main {gap: 60px;}
  .macir-li-title {font-size: 18px;}
  .macir-numbered-list li p {font-size: 16px; line-height: 22px;}
  .macir-results-text {font-size: 16px; line-height: 22px;}
  .macir-result-card {padding: 20px;}
  .macir-result-value {font-size: 24px;}
  .macir-results-grid {margin-bottom: 60px;}
  .macir-layout {padding-bottom: 80px;}
  .macir-feature-card p {font-size: 16px; line-height: 22px;}
  .macir-cta p {font-size: 18px; margin: 0 auto 30px;}
}
@media (max-width:575.98px){
  .macir-stat-box .macir-stat{flex:1 1 100%;border-top:1px solid var(--c-border-warm);border-left:0 !important;}
  .macir-stat-box .macir-stat:first-child{border-top:0;}
  .macir-tech-icon{flex:1 1 45%;}
  .macir-btn{width:100%;justify-content:center;}
  .macir-results-grid{grid-template-columns:1fr;}
}

/* ============ TerraGuard AI gallery override ============ */
.casestudy-app-design-inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}