/* ============================================================================
   backend-feed - the backend's post cards: the dashboard's Live Community Feed /
   My Activity tabs, /dashboard/live-feed, /dashboard/activities/<type>, ...
   (and every other backend post list: beckend_colors.php, which both backend
   <head>s include, links it once, after the Townsquare page's
   themes/townsquare/css/townsquare.css).

   The post cards (enduser/sportlights/post_loop.php, list style) carry the
   Townsquare feed card's classes (.tq-post, .tq-av, .tq-pbody, .tq-media,
   .tq-ex, .tq-pacts, .tq-act ...), so their look IS townsquare.css's - nothing
   of it is restated here. This file only:
     1. points the card's --tq-* tokens at the portal's colours,
     2. takes Bootstrap's card / row / col boxes out of the way inside a card
        (the classes stay: post_loop_script.php's Read More, comments and
        share hooks need them),
     3. styles the backend-only pieces (three-dots menu, type chip, title),
     4. draws the Category chips above the feed (.live-feed-filter-pills).
   Colours: var(--site_color_g), var(--site_font_color_g), var(--secondary-color)
   only. 14px is the smallest text.
   ============================================================================ */

/* 1. tokens: the Townsquare card, in this portal's colours and the backend's font */
.tq-post.list_style_posts {
  --tq-blue: var(--site_color_g);
  --tq-navy: var(--site_font_color_g);
  --tq-soft: color-mix(in srgb, var(--site_font_color_g) 78%, #fff);
  --tq-muted: color-mix(in srgb, var(--site_font_color_g) 55%, #fff);
  --tq-line: color-mix(in srgb, var(--site_font_color_g) 10%, transparent);
  --tq-line-hi: color-mix(in srgb, var(--site_color_g) 45%, transparent);
  --tq-white: #fff;
  --tq-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tq-display: var(--tq-body);
  --tq-rest: 0 1px 2px rgba(8, 15, 84, .05), 0 12px 28px -20px rgba(8, 15, 84, .45);
  --tq-grad-edge: linear-gradient(135deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 55%, #b9a8ff) 45%, var(--secondary-color));
  --tq-tint: color-mix(in srgb, var(--site_color_g) 8%, #fff);
  --c: var(--site_color_g);
  --tq-danger: #D92D20; /* an ended event (.tq-past): a status red, not the accent */
  --bf-card: 1; /* post_loop_script.php: this card opens Read More the Townsquare way */
}

/* 2. the card: the list item itself is the .tq-post; the Bootstrap card inside is only a holder */
.tq-post.list_style_posts { margin: 0 0 14px; box-shadow: var(--tq-rest); scroll-margin-top: 130px; /* Read More / Close bring the card into view below the fixed backend header (115px) */ }
.tq-post.list_style_posts:hover { box-shadow: 0 30px 56px -28px color-mix(in srgb, var(--site_color_g) 55%, transparent); }
.tq-post.list_style_posts > .card { background: none; border-radius: 0; }
.tq-post.list_style_posts .card-header,
.tq-post.list_style_posts .card-footer { padding: 0; background: none; border: 0; }
.tq-post.list_style_posts .card-header { margin-bottom: 12px; }
.tq-post.list_style_posts .card-header > .d-flex { gap: 10px; }
.tq-post.list_style_posts .card-header > .d-flex > .d-flex { align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tq-post.list_style_posts .card-header a { text-decoration: none; }
.tq-post.list_style_posts img.tq-av { width: 42px; height: 42px; padding: 0; object-fit: cover; }
.tq-post.list_style_posts .tq-who2.ml-2 { margin-left: 12px !important; }
.tq-post.list_style_posts .tq-who2 p { margin: 0; font: 700 15.5px/1.3 var(--tq-body); color: var(--tq-navy) !important; }
.tq-post.list_style_posts .tq-follow { min-height: 32px; padding: 5px 12px; border: 0; border-radius: 9px; background: var(--site_color_g); color: #fff; font: 700 14px/1.4 var(--tq-body); cursor: pointer; }
.tq-post.list_style_posts .tq-follow:hover { background: color-mix(in srgb, var(--site_color_g) 85%, #fff); color: #fff; }
/* the three-dots menu sits where the front card has its format badge */
.tq-post.list_style_posts .card-header .dropdown { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
/* the format badge (tq_ts_card_facts), in the portal's accent */
.tq-post.list_style_posts .tq-fbadge { flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--site_color_g); }
.tq-post.list_style_posts .tq-fbadge svg { width: 18px; height: 18px; }
.tq-post.list_style_posts .card-header .dot_btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none !important; box-shadow: none !important; color: var(--tq-soft); }
.tq-post.list_style_posts .card-header .dot_btn:hover,
.tq-post.list_style_posts .card-header .dot_btn:focus-visible,
.tq-post.list_style_posts .card-header .show > .dot_btn { color: var(--site_color_g); }
.tq-post.list_style_posts .card-header .dot_btn svg { padding: 0 !important; }
.tq-post.list_style_posts .card-header .dropdown-item { font-size: 14px; }

/* body: Bootstrap's row (negative margins, display:flex!important) and cols (max-width, padding) off */
.tq-post.list_style_posts .tq-pbody { display: grid !important; margin: 0; padding: 0; flex: none; height: auto; }
.tq-post.list_style_posts .tq-pbody > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
/* no picture, or Read More opened the post (post_loop_script swaps col-md-8 for col-12): text takes the full width */
.tq-post.list_style_posts .tq-pmain:not(.col-md-8) { grid-column: 1 / -1; }
.tq-post.list_style_posts .tq-media img.rounder-img { border-radius: 0; }
.tq-post.list_style_posts .tq-media .v_box { position: relative; height: 100%; }
.tq-post.list_style_posts .tq-media .v_thumb { width: 100%; height: 100%; object-fit: cover; }

/* 3. type chip, title, excerpt, Read More */
.tq-post.list_style_posts .card_content.set_eq_h { height: auto !important; margin-bottom: 0 !important; }
/* the type label reads like the front card's crumb (accent text, no pill) */
.tq-post.list_style_posts .tq-pmain .badge { display: inline-flex; align-items: center; margin: 0 0 6px; padding: 0; border-radius: 0; background: none !important; color: var(--site_color_g); font: 600 14px/1.4 var(--tq-body); letter-spacing: 0; text-transform: none; white-space: normal; }
.tq-post.list_style_posts .tq-pmain .badge a { color: var(--site_color_g) !important; }
.tq-post.list_style_posts .card_content > p { margin: 0; }
.tq-post.list_style_posts .post_titlee { display: block; margin: 0 0 8px; font: 800 clamp(19px, 1.7vw, 22px)/1.25 var(--tq-body); letter-spacing: -.01em; color: var(--tq-navy); }
/* beckend_colors.php paints these links in the accent with !important; the card keeps its ink title */
body .tq-post.list_style_posts .post_titlee a.spotlight-title { color: var(--tq-navy) !important; font: inherit; letter-spacing: inherit; text-decoration: none; }
body .tq-post.list_style_posts .post_titlee a.spotlight-title:hover { color: var(--site_color_g) !important; }
.tq-post.list_style_posts .tq-pmain .mb-3 { margin-bottom: 0 !important; }
/* post_loop.php's own .tx-14 rule (16px, 15 lines on desktop) comes later in the page: the card keeps townsquare.css's 3-line excerpt */
.tq-post.list_style_posts .tq-ex { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tq-soft) !important; -webkit-line-clamp: 3; line-clamp: 3; }
body .tq-post.list_style_posts .tq-readmore, body .tq-post.list_style_posts .tq-readmore:hover { color: transparent !important; }
.tq-post.list_style_posts .tq-readmore { display: inline-block; margin-top: 12px; font-size: 15px; text-decoration: none; background-image: linear-gradient(90deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 55%, #b9a8ff)); }
.tq-post.list_style_posts .tq-readmore svg { display: none; }
/* event date badge and facts (townsquare.css), in the portal's colours */
.tq-post.list_style_posts .tq-media .tq-when { z-index: 1; color: var(--site_font_color_g); }
.tq-post.list_style_posts .tq-media .tq-when small { color: var(--site_color_g); }
.tq-post.list_style_posts .tq-facts span { background: color-mix(in srgb, var(--site_font_color_g) 5%, #fff); }
.tq-post.list_style_posts .tq-facts svg { color: var(--site_color_g); }

/* Read More opened in the card (post_loop_script.php adds .tq-open; the box is townsquare.css's .tq-more-txt) */
.tq-post.list_style_posts.tq-open .card_content.set_eq_h > p,
.tq-post.list_style_posts.tq-open .tq-facts { display: none; }
.tq-post.list_style_posts.tq-open .tq-more-txt { scrollbar-color: color-mix(in srgb, var(--site_color_g) 45%, transparent) transparent; }
.tq-post.list_style_posts .tq-more-txt::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--site_color_g) 45%, transparent); }
.tq-post.list_style_posts .tq-full-x { color: var(--site_font_color_g); font-size: 14px; }
.tq-post.list_style_posts .tq-full-x:hover { background: var(--site_color_g); border-color: var(--site_color_g); color: #fff; }
.tq-post.list_style_posts .tq-full-body { color: var(--tq-soft); }

/* action row: compact, one line at desktop. The selectors are long on purpose: the legacy theme CSS paints
   .list_style_posts .card-footer .post-actions a (and their children on hover) with !important greys and a
   hardcoded purple. Child combinators only (>), so nothing here reaches into the share menu inside Share. */
body .tq-post.list_style_posts .card-footer .tq-pacts { align-items: center; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--site_font_color_g) 7%, transparent); }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act { gap: 6px; margin: 0 !important; padding: 6px 10px; border-radius: 8px; background: none; color: var(--tq-soft) !important; font: 600 14px/1.3 var(--tq-body); text-decoration: none; }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act > * { margin: 0 !important; color: inherit !important; stroke: currentColor !important; }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act > p,
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act > span { font: 600 14px/1.3 var(--tq-body); }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act > svg,
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act > i > svg { width: 16px; height: 16px; flex: 0 0 16px; }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act:hover,
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act:focus-visible { background: color-mix(in srgb, var(--site_color_g) 8%, #fff); color: var(--site_color_g) !important; }
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act.tq-act-del:hover,
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act.tq-act-del:focus-visible { background: #FDE7E5; color: #A6302A !important; }
/* the views count is a figure, not a button */
body .tq-post.list_style_posts .card-footer .tq-pacts > .tq-act.tq-views:hover { background: none; color: var(--tq-soft) !important; cursor: default; }
.tq-post.list_style_posts .comment-section { margin-top: 10px; }

/* Share opens a floating panel (post_loop_script.php toggles .share-container); a2a draws the networks in it */
.tq-post.list_style_posts:has(.share-container[style*="block"]) { z-index: 6; }
.tq-post.list_style_posts .share-btn2 > .share-container { top: calc(100% + 6px) !important; left: 0; z-index: 30; }
.tq-post.list_style_posts .share-container .a2a_kit {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: max-content; min-width: 300px;
  padding: 6px !important; border-radius: 12px !important; background: #fff !important;
  box-shadow: 0 1px 2px rgba(8, 15, 84, .05), 0 18px 40px -18px rgba(8, 15, 84, .45), 0 0 0 1px color-mix(in srgb, var(--site_font_color_g) 6%, transparent);
}
.tq-post.list_style_posts .share-container .a2a_kit a {
  display: flex !important; align-items: center; gap: 10px; float: none !important; margin: 0 !important;
  padding: 8px 12px !important; border-radius: 8px; background: none;
  color: var(--site_font_color_g) !important; font: 600 14px/1.3 var(--tq-body); white-space: nowrap; text-decoration: none;
}
.tq-post.list_style_posts .share-container .a2a_kit a:hover { background: color-mix(in srgb, var(--site_color_g) 6%, #fff); }
.tq-post.list_style_posts .share-container .a2a_kit a .a2a_svg { flex: 0 0 24px; width: 24px !important; height: 24px !important; line-height: 24px !important; border-radius: 6px !important; }
.tq-post.list_style_posts .share-container .a2a_kit a .a2a_svg svg { width: 24px !important; height: 24px !important; }
.tq-post.list_style_posts .share-container .a2a_kit a .a2a_label { position: static !important; display: inline !important; padding: 0 !important; color: inherit !important; font: inherit !important; }
@media (max-width: 575.98px) {
  .tq-post.list_style_posts .share-container .a2a_kit { grid-template-columns: minmax(0, 1fr); min-width: 200px; }
}
/* the dashboard's list row clips sideways only (its overflow:hidden would cut the Share panel of the last card) */
.loaded_ajax.sliderrr_spot { overflow: visible !important; overflow-x: clip !important; }

/* 4. Category chips above the feed: one white bar like the dashboard's tab bar (lobby/main_tab_nav.php) */
.live-feed-filter-pills {
  display: flex; flex-wrap: nowrap; gap: 6px;
  width: fit-content; max-width: 100%;
  margin: 16px 0 4px; padding: 5px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(8, 15, 84, .05), 0 12px 28px -20px rgba(8, 15, 84, .45);
  overflow-x: auto; scrollbar-width: none;
}
.live-feed-filter-pills::-webkit-scrollbar { display: none; }
.live-feed-filter-pills .pill-filter {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 14px; border: 0; border-radius: 10px; background: none;
  color: color-mix(in srgb, var(--site_font_color_g) 80%, #fff);
  font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  cursor: pointer; transition: background .2s, color .2s;
}
.live-feed-filter-pills .pill-filter:hover { color: var(--site_color_g); }
.live-feed-filter-pills .pill-filter.active,
.live-feed-filter-pills .pill-filter.active:hover {
  background: linear-gradient(135deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 55%, #b9a8ff));
  color: #fff;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--site_color_g) 90%, transparent);
}
.live-feed-filter-pills .pill-filter:focus-visible { outline: 2px solid var(--site_color_g); outline-offset: 2px; }
/* a Category with nothing in it stays clickable, only quieter */
.live-feed-filter-pills .pill-filter.is-empty:not(.active) { opacity: .55; }
.live-feed-filter-pills .pill-count {
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--site_color_g) 12%, transparent);
  color: inherit; font-size: 14px; font-weight: 700; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.live-feed-filter-pills .pill-filter.active .pill-count { background: rgba(255, 255, 255, .22); }
.live-feed-filter-pills .pill-count:empty { display: none; }

/* 5. Load more under a feed (#ajax_load_more.live-feed-load-more): centred, the design's outlined button with a
   down arrow. While the next page loads, the feed's own script disables the button (lobby/js_include.php,
   dashboard_pages/*.php): disabled = "Loading..." with a spinner; the script hides it when nothing is left. */
.btn.live-feed-load-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 22px auto 0; padding: 12px 28px;
  border: 1.5px solid color-mix(in srgb, var(--site_color_g) 35%, transparent); border-radius: 12px;
  background: #fff; color: var(--site_color_g); box-shadow: none;
  font-size: 15px; font-weight: 800; line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s;
}
.btn.live-feed-load-more:hover { background: var(--site_color_g); border-color: var(--site_color_g); color: #fff; }
.btn.live-feed-load-more:focus { box-shadow: none; }
.btn.live-feed-load-more:focus-visible { outline: 2px solid var(--site_color_g); outline-offset: 3px; }
.btn.live-feed-load-more > span:empty { display: none; }
.btn.live-feed-load-more::after {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .2s;
}
.btn.live-feed-load-more:hover::after { transform: translateY(3px); }
/* loading */
.btn.live-feed-load-more:disabled,
.btn.live-feed-load-more:disabled:hover { opacity: 1; cursor: progress; gap: 0; font-size: 0; background: #fff; color: var(--site_color_g); border-color: color-mix(in srgb, var(--site_color_g) 35%, transparent); }
.btn.live-feed-load-more:disabled::before { content: "Loading\2026"; font-size: 15px; }
.btn.live-feed-load-more:disabled::after {
  flex-basis: 16px; width: 16px; height: 16px; margin-left: 10px;
  -webkit-mask: none; mask: none; background: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: bfSpin .7s linear infinite; transform: none;
}
@keyframes bfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.live-feed-load-more:disabled::after { animation-duration: 2s; } }

/* 6. Comments under a card: the Townsquare card's conversation (ts_comments.php + js/comments.js), in this portal's colours */
.tq-post.list_style_posts .comment-section .tq-cm { padding-top: 10px; }
.tq-post.list_style_posts .comment-section .tq-cav { flex: 0 0 32px; width: 32px; height: 32px; background: var(--tq-tint); color: var(--site_color_g); }
.tq-post.list_style_posts .comment-section .tq-cm-bubble { color: var(--site_font_color_g); font-size: 14px; }
.tq-post.list_style_posts .comment-section .tq-cm-bubble b { font-size: 14px; font-weight: 700; color: var(--site_font_color_g); }
.tq-post.list_style_posts .comment-section .tq-cm-meta,
.tq-post.list_style_posts .comment-section .tq-cm-empty,
.tq-post.list_style_posts .comment-section .tq-cm-more { color: var(--tq-soft); font-size: 14px; }
.tq-post.list_style_posts .comment-section .tq-cm-del { margin-left: 8px; font-weight: 600; color: var(--tq-soft); }
.tq-post.list_style_posts .comment-section .tq-cm-del:hover { color: #A6302A; }
.tq-post.list_style_posts .comment-section .tq-cm-list { scrollbar-color: color-mix(in srgb, var(--site_color_g) 45%, transparent) transparent; }
.tq-post.list_style_posts .comment-section .tq-cm-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--site_color_g) 45%, transparent); }
.tq-post.list_style_posts .comment-section .tq-cm-field:focus-within { border-color: var(--site_color_g); }
.tq-post.list_style_posts .comment-section .tq-cm-field textarea { min-height: 0; height: auto; box-shadow: none; color: var(--site_font_color_g); font-size: 14px; }
.tq-post.list_style_posts .comment-section .tq-cm-send { background: var(--site_color_g); color: #fff; }
.tq-post.list_style_posts .comment-section .tq-cm-send:hover { background: color-mix(in srgb, var(--site_color_g) 85%, #000); }
.tq-post.list_style_posts .comment-section .tq-cerr { margin: 6px 0 0; color: #A6302A; font-size: 14px; }
/* comments.js asks with SweetAlert in the Townsquare look (.tq-swal); the backend has no Townsquare buttons, so they are drawn here */
.swal2-popup.tq-swal .swal2-actions .tq-btn-line,
.swal2-popup.tq-swal .swal2-actions .tq-btn-blue { margin: 0 4px; padding: 10px 18px; border-radius: 10px; box-shadow: none !important; font: 700 14px/1.2 "Manrope", system-ui, sans-serif; cursor: pointer; }
.swal2-popup.tq-swal .swal2-actions .tq-btn-line { border: 1.5px solid color-mix(in srgb, var(--site_color_g) 35%, transparent) !important; background: #fff !important; color: var(--site_color_g) !important; }
.swal2-popup.tq-swal .swal2-actions .tq-btn-blue { border: 0 !important; background: var(--site_color_g) !important; color: #fff !important; }
.swal2-popup.tq-swal .swal2-actions .tq-btn-blue.tq-swal-del { background: #A6302A !important; }
.swal2-popup.tq-swal .swal2-actions button:focus-visible { outline: 2px solid var(--site_color_g); outline-offset: 2px; }

/* 7. The opened post's picture carousel (ajax_post_detail.php, Splide): no grey letterbox, the picture fills the box */
.tq-post.list_style_posts #primary-slider,
.tq-post.list_style_posts #primary-slider .splide__track,
.tq-post.list_style_posts #primary-slider .splide__list,
.tq-post.list_style_posts #primary-slider .splide__slide { background-color: transparent !important; }
.tq-post.list_style_posts #primary-slider { border-radius: 14px; overflow: hidden; }
.tq-post.list_style_posts #primary-slider .splide__slide { background-size: cover !important; border-radius: 14px; overflow: hidden; }
.tq-post.list_style_posts .tq-full-body #primary-slider .splide__slide img { width: 100% !important; height: 100% !important; max-height: none; object-fit: cover; border-radius: 14px; }
.tq-post.list_style_posts #primary-slider .splide__arrow { width: 36px; height: 36px; border-radius: 50%; background: #fff; opacity: 1; box-shadow: 0 2px 6px rgba(8, 15, 84, .12), 0 8px 18px -8px rgba(8, 15, 84, .35); }
.tq-post.list_style_posts #primary-slider .splide__arrow svg { width: 14px; height: 14px; fill: var(--site_font_color_g); }

/* 8. the Category chip bar's arrows (themes/shared/js/backend-feed.js wraps the bar in .bf-pills) */
.bf-pills { position: relative; width: fit-content; max-width: 100%; margin: 16px 0 4px; }
.bf-pills > .live-feed-filter-pills { margin: 0; }
.bf-pills::before,
.bf-pills::after { content: ""; position: absolute; top: 5px; bottom: 5px; z-index: 1; width: 64px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.bf-pills::before { left: 5px; border-radius: 10px 0 0 10px; background: linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0)); }
.bf-pills::after { right: 5px; border-radius: 0 10px 10px 0; background: linear-gradient(to left, #fff 45%, rgba(255, 255, 255, 0)); }
.bf-pills.bf-more-l::before,
.bf-pills.bf-more-r::after { opacity: 1; }
.bf-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--site_font_color_g); box-shadow: 0 2px 6px rgba(8, 15, 84, .12), 0 8px 18px -8px rgba(8, 15, 84, .35); transform: translateY(-50%); cursor: pointer; }
.bf-arrow[hidden] { display: none; }
.bf-arrow:hover { color: var(--site_color_g); }
.bf-arrow:focus-visible { outline: 2px solid var(--site_color_g); outline-offset: 2px; }
.bf-arrow-l { left: 8px; }
.bf-arrow-r { right: 8px; }
.bf-arrow-r svg { transform: scaleX(-1); }
@media (max-width: 575.98px) { .bf-arrow { width: 28px; height: 28px; } }

/* phones: one column (the 300px media column below is written :not(.tq-open):not(.tq-noimg), which out-ranks a plain
   max-width rule, so this one is body-prefixed) */
@media (max-width: 760px) {
  body .tq-post.list_style_posts:not(.tq-open):not(.tq-noimg) .tq-pbody { grid-template-columns: minmax(0, 1fr); }
}

/* ---- owner's backend-only tuning (2026-10-05); the front-end card is untouched ---- */
.tq-post.list_style_posts:not(.tq-open):not(.tq-noimg) .tq-pbody { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.tq-post.list_style_posts.tq-open .tq-pbody { grid-template-columns: minmax(0, 1fr) !important; }
.tq-post.list_style_posts .tq-media { aspect-ratio: auto; }
.tq-post.list_style_posts .tq-follow:hover { color: #fff !important; }
.tq-post.list_style_posts .card-header .dot_btn { background: none !important; }
.tq-post.list_style_posts .tq-full-body .btn { background: var(--site_color_g); color: #fff; margin-bottom: 10px; }
.tq-post.list_style_posts .tq-full-body .btn:hover { color: #fff; filter: brightness(1.08); }
.tq-post.list_style_posts .tq-full-body .gallery-section img,
.tq-post.list_style_posts .tq-full-body .jobs_spotlight_slider img { width: auto !important; max-width: 100%; max-height: 400px; }
.tq-post.list_style_posts .eq_hight { margin-bottom: 0 !important; }
.tq-post.list_style_posts .card-footer { padding-bottom: 4px !important; }
/* the opened post: play button at its own size (the gallery's natural-size rule must not blow it up) */
.tq-post.list_style_posts .tq-full-body .play_icon img { width: 64px !important; height: auto !important; max-height: none !important; border-radius: 0 !important; }
.tq-post.list_style_posts .tq-full-body #primary-slider .splide__slide .play_icon img, .tq-post.list_style_posts .tq-media .play_icon img { width: 64px !important; height: auto !important; object-fit: contain !important; }
/* tags as chips */
.tq-post.list_style_posts .tq-full-body .post-tag-cloud ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.tq-post.list_style_posts .tq-full-body .post-tag-cloud li { display: inline-flex !important; margin: 0 !important; padding: 0; }
.tq-post.list_style_posts .tq-full-body .post-tag-cloud .item-heading { font-size: 14px; font-weight: 800; color: var(--site_font_color_g, #0b1a4a); margin-right: 2px !important; }
.tq-post.list_style_posts .tq-full-body .post-tag-cloud a.tagss { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--site_color_g) 8%, #fff); color: var(--site_color_g) !important; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s, color .2s; }
.tq-post.list_style_posts .tq-full-body .post-tag-cloud a.tagss:hover { background: var(--site_color_g); color: #fff !important; }
/* the header's type and video icons: a readable size */
.tq-post.list_style_posts .tq-fbadge { width: 34px !important; height: 34px !important; }
.tq-post.list_style_posts .tq-fbadge svg { width: 22px !important; height: 22px !important; }
.tq-post.list_style_posts .card-header .iconn_fix, .tq-post.list_style_posts .card-header .iconn_fix i { font-size: 20px !important; }
.tq-post.list_style_posts .card-header svg:not(.tq-fbadge svg) { width: 22px; height: 22px; }
/* readable excerpt that fills the height of the (square) picture */
.tq-post.list_style_posts .tq-ex { font-size: 16px !important; line-height: 1.7 !important; color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 82%, #fff) !important; -webkit-line-clamp: 7 !important; line-clamp: 7; }
@media (max-width: 760px) { .tq-post.list_style_posts .tq-pbody { grid-template-columns: minmax(0, 1fr); } .tq-post.list_style_posts .tq-ex { -webkit-line-clamp: 4 !important; line-clamp: 4; } }

/* owner: the chip bar's arrows sit together above the bar, at its top right; squarer; accent fill */
.bf-pills { overflow: visible; }
.bf-arrow { top: -58px; transform: none; width: 34px; height: 34px; border-radius: 9px; background: var(--site_color_g); color: #fff; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--site_color_g) 90%, transparent); }
.bf-arrow:hover { color: #fff; filter: brightness(1.1); }
.bf-arrow-r { left: auto; right: 0; }
.bf-arrow-l { left: auto; right: 42px; }
/* both stay in place while the row overflows; the one with nowhere to go is dimmed */
.bf-pills:is(.bf-more-l, .bf-more-r) .bf-arrow[hidden] { display: grid !important; opacity: .35; pointer-events: none; }
@media (max-width: 767.98px) { .bf-pills:is(.bf-more-l, .bf-more-r) { padding-top: 42px; } .bf-pills::before, .bf-pills::after { top: 47px; } .bf-arrow { top: 0; width: 32px; height: 32px; } .bf-arrow-l { right: 40px; } }
/* owner: no fade over the chips at the bar's ends */
.bf-pills::before, .bf-pills::after { display: none !important; }