/**
 * PUBLIC HOMEPAGE — Hero mobile redesign (Header + Hero + Trust + Specialities head peek)
 * Visual target: owner attached reference (390 / 412 / 430).
 * Scoped to .public-home-v2. Does not touch chat, portal, admin, or lower section content.
 */

.public-home-v2 {
  --hm-navy: #0a2540;
  --hm-blue: #1a5fb4;
  --hm-blue-deep: #0d4ea0;
  --hm-muted: #5b6b7c;
  --hm-soft: #eef4fb;
  --hm-line: rgba(15, 45, 75, 0.10);
  --hm-card-radius: 18px;
}

/* ========== CONTACT BAR: hide on mobile (reference starts with white header) ========== */
@media (max-width: 767px) {
  .public-home-v2 .ilj-cbar {
    display: none !important;
  }
}

/* ========== HEADER ========== */
@media (max-width: 767px) {
  .public-home-v2 .hp-header.pub-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(15, 45, 75, 0.06) !important;
    box-shadow: none !important;
  }

  .public-home-v2 .hp-header__inner {
    min-height: 52px !important;
    max-height: none !important;
    padding-block: 6px !important;
    padding-inline: 12px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .public-home-v2 .hp-brand__logo {
    max-height: 40px !important;
    max-width: min(148px, 42vw) !important;
  }

  .public-home-v2 .pub-header__nav,
  .public-home-v2 .pub-header__call,
  .public-home-v2 .pub-header__cta {
    display: none !important;
  }

  .public-home-v2 .hp-header__actions.pub-header__tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-inline-start: auto !important;
  }

  .public-home-v2 .hp-icon-btn,
  .public-home-v2 .pub-header .hp-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(11, 47, 74, 0.08);
  }

  .public-home-v2 .hp-icon-btn--phone {
    background: #e8f1fc !important;
    color: var(--hm-navy) !important;
  }

  .public-home-v2 .hp-icon-btn--wa {
    background: #25d366 !important;
    color: #fff !important;
  }

  .public-home-v2 .hp-icon-btn svg,
  .public-home-v2 .pub-header .hp-icon-btn svg {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  .public-home-v2 .hp-lang__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 32px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #eef1f5 !important;
    border: none !important;
    color: var(--hm-navy) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
  }

  .public-home-v2 .hp-lang__btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  .public-home-v2 .hp-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--hm-navy) !important;
    padding: 0 !important;
  }

  .public-home-v2 .hp-menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ========== HERO — overlapping copy + photo ========== */
@media (max-width: 767px) {
  .public-home-v2 .hp-hero.pub-hero {
    padding: 4px 0 6px !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse 90% 55% at 78% 18%, rgba(210, 228, 248, 0.55) 0%, transparent 70%),
      linear-gradient(180deg, #f5f9fd 0%, #ffffff 72%) !important;
  }

  .public-home-v2 .hp-hero__swiper {
    overflow: hidden !important;
  }

  .public-home-v2 .hp-hero__slide {
    overflow: hidden !important;
  }

  .public-home-v2 .hp-hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.98fr) minmax(168px, 1.02fr) !important;
    grid-template-areas:
      "copy visual"
      "actions visual" !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
    padding: 2px 10px 2px 12px !important;
    align-items: start !important;
    position: relative !important;
    min-height: 0 !important;
  }

  .public-home-v2 .hp-hero__copy {
    grid-area: copy !important;
    z-index: 3 !important;
    position: relative !important;
    padding-inline-end: 0 !important;
    max-width: none !important;
  }

  .public-home-v2 .hp-hero__badge {
    display: none !important;
  }

  .public-home-v2 .hp-hero__title {
    margin: 0 0 8px !important;
    font-size: clamp(1.32rem, 5.8vw, 1.58rem) !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    color: var(--hm-navy) !important;
    letter-spacing: -0.025em !important;
    max-width: 15.5ch !important;
  }

  .public-home-v2 .hp-hero__hl {
    color: var(--hm-blue) !important;
  }

  .public-home-v2 .hp-hero__subtitle {
    margin: 0 0 2px !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: var(--hm-muted) !important;
    max-width: 26ch !important;
  }

  .public-home-v2 .hp-hero__points,
  .public-home-v2 .pub-hero__metric {
    display: none !important;
  }

  .public-home-v2 .pub-hero__actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 4 !important;
    max-width: 196px !important;
    width: min(196px, 100%) !important;
  }

  .public-home-v2 .hp-hero__visual {
    grid-area: visual !important;
    position: relative !important;
    z-index: 1 !important;
    width: calc(100% + 18px) !important;
    max-height: none !important;
    min-height: 248px !important;
    height: auto !important;
    margin: 0 -14px 0 -28px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    align-self: stretch !important;
    pointer-events: none !important;
  }

  .public-home-v2 .hp-hero__visual picture,
  .public-home-v2 .hp-hero__visual .hp-hero__img,
  .public-home-v2 .hp-hero__visual img,
  .public-home-v2 .hp-hero__visual picture img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 268px !important;
    max-height: 268px !important;
    min-height: 240px !important;
    object-fit: cover !important;
    object-position: 62% 18% !important;
    margin: 0 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 78%, transparent 100%),
      linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 78%, transparent 100%),
      linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .public-home-v2 .pub-hero__actions .hp-hero__cta {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    border-radius: 12px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .public-home-v2 .pub-hero__actions .hp-hero__cta:not(.hp-hero__cta--secondary) {
    background: var(--hm-blue-deep) !important;
    color: #fff !important;
    border: none !important;
  }

  .public-home-v2 .pub-hero__actions .hp-hero__cta--secondary {
    background: #fff !important;
    color: var(--hm-navy) !important;
    border: 1px solid rgba(15, 45, 75, 0.14) !important;
    box-shadow: 0 2px 8px rgba(11, 47, 74, 0.06) !important;
  }

  .public-home-v2 .hp-hero__nav {
    display: none !important;
  }

  .public-home-v2 .hp-hero__dots,
  .public-home-v2 .swiper-pagination.hp-hero__dots {
    grid-area: dots !important;
    position: static !important;
    margin: 10px 0 2px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    height: auto !important;
  }

  .public-home-v2 .hp-hero__dots .swiper-pagination-bullet {
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    opacity: 1 !important;
    background: #cfd8e3 !important;
    border-radius: 999px !important;
  }

  .public-home-v2 .hp-hero__dots .swiper-pagination-bullet-active {
    background: var(--hm-blue) !important;
  }
}

