/* ===== Single Post page (HERO first) ===== */

:root{
  --post-bg:#faf8f5;
  --post-text:#0a2540;
  --post-muted:rgba(10,37,64,.60);
  --post-muted-2:rgba(10,37,64,.75);
  --post-line:#ffbf00;
  --post-border:rgba(10,37,64,.25);

  --post-wrap:1480px;
  --post-gutter:20px;

  --post-col:860px;

  --hero-cubes:url("/wp-content/themes/elpixel/assets/img/five-back-cubes.svg");

  --featured-h:380px;
}

.post-page{
  background:var(--post-bg);
  color:var(--post-text);
}

.post-page .container{
  max-width:var(--post-wrap);
  margin:0 auto;
  padding:0 var(--post-gutter);
  box-sizing:border-box;
}

/* Center the main content column */
.post-page .post-col{
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   HERO
========================= */
.post-hero{
  padding: 0;
}

.post-hero__grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
  padding:0 0 26px;
  border-bottom:2px solid var(--post-line);
}

.post-hero__left{
  max-width:var(--post-col);
  z-index:2;

}

.post-hero__title{
  font-size:44px;
  line-height:1.12;
  font-weight:800;
  margin:0 0 16px;
  color:var(--post-text);
}

.post-hero__right{
  min-width: 453px;
  height: 439px;
  background:var(--hero-cubes) no-repeat right top;
  background-size:contain;
  pointer-events:none;
  opacity:.9;
}

/* =========================
   FEATURED
========================= */

.post-hero__meta{
  font-size:12px;
  color:var(--post-muted);
  margin:0;
  padding: 40px 0 18px 0;
}

.post-hero__by-name{
  margin-left:6px;
  color:var(--post-text);
}

.post-hero__date{
  display:block;
  margin-top:24px;
  color:var(--post-muted);
}


.post-featured{
  padding:22px 0 10px;
}

.post-featured .post-col{
  margin-left:auto;
  margin-right:auto;
}

.post-featured__frame{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  display:flex;
  justify-content:center;
}

.post-featured__img{
  object-fit: cover;
  display:block;
  width: 100vw;
  max-width:1046px;
  height:auto;
  max-height:520px;
  border-top: 9px solid #cd6f47;
  border-right: 14px solid #cd6f47;
  border-bottom: 11px solid #cd6f47;
  clip-path: polygon(0px 0px, 99% 0px, 100% 3%, 100% 100%, 1.5% 100%, 0px 97%);
}

/* =========================
   CONTENT
========================= */
.post-content{
  padding:16px 0 6px;
}

.post-content p,
.post-content li{
  margin:0 0 16px;
  font-size:18px;
  line-height:1.5;
  font-weight:400;
  color:var(--post-text);
}

.post-content strong,
.post-content b{
  font-weight:700;
  font-size:inherit !important;
  line-height:inherit !important;
  color:inherit;
}

.post-content h2{
  margin:26px 0 12px;
  font-size:32px;
  line-height:1.15;
  font-weight:800;
}

.post-content h3{
  margin:22px 0 10px;
  font-size:22px;
  line-height:1.25;
  font-weight:800;
}

.post-content ul,
.post-content ol{
  margin:0 0 16px 18px;
  padding:0;
}

.post-content a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.normal a {
  color: black;
}

/* =========================
   BOTTOM CATEGORY + DIVIDER
========================= */
.post-bottom-cat{
  padding:10px 0;
}

.post-bottom-cat__link{
  display:inline-block;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--post-muted);
  text-decoration:none;
}

.post-bottom-cat__link:hover{
  text-decoration:underline;
}

.post-divider{
  padding:10px 0;
}

.post-divider__line{
  border-bottom:2px solid var(--post-line);
}


/* =========================
   RELATED
========================= */
.post-related{
  padding:24px 0 10px;
}

.post-related__title{
  margin:0 0 18px;
  font-size:32px;
  line-height:1.1;
  font-weight:800;
}

