/* 30-cards.css — the preview card, used by every feed on the site.
   Root verified as .ts-preview; internals verified in the live DOM.

   Widget ids in template 255 (Baksels: Preview card), read from _elementor_data:
     a85a3ab  image        9f83856  soort (h2)     7207c0a  baker + city
     93957da  title (h1)   f458727  price          3f3013b  star rating
   Ids are used because Elementor emits no custom class on containers, and the
   three headings are otherwise indistinguishable from one another. */

.ts-preview{
  background:var(--tb-surface);
  border-radius:var(--tb-r-card);
  overflow:hidden;
  box-shadow:var(--tb-lift);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ts-preview:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 3px rgba(20,26,51,.06), 0 26px 50px -32px rgba(20,26,51,.5);
}

/* ---- the image ----------------------------------------------------------

   This is the single biggest lever on the archive. Voxel lets the photo keep
   its natural ratio, so a portrait shot renders 323x600 and the card is 793px.
   Worse, every card is a different height, so the grid never lines up.

   Scoped to the image widget, not to `img`: a blanket `.ts-preview img` rule
   also hits avatars and icons, which is the blunt-instrument mistake that made
   40-archive.css fight its own settings. */
.ts-preview .elementor-widget-image img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  height:auto;
  border-radius:var(--tb-r-img);
  display:block;
}
/* The wrapping section sized itself to the 600px image; let it follow. */
.ts-preview .elementor-widget-image,
.ts-preview .elementor-widget-image > a{
  display:block;
  line-height:0;
}

/* ---- card internals, in reading order -----------------------------------

   The template puts the title and the soort label side by side in one flex row
   (title 198px, soort 80px). The canvas stacks them: soort first on its own
   line, then the title. In a grid of four the eye scans the left edge down, so
   the soort tells you what each card IS before you read what it is called.

   Done with flex order rather than by moving widgets, so the template stays
   as Fatih built it. */
.ts-preview .e-con-full:has(> .elementor-element-93957da){
  flex-wrap:wrap;
  align-items:flex-start;
  gap:2px;
}
.ts-preview .elementor-element-9f83856{   /* soort */
  order:-1;
  flex:0 0 100%;
  width:100% !important;                  /* Elementor sets a 80px widget width */
}
.ts-preview .elementor-element-93957da{   /* title */
  flex:0 0 100%;
  width:100% !important;                  /* Elementor sets a 198px widget width */
}

.ts-preview .elementor-element-9f83856 .elementor-heading-title{
  font-family:var(--tb-serif);
  font-style:italic;
  font-weight:400;
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--tb-accent-text);
}
.ts-preview .elementor-element-93957da .elementor-heading-title{
  font-family:var(--tb-serif);
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--tb-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* baker + city: one clamped line, quiet. */
.ts-preview .elementor-element-7207c0a,
.ts-preview .elementor-element-7207c0a p{
  font-size:13px;
  line-height:1.4;
  color:var(--tb-muted);
  margin:0;
}
.ts-preview .elementor-element-7207c0a p{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* price: plain text, no box, no badge. */
.ts-preview .elementor-element-f458727 .elementor-heading-title{
  font-family:var(--tb-sans);
  font-size:15px;
  font-weight:700;
  color:var(--tb-ink);
  background:none;
  padding:0;
}

@media (prefers-reduced-motion:reduce){
  .ts-preview{transition:none;}
  .ts-preview:hover{transform:none;}
}


/* ---- baker line and price on their own rows -----------------------------

   The card root is a flex row, so the baker container (f516e99) and the price
   container (e90e22e) rendered side by side: "€ 22 bakker EliDaily uit
   Amersfoort" on one line.

   Changing the root to column was tried and reverted — it moved the price above
   the image, because the image section is not first in DOM order. Wrapping the
   row and giving the two text blocks a full-width basis leaves the image
   section exactly as it was. */
.ts-preview > .elementor{flex-wrap:wrap;}
.ts-preview .elementor-element-f516e99,
.ts-preview .elementor-element-e90e22e{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}