/* ============================================================================
   townsquare - PLACES: the live Townsquares list (partials/sections/ts_place_list,
   in the location window, the home window and on Explore Communities), the
   home window's extras and the home card's "Home community" state.
   Loaded on every Townsquare page (theme.json vendors.global) and with the top
   banner on the master's inner pages (tq_topban_inner_assets). js/places.js.
   Light on purpose: it sits on the white modal and the light pages, so it
   opts out of the theme's color-scheme:dark. Minimum text size 14px.
   ============================================================================ */
.tq-tsl,.tq-tsl *{box-sizing:border-box}
.tq-tsl{display:grid;gap:12px;color:#080F54;color-scheme:light;min-width:0}

/* search */
.tq-tsl-q{position:relative;display:block;margin:0}
.tq-tsl-q svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6D74A6;pointer-events:none}
.tq-tsl-q input{display:block;width:100%;margin:0;padding:12px 14px 12px 42px;border-radius:12px;border:1.5px solid rgba(8,15,84,.12);background:#F5F6FF;color:#080F54;font:500 15px/1.4 var(--tq-body,system-ui);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background .2s}
.tq-tsl-q input::placeholder{color:#6D74A6;opacity:1}
.tq-tsl-q input:focus,.tq-tsl-q input:focus-visible{outline:none;border-color:#1326F3;background:#fff;box-shadow:0 0 0 4px rgba(19,38,243,.12)}
.tq-tsl-q input::-webkit-search-cancel-button{cursor:pointer}

/* the list: scrolls inside the window */
.tq-tsl--modal .tq-tsl-list{max-height:min(300px,36vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(8,15,84,.22) transparent;margin:0 -6px;padding:2px 6px}
.tq-tsl--modal .tq-tsl-list::-webkit-scrollbar{width:6px}
.tq-tsl--modal .tq-tsl-list::-webkit-scrollbar-thumb{background:rgba(8,15,84,.22);border-radius:6px}
.tq-tsl-group+.tq-tsl-group{margin-top:12px}
.tq-tsl-state{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 14px var(--tq-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#1326F3}
.tq-tsl-state span{font:700 14px var(--tq-body,system-ui);letter-spacing:0;color:#3A4178;background:#EEF0FF;border-radius:999px;padding:1px 9px}
.tq-tsl-items{display:grid;gap:8px}

/* one Townsquare: a row in a window */
.tq-tsl-item{display:flex;align-items:center;gap:12px;width:100%;margin:0;text-align:left;padding:8px 10px;border-radius:14px;border:1.5px solid rgba(8,15,84,.08);background:#fff;color:#080F54;font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
button.tq-tsl-item:hover,button.tq-tsl-item:focus-visible{border-color:#1326F3;box-shadow:0 12px 26px -16px rgba(19,38,243,.55);outline:none;transform:translateY(-1px)}
button.tq-tsl-item:hover .tq-tsl-go,button.tq-tsl-item:focus-visible .tq-tsl-go{background:#1326F3;color:#fff}
.tq-tsl-th{flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:#E8EBFF center/cover no-repeat}
.tq-tsl-ini{display:grid;place-items:center;color:#fff;font:800 16px var(--tq-display,system-ui)}
.tq-tsl-ini.tq-pal-0{background:linear-gradient(135deg,#1326F3,#6A5CFF)}
.tq-tsl-ini.tq-pal-1{background:linear-gradient(135deg,#080F54,#1326F3)}
.tq-tsl-ini.tq-pal-2{background:linear-gradient(135deg,#0E8F9C,#3BE3F2)}
.tq-tsl-ini.tq-pal-3{background:linear-gradient(135deg,#6A2BD9,#B06BFF)}
.tq-tsl-ini.tq-pal-4{background:linear-gradient(135deg,#C2410C,#F59E0B)}
.tq-tsl-ini.tq-pal-5{background:linear-gradient(135deg,#0F766E,#22C55E)}
.tq-tsl-tx{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.tq-tsl-tx b{font:700 15px/1.3 var(--tq-body,system-ui);color:#080F54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-tsl-tx small{font:500 14px/1.3 var(--tq-body,system-ui);color:#6D74A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-tsl-badge{flex:0 0 auto;font:700 14px/1.4 var(--tq-body,system-ui);color:#080F54;background:#FAE621;border-radius:999px;padding:2px 10px}
.tq-tsl-go{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#EEF0FF;color:#1326F3;transition:background .2s,color .2s}
.tq-tsl-none{margin:4px 0 0;padding:16px;border-radius:12px;background:#F5F6FF;color:#6D74A6;font-size:14px;text-align:center}
.tq-tsl-all{justify-self:start;display:inline-flex;align-items:center;gap:6px;font:700 14px var(--tq-body,system-ui);color:#1326F3;text-decoration:none}
.tq-tsl-all:hover{text-decoration:underline}
.tq-tsl-or{display:flex;align-items:center;gap:12px;margin:4px 0 0;font:600 14px var(--tq-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:#6D74A6}
.tq-tsl-or::before,.tq-tsl-or::after{content:"";flex:1;height:1px;background:rgba(8,15,84,.12)}
.tq-tsl-or span{flex:0 1 auto;text-align:center}

/* the windows' extras */
.tq-tsl-lead{margin:0;font:700 14px var(--tq-body,system-ui);color:#080F54}
.tq-tsl-home{display:flex;align-items:center;gap:10px;margin:0;font:600 14px var(--tq-body,system-ui);color:#080F54;cursor:pointer}
.tq-tsl-home input{width:18px;height:18px;margin:0;accent-color:#1326F3}
.tq-tsl-sub{display:block;text-align:center;font:700 14px var(--tq-body,system-ui);color:#1326F3;text-decoration:none}
.tq-tsl-sub:hover{text-decoration:underline}
.tq-home-card .tq-home-is{cursor:default}

/* Explore Communities: a card per Townsquare or portal */
.tq-tsl--page{gap:18px}
.tq-tsl--page .tq-tsl-q{max-width:560px}
.tq-tsl--page .tq-tsl-state{margin-bottom:12px}
.tq-tsl--page .tq-tsl-group+.tq-tsl-group{margin-top:24px}
.tq-tsl--page .tq-tsl-items{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:18px}
.tq-tsl-card{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:20px;cursor:default;box-shadow:0 1px 2px rgba(8,15,84,.06),0 10px 30px -12px rgba(8,15,84,.14)}
.tq-tsl-card:hover{border-color:rgba(19,38,243,.35);box-shadow:0 30px 60px -24px rgba(19,38,243,.35)}
.tq-tsl-card .tq-tsl-th{flex:none;width:100%;height:150px;border-radius:0}
.tq-tsl-card .tq-tsl-ini{font-size:36px}
.tq-tsl-card .tq-tsl-tx{padding:16px 18px 0}
.tq-tsl-card .tq-tsl-tx b{font-size:18px;white-space:normal}
.tq-tsl-card .tq-tsl-badge{position:absolute;top:12px;left:12px}
.tq-tsl-acts{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px 18px;margin-top:auto}
.tq-tsl-acts a{text-decoration:none}
.tq-tsl-acts .tq-btn-line{background:#fff}
/* the Communities page's cards also carry portals: category tag and description */
.tq-tsl--page .tq-tsl-items{align-items:stretch}
.tq-tsl-card .tq-tsl-tx{flex:none}
.tq-tsl-more{display:grid;gap:8px;padding:10px 18px 0}
.tq-tsl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.tq-tsl-tag{font:700 14px/1.4 var(--tq-body,system-ui);color:#3A4178;background:#EEF0FF;border-radius:999px;padding:2px 10px}
.tq-tsl-desc{margin:0;font:500 14px/1.5 var(--tq-body,system-ui);color:#4A5185;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* THE COMMUNITIES PAGE'S CARDS: a tall banner on top (5:4, 10px corners), the name, address and
   category under it. Hovering (or tabbing in) washes the banner in the brand blue and shows the
   description and Visit website on it. A touch screen cannot hover, so there both sit under the name.
   (container units: the overlay is exactly the banner's height, 80% of the card's width) */
.tq-tsl--page .tq-tsl-card{container-type:inline-size;border-radius:10px;border:1px solid rgba(8,15,84,.08);background:#fff;box-shadow:0 1px 2px rgba(8,15,84,.05),0 12px 28px -18px rgba(8,15,84,.35);transition:box-shadow .3s ease,transform .3s ease}
.tq-tsl--page .tq-tsl-card:is(:hover,:focus-within){transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(19,38,243,.45)}
.tq-tsl--page .tq-tsl-card .tq-tsl-th{height:auto;aspect-ratio:5/4;transition:transform .6s ease}
.tq-tsl--page .tq-tsl-card .tq-tsl-tx{padding:14px 16px 0;gap:1px}
.tq-tsl--page .tq-tsl-card .tq-tsl-tx b{font-size:16.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tq-tsl--page .tq-tsl-card .tq-tsl-more{padding:8px 16px 16px}
.tq-tsl--page .tq-tsl-card .tq-tsl-tag{font-weight:600;padding:2px 9px}
@media (hover:hover){
  .tq-tsl--page .tq-tsl-card .tq-tsl-desc,.tq-tsl--page .tq-tsl-card .tq-tsl-acts{position:absolute;left:0;right:0;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
  /* the description sits at the banner's foot, just above its buttons (one button or two) */
  .tq-tsl--page .tq-tsl-card .tq-tsl-desc{top:0;z-index:2;height:80cqw;padding:20px 20px 72px;margin:0;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-line-clamp:unset;transform:translateY(8px)}
  .tq-tsl--page .tq-tsl-card:has(.tq-tsl-acts > :nth-child(2)) .tq-tsl-desc{padding-bottom:118px}
  /* the button layer is the whole banner: the blue wash (a card without a description still gets it), its buttons stacked from the bottom */
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts{top:0;z-index:1;height:80cqw;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:20px;margin:0;background:color-mix(in srgb,var(--tq-blue,#1326F3) 92%,#080F54);transform:translateY(8px)}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts a{padding:8px 14px;font-size:14px;max-width:100%;white-space:normal;text-align:left}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts .tq-btn-blue{background:#fff;color:var(--tq-blue,#1326F3);border-radius:8px}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts .tq-btn-blue:is(:hover,:focus-visible){background:#080F54;color:#fff;border-color:#080F54}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts .tq-btn-line:is(:hover,:focus-visible){background:#fff;color:var(--tq-blue,#1326F3);border-color:#fff}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts .tq-btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);border-radius:8px}
  .tq-tsl--page .tq-tsl-card:is(:hover,:focus-within) :is(.tq-tsl-desc,.tq-tsl-acts){opacity:1;transform:none}
  .tq-tsl--page .tq-tsl-card:is(:hover,:focus-within) .tq-tsl-acts{pointer-events:auto}
  /* the whole card is the link: its first button stretches over it (the card clips it), the other buttons stay on top */
  .tq-tsl--page .tq-tsl-card{cursor:pointer}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts > :first-child{position:static}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts > :first-child::before{content:"";position:absolute;inset:0 0 -600px 0;z-index:0}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts > *{z-index:1}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts > :not(:first-child){position:relative;z-index:2}
}
@media (hover:none){
  .tq-tsl--page .tq-tsl-card .tq-tsl-desc{-webkit-line-clamp:2}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts{padding:0 16px 16px}
  .tq-tsl--page .tq-tsl-card .tq-tsl-acts a{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){.tq-tsl--page .tq-tsl-card *,.tq-tsl--page .tq-tsl-card::after{transition:none!important}}
/* a page without the Townsquare's body.tq (the Communities page) still hides what is hidden */
.tq-tsl [hidden],.tq-scrim[hidden]{display:none!important}
.tsc-ts{padding:56px 0 8px}
.tsc-ts__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:22px}
.tsc-ts__head h2{margin:6px 0 0}
/* The home window is the Subscribe page's form too (partials/ts_places), wide
   and compact: a short header, the fields two by two (Name | Email, Phone |
   State, City), the consent, Save and the place list below it. The body
   scrolls inside the window when it is taller than the screen; Save stays. */
#homeModal .tq-modal{width:min(960px,100%);display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
#homeModal .tq-mtop{flex:none;padding:18px 64px 16px 24px}
#homeModal .tq-mtop h3{font-size:22px;max-width:none;margin:6px 0 4px}
#homeModal .tq-mtop p{font-size:14px;max-width:none}
.tq-hform{flex:1;min-height:0;display:flex;flex-direction:column}
.tq-hbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(8,15,84,.25) transparent;padding:16px 24px 4px;display:grid;gap:12px;align-content:start}
.tq-hgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#homeModal .tq-lab{font-size:14px}
#homeModal .tq-lab input,#homeModal .tq-lab select{height:44px;padding:0 14px;margin-top:5px}
.tq-ferr{display:block;margin-top:4px;font-size:14px;font-weight:600;color:#B3261E}
.tq-ferr[hidden]{display:none}
.tq-hconsent{display:flex;align-items:flex-start;gap:10px;margin:0;font:400 14px/1.45 var(--tq-body,system-ui);color:#3A4178;cursor:pointer}
.tq-hconsent input{flex:none;width:16px;height:16px;margin:3px 0 0;accent-color:#1326F3}
.tq-hconsent a{color:#1326F3;font-weight:600}
#homeModal .tq-captcha:empty{display:none}
.tq-hfoot{flex:none;display:grid;gap:10px;padding:12px 24px 18px;border-top:1px solid rgba(8,15,84,.08)}
.tq-hfoot .tq-btn{width:100%}
@media (max-width:640px){.tq-hgrid{grid-template-columns:1fr}#homeModal .tq-mtop{padding:16px 56px 14px 16px}#homeModal .tq-mtop h3{font-size:20px}.tq-hbody{padding:14px 16px 4px}.tq-hfoot{padding:10px 16px 14px}}
/* THE PLACE PICKERS (js/places.js pickers()): Select2 on every State and City
   field, sized like the other fields; a light dropdown with its own search. */
.tq-s2.select2-container{flex:1;min-width:0;font:15px var(--tq-body,system-ui)}
.tq-s2 .select2-selection--single{height:48px;border:0;border-radius:14px;background:none;display:flex;align-items:center;outline:none}
.tq-s2 .select2-selection--single .select2-selection__rendered{flex:1;min-width:0;padding:0 28px 0 0;line-height:48px;color:#080F54}
.tq-s2 .select2-selection--single .select2-selection__placeholder{color:#6D74A6}
.tq-s2 .select2-selection--single .select2-selection__arrow{height:46px;right:0}
.tq-s2 .select2-selection__clear{font-size:18px;color:#6D74A6;margin-right:4px}
.tq-s2.tq-s2-any .select2-selection__clear{display:none}
.tq-lab .tq-s2.select2-container{display:block;margin-top:5px}
.tq-lab .tq-s2 .select2-selection--single{height:48px;padding:0 14px;border:1px solid rgba(8,15,84,.14);background:#F8F9FF}
.tq-lab .tq-s2 .select2-selection--single .select2-selection__arrow{right:10px}
#homeModal .tq-lab .tq-s2 .select2-selection--single{height:44px}
#homeModal .tq-lab .tq-s2 .select2-selection__rendered{line-height:44px}
#homeModal .tq-lab .tq-s2 .select2-selection__arrow{height:42px}
.tq-lab .tq-s2.select2-container--open .select2-selection--single,.tq-lab .tq-s2.select2-container--focus .select2-selection--single{border-color:var(--tq-blue,#1326F3);background:#fff}
.tq-s2-drop.select2-dropdown{color-scheme:light;background:#fff;color:#080F54;border:1px solid rgba(8,15,84,.14);border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -18px rgba(8,15,84,.35);z-index:1100;font:15px var(--tq-body,system-ui)}
.tq-s2-drop .select2-search--dropdown{padding:10px}
.tq-s2-drop .select2-search--dropdown .select2-search__field{height:34px;padding:0 10px;border:1px solid rgba(8,15,84,.18);border-radius:10px;font:14px var(--tq-body,system-ui);color:#080F54;background:#fff;color-scheme:light;outline:none}
.tq-s2-drop .select2-search--dropdown .select2-search__field:focus{border-color:var(--tq-blue,#1326F3)}
.tq-s2-drop .select2-results>.select2-results__options{max-height:280px}
.tq-s2-drop .select2-results__option{padding:10px 14px;font-size:15px}
.tq-s2-drop .select2-results__option[aria-selected=true]{background:#EEF0FF;color:#080F54}
.tq-s2-drop .select2-results__option--highlighted[aria-selected]{background:var(--tq-blue,#1326F3);color:#fff}
.tq-s2-drop.select2-dropdown{min-width:240px}
.tq-s2-drop .select2-results>.select2-results__options{color-scheme:light;scrollbar-width:thin;scrollbar-color:rgba(8,15,84,.25) transparent}
/* the place list: always open, in the window's one scroll (no box of its own) */
.tq-hpick{display:grid;gap:10px;border-top:1px solid rgba(8,15,84,.1);padding-top:14px;margin-bottom:12px}
#homeModal .tq-hpick .tq-tsl--modal .tq-tsl-list{max-height:300px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:2px 4px 2px 0;scrollbar-width:thin}
/* the home window's list: the chosen state's Townsquares, one picked as the home */
.tq-hpick[hidden]{display:none}
.tq-hpick-title{margin:0;text-align:center;font:600 20px/1.3 var(--tq-display,var(--tq-body,system-ui));color:#080F54}
.tq-tsl-set{flex:0 0 auto;font:700 14px/1.3 var(--tq-body,system-ui);color:#080F54}
#homeModal button.tq-tsl-item.is-picked{border-color:#1326F3;background:#F5F6FF;box-shadow:0 0 0 1px #1326F3}
/* the home pick is a checkbox: empty box, ticked on the picked row */
.tq-tsl-check{flex:0 0 24px;width:24px;height:24px;border-radius:7px;border:2px solid rgba(8,15,84,.28);background:#fff;display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s,color .2s}
#homeModal button.tq-tsl-item:hover .tq-tsl-check{border-color:#1326F3}
#homeModal button.tq-tsl-item.is-picked .tq-tsl-check{background:#1326F3;border-color:#1326F3;color:#fff}
@media (max-width:520px){.tq-tsl-set{display:none}}
