/* Recepcionista IA - image and table standards, 30 August 2026.
   Deployed under a new filename: replacing a CSS file in place does not reach
   visitors behind the edge cache. */

/* ---------------------------------------------------------------------------
   1. Tables must never clip their text or their row action buttons.
   The article container is 1180px, but .ria-commercial-table needs 1220px and
   .ria-market-table needs 2350px, so the action column was cut off. Wide blocks
   now break out of the prose column and use the available viewport width.
   --------------------------------------------------------------------------- */
.ria-commercial-table,
.ria-plan-table,
.ria-rivals-table-wrap,
.ria-conversion-table,
.ria-market-table,
.ria-table-wrap,
.ria-table-shell {
    position: relative;      /* also contains absolutely positioned descendants */
    max-width: 100%;
}

@media (min-width: 1080px) {
    .ria-commercial-table,
    .ria-plan-table,
    .ria-rivals-table-wrap,
    .ria-conversion-table,
    .ria-market-table {
        left: 50%;
        width: min(1280px, calc(100vw - 48px));
        max-width: none;
        transform: translateX(-50%);
    }
}

/* The horizontal scrollbar has to stay visible and usable on every screen. */
.ria-commercial-table,
.ria-plan-table,
.ria-rivals-table-wrap,
.ria-conversion-table,
.ria-market-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Row action buttons must never be cropped by their cell. */
.ria-commercial-table td:last-child,
.ria-plan-table td:last-child,
.ria-conversion-table td:last-child,
.ria-market-table td:last-child {
    overflow: visible;
    white-space: normal;
}
.ria-commercial-table td:last-child a,
.ria-plan-table__affiliate,
.ria-plan-table__disabled,
.ria-conversion-table__action,
.ria-market-table__actions a,
.ria-market-table__actions > span {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   2. Visually hidden text.
   The theme left .screen-reader-text absolutely positioned at its static
   position. Inside the 760px rivals table that put it at x=659, which forced
   the whole page to scroll sideways on a 390px screen. Rule 1 above makes the
   table wrapper a containing block; this keeps the helper 1px and clipped.
   --------------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    border: 0 !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* ---------------------------------------------------------------------------
   3. Logo cards.
   Every product card and review summary now carries the 1200x630 logo card, so
   it fills the media box on white instead of being shrunk to a small mark.
   --------------------------------------------------------------------------- */
.ria-card-media--logocard {
    background: #fff;
}
.ria-card-media--logocard img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
    padding: clamp(8px, 2.5%, 22px);
    object-fit: contain;
    object-position: center;
}

/* Inline marks are now wide wordmarks rather than square icons. */
.ria-article-brandmark img { max-width: 190px; max-height: 30px; object-fit: contain; }
.ria-product-media__identity img { max-width: 200px; height: 38px; object-fit: contain; }
.ria-market-table__mark--product img { object-position: left center; }

/* ---------------------------------------------------------------------------
   4. Review screenshots: same shape and size on every review page.
   Each review shows the official website and the product interface in an
   identical 16:9 frame, contained so nothing is cropped or stretched.
   --------------------------------------------------------------------------- */
.ria-product-media__shot {
    padding: clamp(12px, 2vw, 26px);
    background: linear-gradient(145deg, #eef2fb, #f8f9fc);
    border-bottom: 1px solid rgba(29, 43, 80, .1);
}
.ria-product-media__shot-label,
.ria-product-media__screen .ria-product-media__shot-label {
    margin: 0 0 10px;
    color: var(--ria-coral, #e2653f);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ria-product-media__shot img,
.ria-product-media__screen img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 14px 36px rgba(29, 43, 80, .14);
}
.ria-product-media__shot-note {
    margin: 12px 0 0;
    color: var(--ria-muted, #5b6478);
    font-size: .8rem;
    line-height: 1.6;
}
.ria-product-media__shot-note a { color: var(--ria-blue, #2e5bff); font-weight: 850; }
.ria-product-media__screen { display: block; }

@media (max-width: 720px) {
    .ria-product-media__shot { padding: 9px; }
    .ria-product-media__shot img,
    .ria-product-media__screen img { border-radius: 11px; }
}