/* A safety case's own picture, from the organisation's chosen image variable.
   Loaded site-wide because all three case-list views and the case landing page
   draw it, and the list views live behind tabs on one page. */

/* Landing page: the case has room to simply show its picture. Capped so a large
   upload cannot push the tiles below the fold, and never wider than its column. */
.caseImageBanner {
	display: block;
	max-width: 100%;
	max-height: 220px;
	width: auto;
	border-radius: 0.35rem;
	object-fit: cover;
}

/* List treatment: a small square that expands on hover. */
.caseImageThumb {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
}

.caseImageThumb__img {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: cover;
	border-radius: 0.25rem;
	border: 1px solid rgba(0, 0, 0, .125);
}

/* The expanded view is its OWN element rather than a transform on the thumbnail:
   scaling a 36px image just enlarges its pixels, and a transform inside a table
   cell is clipped by the row. Painted only on hover, and out of flow so it can
   overflow the row it belongs to. */
.caseImageThumb__preview {
	position: absolute;
	z-index: 1080;
	top: 50%;
	left: calc(100% + 0.5rem);
	transform: translateY(-50%);
	display: none;
	padding: 0.25rem;
	background: var(--rf-surface);
	border: 1px solid rgba(0, 0, 0, .175);
	border-radius: 0.35rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .175);
}

/* Bounded on BOTH axes. A fixed width makes a portrait photo very tall, and the
   preview is centred on its thumbnail, so a tall one on a near-top row runs off
   the top of the viewport — where the horizontal flip cannot help it. */
.caseImageThumb__preview img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(16rem, 40vw);
	max-height: 14rem;
	border-radius: 0.25rem;
}

.caseImageThumb:hover .caseImageThumb__preview,
.caseImageThumb:focus-within .caseImageThumb__preview {
	display: block;
}

/* Near the right-hand edge the preview would open off-screen, so it flips to the
   other side. The class is set by case-image.js, which measures at hover time —
   a media query cannot know where in the row the thumbnail sits. */
.caseImageThumb--flip .caseImageThumb__preview {
	left: auto;
	right: calc(100% + 0.5rem);
}

/* A touch device has no hover, so the preview would never open and the thumbnail
   would be a dead 36px square. Tapping the row still opens the case, which is
   the useful action there. */
@media (hover: none) {
	.caseImageThumb__preview {
		display: none !important;
	}
}

/* In a map popup the thumbnail sits beside the case name. The popup opens below
   its pin, so popup height runs towards the bottom edge of the map — a thumbnail
   costs almost none of it, and the hover preview escapes the popup entirely
   (.maplibregl-popup-content does not clip; the MAP does, which is what
   case-image.js measures the flip against). */
.sc-geotag-popup__thumb {
	margin-left: 0.375rem;
}

/* Icon-view tile: the picture sits in the top-right corner of the title block.
   Floated, not positioned: the tile reads left-aligned, so the title, the tag
   row and the meta lines simply wrap round the picture, and a long title or a
   fourth tag drops to the next line instead of running underneath it. The block
   is still a containing block for the score grid in the opposite corner — inert
   for the SORA tile that shares the class, which has nothing positioned inside. */
.VertAlignerTitleSC {
	position: relative;
}

.caseImageTileCorner {
	float: right;
	margin: 0.5rem 0 0.25rem 0.75rem;
	line-height: 0;
}

/* The tag row is a flex container everywhere else, and a flex container cannot
   wrap round a float — it is pushed beside it whole, narrowed for its full
   height. On the tile the badges flow inline so the row wraps as the title does. */
.caseTileTitle .sc-tags-display {
	display: block;
}

.caseTileTitle .sc-tags-display .badge-pill {
	display: inline-block;
	margin: 0 2px 4px 0;
}

/* The case list's thumbnail column. Sized to the thumbnail so the column takes no
   more room than it needs, and every picture lines up down the list instead of
   sitting wherever its title happens to end. */
.scListImageCol {
	width: 3rem;
	white-space: nowrap;
}

/* The column's header label: read by assistive tech, invisible on screen. Its own
   rule rather than Bootstrap's .sr-only, which lives in app.css and is only
   loaded for a non-default brand — most organisations would see the word. */
.caseImageColLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The tile's sub-claim score block: bottom-right of the title block, on the same
   right inset as the picture in the opposite corner so the two align vertically. */
.caseTileScoreGrid {
	--assessmentGridBox: var(--caseTileScoreGridWidth);

	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	line-height: 0;
}

/* Case icon tiles read left-aligned. Scoped to a class of its own rather than
   changing .VertAlignerTitleSC, which the SORA tile shares.

   --caseTileScoreGridWidth is the single place the corner block's width is
   decided: the grid is sized from it and the meta lines reserve their clearance
   from it, so the two cannot drift apart the way a hard-coded 3rem reservation
   did against a 4.5em block. In rem rather than em because .RespPersBox sets
   font-size: .85em — an em value would resolve smaller there than on the grid
   and under-reserve all over again. */
.caseTileTitle {
	--caseTileScoreGridWidth: 3.5rem;
	text-align: left;
	padding-left: 0.75rem;
}

/* Narrower than the shared .assessmentGrid--sm (4.5em, which is 4.95rem on the
   tile's 1.1em): a 300px tile has to fit the block AND a name and a milestone
   line beside it.

   An UNGROUPED block takes it as a width, which is all that shape needs. A GROUPED
   one is bounded in both axes by .assessmentGridBounded (riskmatrix.css), which
   reads the box from here — hence the :not(), so the two never fight over width. */
.caseTileScoreGrid .assessmentGrid:not(.assessmentGrid--grouped) {
	width: var(--caseTileScoreGridWidth);
}

/* Kill the first-paint flash. The column count is applied by applyCellColours()
   (riskmatrix.js, deferred to DOMContentLoaded), so until it runs the grid has no
   grid-template-columns and falls back to a single implicit column: the cells
   stack into a tall strip that spills out of this bottom-right corner, then
   collapse to the square block when the JS lands. The settled block is never
   taller than --assessmentGridBox wide (ungrouped is square-ish with rows <=
   columns; the bounded grouped block fits the box on both axes), so clipping the
   pre-paint strip to that footprint hides the reflow without ever touching the
   settled layout. Cells are still unpainted at this point, so nothing meaningful
   is clipped — the block simply fills in when the colours arrive. */
.caseTileScoreGrid .assessmentGrid {
	max-height: var(--assessmentGridBox, 3.5rem);
	overflow: hidden;
}

/* The corner block sits bottom-right, so the meta lines need the same clearance
   the title has from the picture above — otherwise a long name or role runs
   underneath it. The block's own 0.5rem inset, plus 0.5rem of gutter. */
.caseTileTitle--hasGrid .RespPersBox {
	padding-right: calc(var(--caseTileScoreGridWidth) + 1rem);
}