/* 40-archive.css — listings, filters, map, empty state.
   Selectors verified in docs/selectors.md. */

/* ---- WP1 · the sticky map ------------------------------------------------

   Voxel already sets position:sticky on the map widget. It never engages
   because the widget computes 15 593 px tall on /thuisbakkers/ — an element
   taller than the viewport has nothing left to stick with. The cause is the
   flex parent stretching the child: the parent computes align-self:auto, which
   in a row flex container resolves to stretch.

   :has() targets the parent without hardcoding an Elementor element id, so this
   survives Fatih moving the widget. */
.e-con:has(> .elementor-widget-ts-map){
  align-self:flex-start;                        /* the actual fix */
  position:sticky;
  top:var(--tb-sticky-top);
}
.elementor-widget-ts-map{
  height:calc(100vh - var(--tb-sticky-top) - var(--tb-gutter));
  max-height:calc(100vh - var(--tb-sticky-top) - var(--tb-gutter));
}
.elementor-widget-ts-map .ts-map,
.elementor-widget-ts-map > div{height:100%;}

/* ---- WP2 · the grid ------------------------------------------------------

   ONE OWNER: the Voxel post-feed setting (`ts_feed_column_no`) owns the column
   count at every breakpoint. Elementor emits it per template as
   repeat(4) / repeat(2) below 1024 / repeat(1) below 767.

   There used to be a `repeat(auto-fill, minmax(280px,1fr)) !important` here.
   It won on specificity and quietly overrode all three, which is why the page
   rendered five columns at wide viewports instead of the four that was set.
   Two owners for one property is what produced the 800px feed bug as well.
   Removed deliberately — if the count needs changing, change the widget.
   ------------------------------------------------------------------------ */

/* ---- WP2b · the row the feed sits in -------------------------------------

   This block used to force the feed wide with `flex:1 1 520px; width:auto`,
   because the feed widget was set to 69.7% and shared a flex row with the
   filters. Both of those are now fixed in template 256 itself
   (ts_feed_column_no 4, _element_custom_width 100%, container direction column),
   so the workaround has been removed: it was overriding the very setting that
   now does the job, and shrink-wrapping the feed back to 800px.

   What stays is the map on /thuisbakkers/, whose feed widget is still at 35%
   in template 252. That comes out when 252 is done. */
.post-type-archive-thuisbakkerij .e-con:has(> .elementor-widget-ts-post-feed){
  flex-wrap:wrap;
  align-items:flex-start;
}
.post-type-archive-thuisbakkerij .e-con > .elementor-widget-ts-search-form{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}
.post-type-archive-thuisbakkerij .e-con > .elementor-widget-ts-map{
  flex:0 0 38%;
  max-width:38%;
}
@media (max-width:1023px){
  .post-type-archive-thuisbakkerij .e-con > .elementor-widget-ts-map{
    flex:0 0 100%;max-width:100%;
  }
}

/* ---- WP4 · filters -------------------------------------------------------

   Voxel renders ts_filter_width as a percentage on each .ts-form-group, and
   lets the submit button flex-grow into whatever is left — which made it 909 px
   wide and pushed the search field onto a second row. Flex basis instead of
   percentages: the row stays correct when a filter is added or removed. */
.ts-filter-wrapper{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.ts-filter-wrapper > .ts-form-group{flex:1 1 168px;min-width:0;}
.ts-filter-wrapper > .ts-form-submit,
.ts-filter-wrapper > .ts-form-reset{flex:0 0 auto;}
.ts-filter-wrapper > .switcher-label:empty{display:none;}

.ts-filter{
  height:46px;
  border-radius:var(--tb-r-ctrl);
  border-color:var(--tb-border);
  background:var(--tb-surface);
  font-size:14px;
}
/* An active filter is a tint behind dark text — never the action colour, which
   belongs to buttons alone. */
.ts-filter.ts-filled,
.ts-filter.ts-selected{
  background:var(--tb-blush);
  border-color:var(--tb-accent-line);
  color:var(--tb-accent-text);
}

/* Submit and reset size to their labels. Voxel's commons.css sets
   `.ts-btn{width:100%}` for stacked mobile forms; in a filter row that turns
   "Ontdek" into a 947px bar. The widget's own 71% width setting has been
   removed (tier 2) so this is the only owner. */
.ts-filter-wrapper > .ts-form-submit,
.ts-filter-wrapper > .ts-form-reset{width:auto;}
.ts-filter-wrapper > .ts-form-submit .ts-btn{width:auto;padding:0 26px;}
.ts-filter-wrapper > .ts-form-reset .ts-btn{width:auto;padding:0 18px;}

/* Pagination rendered as two 680px blocks stacked full width. They are two
   controls, not two sections. */
.feed-pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}
/* Height and radius are carried here rather than on the widget. They were
   ts_fpag_btn_height 45px and ts_fpag_btn_radius 10px; both are design-system
   properties, so they belong with the tokens. */
.feed-pagination > .ts-btn{
  width:auto;
  min-width:0;
  height:44px;                      /* ≥44px touch target, §7 */
  padding:0 20px;
  border-radius:var(--tb-r-ctrl);
}
.feed-pagination > .ts-btn svg{width:18px;height:18px;}

.post-feed-header{
  margin:0 0 18px;
  font-size:14.5px;
  color:var(--tb-muted);
}

/* ---- Empty state ---------------------------------------------------------
   Real markup is <div class="ts-no-posts"><svg 80x80><p>text <a>link</a></p>.
   One icon, and one paragraph carrying both the message and the way out. */
.ts-no-posts:not(.hidden){
  display:flex !important;                 /* Voxel sets display:block inline */
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:560px;
  margin:40px auto;
  padding:40px 36px;
  background:var(--tb-surface);
  border-radius:var(--tb-r-card);
  box-shadow:var(--tb-lift);
}
.ts-no-posts:not(.hidden) > svg{
  width:28px;height:28px;
  box-sizing:content-box;
  padding:18px;
  border-radius:var(--tb-r-pill);
  background:var(--tb-blush);
  margin-bottom:18px;
  flex-shrink:0;
}
.ts-no-posts:not(.hidden) > svg path{fill:var(--tb-accent-line);}
.ts-no-posts:not(.hidden) > p{
  display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;
  font-family:var(--tb-serif);font-size:22px;font-weight:600;line-height:1.3;
  color:var(--tb-ink);
}
.ts-no-posts:not(.hidden) a{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 22px;border-radius:var(--tb-r-ctrl);
  background:var(--tb-action);color:#FFF;
  font-family:var(--tb-sans);font-size:14.5px;font-weight:700;text-decoration:none;
}
.ts-no-posts:not(.hidden) a:hover{background:var(--tb-action-hover);color:#FFF;}