/* =========================
   CONTACT FORM (same layout as Technology Page)
========================= */
.post-page .services-contact{
  background-color:var(--post-bg);
}

.post-card__date {
    margin-top: 8px;
  }

.post-page .services-contact .container{
  max-width:1480px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

.post-page .services-contact .wrapper{
  display:flex;
  background:rgba(0,0,0,0);
  padding:120px 0 0;
  width:100%;
  background-color:var(--post-bg);
  position:relative;
}

.post-page .services-contact .wrapper .information{
  max-width:600px;
  width:100%;
  z-index:1;
}

.post-page .services-contact .wrapper .information .description{
  display:flex;
  flex-direction:column;
  gap:17px;
}

.post-page .services-contact .wrapper .information .description .list-options{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.post-page .services-contact .wrapper .information .description .list-options .text-option{
  padding:0;
}

.post-page .services-contact .wrapper .information .description .list-options .list-container{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.post-page .services-contact .wrapper .information .description .list-options .list-item{
  display:flex;
  position:relative;
}

.post-page .services-contact .wrapper .information .description .list-options .square{
  width:10px;
  height:10px;
  background-color:#ffbf00;
  padding-right:10px;
  margin-top:10px;
}

.post-page .services-contact .wrapper .information .description .list-options p{
  padding-left:15px;
  color:#2b353f;
}

.post-page .services-contact .wrapper .information .description .list-options .list-item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:4px;
  top:24%;
  width:2px;
  height:117%;
  background-color:#ffbf00;
}

.post-page .services-contact .wrapper .background{
  width:100%;
  height:100%;
  position:absolute;
  background:url(/wp-content/themes/elpixel/assets/img/double-cubes-small.svg) no-repeat;
  background-position:left bottom;
  background-size:100% 30%;
  left:-390px;
  top:61px;
  z-index:0;
}

.post-page .services-contact .wrapper .form{
  padding-bottom:70px;
  z-index:10;
  width:100%;
}

.post-page .services-contact .wrapper .form .wpcf7-list-item{
  margin:0;
  display:flex;
}

.post-page .services-contact .wrapper .form .wpcf7-list-item input[type=checkbox]{
  position:relative;
  appearance:none;
  width:25px;
  height:25px;
  border:2px solid #ece6d5;
}

.post-page .services-contact .wrapper .form .wpcf7-list-item input[type=checkbox]:checked:after{
  content:"";
  position:absolute;
  left:7px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #000;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  z-index:20;
}

.post-page .services-contact .wrapper .form .wpcf7-list-item label{
  display:flex;
}

.post-page .services-contact .wrapper .form .wpcf7-list-item label .wpcf7-list-item-label{
  display:flex;
  margin-left:32px;
}

.post-page .services-contact .wrapper .form .contact-form{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:35px;
  width:100%;
  z-index:10;
}

.post-page .services-contact .wrapper .form .contact-form form{
  display:flex;
  padding-left:60px;
  flex-direction:column;
  justify-content:space-around;
  gap:17px;
}

.post-page .services-contact .wrapper .form .contact-form form input{
  height:60px;
  background:var(--post-bg);
  border:2px solid #ece6d5;
}

.post-page .services-contact .wrapper .form .contact-form form input.wpcf7-text{
  padding-left:15px;
}

.post-page .services-contact .wrapper .form .contact-form form input.wpcf7-text,
.post-page .services-contact .wrapper .form .contact-form form textarea.wpcf7-textarea{
  width:100%;
  margin-top:6px;
  margin-bottom:25px;
}

.post-page .services-contact .wrapper .form .contact-form form textarea{
  height:125px;
  padding-left:15px;
  padding-top:15px;
  background:var(--post-bg);
  border:2px solid #ece6d5;
  resize:none;
}

.post-page .services-contact .wrapper .form .contact-form form textarea:focus,
.post-page .services-contact .wrapper .form .contact-form form input:focus{
  outline:#e0cfb7;
  border:2px solid #e0cfb7;
}

.post-page .services-contact .wrapper .form .contact-form form input.wpcf7-submit{
  padding:16px 24px;
  width:fit-content;
  cursor:pointer;
  margin-top:33px;
  margin-bottom:43px;
  border:2px solid #ffbf00;
  background:transparent;
  color:#0c1e34;
  font-weight:600;
}

.post-page .services-contact .wrapper .form .contact-form form input.wpcf7-submit:hover{
  background:#ffbf00;
}

/* Responsive for contact section */
@media screen and (max-width: 1000px){
  .post-page .services-contact .wrapper{
    max-width:none;
    width:100%;
    padding:80px 0 120px 0;
    flex-direction:column;
    gap:30px;
  }

  .post-page .services-contact .wrapper .background{
    width:100%;
    height:100%;
    background-position:left bottom;
    background-size:100% 15%;
    left:-80px;
    z-index:0;
  }

  .post-page .services-contact .wrapper .form{
    padding-bottom:150px;
    width:100%;
    max-width:500px;
    z-index:10;
  }

  .post-page .services-contact .wrapper .form .contact-form form{
    padding-left:0;
  }
}

@media screen and (max-width: 500px){
  .post-page .services-contact .wrapper{
    max-width:400px;
    width:100%;
    padding:80px 0 0;
    flex-direction:column;
    gap:30px;
    margin-bottom:0;
  }

  .post-page .services-contact .wrapper .background{
    left:0;
    top:0;
    background-size:100% 30%;
  }

  .post-page .services-contact .wrapper .form{
    padding-bottom: 0;
    width:100%;
    z-index:10;
    max-width:none;
  }
}

/* =========================
   Responsive (rest of page)
========================= */
@media (max-width:900px){
  :root{
    --post-col:100%;
    --featured-h:220px;
  }

  .post-hero__title{
    font-size:34px;
  }
}

/* =========================================================
   FIX: remove "By <" when author is not selected (Default)
========================================================= */

.post-hero__by:empty{
  display:none !important;
}

.post-hero__by-name:empty{
  display:none !important;
}
.post-hero__by-name:empty ~ .post-hero__by-label{
  display:none !important;
}

.post-hero__by-name:empty{
  display:none !important;
}
.post-hero__by:has(.post-hero__by-name:empty){
  display:none !important;
}

.post-hero__by::before,
.post-hero__by::after,
.post-hero__by-label::before,
.post-hero__by-label::after,
.post-hero__by-name::before,
.post-hero__by-name::after{
  content:none !important;
  display:none !important;
}

@media screen and (max-width: 1024px) {
  .post-hero__right {
    min-width: 300px;
    height: 290px;
  }
  .blog-page .post-card__excerpt {
        -webkit-line-clamp: 3 !important;
        line-clamp: 3;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
    }
}


@media screen and (min-width:400px) and (max-width: 768px) {
  .post-page .services-contact .wrapper .background {
    left: 0;
    top: 36px;
    background-size: 100% 10%;
  }
  .post-hero__title {
    font-size: 32px;
  }
  .post-hero__left {
    margin-top: 200px;
  }


  .post-hero, 
    .post-hero .container, 
    .post-hero__grid {
        overflow: visible !important; /* Убираем "ножницы" */
    }
/* 1. Сетка и контейнер */
    .post-hero__grid {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        padding-top: 40px !important; /* Даем немного места сверху */
    }

    /* 2. Текст во всю ширину поверх кубов */
    .post-hero__left {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 2; /* Текст ВСЕГДА сверху */
    }

    .post-hero__title {
        width: 100% !important;
        position: relative;
        z-index: 2;
    }

    /* 3. КУБЫ: отчетливые и выше */
    .post-hero__right {
        display: flex !important;
        position: absolute !important;
        top: -0px !important; /* Поднимаем выше (отрегулируй, если нужно больше) */
        right: -40px !important;
        width: 80% !important;
        height: 80% !important;
        z-index: 1; /* Под текстом */
        opacity: 1 !important; /* Убираем прозрачность, делаем яркими */
        justify-content: flex-end;
        align-items: flex-start; /* Прижимаем к верху блока */
        pointer-events: none;
    }

    /* Настройка самой картинки кубов */
    .post-hero__right img, 
    .post-hero__cubes {
        width: 180px !important; /* Размер кубов на мобилке */
        height: auto !important;
        object-fit: contain !important;
    }



    .post-featured__img{
      object-fit: cover;
      display:block;
      width: 100%;
      min-width: 380px;
      max-width: 720px;
      height: 100%;
      min-height: 300px;
      border-top: 4px solid #cd6f47;
      border-right: 8px solid #cd6f47;
      border-bottom: 8px solid #cd6f47;
      clip-path: polygon(0px 0px, 99% 0px, 100% 3%, 100% 100%, 1.5% 100%, 0px 97%);
}
    .post-related {
       padding: 40px 0 10px;
    }

    .blog-page .blog-grid {
        padding: 
        40px 0 0px;
    }
    .blog-page .post-card .post-card__media, .blog-page .post-card .post-card__thumb {
      margin-bottom: 32px;
    }

    .blog-page .post-card__meta {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0px !important;
        min-height: auto !important;
        gap: 0 !important;
    }
    .blog-page .post-card__excerpt{
      margin-top: 16px;
    }
}

@media screen and (max-width: 400px) {
  .post-hero__grid {
        padding-top: 230px !important;
    }
  
  .post-page .services-contact .wrapper .background {
    left: 0;
    top: 52px;
    background-size: 100% 10%;
  }

  .post-hero__right {
        display: flex !important;
        position: absolute !important;
        left: calc(40vw - 100px) !important;
        top: -0px !important;
        width: 80% !important;
        height: 80% !important;
        z-index: 1; /* Под текстом */
        opacity: 1 !important; /* Убираем прозрачность, делаем яркими */
        justify-content: flex-end;
        align-items: flex-start; /* Прижимаем к верху блока */
        pointer-events: none;
    }

      .post-featured__img {
        object-fit: cover;
        display: block;
        width: 100%;
        min-width: 150px;
        height: 100%;
        min-height: 240px;
        border-top: 4px solid #cd6f47;
        border-right: 8px solid #cd6f47;
        border-bottom: 8px solid #cd6f47;
        clip-path: polygon(0px 0px, 99% 0px, 100% 3%, 100% 100%, 1.5% 100%, 0px 97%);
    }


    
      /* .post-hero__right {
        position: relative;
        left: calc(20vw - 160px) !important;
        top: -0px !important;
        z-index: 1;
    } */

    .post-hero__title {
        font-size: 28px;
    }
}

@media screen and (max-width: 320px) {
  .post-page .services-contact .wrapper .background {
    left: 0;
    top: 73px;
    background-size: 100% 10%;
  }
}


.services-contact.post-contact {
    position: relative;
    overflow: visible;
}

.services-contact.post-contact > img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(700px - 100px) !important; 
    max-width: 100% !important; 
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* 2. Стили для МОБИЛОК (адаптивность) */
@media screen and (max-width: 1024px) {

    .services-contact.blog-contact > img {
        max-width: 720px !important;
        width: 100vw !important;
        left: 0;
        bottom: 0;
    }
    
}

/* FIX: single post contact — кубики не перекрывают текст */
.post-page .services-contact.post-contact{
  position: relative;
  overflow: hidden;                 /* было visible — из-за этого вылезает/наезжает */
  --cubes-h: clamp(160px, 28vw, 320px);
  padding-bottom: var(--cubes-h);   /* резерв места под картинку */
}

.post-page .services-contact.post-contact .container{
  position: relative;
  z-index: 2;                       /* контент поверх */
}

.post-page .services-contact.post-contact > img{
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  height: var(--cubes-h) !important;
  width: auto !important;
  max-width: 100% !important;

  z-index: 1;
  pointer-events: none;
}