/* CRO kit for thamesrivercruises.org — Thames Slate & Poppy theme (site.config.md palette).
   Adapted from the verified liriver.cruises kit (2026-09-24) with the opening-card
   styling Oleg approved on 2026-09-25: the intro recommendation is a complete compact
   card (visible background, border, padding, radius, hierarchy) and its affiliate CTA
   and end-module navigation button sit in a flex row with an explicit gap. */

.cro{box-sizing:border-box;color:#1b2530;font-family:inherit}
.cro[hidden],.cro [hidden]{display:none!important}
.cro p{margin:0 0 10px!important}
.cro-text{border-left:3px solid #235a83;padding:14px 18px;margin:26px 0;background:#f2f0e6}
.cro .cro-facts{font-size:.88rem;line-height:1.55;color:#46586a}
.cro-hook{font-weight:650;line-height:1.5}
.cro-link{display:inline-block;white-space:normal;overflow-wrap:anywhere;font-weight:700;line-height:1.45;padding:10px 0;min-height:44px;color:#235a83;text-decoration:underline;text-underline-offset:4px}
.cro button,.cro select,.cro input{font:inherit;min-height:44px;max-width:100%;border:1px solid #9db0c0;border-radius:6px;padding:9px 12px;background:#fff;color:#1b2530}
.cro button{cursor:pointer;font-weight:650}
.cro button:focus-visible,.cro a:focus-visible,.cro input:focus-visible,.cro select:focus-visible,.cro summary:focus-visible{outline:3px solid #c8362e;outline-offset:3px}
.cro-image{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;background:#f2f0e6;border:1px solid #d8d2c2;border-radius:14px;overflow:hidden;margin:30px 0}
.cro-image img{width:100%;height:100%;max-height:320px;object-fit:cover;margin:0}
.cro-image .cro-copy{padding:20px 20px 20px 0;min-width:0}
.prose .cro-image img,.prose img{max-width:100%}
.cro-schedule,.cro-gyg{padding:22px;border:1px solid #c3ccd4;background:#f4f2ea;border-radius:12px;margin:14px 0 12px}
.cro-calendar{margin:14px 0}
.cro-calendar label{display:block;font-size:.9rem;font-weight:650}
.cro-calendar input{display:block;margin:8px 0;width:min(100%,270px)}
.cro-schedule-status{font-size:.85rem;line-height:1.5}
.cro-provider{min-width:0;margin-top:14px}
.cro-provider iframe{max-width:100%}

/* Opening card (2026-09-25 requirement): a complete compact card, not bare paragraphs. */
.cro-intro{background:#f2efe4;border:1px solid #d8d2c2;border-radius:14px;padding:20px 22px;margin:24px 0 28px;box-shadow:0 1px 3px #1b25300d}
.cro-intro .cro-intro-label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#235a83;margin:0 0 8px!important}
.cro-intro .cro-intro-text{font-size:.97rem;line-height:1.6;margin:0 0 4px!important}
.cro-intro .cro-intro-text .cro-link{padding:2px 0;min-height:0}
.cro-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:14px}
.cro-intro-actions .cro-link{background:#c8362e;color:#fff;border-radius:7px;padding:12px 18px;text-decoration:none}
.cro-intro-actions button{background:transparent;border:1px solid #235a83;color:#235a83;border-radius:7px;font-weight:650;padding:11px 16px}

.cro-end{max-width:850px!important;margin:40px auto 64px;padding:30px!important;background:#f2efe4;border:1px solid #d8d2c2;border-radius:16px;scroll-margin-top:100px}
.cro-end h2{margin-top:0}
.cro-end .cro-link,.cro-floating .cro-link,.cro-exit .cro-link{background:#c8362e;color:#fff;border-radius:7px;padding:13px 18px;text-decoration:none}
.cro-general{font-size:.85rem;color:#526351;color:#4c5b68}
.cro-support{margin-top:22px;border-top:1px solid #cfc8b8;padding-top:16px}
.cro-support summary{cursor:pointer;font-weight:700;min-height:44px;line-height:1.5}
.cro-alternatives{padding-left:22px;line-height:1.6;font-size:.9rem}
.cro-alternatives li{margin:12px 0}
#cro-selector label,.cro-calculator label{display:block;margin:13px 0;font-size:.9rem}
#cro-selector select,.cro-calculator input{display:block;width:100%;margin-top:5px}
.cro-selector,.cro-calculator{min-width:0}
.cro-calculator{margin-top:24px;border-top:1px solid #cfc8b8;padding-top:20px}
.cro-calculator output{display:block;font-size:.92rem;line-height:1.6}
#cro-no-result{background:#fbf6ee;border:1px solid #e3d9c6;border-radius:8px;padding:14px 16px;font-size:.92rem}

.cro-floating{position:fixed;z-index:80;bottom:20px;right:20px;width:min(360px,calc(100vw - 40px));box-shadow:0 8px 40px #1b253040;background:#fff;border:1px solid #d8d2c2;border-radius:14px;padding:22px}
.cro-floating [data-cro-action=dismiss],.cro-exit [data-cro-action=close]{float:right;margin:0 0 8px 10px;font-size:22px;padding:4px 12px}
.cro-exit{width:min(480px,calc(100vw - 32px));padding:26px;border:0;border-radius:16px;max-height:85vh;overflow:auto}
.cro-exit::backdrop{background:#1b2530aa}
.cro-exit:not([open]){display:none}
.cro-end:focus{outline:none}

@media(max-width:640px){
 .cro-image{grid-template-columns:1fr}
 .cro-image img{height:190px}
 .cro-image .cro-copy{padding:0 18px 18px}
 .cro-intro{padding:16px 16px}
 .cro-intro-actions{gap:12px}
 .cro-intro-actions .cro-link,.cro-intro-actions button{width:100%;justify-content:center;text-align:center}
 .cro-floating{bottom:max(10px,env(safe-area-inset-bottom));right:10px;width:calc(100vw - 20px);padding:14px 16px}
 .cro-floating .cro-hook{font-size:.87rem}
 .cro-floating .cro-link{font-size:.88rem;padding:10px 12px}
 .cro-end{width:calc(100% - 28px)!important;padding:20px!important}
 .cro-schedule{padding:16px}
}