/* Slightly larger hero on 412–430 */
@media (min-width: 412px) and (max-width: 767px) {
  .public-home-v2 .hp-hero__title {
    font-size: clamp(1.4rem, 5.2vw, 1.68rem) !important;
  }

  .public-home-v2 .hp-hero__visual {
    max-height: none !important;
    min-height: 248px !important;
  }

  .public-home-v2 .hp-hero__visual picture,
  .public-home-v2 .hp-hero__visual .hp-hero__img,
  .public-home-v2 .hp-hero__visual img,
  .public-home-v2 .hp-hero__visual picture img {
    height: 288px !important;
    max-height: 288px !important;
    min-height: 260px !important;
  }

  .public-home-v2 .pub-hero__actions {
    max-width: 210px !important;
    width: min(210px, 100%) !important;
  }
}

@media (min-width: 430px) and (max-width: 767px) {
  .public-home-v2 .hp-hero__visual picture,
  .public-home-v2 .hp-hero__visual .hp-hero__img,
  .public-home-v2 .hp-hero__visual img,
  .public-home-v2 .hp-hero__visual picture img {
    height: 300px !important;
    max-height: 300px !important;
  }
}

/* ========== TRUST — 4×2 card with separators ========== */
@media (max-width: 767px) {
  .public-home-v2 .hp-trust-strip {
    padding: 4px 12px 10px !important;
  }

  .public-home-v2 .hp-trust-strip__card {
    padding: 10px 6px !important;
    border-radius: var(--hm-card-radius) !important;
    border: 1px solid rgba(15, 45, 75, 0.06) !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(11, 47, 74, 0.07) !important;
  }

  .public-home-v2 .hp-trust-strip__row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .public-home-v2 .hp-trust-strip__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 12px 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-inline-end: 1px solid var(--hm-line) !important;
    border-bottom: 1px solid var(--hm-line) !important;
  }

  .public-home-v2 .hp-trust-strip__item:nth-child(4n) {
    border-inline-end: none !important;
  }

  .public-home-v2 .hp-trust-strip__item:nth-child(n + 5) {
    border-bottom: none !important;
  }

  .public-home-v2 .hp-trust-strip__icon,
  body.page-home.public-home-v2 .pub-trust .hp-trust-strip__icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--hm-blue) !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  .public-home-v2 .hp-trust-strip__icon svg,
  body.page-home.public-home-v2 .pub-trust .hp-trust-strip__icon svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .public-home-v2 .hp-trust-strip__item p {
    margin: 0 !important;
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--hm-navy) !important;
    max-width: 100% !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    hyphens: auto;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Desktop/tablet trust stays readable with 8 items */
@media (min-width: 768px) {
  .public-home-v2 .hp-trust-strip__row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .public-home-v2 .hp-trust-strip__item {
    background: var(--hm-soft) !important;
    border-radius: 12px !important;
  }

  .public-home-v2 .hp-trust-strip__item p {
    font-size: 0.72rem !important;
  }
}

/* ========== SPECIALITIES — heading row peek only (no full redesign) ========== */
@media (max-width: 767px) {
  .public-home-v2 .hp-specs.pub-p2 {
    padding-block: 6px 12px !important;
    padding-inline: 12px !important;
  }

  .public-home-v2 .hp-specs .hp-section-head {
    margin-bottom: 8px !important;
    padding: 12px 14px !important;
    border-radius: var(--hm-card-radius) !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(11, 47, 74, 0.05) !important;
    border: 1px solid rgba(15, 45, 75, 0.05) !important;
  }

  .public-home-v2 .hp-specs .hp-section-head h2 {
    font-size: 1.05rem !important;
    color: var(--hm-navy) !important;
    font-weight: 800 !important;
  }

  .public-home-v2 .hp-specs .hp-view-all,
  .public-home-v2 .hp-specs .pub-p2__link {
    color: var(--hm-blue) !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
  }
}

/* Desktop/tablet: keep two-column hero with actions under copy */
@media (min-width: 768px) {
  .public-home-v2 .hp-hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr) !important;
    grid-template-areas:
      "copy visual"
      "actions visual" !important;
    column-gap: 18px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }

  .public-home-v2 .hp-hero__copy { grid-area: copy !important; }
  .public-home-v2 .hp-hero__visual { grid-area: visual !important; }
  .public-home-v2 .pub-hero__actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* Prevent horizontal overflow at phone widths */
@media (max-width: 767px) {
  .public-home-v2,
  .public-home-v2 .hp-page,
  .public-home-v2 .hp-hero,
  .public-home-v2 .hp-hero__swiper,
  .public-home-v2 .hp-trust-strip {
    max-width: 100% !important;
    overflow-x: clip !important;
  }
}