/* NILA v21.33 Mobile First Discovery Layout */
:root{
  --v33-green:#075f3c;
  --v33-blue:#176fc2;
  --v33-gold:#d8a736;
  --v33-coral:#e56d42;
  --v33-ink:#071b31;
  --v33-muted:#53677e;
  --v33-line:rgba(7,27,49,.12);
  --v33-soft:#f7fbff;
}

/* Desktop stays close to v21.32. These rules mainly activate on smaller screens. */
.v33-mobile-viewbar{display:none;}
.v33-mobile-help-strip{display:none;}

@media(max-width:760px){
  html{scroll-padding-top:112px;}
  body{background:#fff!important;}

  /* HOME: action first, big visual lower down */
  body[data-nila-page="home"] .v19-hero,
  body.page-home .v19-hero{padding:18px 0 20px!important;}
  body[data-nila-page="home"] .v19-hero-grid,
  body.page-home .v19-hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
  }
  body[data-nila-page="home"] .v19-eyebrow,
  body.page-home .v19-eyebrow{margin-bottom:10px!important;}
  body[data-nila-page="home"] .v19-h1,
  body.page-home .v19-h1{
    font-size:clamp(42px,13vw,58px)!important;
    line-height:.9!important;
    letter-spacing:-.065em!important;
    margin-bottom:10px!important;
  }
  body[data-nila-page="home"] .v19-sub,
  body.page-home .v19-sub{font-size:16px!important;line-height:1.45!important;margin-bottom:14px!important;}
  body[data-nila-page="home"] #heroSearch,
  body.page-home #heroSearch{
    position:sticky!important;
    top:8px!important;
    z-index:240!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid var(--v33-line)!important;
    box-shadow:0 18px 44px rgba(7,27,49,.14)!important;
    backdrop-filter:blur(18px)!important;
  }
  body[data-nila-page="home"] #heroSearch .hs-submit,
  body.page-home #heroSearch .hs-submit{min-height:50px!important;border-radius:17px!important;}
  body[data-nila-page="home"] .v19-trust,
  body.page-home .v19-trust{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  body[data-nila-page="home"] .v19-discover,
  body.page-home .v19-discover{
    order:3!important;
    min-height:auto!important;
    padding:14px!important;
    border-radius:26px!important;
  }
  body[data-nila-page="home"] .v19-discover-map,
  body.page-home .v19-discover-map,
  body[data-nila-page="home"] #heroMapWrap,
  body.page-home #heroMapWrap{height:220px!important;min-height:220px!important;}
  body[data-nila-page="home"] .v19-cats,
  body.page-home .v19-cats{
    display:flex!important;
    overflow-x:auto!important;
    gap:10px!important;
    padding-bottom:4px!important;
    scrollbar-width:none!important;
  }
  body[data-nila-page="home"] .v19-cats::-webkit-scrollbar,
  body.page-home .v19-cats::-webkit-scrollbar{display:none!important;}
  body[data-nila-page="home"] .v19-cat,
  body.page-home .v19-cat{flex:0 0 auto!important;min-width:118px!important;}

  /* HOME: category preview stays compact and action-oriented */
  #nilaCategorySection.v32-category-preview{padding:18px 0 24px!important;}
  #nilaCategorySection .v32-category-head{margin-bottom:14px!important;}
  #nilaCategorySection h2{font-size:34px!important;line-height:.96!important;}
  #nilaCategorySection p{font-size:14.5px!important;}
  .v32-home-cat-grid{grid-template-columns:1fr!important;gap:14px!important;}
  .v32-home-cat-card{
    display:grid!important;
    grid-template-columns:104px 1fr!important;
    align-items:center!important;
    min-height:118px!important;
    border-radius:24px!important;
  }
  .v32-home-cat-card .v32-cat-media{height:118px!important;min-height:118px!important;border-radius:0!important;}
  .v32-home-cat-card .v32-cat-media img{object-fit:cover!important;}
  .v32-home-cat-card .v32-cat-body{padding:14px!important;min-height:0!important;border-top:0!important;}
  .v32-home-cat-card h3{font-size:24px!important;margin-bottom:6px!important;}
  .v32-home-cat-card p{font-size:13.5px!important;line-height:1.35!important;-webkit-line-clamp:2!important;margin-bottom:8px!important;}
  .v32-home-cat-card small{font-size:12px!important;padding:7px 10px!important;}
  .v32-see-more{width:100%!important;margin-top:12px!important;}

  /* DIRECTORY: action controls first */
  body[data-nila-page="directory"] .v19-dir-hero,
  body.page-directory .v19-dir-hero{padding:18px 0 14px!important;}
  body[data-nila-page="directory"] .v19-dir-hero h1,
  body.page-directory .v19-dir-hero h1{font-size:34px!important;line-height:.96!important;margin-bottom:8px!important;}
  body[data-nila-page="directory"] .v19-dir-hero p,
  body.page-directory .v19-dir-hero p{font-size:14.5px!important;line-height:1.45!important;}
  body[data-nila-page="directory"] .v19-dir-search,
  body.page-directory .v19-dir-search{
    position:sticky!important;
    top:8px!important;
    z-index:260!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid var(--v33-line)!important;
    border-radius:22px!important;
    padding:11px!important;
    box-shadow:0 16px 40px rgba(7,27,49,.14)!important;
    backdrop-filter:blur(18px)!important;
    margin-top:12px!important;
  }
  body[data-nila-page="directory"] .v19-dir-search input,
  body[data-nila-page="directory"] .v19-dir-search select,
  body[data-nila-page="directory"] .v19-dir-search button,
  body.page-directory .v19-dir-search input,
  body.page-directory .v19-dir-search select,
  body.page-directory .v19-dir-search button{
    width:100%!important;
    min-height:46px!important;
    border-radius:15px!important;
  }
  body[data-nila-page="directory"] .v19-cat-rail,
  body.page-directory .v19-cat-rail{
    position:sticky!important;
    top:0!important;
    z-index:250!important;
    padding:8px 0!important;
    background:rgba(255,255,255,.95)!important;
    border-bottom:1px solid var(--v33-line)!important;
    backdrop-filter:blur(18px)!important;
  }
  body[data-nila-page="directory"] .v19-cat-rail .container,
  body.page-directory .v19-cat-rail .container{padding:0 14px!important;}
  body[data-nila-page="directory"] .v19-cat-rail-inner,
  body.page-directory .v19-cat-rail-inner{gap:8px!important;overflow-x:auto!important;white-space:nowrap!important;scrollbar-width:none!important;}
  body[data-nila-page="directory"] .v19-cat-rail-inner::-webkit-scrollbar,
  body.page-directory .v19-cat-rail-inner::-webkit-scrollbar{display:none!important;}
  body[data-nila-page="directory"] .dir-cat,
  body.page-directory .dir-cat{flex:0 0 auto!important;padding:9px 13px!important;font-size:13px!important;}

  .v33-mobile-help-strip{
    display:block!important;
    margin:10px 14px 0!important;
    padding:11px 13px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(7,95,60,.08),rgba(23,111,194,.08))!important;
    border:1px solid rgba(7,27,49,.08)!important;
    color:var(--v33-ink)!important;
    font-size:13.5px!important;
    font-weight:800!important;
  }
  .v33-mobile-viewbar{
    display:flex!important;
    gap:8px!important;
    position:sticky!important;
    top:0!important;
    z-index:230!important;
    background:rgba(255,255,255,.96)!important;
    padding:10px 14px!important;
    border-bottom:1px solid var(--v33-line)!important;
    backdrop-filter:blur(16px)!important;
  }
  .v33-mobile-viewbar button{
    flex:1 1 0!important;
    min-height:42px!important;
    border-radius:999px!important;
    border:1px solid var(--v33-line)!important;
    background:#fff!important;
    color:var(--v33-ink)!important;
    font-weight:950!important;
  }
  body.v33-show-list .v33-view-list,
  body.v33-show-map .v33-view-map{background:var(--v33-green)!important;color:#fff!important;border-color:var(--v33-green)!important;}

  body[data-nila-page="directory"] .v19-dir-body,
  body.page-directory .v19-dir-body{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    padding:14px!important;
  }
  body[data-nila-page="directory"] .v19-dir-list-wrap,
  body.page-directory .v19-dir-list-wrap{order:1!important;width:100%!important;}
  body[data-nila-page="directory"] .v19-dir-list-head,
  body.page-directory .v19-dir-list-head{display:block!important;margin-bottom:12px!important;}
  body[data-nila-page="directory"] .v19-dir-list-head h2,
  body.page-directory .v19-dir-list-head h2{font-size:26px!important;line-height:1!important;margin:0 0 8px!important;}
  body[data-nila-page="directory"] .v19-dir-toolbar,
  body.page-directory .v19-dir-toolbar{display:flex!important;gap:8px!important;overflow-x:auto!important;padding-bottom:2px!important;}
  body[data-nila-page="directory"] .v19-dir-toolbar select,
  body.page-directory .v19-dir-toolbar select{flex:0 0 auto!important;min-width:150px!important;}
  body[data-nila-page="directory"] #dirGrid,
  body.page-directory #dirGrid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  body[data-nila-page="directory"] .dir-card,
  body[data-nila-page="directory"] .provider-card,
  body.page-directory .dir-card,
  body.page-directory .provider-card{border-radius:22px!important;}
  body[data-nila-page="directory"] #dirMapCard,
  body[data-nila-page="directory"] .v19-dir-map-wrap,
  body.page-directory #dirMapCard,
  body.page-directory .v19-dir-map-wrap{
    order:2!important;
    position:relative!important;
    top:auto!important;
    width:100%!important;
    min-height:390px!important;
  }
  body[data-nila-page="directory"] #dirMap,
  body.page-directory #dirMap{min-height:310px!important;height:310px!important;display:block!important;visibility:visible!important;}

  body.v33-show-list[data-nila-page="directory"] #dirMapCard,
  body.v33-show-list[data-nila-page="directory"] .v19-dir-map-wrap,
  body.v33-show-list.page-directory #dirMapCard,
  body.v33-show-list.page-directory .v19-dir-map-wrap{display:none!important;}
  body.v33-show-map[data-nila-page="directory"] .v19-dir-list-wrap,
  body.v33-show-map.page-directory .v19-dir-list-wrap{display:none!important;}
  body.v33-show-map[data-nila-page="directory"] #dirMapCard,
  body.v33-show-map[data-nila-page="directory"] .v19-dir-map-wrap,
  body.v33-show-map.page-directory #dirMapCard,
  body.v33-show-map.page-directory .v19-dir-map-wrap{display:flex!important;}

  /* Category landing visual should not push mobile actions down too far */
  body.v32-category-page #v31DirCategoryHero,
  body.v32-category-page #v32DirCategoryHero,
  body.v32-category-page .v31-dir-category-hero,
  body.v32-category-page .v25-category-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    margin:10px 14px!important;
    gap:10px!important;
  }
  body.v32-category-page .v31-dir-category-visual,
  body.v32-category-page .v32-dir-category-visual{
    min-height:150px!important;
    max-height:180px!important;
    order:2!important;
  }
  body.v32-category-page .v31-dir-category-visual img,
  body.v32-category-page .v32-dir-category-visual img{min-height:150px!important;max-height:180px!important;}
  body.v32-category-page .v31-dir-category-copy,
  body.v32-category-page .v32-dir-category-copy{padding:16px!important;order:1!important;}
  body.v32-category-page .v31-dir-category-copy h1,
  body.v32-category-page .v32-dir-category-copy h1{font-size:31px!important;line-height:.98!important;}
  body.v32-category-page .v31-dir-category-copy p,
  body.v32-category-page .v32-dir-category-copy p{font-size:14px!important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
}