/*
 * Mobile adaptation for /pro-nas/ (Про нас).
 * Loaded only on is_page('pro-nas') via mu-plugin.
 * Ribbon styled same as thank-you page (mobile-thankyou.css v1.0.6).
 */

@media (max-width: 767px) {

  /* ===== Hero: tighter padding on mobile, stack content vertically ===== */
  body.octo-about-page .octo-about__hero {
    overflow: visible !important;
  }
  body.octo-about-page .octo-about__hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 0 !important;
    padding: 24px 0 0 !important;
  }
  body.octo-about-page .octo-about__hero-text {
    max-width: 100% !important;
    width: 100% !important;
    z-index: 2 !important;
  }
  body.octo-about-page .octo-about__hero-title {
    font-size: 40px !important;
    line-height: 0.95 !important;
    white-space: normal !important;
    margin: 0 0 16px 0 !important;
  }
  body.octo-about-page .octo-about__hero-img {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    justify-content: center !important;
    z-index: 1 !important;
  }
  body.octo-about-page .octo-about__hero-img img {
    height: auto !important;
    width: 100% !important;
    max-width: 412px !important;
    margin: 0 auto !important;
  }
  body.octo-about-page .octo-about__hero-graffiti {
    opacity: 0.3 !important;
  }

  /* ===== Ribbon — pattern from mobile-thankyou.css =====
     Original is <img class="octo-about__ribbons">. Switch to cover/no-repeat
     behavior via height + object-fit so it looks identical to thank-you. */
  body.octo-about-page .octo-about__ribbons {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: -45px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* ===== Generic section: tighter padding ===== */
  /* 30px top/bottom → between two stacked sections gap = 60px (Figma rules→flower) */
  body.octo-about-page .octo-about__section {
    padding: 30px 0 !important;
  }
  body.octo-about-page .octo-about__wrap {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  body.octo-about-page .octo-about__section-title,
  body.octo-about-page .octo-about__rules-title {
    font-size: 40px !important;
    line-height: 1 !important;
  }

  /* Pillars flower icon — Figma 84px (was 222px desktop value leaking) */
  body.octo-about-page .octo-about__pillars-flower img,
  body.octo-about-page .octo-about__pillars-flower svg {
    width: 84px !important;
    height: 84px !important;
  }

  /* Gap flower → "ЩО ДЛЯ НАС ГОЛОВНЕ" title: Figma 24px
     Note: .octo-about__pillars-main is INSIDE .octo-about__pillars-left (flex column).
     Desktop has justify-content: space-between which spreads children apart — disable on mobile. */
  body.octo-about-page .octo-about__pillars-left {
    gap: 24px !important;
    justify-content: flex-start !important;
  }
  body.octo-about-page .octo-about__pillars {
    gap: 24px !important;
  }

  /* Gap between banner cards "Допомагаємо тваринам" / "Там, де важливо": Figma 24px */
  body.octo-about-page .octo-about__features {
    gap: 24px !important;
  }

  /* Hide "Детальна консультація" button in awards head on mobile */
  body.octo-about-page .octo-about__awards-head .octo-about__btn,
  body.octo-about-page .octo-about__awards-head a.octo-about__btn--primary {
    display: none !important;
  }
  /* Gap "НАШІ НАГОРОДИ" → first award card: Figma 24px (was 36px desktop) */
  body.octo-about-page .octo-about__awards-head {
    margin-bottom: 24px !important;
  }

  /* "Коротко про шлях" head: title → lead Figma 16px (was 28px desktop) */
  body.octo-about-page .octo-about__path-head {
    gap: 16px !important;
  }

  /* ===== "Коротко про шлях" big steps — vertical stack, big numbers, alternating L/R =====
     Design: number on its own row at full text size (~200px tall), alternating left/right
     alignment per --left / --right modifier. Text below, same alignment as number. */
  body.octo-about-page .octo-about__big-step {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 24px !important;
  }
  /* Path kicker "СЬОГОДНІ OCTOLAB — ЦЕ:" → first number: Figma 40px */
  body.octo-about-page .octo-about__path-kicker {
    margin-bottom: 40px !important;
  }
  body.octo-about-page .octo-about__big-step-num {
    display: flex !important;
    grid-column: auto !important;
    width: 100% !important;
    order: 0 !important;
  }
  body.octo-about-page .octo-about__big-step-text {
    order: 1 !important;
  }
  /* Vertical divider lines per design — tick--right hugs right edge, tick--left hugs left edge.
     Span full step height to match design proportions. */
  body.octo-about-page .octo-about__big-step {
    position: relative !important;
  }
  body.octo-about-page .octo-about__big-step-tick {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    height: auto !important;
    background: #7C7CFF !important;
    box-shadow: 0 0 8px rgba(124, 124, 255, 0.85), 0 0 16px rgba(124, 124, 255, 0.45) !important;
    border-radius: 1px !important;
  }
  body.octo-about-page .octo-about__big-step-tick--right {
    right: 0 !important;
    left: auto !important;
  }
  body.octo-about-page .octo-about__big-step-tick--left {
    left: 0 !important;
    right: auto !important;
  }
  body.octo-about-page .octo-about__big-step-num--left {
    justify-content: flex-start !important;
  }
  body.octo-about-page .octo-about__big-step-num--right {
    justify-content: flex-end !important;
  }
  /* Per-step number heights from Figma: 01=85, 02=85, 03=60 */
  body.octo-about-page .octo-about__big-step:nth-child(1) .octo-about__big-step-num img,
  body.octo-about-page .octo-about__big-step:nth-child(2) .octo-about__big-step-num img {
    height: 85px !important;
    width: auto !important;
    max-width: none !important;
  }
  body.octo-about-page .octo-about__big-step:nth-child(3) .octo-about__big-step-num img {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Big-step text — H4 mob per Figma: Bebas Neue Cyrillic 36/90%/-0.396px */
  body.octo-about-page .octo-about__big-step-text {
    grid-column: auto !important;
    width: 100% !important;
    font-family: "Bebas Neue Cyrillic", "Bebas Neue", Impact, sans-serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.396px !important;
    text-transform: uppercase !important;
    color: #F9F9F9 !important;
    text-align: left !important;
  }
  /* Step with num--right: text right-aligned too */
  body.octo-about-page .octo-about__big-step:has(.octo-about__big-step-num--right) .octo-about__big-step-text {
    text-align: right !important;
  }

  /* Award cards — stack badge on TOP, text BELOW (Figma mobile) */
  body.octo-about-page .octo-about__award {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 24px !important;
  }
  body.octo-about-page .octo-about__award-badge {
    width: 140px !important;
    height: auto !important;
  }
  body.octo-about-page .octo-about__award-badge img,
  body.octo-about-page .octo-about__award-badge svg {
    width: 140px !important;
    height: auto !important;
  }
  body.octo-about-page .octo-about__award-text {
    width: 100% !important;
    max-width: 100% !important;
  }
}