/* ============================================================
   components/rail.css
   The banner column: one page object, filled top to bottom, not a
   per-block sidebar. Not sticky (the price ladder assumes visibility
   falls with position). Unsold slot renders nothing. The house block
   is allowed only in the rail tail. No outer margin on the root.
   ============================================================ */
.rfi-rail { display: flex; flex-direction: column; gap: var(--rfi-gap); min-width: 0; }
/* The slot has NO fixed height and NO min-height and NO plate: its height is exactly the
   creative's height, so a shorter-than-standard creative leaves no empty band above or below.
   width 100% + height auto keeps the creative's own proportion (a 420x350 renders 300x250, an
   old 420x270 renders 300x193); never object-fit, so a paid banner is never cropped. */
.rfi-rail__slot { width: 100%; border-radius: var(--rfi-radius); overflow: hidden; }
.rfi-rail__slot .rfi-banner { display: block; width: 100%; }
.rfi-rail__slot img { display: block; width: 100%; height: auto; }

/* The house block: the only thing allowed in the rail tail, nowhere else. */
.rfi-house { background: var(--rfi-footer); color: var(--rfi-inverse); border-radius: var(--rfi-radius); padding: 20px 18px; box-shadow: var(--rfi-shadow); }
.rfi-house__k { font-family: var(--rfi-font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--rfi-inverse-mute); }
.rfi-house__t { font-family: var(--rfi-font-ui); font-size: 18px; font-weight: 500; margin-top: 8px; line-height: 1.3; }
.rfi-house__s { font-size: 13px; line-height: 1.55; color: var(--rfi-inverse-soft); margin-top: 8px; }
.rfi-house a { display: inline-block; margin-top: 14px; font-family: var(--rfi-font-ui); font-size: 13.5px; font-weight: 500; color: var(--rfi-inverse); border-bottom: 1px solid var(--rfi-inverse-faint); padding-bottom: 2px; }
.rfi-house a:hover { color: var(--rfi-teal); border-color: var(--rfi-teal); }

/* TOP slot: full-width strip UNDER the header (the brand is seen first; the slot is above the
   fold either way). Same rule as the rail: NO fixed height, NO plate, so the strip is exactly as
   tall as the creative and never letterboxes it. Empty when unsold: the shell is not rendered. */
.rfi-topslot { border-radius: var(--rfi-radius); overflow: hidden; }
.rfi-topslot .rfi-banner { display: block; width: 100%; }
.rfi-topslot img { display: block; width: 100%; height: auto; }