/*
Theme Name:   Astra Jingles Child
Theme URI:    https://jingles.ru
Description:  Child theme for Astra — Jingles.ru
Author:       Jingles.ru
Template:     astra
Version:      1.0.0
*/

/* =====================================================
   ПЕРЕМЕННЫЕ
   ===================================================== */
:root {
  --img-base: /wp-content/themes/astra-jingles-child/images/uploads;
  --color-dark:      #141414;
  --color-green:     #8bc34a;
  --color-blue:      #0288d1;
  --color-red:       #f16b50;
  --color-dark-blue: #1a2a3a;
  --color-blue-gray: #8899aa;
  --font-main: 'Montserrat', sans-serif;
  --transition: .25s ease;
}

/* =====================================================
   БАЗОВЫЕ СТИЛИ
   ===================================================== */
body {
  font-family: var(--font-main) !important;
  color: var(--color-dark);
}

/* Скрыть заголовок страницы (Astra добавляет его автоматически) 
.home .entry-header,
.home .ast-page-header-wrap,
.page-template-default .entry-header {
  display: none !important;
}*/

/* Убрать отступ сверху у первой секции */
.home .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Gutenberg full-width без боковых отступов */
.wp-block-cover.alignfull,
.wp-block-media-text.alignfull,
.wp-block-group.alignfull {
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* =====================================================
   ХЕДЕР (Astra customizer)
   ===================================================== */
.ast-header-break-point .site-header,
.site-header {
  background: #000 !important;
}
.main-navigation a,
.ast-header-break-point .main-navigation a {
  color: #bfbfbf !important;
  font-size: 12px !important;
  font-family: var(--font-main) !important;
}
.main-navigation a:hover { color: #fff !important; }

/* =====================================================
   ФУТЕР (Astra)
   ===================================================== */
.site-footer {
  background: #fff !important;
  text-align: center !important;
}

/* =====================================================
   1. HERO
   ===================================================== */
.jingles-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.65), rgba(22,22,22,.65)),
              url('/wp-content/themes/astra-jingles-child/images/uploads/microphone-windshields-01.jpg')
              center/cover no-repeat;
  padding: 140px 20px 80px;
}
.jingles-hero__inner { max-width: 760px; margin: 0 auto; }
.jingles-hero__logo { width: 220px; margin-bottom: 36px; }
.jingles-hero h1 {
  font-size: clamp(26px, 4.5vw, 52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
}
.jingles-hero__sub {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 40px;
}
.jingles-btn-green {
  display: inline-block;
  padding: 15px 36px;
  background: var(--color-green);
  color: var(--color-dark) !important;
  font-weight: 600;
  font-size: 15px;
  border-radius: 30px;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
}
.jingles-btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139,195,74,.45);
}

/* =====================================================
   2. «ДЛЯ ЧЕГО» — split фото/текст
   ===================================================== */
