/* Telescopios Inteligentes - go-live layout fixes, 30 Aug 2026.
   Served from uploads under a new filename on every deploy. */

/* 1. Product grids: responsive, centred, with a maximum track width so a
      single card never stretches across the whole row. */
.ti-home-product-grid,
.ti-commerce-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  justify-content:center;
  gap:1.5rem;
}
/* A lone card must never stretch across the whole row. */
.ti-home-product-grid > *,
.ti-commerce-grid > *{max-width:480px;width:100%;justify-self:center}
@media (max-width:860px){
  .ti-home-product-grid,
  .ti-commerce-grid{grid-template-columns:minmax(0,1fr)}
}

/* 2. Card interiors are left aligned. */
.ti-home-product-card,
.ti-commerce-card,
.xr-pick,
.ti-review-directory__card{text-align:left}
.ti-home-product-card h3,.ti-home-product-card p,.ti-home-product-card ul,
.ti-home-product-card li,.ti-home-product-card small,.ti-home-product-card figcaption,
.ti-commerce-card h3,.ti-commerce-card p,.ti-commerce-card ul,
.ti-commerce-card li,.ti-commerce-card small,.ti-commerce-card figcaption,
.xr-pick h3,.xr-pick p,.xr-pick small,
.ti-review-directory__card h3,.ti-review-directory__card p,
.ti-review-directory__card small,.ti-review-directory__card figcaption{text-align:left}

/* 3. The caption must never sit on top of the photo. */
.ti-home-product-card__media,
.ti-product-media--card{
  display:flex;
  flex-direction:column;
  overflow:visible;
}
.ti-home-product-card__media img,
.ti-product-media--card img,
.ti-home-product-card figure.ti-home-product-card__media img{
  width:100%;
  height:190px;
  aspect-ratio:auto;
  object-fit:contain;
  background:#f0f4f6;
  border-radius:13px;
}
.ti-home-product-card__media figcaption,
.ti-product-media--card figcaption{
  display:-webkit-box;
  height:auto;
  min-height:3.1rem;
  margin:0;
  padding:.55rem 0 0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

/* 4. Wide tables break out of the prose column on desktop and scroll on mobile. */
.ti-comparison-scroll,
.ti-home-table-scroll,
.entry-content .wp-block-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:1180px){
  .ti-comparison-scroll,
  .ti-home-table-scroll,
  .entry-content .wp-block-table{
    width:min(1400px,calc(100vw - 2rem));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }
}
.ti-comparison-scroll table,
.ti-home-table-scroll table,
.entry-content .wp-block-table table{min-width:100%}

/* 5. Next-step button rows added to the guide pages. */
.ti-next-step{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1rem 0 1.75rem;
}
.ti-next-step .ti-review-action{flex:1 1 260px;text-align:center}

/* 6. Keep the picks strip readable when a chip wraps. */
.xr-picks__grid{gap:16px}
.xr-pick__name{min-height:0}


/* 7. Trim the fixed row heights so cards are not tall and thin. */
.ti-commerce-card h3,.ti-home-product-card h3{min-height:0}
.ti-commerce-card__price,.ti-home-product-card__price{min-height:0;margin-bottom:.6rem}
.ti-home-product-card__difference{min-height:0;margin-bottom:.6rem}
.ti-home-product-card__trust{min-height:0;margin:.35rem 0 .8rem}
.ti-home-product-card__media figcaption,.ti-product-media--card figcaption{min-height:2.6rem;-webkit-line-clamp:2}

/* 8. Review hero media must not fill the whole screen. */
.ti-product-media--review{max-width:820px;margin-left:auto;margin-right:auto}
.ti-product-media--review img{
  display:block;
  width:100%;
  max-height:460px;
  object-fit:contain;
  margin-left:auto;
  margin-right:auto;
}
.ti-editorial-figure img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain}

/* 9. Editorial SVG diagrams carry a viewBox but no width/height attributes. */
.ti-decision-graphic{margin:1.5rem 0}
.ti-decision-graphic img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/675;
}

/* 10. Gutenberg tables use figure.wp-block-table; match that specificity so the
      desktop breakout wins and the last column (CTA) is not pushed off screen. */
.entry-content figure.wp-block-table,
.et_pb_post_content figure.wp-block-table{
  display:block;
  box-sizing:border-box;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:1180px){
  .entry-content figure.wp-block-table,
  .et_pb_post_content figure.wp-block-table{
    width:min(1400px,calc(100vw - 2rem));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }
}