/* =========================================================
   KINGDOM ALLIANCE MINISTRIES
   SITE-WIDE MOBILE RESPONSIVE LAYER
   Desktop intentionally untouched
   ========================================================= */


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media (max-width: 980px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- GLOBAL WIDTHS ---------- */

  .wrap {
    width: min(100% - 32px, 1180px) !important;
  }

  section {
    overflow: hidden;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }

  /* ---------- HEADER ---------- */

  header {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
  }

  .nav {
    min-height: 72px !important;
    height: auto !important;
    padding: 10px 0 !important;
    gap: 12px !important;
  }

  .brand {
    min-width: 0;
    gap: 9px !important;
  }

  .brand .mark,
  .mark {
    flex: 0 0 auto;
  }

  .brand strong {
    display: block;
    font-size: clamp(.92rem, 3.7vw, 1.18rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .brand small {
    display: block;
    font-size: clamp(.56rem, 2.25vw, .72rem) !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
    margin-top: 3px;
  }

  .menu-btn {
    flex: 0 0 auto;
  }

  /* ---------- PAGE HEROES ---------- */

  .page-hero {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .page-hero h1 {
    font-size: clamp(2.45rem, 10vw, 4rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .page-hero p,
  .lead {
    font-size: clamp(1rem, 4vw, 1.13rem) !important;
    line-height: 1.65 !important;
  }

  /* ---------- MAIN HOMEPAGE HERO ---------- */

  main > section:first-of-type > .wrap {
    min-height: auto !important;
  }

  main > section:first-of-type h1 {
    font-size: clamp(2.8rem, 11vw, 4.4rem) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
    max-width: 100% !important;
  }

  main > section:first-of-type p {
    max-width: 100% !important;
  }

  /* ---------- GRIDS ---------- */

  .grid-2,
  .grid-3,
  .grid-4,
  .pain-grid,
  .identity-grid,
  .break-grid,
  .calling-grid,
  .connection-grid,
  .testimony-preview-grid,
  .footer-grid,
  .path {
    grid-template-columns: 1fr !important;
  }

  .grid-2 {
    gap: 32px !important;
  }

  .grid-3,
  .grid-4 {
    gap: 18px !important;
  }

  /* ---------- CARDS ---------- */

  .card {
    padding: 24px !important;
    border-radius: 20px !important;
    min-width: 0;
  }

  .photo-card,
  .calling-card,
  .identity-card,
  .give-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .photo-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* ---------- HOMEPAGE OVERLAY CARD FIX ---------- */

  main > section:first-of-type
  [style*="position:absolute"][style*="right:10px"] {
    position: static !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    box-sizing: border-box !important;
  }

  /* ---------- BUTTONS ---------- */

  .actions,
  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .btn {
    max-width: 100%;
    white-space: normal !important;
    text-align: center;
  }

  .cta-inner {
    display: block !important;
  }

  .cta-inner .btn {
    margin-top: 18px;
  }

  /* ---------- TAGS / PILLS ---------- */

  .tag-row {
    gap: 9px !important;
  }

  .tag {
    font-size: .84rem !important;
    line-height: 1.25 !important;
  }

  /* ---------- FORMS ---------- */

  .form,
  form {
    max-width: 100%;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100%;
    box-sizing: border-box;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---------- SECTION SPACING ---------- */

  main section {
    scroll-margin-top: 86px;
  }

  .cta {
    padding: 54px 0 !important;
  }

  /* ---------- CONNECT EXPERIENCES ---------- */

  .shell {
    width: min(100% - 28px, 1180px) !important;
    max-width: 100% !important;
  }

  .connection,
  .connection-head,
  .connection-grid,
  .content {
    max-width: 100% !important;
  }

  .connection-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .wallet-preview {
    max-width: 100% !important;
  }

  /* ---------- STAY CONNECTED ---------- */

  .grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 720px) {

  .wrap {
    width: calc(100% - 28px) !important;
  }

  /* ---------- HEADER ---------- */

  .nav {
    min-height: 68px !important;
  }

  .brand {
    gap: 8px !important;
  }

  .brand .mark,
  .mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 1.15rem !important;
  }

  .brand strong {
    font-size: clamp(.84rem, 4vw, 1.02rem) !important;
  }

  .brand small {
    font-size: clamp(.51rem, 2.25vw, .65rem) !important;
    letter-spacing: .1em !important;
  }

  .menu-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  /* ---------- TYPOGRAPHY ---------- */

  .eyebrow {
    font-size: .7rem !important;
    letter-spacing: .16em !important;
    line-height: 1.45 !important;
  }

  .page-hero h1 {
    font-size: clamp(2.25rem, 10.8vw, 3.35rem) !important;
    line-height: .98 !important;
  }

  main > section:first-of-type h1 {
    font-size: clamp(2.55rem, 11.7vw, 3.75rem) !important;
    line-height: .95 !important;
  }

  h2 {
    line-height: 1.05 !important;
  }

  p,
  li {
    overflow-wrap: break-word;
  }

  /* ---------- SPACING ---------- */

  .page-hero {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  .grid-2 {
    gap: 26px !important;
  }

  .card {
    padding: 21px !important;
  }

  /* ---------- BUTTONS ---------- */

  .hero-actions,
  .actions {
    width: 100%;
    align-items: stretch !important;
  }

  .hero-actions .btn,
  .actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Keep compact tag-style links compact */
  .tag-row .tag {
    width: auto !important;
  }

  /* ---------- PHOTOS ---------- */

  .photo-card {
    border-radius: 22px !important;
  }

  .photo-card img {
    min-height: 0 !important;
  }

  /* ---------- HOMEPAGE OVERLAY ---------- */

  main > section:first-of-type
  [style*="position:absolute"][style*="right:10px"] {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  /* ---------- FOOTER ---------- */

  .footer-grid {
    gap: 26px !important;
  }

  footer .brand {
    align-items: flex-start !important;
  }

  /* ---------- GIVING ---------- */

  .kingdom-giving-shell,
  .kingdom-giving-modal-summary,
  .kingdom-giving-modal-header {
    max-width: 100% !important;
  }

  .amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .amount,
  .custom {
    min-width: 0 !important;
  }

  /* ---------- CONNECTION PAGES ---------- */

  .shell {
    width: calc(100% - 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero {
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }

  .connection-message {
    max-width: 100% !important;
  }

  .wallet-preview {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- STAY CONNECTED ---------- */

  .grid {
    gap: 16px !important;
  }

  .grid .card {
    padding: 20px !important;
  }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

  .wrap {
    width: calc(100% - 24px) !important;
  }

  /* ---------- HEADER ---------- */

  .nav {
    min-height: 64px !important;
    padding: 8px 0 !important;
  }

  .brand {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .brand > div:last-child {
    min-width: 0;
  }

  .brand .mark,
  .mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .brand strong {
    font-size: .84rem !important;
  }

  .brand small {
    font-size: .5rem !important;
    letter-spacing: .08em !important;
  }

  /* ---------- HERO ---------- */

  .page-hero h1 {
    font-size: clamp(2.05rem, 10vw, 2.8rem) !important;
  }

  main > section:first-of-type h1 {
    font-size: clamp(2.3rem, 11.2vw, 3.1rem) !important;
  }

  .page-hero p,
  .lead,
  main > section:first-of-type p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* ---------- CARDS ---------- */

  .card {
    padding: 19px !important;
    border-radius: 18px !important;
  }

  /* ---------- BUTTONS ---------- */

  .btn {
    width: 100%;
    min-height: 48px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ---------- TAGS ---------- */

  .tag-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .tag-row .tag {
    width: fit-content !important;
  }

  /* ---------- GIVE ---------- */

  .amounts {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}


/* =========================================================
   KAM MOBILE HERO V2
   Exact homepage + About compositions
   ========================================================= */

@media (max-width: 720px) {

  /* =======================================================
     HOME HERO
     ======================================================= */

  .kam-home-hero {
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 54px 0 58px !important;
  }

  .kam-home-hero > .wrap {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
  }

  /*
   * Deliberately smaller than desktop.
   * Still strong, but it should no longer dominate
   * an entire phone screen.
   */
  .kam-home-hero h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(2.65rem, 11vw, 3.45rem) !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;

    margin: 14px 0 24px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .kam-home-hero p {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 1.05rem !important;
    line-height: 1.62 !important;
  }


  /* -------------------------------------------------------
     HOME PHOTO
     Remove all desktop floating behavior.
     ------------------------------------------------------- */

  .kam-home-photo {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 30px 0 0 !important;

    inset: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
    float: none !important;
  }

  .kam-home-photo img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    object-fit: cover !important;
  }


  /* -------------------------------------------------------
     HOME PURPLE CALLOUT
     This MUST become part of normal document flow.
     ------------------------------------------------------- */

  .kam-home-callout {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;

    inset: auto !important;

    margin: 18px 0 0 !important;
    padding: 22px !important;

    box-sizing: border-box !important;

    transform: none !important;
    float: none !important;
  }


  /* Home buttons stay together under content */

  .kam-home-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;

    gap: 12px !important;
    margin-top: 28px !important;
  }

  .kam-home-hero .hero-actions .btn {
    width: 100% !important;
    margin: 0 !important;
  }


  /* Home tags */

  .kam-home-hero .tag-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 10px !important;
    margin-top: 26px !important;
  }

  .kam-home-hero .tag {
    width: auto !important;
    max-width: 100% !important;
  }


  /* =======================================================
     ABOUT HERO
     ======================================================= */

  .kam-about-hero {
    min-height: 0 !important;
    height: auto !important;

    padding: 52px 0 58px !important;

    overflow: hidden !important;
  }

  .kam-about-hero > .wrap {
    min-height: 0 !important;
    height: auto !important;
  }

  .kam-about-hero .eyebrow {
    margin-bottom: 15px !important;
  }

  .kam-about-hero h1 {
    width: 100% !important;
    max-width: 100% !important;

    /*
     * About headline is long.
     * Make it editorial, not billboard-sized.
     */
    font-size: clamp(2.35rem, 9.8vw, 3.15rem) !important;
    line-height: .99 !important;
    letter-spacing: -.035em !important;

    margin: 0 0 24px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .kam-about-hero p {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 1.04rem !important;
    line-height: 1.62 !important;

    margin-top: 0 !important;
  }
}


/* =========================================================
   SMALL PHONE REFINEMENT
   ========================================================= */

@media (max-width: 480px) {

  .kam-home-hero {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }

  .kam-home-hero h1 {
    font-size: clamp(2.35rem, 10.7vw, 2.95rem) !important;
  }

  .kam-home-callout {
    padding: 19px !important;
    border-radius: 18px !important;
  }


  .kam-about-hero {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }

  .kam-about-hero h1 {
    font-size: clamp(2.12rem, 9.5vw, 2.7rem) !important;
    line-height: 1 !important;
  }
}


/* =========================================================
   KAM MOBILE V3
   PERFORMANCE-AWARE HOME COMPOSITION
   ========================================================= */

@media (max-width: 720px) {

  /*
   * HOME HERO
   * No oversized desktop canvas on phone.
   */

  .kam-home-hero {
    padding: 44px 0 52px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .kam-home-hero > .wrap {
    min-height: 0 !important;
    height: auto !important;
  }


  /*
   * Strong headline without turning every phrase
   * into its own enormous row.
   */

  .kam-home-hero h1 {
    font-size: clamp(2.45rem, 10vw, 3.25rem) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;

    margin: 12px 0 22px !important;

    max-width: 100% !important;
  }


  /*
   * Intro copy
   */

  .kam-home-hero p {
    font-size: 1.02rem !important;
    line-height: 1.62 !important;

    max-width: 100% !important;
  }


  /*
   * Greg + Shanah visual
   *
   * JavaScript moves this between the intro copy
   * and action buttons on mobile.
   */

  .kam-home-photo {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    display: block !important;

    margin: 30px 0 0 !important;

    inset: auto !important;
    transform: none !important;

    overflow: visible !important;
  }


  .kam-home-photo > img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 3 / 2;
    object-fit: cover !important;

    margin: 0 !important;

    border-radius: 20px !important;

    background: #f8f1e7;
  }


  /*
   * Purple identity card directly under photo.
   */

  .kam-home-callout {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 14px 0 0 !important;

    padding: 21px !important;

    border-radius: 20px !important;

    inset: auto !important;
    transform: none !important;

    box-sizing: border-box !important;
  }


  .kam-home-callout h2,
  .kam-home-callout h3 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.08 !important;
  }


  .kam-home-callout p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }


  /*
   * Actions follow photo + callout.
   */

  .kam-home-hero .hero-actions {
    margin-top: 22px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 11px !important;
  }


  .kam-home-hero .hero-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
  }


  /*
   * Pills follow the actions.
   */

  .kam-home-hero .tag-row {
    margin-top: 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 9px !important;
  }


  /*
   * ABOUT
   * More editorial, less billboard.
   */

  .kam-about-hero {
    padding: 42px 0 50px !important;
  }


  .kam-about-hero h1 {
    font-size: clamp(2.15rem, 9vw, 2.85rem) !important;
    line-height: 1 !important;

    letter-spacing: -.032em !important;

    margin-bottom: 20px !important;
  }


  .kam-about-hero p {
    font-size: 1.01rem !important;
    line-height: 1.6 !important;
  }
}


@media (max-width: 480px) {

  .kam-home-hero h1 {
    font-size: clamp(2.25rem, 9.8vw, 2.8rem) !important;
  }

  .kam-about-hero h1 {
    font-size: 2.15rem !important;
    line-height: 1.02 !important;
  }
}


/* =========================================================
   KAM MOBILE V4
   FINAL HOME HERO IMAGE POSITION
   ========================================================= */

@media (max-width: 720px) {

  .kam-home-photo > img {
    transform: none !important;
    translate: none !important;

    position: static !important;
    inset: auto !important;

    margin: 0 auto !important;

    max-width: 100% !important;
  }

  .kam-home-photo {
    padding: 0 !important;
  }

  .kam-home-callout {
    clear: both !important;
  }
}


/* =========================================================
   KAM MOBILE V4
   BALANCED HOMEPAGE TOPIC PILLS
   ========================================================= */

@media (max-width: 720px) {

  .kam-home-hero .tag-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
    margin-top: 24px !important;

    align-items: stretch !important;
  }

  .kam-home-hero .tag-row .tag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;

    padding: 11px 12px !important;

    text-align: center !important;
    line-height: 1.2 !important;

    box-sizing: border-box !important;
  }
}


@media (max-width: 380px) {

  .kam-home-hero .tag-row {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   KAM MOBILE V5
   HERO PERFORMANCE + FINAL TOPIC GRID
   ========================================================= */

@media (max-width: 720px) {

  /*
   * Let the actual image determine its height.
   * Do not create an artificial 3:2 placeholder box.
   */
  .kam-home-photo > img {
    width: 100% !important;
    height: auto !important;

    aspect-ratio: auto !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 20px !important;
  }


  /*
   * Balanced 2 x 2 topic grid.
   */
  .kam-home-hero .tag-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;

    gap: 10px !important;

    margin-top: 24px !important;
  }

  .kam-home-hero .tag-row .tag {
    width: 100% !important;
    max-width: none !important;

    min-height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 12px !important;

    text-align: center !important;

    line-height: 1.18 !important;

    box-sizing: border-box !important;
  }
}


@media (max-width: 380px) {

  .kam-home-hero .tag-row {
    grid-template-columns: 1fr !important;
  }
}