/* ============================================
   MOBILE STYLES — max-width: 767px
   kapital theme, Drupal 11, КОМПЛЕКС-Н
   ============================================ */

/* Desktop: hide mobile-only elements */
.site-header__hamburger { display: none; }
.site-header__mobile-title { display: none; }

/* ===== CONTAINER ===== */
@media (max-width: 767px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ===== HEADER ===== */
@media (max-width: 767px) {
  /* Fixed header 50px on mobile */
  .site-header__inner {
    height: 50px;
    padding: 0 16px;
    position: relative;
  }

  /* Logo: replace with colored gradient icon */
  .site-header__brand img {
    content: url('../../images/logo-icon-color.svg');
    width: 36px;
    height: 40px;
    filter: none !important;
  }
  .site-header__brand .site-name { display: none; }
  .site-header__brand .site-logo {
    overflow: visible;
    width: auto;
  }

  /* Gray header on all inner pages */
  body:not(.path-frontpage) .site-header {
    background: #CAC7C7;
  }

  /* Main padding: compensate for 50px fixed header */
  .layout-container > main { padding-top: 50px; }
  .path-frontpage .layout-container > main { padding-top: 0; }

  /* Green page title pill — centered via position:absolute, hidden when empty */
  .site-header__mobile-title:empty { display: none !important; }
  .site-header__mobile-title {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 20px;
    border-radius: 50px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
  }
  /* Front page mobile: show "Главная" pill */
  .path-frontpage .site-header__mobile-title { display: block; }

  /* Hamburger button */
  .site-header__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    z-index: 10;
  }
  .site-header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
  }
  /* Front page mobile: same gray header as inner pages */
  .path-frontpage .site-header { background: #CAC7C7 !important; }
  .path-frontpage .site-header__hamburger span { background: var(--color-accent); }
  /* Catalog and other inner pages: green hamburger */
  .site-header--katalog .site-header__hamburger span { background: var(--color-accent); }
  /* Mobile title — normal case variant (e.g. Каталог vs ГЛАВНАЯ) */
  .site-header__mobile-title--normal {
    text-transform: none;
    letter-spacing: 0.02em;
  }

  /* Hamburger animation on open */
  .site-header__hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .site-header__hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile nav: card per Figma spec (#D9D9D9, r=30, shadow) */
  .site-header__nav {
    display: none;
    position: fixed;
    top: 58px;
    left: 16px;
    right: auto;
    background: #D9D9D9;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 300;
    padding: 20px 30px;
    min-width: 160px;
  }
  .site-header__nav.is-open { display: block; }

  /* Nav links in card */
  .main-menu {
    flex-direction: column;
    gap: 0;
    padding: 0;
    align-items: center;
  }
  .main-menu__item { width: 100%; }
  .site-header__nav .main-menu__link,
  .path-frontpage .site-header__nav .main-menu__link,
  .path-frontpage .site-header__nav .main-menu__link:visited {
    font-size: 18px;
    font-weight: 500;
    padding: 10px 0;
    border-radius: 0;
    background: transparent !important;
    color: #1a1a1a !important;
    border-bottom: none;
    display: block;
    text-align: center;
  }
  .site-header__nav .main-menu__link--active,
  .site-header__nav .main-menu__link.is-active {
    font-weight: 700;
    color: #1a1a1a !important;
  }
}

/* ===== HERO (home page) ===== */
@media (max-width: 767px) {
  /* Section wrapper: gray bg (matches header), clear 50px fixed header */
  .hero {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    margin-top: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
    background: #fff;
    overflow: visible;
  }

  /* Text card: .hero prefix raises specificity to 0,2,0 — no !important needed */
  .hero .hero__inner {
    position: static;
    z-index: auto;
    order: 1;
    margin: 31px 30px 0;
    padding: 24px;
    background: #D9D9D9;
    border-radius: 30px;
    box-sizing: border-box;
    width: calc(100% - 60px);
    max-width: none;
  }

  /* Photo: same approach */
  .hero .hero__bg {
    position: relative;
    inset: auto;
    height: 200px;
    width: calc(100% - 60px);
    order: 2;
    flex-shrink: 0;
    margin: 26px 30px 0;
    border-radius: 30px;
  }

  /* Remove dark overlay */
  .hero__overlay { display: none; }

  .hero__inner { text-align: center; }
  .hero__inner a,
  .hero__inner a:visited { color: #111 !important; text-decoration: none; }

  .hero__title {
    font-size: 24px;
    color: #111 !important;
    text-transform: uppercase;
    max-width: 100%;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
  }
  .hero__subtitle {
    font-size: 13px;
    color: #111 !important;
    max-width: 100%;
    margin-bottom: 0;
  }

  /* CTA: Figma — button flush with photo bottom-left (photo x=30, button bottom=photo bottom) */
  .hero__cta {
    position: absolute;
    bottom: 0;
    left: 30px;
    z-index: 5;
    height: auto;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 700;
    gap: 8px;
  }
  .hero__cta svg { width: 16px; height: 16px; }
}

/* ===== SECTION TITLES ===== */
@media (max-width: 767px) {
  .section__title { font-size: 26px; margin-bottom: 24px; }
}

/* ===== ADVANTAGES ===== */
@media (max-width: 767px) {
  .advantages { padding: 26px 0; }
  .advantages__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 30px;
  }
  .advantages__photo { min-height: 220px; order: 2; }
  /* Card becomes title-only block — hide the duplicating text list */
  .advantages__card {
    order: 1;
    background: transparent;
    border-radius: 0;
    padding: 0 0 12px;
    box-shadow: none;
  }
  .advantages__card-title { font-size: 26px; margin-bottom: 0; text-align: center; }
  .advantages__card-list { display: none; }
}

/* ===== BENEFITS (5 cards) ===== */
@media (max-width: 767px) {
  .benefits { padding: 37px 0; }
  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .benefit-card {
    width: 181px;
    height: auto;
    min-height: 0;
    border-radius: 25px;
    padding: 24px 25px;
    gap: 12px;
  }
  .benefit-card__icon { width: 72px; height: 72px; }
  .benefit-card__title { font-size: 16px; hyphens: none; word-break: normal; }
  .benefit-card__text { font-size: 13px; }
}

/* ===== CONTACT FORM ===== */
@media (max-width: 767px) {
  .contact-form-section { padding: 28px 0; overflow: hidden; }
  .contact-form-section__inner {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
    max-width: none;
  }
  .contact-form-section__lead-title { font-size: 26px; margin-bottom: 7px; text-align: center; }
  .contact-form-section__lead-text { font-size: 15px; text-align: center; }
  .contact-form { gap: 23px; }
  .contact-form__checkbox-row:first-of-type { margin-top: 5px; }
  .contact-form__checkbox-row + .contact-form__checkbox-row { margin-top: -13px; }
  .contact-form__policy { margin-top: 1px; }
  .contact-form__input { height: 56px; font-size: 13px; }
  .contact-form__submit { height: 56px; font-size: 15px; font-weight: 400; padding: 0 20px; width: 100%; white-space: normal; }
}

/* ===== BLOG / NEWS ===== */
@media (max-width: 767px) {
  .blog-section { padding: 32px 0; }
  .blog-section__inner { padding: 0 30px; }
  .blog-section .section__title { margin-bottom: 11px; }
  .blog-section .view-content { grid-template-columns: 1fr; }
  .news-card { aspect-ratio: 4 / 3; }
}

/* ===== PARTNERS ===== */
@media (max-width: 767px) {
  .partners { padding: 18px 0; }
  .partners__inner { padding: 0 30px; }
  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .partner-card { height: 110px; border-radius: 16px; font-size: 12px; }
}

/* ===== FOOTER ===== */
@media (max-width: 767px) {
  .site-footer { margin-top: 52px; }
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 30px 0;
    gap: 0;
    text-align: center;
  }

  /* Logo */
  .site-footer__col--brand { margin-bottom: 16px; }
  .site-footer__logo img { height: 38px; }

  /* Nav links */
  .site-footer__col--nav { margin-bottom: 4px; }
  .footer-menu {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .footer-menu a { font-size: 18px; }

  /* Contacts column: grid with socials top, legal+contacts bottom */
  .site-footer__col--contacts {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "socials socials"
      "legal   phone"
      "legal   email";
    row-gap: 4px;
    column-gap: 8px;
    padding: 16px 0 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .site-footer__socials {
    grid-area: socials;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
  }
  .site-footer__social-link { width: 28px; height: 28px; }
  .site-footer__social-link svg { width: 14px; height: 14px; }

  .site-footer__legal {
    grid-area: legal;
    text-align: left;
    margin: 0;
    gap: 4px;
  }
  .site-footer__legal-link { font-size: 10px; color: #999; }

  .site-footer__phone {
    grid-area: phone;
    font-size: 10px;
    font-weight: 400;
    color: #999;
    text-align: right;
    white-space: normal;
    align-self: start;
  }
  .site-footer__email {
    grid-area: email;
    font-size: 10px;
    font-weight: 400;
    color: #999;
    text-align: right;
    white-space: normal;
    align-self: start;
  }
}

/* ===== CATALOG — Level 1 (categories + items) ===== */
@media (max-width: 767px) {
  /* Category banners grid */
  .catalog-cats { padding: 24px 0 0; }
  .catalog-cats__inner { padding: 0 30px; }
  .catalog-cats__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Category card: label ABOVE photo (overrides desktop overlay design) */
  .catalog-cat-card {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 0;
    overflow: visible;
  }
  .catalog-cat-card__link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: static;
    height: auto;
    width: auto;
  }
  /* Remove desktop dark overlay pseudo-element */
  .catalog-cat-card__link::before { display: none; }
  /* Label: full-width pill above photo */
  .catalog-cat-card__label {
    position: static;
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 9px 20px;
    letter-spacing: 0.05em;
  }
  /* Photo: below label, rounded corners */
  .catalog-cat-card__photo {
    position: static;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 315 / 226;
    background: #1a1a1a;
  }
  .catalog-cat-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Search */
  .catalog-search { padding: 44px 30px 48px; }
  .catalog-search__form {
    max-width: 100%;
    height: 30px;
    border-radius: 30px;
    background: #D9D9D9;
    padding: 0 10px 0 16px;
  }
  .catalog-search__btn svg {
    width: 18px;
    height: 18px;
  }

  /* Items grid → 1 column */
  .catalog-items { padding: 0 0 40px; }
  .catalog-items__inner { padding: 0 30px; }
  .catalog-items__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Item card — horizontal, Figma: 25px padding, 132px total height */
  .catalog-item-card {
    flex-direction: row;
    height: 132px;
    padding: 25px;
    border-radius: 25px;
    align-items: stretch;
    overflow: hidden;
  }
  .catalog-item-card__img {
    flex: none;
    width: 82px;
    height: 82px;
    border-radius: 0;
    align-self: stretch;
  }
  .catalog-item-card__img img {
    border-radius: 0;
    width: 82px !important;
    height: 82px !important;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .catalog-item-card__body {
    padding: 0 0 0 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .catalog-item-card__summary { display: none !important; }
  .catalog-item-card__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .catalog-item-card__btn {
    font-size: 13px;
    font-weight: 500;
    height: 32px;
    border-radius: 20px;
    width: auto;
    padding: 0 16px;
    margin-top: auto;
    align-self: flex-end;
  }
}

/* ===== CATALOG — Level 2 (category hero) ===== */
@media (max-width: 767px) {
  /* Hero без тёмного фона: back-btn (первый) → title (зелёная таблетка) → photo */
  .cat-hero {
    padding: 10px 0 0;
    height: auto;
    overflow: visible;
    position: static;
    border-radius: 0;
    display: block;
  }
  .cat-hero__bg,
  .cat-hero__overlay { display: none; }

  .cat-hero__inner {
    position: static;
    z-index: auto;
    height: auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    justify-content: flex-start;
  }

  /* Кнопка "← Назад" — первой (order:-1) */
  .cat-hero .cat-hero__back {
    order: -1;
    margin-bottom: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #75E513;
    color: #000;
    border-radius: 30px;
    text-decoration: none;
    width: 132px;
    height: 24px;
    flex-shrink: 0;
  }
  .cat-hero .cat-hero__back svg {
    width: 22px;
    height: 10px;
  }

  /* Заголовок — как зелёная таблетка (вместо белого текста) */
  .cat-hero .cat-hero__title {
    order: 0;
    margin-bottom: 17px;
    display: block;
    align-self: stretch;
    text-align: center;
    background: var(--color-accent, #7BE800);
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 9px 20px;
    border-radius: 50px;
    line-height: 1.3;
  }

  /* Фото категории */
  .cat-hero .cat-hero__photo {
    order: 1;
    display: block;
    align-self: stretch;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 315 / 226;
    background: #1a1a1a;
  }
  .cat-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Overlay header: на мобиле — обычная шапка, не прозрачная */
  .site-header--overlay {
    position: static;
    background: #f0f0f0;
    z-index: auto;
  }
  .site-header--overlay .site-header__inner {
    border-bottom: none;
  }
  .site-header--overlay .site-header__nav a {
    color: inherit;
  }
}

/* ===== CATALOG — Level 3 (product detail) ===== */
@media (max-width: 767px) {
  .catalog-tabs {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .catalog-tabs__tab {
    font-size: 10px;
    padding: 8px 16px;
    white-space: nowrap;
  }

  .catalog-product__layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 10px;
    padding-bottom: 32px;
  }
  .catalog-product__img-col { position: static; }
  .catalog-product__back {
    margin-bottom: 23px;
    width: 132px;
    height: 24px;
  }
  .catalog-product__info-col { padding-top: 0; }
  .catalog-product__title { font-size: 24px; margin-bottom: 29px; }
  .catalog-product__price { font-size: 28px; }
  .catalog-product__inner { padding: 0 30px; }
}

/* ===== PROJECTS / VACANCIES ===== */
@media (max-width: 767px) {
  .pv-hero { min-height: 198px !important; border-radius: 30px !important; overflow: hidden !important; margin: 0 30px !important; }
  .pv-hero__overlay { background: rgba(255,255,255,0.15) !important; }
  .pv-hero__inner { padding: 20px !important; }
  .pv-hero__title { font-size: 15px !important; font-weight: 900 !important; color: #000 !important; text-transform: none !important; }
  .pv-hero__subtitle { font-size: 13px !important; color: rgba(0,0,0,0.6) !important; }

  /* Work steps: single column (list is CSS Grid, not flex) */
  .work-steps { padding: 32px 0; }
  .work-steps__inner { padding: 0 30px; }
  .work-steps__heading { font-size: 22px; }
  .work-steps__subtitle { font-size: 13px; }
  .work-steps__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .work-steps__line { display: none; }
  .work-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .work-step__circle { width: 56px; height: 56px; flex-shrink: 0; margin-bottom: 0; }
  .work-step__circle span { font-size: 22px; }
  .work-step__card { border-radius: 16px; padding: 16px; }

  /* Vacancies — benefit cards (vac-benefits section) */
  .vac-benefits { padding: 40px 0; }
  .vac-benefits__inner { padding: 0 30px; }
  .vac-benefits__heading { font-size: 22px; margin-bottom: 24px; }
  .vac-benefits__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .vac-benefit-card { padding: 25px; border-radius: 25px; gap: 12px; }
  .vac-benefit-card__icon { width: 60px; height: 60px; }
  .vac-benefit-card__title { font-size: 16px; }
  .vac-benefit-card__text { font-size: 12px; }

  /* Vacancies listing */
  .vac-listing { padding: 32px 0 16px; }
  .vac-listing__inner { padding: 0 30px; }
  .vac-listing__heading { font-size: 20px; margin-bottom: 12px; }
  .vac-listing__sub { font-size: 13px; margin-bottom: 24px; }
  .vac-listing__subheading { font-size: 18px; margin-bottom: 20px; }

  /* Vacancy card: stack salary below content on mobile */
  .vacancy-card { border-radius: 30px; }
  .vacancy-card__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    text-align: center;
  }
  .vacancy-card__meta { display: none; }
  .vacancy-card__title { font-size: 15px; font-weight: 700; margin-bottom: 13px; }
  .vacancy-card__summary { font-size: 10px; font-weight: 200; }
  .vacancy-card__salary {
    min-width: 0;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 18px;
    border-radius: 30px;
  }

  /* Vacancies CTA */
  .vac-cta { padding: 24px 0 40px; }
  .vac-cta .vac-cta__inner { padding: 0 30px; }
  .vac-cta__card {
    display: grid;
    grid-template-columns: 1fr 44%;
    gap: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  .vac-cta__title { font-size: 18px; margin-bottom: 10px; }
  .vac-cta__sub { font-size: 12px; margin-bottom: 16px; }
  .vac-cta__actions { flex-direction: column; gap: 10px; }
  .vac-cta__btn { font-size: 13px; padding: 12px 20px; text-align: center; }
  .vac-cta__image { }
  .vac-cta__image img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; display: block; }

  /* Generic vacancies grid fallback */
  .vacancies { padding: 32px 0; }
  .vacancies__inner { padding: 0 30px; }
  .vacancy-card { border-radius: 30px; }
  .vacancies__grid { grid-template-columns: 1fr; }

  /* Projects listing */
  .projects-listing { padding: 0 0 40px; }
  .projects-listing__inner { padding: 0 30px; }
  .projects-listing__heading { font-size: 22px; }
}

/* ===== CONTACTS / ABOUT ===== */
@media (max-width: 767px) {
  /* Contacts hero: image card above, text block below */
  .contacts-hero {
    min-height: 0;
    height: auto;
    overflow: visible;
    display: block;
    position: static;
  }
  .contacts-hero__bg {
    position: relative;
    inset: auto;
    margin: 20px 30px 0;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 315 / 226;
    background-color: #1a1a1a;
    background-image: url('../../images/contacts-hero.png');
    background-size: cover;
    background-position: center;
  }
  .contacts-hero__overlay { display: none; }
  .contacts-hero__inner {
    position: static;
    padding: 24px 30px 16px;
    text-align: center;
    width: auto;
  }
  .contacts-hero__title { font-size: 26px; color: #1a1a1a; margin-bottom: 12px; }
  .contacts-hero__subtitle { font-size: 14px; color: #555; text-align: center; }

  .contacts-address { padding: 32px 0; }
  .contacts-address__inner { padding: 0 30px; }
  .contacts-address__label { font-size: 22px; }
  .contacts-address__grid { grid-template-columns: 1fr; }
  .contacts-address__text { font-size: 10px; font-weight: 200; white-space: nowrap; }
  .contacts-address__text br { display: none; }

  .contacts-list__title { font-weight: 400; }
  .contacts-list__link,
  .contacts-list__text { font-size: 14px; font-weight: 400; }

  .contacts-map { padding: 0 0 24px; }
  .contacts-map__inner { padding: 0 30px; }
  .contacts-map__frame { height: 260px; border-radius: 20px; }
  .contacts-map iframe { width: 100%; height: 260px; }

  /* About hero */
  .about-hero { padding: 60px 0 40px; }
  .about-hero__inner { padding: 0 30px; }
  .about-hero__title { font-size: 28px; }
  .about-hero__desc { font-size: 14px; }

  /* About stats: 4 columns → 2 columns */
  .about-stats { padding: 32px 0; }
  .about-stats__inner { padding: 0 30px; }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .about-stats__num { font-size: 32px; }
  .about-stats__text { font-size: 12px; }

  /* About mission: 2 columns → 1 column */
  .about-mission { padding: 40px 0; }
  .about-mission__inner { padding: 0 30px; }
  .about-mission__grid { grid-template-columns: 1fr; gap: 24px; }

  /* About services: 4 columns → 2 columns */
  .about-services { padding: 0 0 40px; }
  .about-services__inner { padding: 0 30px; }
  .about-services__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
  .about-service-card { padding: 20px 16px; border-radius: 16px; }
  .about-service-card__title { font-size: 14px; }
  .about-service-card__text { font-size: 11px; }

  /* About licenses */
  .about-licenses { padding: 0 0 40px; }
  .about-licenses__inner { padding: 0 30px; }
  .about-licenses__grid { max-width: 100%; }

  /* About CTA */
  .about-cta { padding: 40px 0; }
  .about-cta__inner { padding: 0 30px; }
  .about-cta__title { font-size: 22px; }
  .about-cta__sub { font-size: 14px; }
}

/* ===== OVERLAY HEADER — MOBILE FIX (overrides header.css !important) ===== */
@media (max-width: 767px) {
  .site-header--overlay {
    position: relative !important;
    background: #CAC7C7 !important;
    z-index: 100 !important;
  }
  body:not(.path-frontpage) .site-header--overlay {
    background: #CAC7C7 !important;
  }
  body:not(.path-frontpage) .site-header--overlay a,
  body:not(.path-frontpage) .site-header--overlay .main-menu__link {
    color: #1a1a1a !important;
  }
  body:not(.path-frontpage) .site-header--overlay .site-header__brand img {
    filter: none !important;
  }
  body:not(.path-frontpage) .site-header--overlay .site-name a {
    color: #1a1a1a !important;
  }
  .layout-container:has(.site-header--overlay) > main {
    padding-top: 90px !important;
  }
}


/* ===== PROEKTY MOBILE — 5-POINT FIX ===== */
@media (max-width: 767px) {

  /* 1. Remove gap between header and hero */
  .layout-container:has(.site-header--overlay) > main {
    padding-top: 0 !important;
  }

  /* 2. Hero: rounded card with side margins */
  .pv-hero {
    margin: 8px 16px 0;
    border-radius: 16px;
    overflow: hidden;
  }

  /* 3. Work steps: zigzag layout */
  .work-steps__line {
    display: none !important;
  }
  .work-steps__list {
    display: block !important;
    padding: 0 !important;
    position: relative !important;
  }
  .work-steps__list::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #7BE800;
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }
  .work-step {
    display: grid !important;
    grid-template-columns: 1fr 48px 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    flex-direction: unset !important;
    margin-bottom: 12px;
    min-height: 80px;
    text-align: left;
  }
  .work-step__circle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0 !important;
    flex-shrink: unset !important;
    justify-self: center;
    position: relative;
    z-index: 2;
  }
  .work-step__circle span { font-size: 18px !important; }
  .work-step:nth-child(odd) .work-step__card {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 4px 0 8px;
  }
  .work-step:nth-child(even) .work-step__card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 8px 0 4px;
  }
  .work-step__card {
    padding: 10px 10px !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .work-step__icon { width: 32px !important; height: 32px !important; justify-content: flex-start !important; }
  .work-step__icon svg { width: 28px !important; height: 28px !important; }
  .work-step__name { font-size: 11px !important; }
  .work-step__desc { font-size: 10px !important; line-height: 1.4 !important; }

}

/* ===== PROEKTY MOBILE — REDESIGN (hero + heading + work-steps) ===== */
@media (max-width: 767px) {

  /* FIX 1: Hero title — remove uppercase, smaller, content at bottom */
  .pv-hero { min-height: 198px !important; align-items: flex-end !important; margin-top: 30px !important; }
  .pv-hero__inner { padding-bottom: 16px !important; }
  .pv-hero__title { text-transform: none !important; font-size: 15px !important; font-weight: 900 !important; color: #000 !important; margin-bottom: 4px !important; }
  .pv-hero__subtitle { font-size: 13px !important; color: rgba(0,0,0,0.6) !important; }

  /* FIX 2: Hide duplicate heading before project cards (mobile only) */
  .projects-listing__heading { display: none !important; }

  /* FIX 3: Work steps — disable old vertical line, rebuild layout */
  .work-steps__list::before { content: none !important; }

  .work-step {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    min-height: unset !important;
    text-align: unset !important;
    flex-direction: unset !important;
    position: relative !important;
  }
  .work-step:last-child { margin-bottom: 0 !important; }

  /* All circles default to left column (odd steps) */
  .work-step__circle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
    flex-shrink: unset !important;
    justify-self: center !important;
    position: relative !important;
    z-index: 3 !important;
  }
  .work-step__circle span { font-size: 16px !important; }

  /* Odd step cards: right column */
  .work-step:nth-child(odd) .work-step__card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  /* Even steps: swap to 1fr | 40px */
  .work-step:nth-child(even) { grid-template-columns: 1fr 40px !important; }
  .work-step:nth-child(even) .work-step__circle { grid-column: 2 !important; grid-row: 1 !important; }
  .work-step:nth-child(even) .work-step__card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  /* Card: z:2 — sits above connector (z:1), below circle (z:3) */
  .work-step__card {
    position: relative !important;
    z-index: 2 !important;
    width: 181px !important;
    max-width: 181px !important;
    padding: 20px !important;
    align-items: center !important;
    border-radius: 25px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: #D9D9D9 !important;
  }
  .work-step__icon { width: 44px !important; height: 44px !important; justify-content: center !important; align-items: center !important; display: flex !important; }
  .work-step__icon svg { max-width: 44px !important; max-height: 44px !important; width: auto !important; height: auto !important; }
  .work-step__name { font-size: 13px !important; text-align: center !important; }
  .work-step__desc { font-size: 11px !important; text-align: center !important; line-height: 1.4 !important; }

  /* Step: no margin-bottom (gap <li> provides spacing) — NO z-index so step doesn't isolate its children */
  .work-step { margin-bottom: 0 !important; }

  /* Class-based grid — specificity (0,3,0) */
  .work-step.work-step--odd { grid-template-columns: 40px 1fr !important; }
  .work-step.work-step--even { grid-template-columns: 1fr 40px !important; }
  .work-step.work-step--odd .work-step__circle { grid-column: 1 !important; grid-row: 1 !important; }
  .work-step.work-step--odd .work-step__card { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
  .work-step.work-step--even .work-step__circle { grid-column: 2 !important; grid-row: 1 !important; }
  /* margin-left: 48px = circle(40) + gap(8): aligns even card left edge with odd card (col2 start = 48px) */
  .work-step.work-step--even .work-step__card { grid-column: 1 !important; grid-row: 1 !important; margin: 0 0 0 48px !important; }
}

/* Gap connector rows: hidden on desktop, visible on mobile */
.work-step-gap { display: none; }

@media (max-width: 767px) {
  /* Allow connector SVGs to overflow step bounds */
  .work-steps__list,
  .work-steps__track { overflow: visible !important; }

  /* Centre the step list: card=181, circle=40, gap=8, margin-left=48 → list=277px → card centres in ~340px content */
  .work-steps__list {
    max-width: 277px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .work-step-gap {
    display: block;
    height: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: visible;
  }

  /* Connectors: left cx=20, right cx=257 (col1=229 + gap8 + 20) */
  /* SVG left: 17px, width: 257+3-17=243px */
  /* top/height calculated from measured cy values */
  .work-step-gap .work-step__curve {
    display: block !important;
    position: absolute !important;
    overflow: visible !important;
    z-index: 1 !important;
    left: 17px !important;
    width: 243px !important;
    height: 187px !important;
    top: -89px !important;
  }
  /* gap 3→4: shorter because step4 card has less text */
  .work-step-gap:nth-child(6) .work-step__curve {
    height: 179px !important;
    top: -88px !important;
  }
  /* gap 4→5: step4 and step5 both shorter */
  .work-step-gap:nth-child(8) .work-step__curve {
    height: 171px !important;
    top: -81px !important;
  }
}