.jingles-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  background: #f5f5f5;
}
.jingles-split__img {
  background: linear-gradient(rgba(0,0,0,.01), rgba(0,0,0,.01)),
              url('/wp-content/themes/astra-jingles-child/images/uploads/microphone-windshields-02.jpg')
              center/cover no-repeat;
  min-height: 400px;
}
.jingles-split__content {
  padding: 60px 48px;
  display: flex;
  align-items: center;
}
.jingles-split__content-inner { width: 100%; }
.jingles-split h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  margin-bottom: 16px;
}
.jingles-split__lead {
  font-weight: 600;
  margin-bottom: 32px;
  font-size: 15px;
}
.jingles-items { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.jingles-item__num {
  font-size: 32px;
  font-weight: 300;
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 4px;
}
.jingles-item h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 4px 0 8px;
}
.jingles-item p { font-size: 14px; color: #555; margin: 0; }

/* =====================================================
   3–4. «ПОЧЕМУ МЫ»
   ===================================================== */
.jingles-why {
  padding: 80px 40px 110px;
  background: #fff;
}
.jingles-why__header { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.jingles-why__header h2 {
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 700;
  margin-bottom: 12px;
}
.jingles-why__header p { font-size: 16px; color: #555; }
.jingles-why__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
  margin: 0 auto;
}
.jingles-why-card {
  padding: 32px 28px;
  border-right: 1px solid #ececec;
}
.jingles-why-card:last-child { border-right: none; }
.jingles-why-card__num {
  font-size: 40px;
  font-weight: 500;
  color: var(--color-blue);
  line-height: 1;
  margin-bottom: 20px;
}
.jingles-why-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.jingles-why-card__sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-blue);
  margin-bottom: 12px;
}
.jingles-why-card p { font-size: 14px; color: #555; margin: 0; }
.jingles-why-card__line {
  width: 40px;
  height: 2px;
  background: var(--color-blue);
  margin-top: 24px;
}

/* =====================================================
   5. CTA с формой
   ===================================================== */
.jingles-cta {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
              url('/wp-content/themes/astra-jingles-child/images/uploads/microphone-windshields-03.jpg')
              center/cover no-repeat;
  padding: 80px 20px;
}
.jingles-cta__inner { max-width: 540px; margin: 0 auto; width: 100%; }
.jingles-cta h2 {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.jingles-cta__sub {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 36px;
}
/* Стили для Contact Form 7 / WPForms внутри CTA */
.jingles-cta .wpcf7-form input[type="text"],
.jingles-cta .wpcf7-form input[type="email"],
.jingles-cta .wpcf7-form textarea,
.jingles-cta .wpforms-field input,
.jingles-cta .wpforms-field textarea {
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  margin-bottom: 12px;
}
.jingles-cta .wpcf7-form input::placeholder,
.jingles-cta .wpcf7-form textarea::placeholder { color: rgba(255,255,255,.6); }
.jingles-cta .wpcf7-form input[type="submit"],
.jingles-cta .wpforms-submit {
  background: var(--color-blue) !important;
  color: #fff !important;
  border: none;
  padding: 14px 36px;
  border-radius: 4px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.jingles-cta .wpcf7-form input[type="submit"]:hover,
.jingles-cta .wpforms-submit:hover { background: #0277bd !important; }

/* =====================================================
   6–7. ОТЗЫВЫ
   ===================================================== */
.jingles-testimonials {
  background: #fff;
  padding: 80px 20px 110px;
}
.jingles-testimonials__header {
  text-align: center;
  margin-bottom: 48px;
}
.jingles-testimonials__header h2 {
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 700;
}
.jingles-testimonials__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.jingles-testimonial { text-align: center; }
.jingles-testimonial img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}
.jingles-testimonial__text {
  font-size: 15px;
  color: #555;
  margin-bottom: 16px;
  line-height: 1.7;
}
.jingles-testimonial__author {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =====================================================
   8. КАРТА (после отзывов)
   ===================================================== */
.jingles-map iframe {
  width: 100%;
  height: 600px;
  display: block;
  vertical-align: bottom;
  border: 0;
}

/* =====================================================
   9. ЛОГОТИПЫ КЛИЕНТОВ
   ===================================================== */
.jingles-clients {
  background: #fff;
  padding: 80px 40px;
}
.jingles-clients__cols {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.jingles-clients__cols img {
  height: 38px;
  width: auto;
  filter: grayscale(100%) opacity(.45);
  transition: filter var(--transition);
}
.jingles-clients__cols img:hover { filter: none; }

/* =====================================================
   10. «СУПЕР! МЫ ТОЖЕ ХОТИМ» — split текст/фото
   ===================================================== */
.jingles-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  background: var(--color-dark-blue);
}
.jingles-steps__content {
  padding: 60px 48px;
  display: flex;
  align-items: center;
}
.jingles-steps__content-inner { width: 100%; }
.jingles-steps h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  color: #fff;
  margin-bottom: 16px;
}
.jingles-steps__lead {
  font-size: 15px;
  color: var(--color-blue-gray);
  font-weight: 300;
  margin-bottom: 32px;
}
.jingles-steps .jingles-items .jingles-item h3 { color: #fff; }
.jingles-steps .jingles-items .jingles-item p  { color: var(--color-blue-gray); }
.jingles-steps__img {
  background: linear-gradient(rgba(0,0,0,.01), rgba(0,0,0,.01)),
              url('/wp-content/themes/astra-jingles-child/images/uploads/microphone-windshields-04.jpg')
              center/cover no-repeat;
  min-height: 400px;
}

/* =====================================================
   11. ГАЛЕРЕЯ РАБОТ
   ===================================================== */
.jingles-portfolio {
  background: #fff;
  padding: 80px 20px 110px;
}
.jingles-portfolio__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.jingles-portfolio__header h2 {
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 700;
  margin-bottom: 12px;
}
.jingles-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 100%;
}
.jingles-portfolio__item { position: relative; overflow: hidden; }
.jingles-portfolio__item img {
  width: 100%;
  aspect-ratio: 800/650;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.jingles-portfolio__item:hover img { transform: scale(1.05); }
.jingles-portfolio__item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 12px 16px;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.jingles-portfolio__item:hover figcaption { transform: translateY(0); }
.jingles-portfolio__item figcaption h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.jingles-portfolio__item figcaption p {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  color: #ccc;
}

/* =====================================================
   12. КОНТАКТ
   ===================================================== */
.jingles-contact {
  background: var(--color-dark-blue);
  padding: 80px 20px;
}
.jingles-contact__inner { max-width: 960px; margin: 0 auto; }
.jingles-contact h2 {
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 48px;
}
.jingles-contact__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
  margin-bottom: 48px;
}
.jingles-contact__detail-icon {
  font-size: 32px;
  color: var(--color-blue);
  margin-bottom: 12px;
}
.jingles-contact__detail p,
.jingles-contact__detail a {
  color: var(--color-blue-gray);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
}
.jingles-contact__detail strong { color: #fff; }
.jingles-contact__map { margin-bottom: 48px; }
.jingles-contact__map iframe {
  width: 100%;
  height: 313px;
  border: 0;
  display: block;
}
.jingles-contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.jingles-contact__form-left,
.jingles-contact__form-right { display: flex; flex-direction: column; gap: 12px; }
.jingles-contact__form input[type="text"],
.jingles-contact__form input[type="email"],
.jingles-contact__form textarea {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  width: 100%;
}
.jingles-contact__form textarea { flex: 1; min-height: 120px; resize: vertical; }
.jingles-contact__form input::placeholder,
.jingles-contact__form textarea::placeholder { color: rgba(255,255,255,.5); }
/* Стили для CF7 / WPForms в секции контактов */
.jingles-contact .wpcf7-form input[type="text"],
.jingles-contact .wpcf7-form input[type="email"],
.jingles-contact .wpcf7-form textarea,
.jingles-contact .wpforms-field input,
.jingles-contact .wpforms-field textarea {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  width: 100% !important;
}
.jingles-contact .wpcf7-form input[type="submit"],
.jingles-contact .wpforms-submit {
  background: var(--color-blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 36px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* =====================================================
   АДАПТИВНОСТЬ
   ===================================================== */
@media (max-width: 1024px) {
  .jingles-why__cols { grid-template-columns: repeat(2, 1fr); }
  .jingles-why-card { border-right: none; border-bottom: 1px solid #ececec; }
  .jingles-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .jingles-split,
  .jingles-steps { grid-template-columns: 1fr; }
  .jingles-split__img,
  .jingles-steps__img { min-height: 280px; }
  .jingles-split__content,
  .jingles-steps__content { padding: 40px 24px; }
  .jingles-items { grid-template-columns: 1fr; }
  .jingles-testimonials__cols { grid-template-columns: 1fr; gap: 40px; }
  .jingles-why__cols { grid-template-columns: 1fr; }
  .jingles-contact__details { grid-template-columns: 1fr; }
  .jingles-contact__form { grid-template-columns: 1fr; }
  .jingles-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .jingles-portfolio__grid { grid-template-columns: 1fr; }
  .jingles-clients__cols img { height: 28px; }
}