/* ==========================================================================
   HotHardware Insight widget — site-side style overrides
   ==========================================================================

   Restyles the AI Reports widget (served by the Cloudflare Worker at
   /widget.js) so it sits in the right rail as a native HotHardware module
   rather than reading as a bolted-on third-party card.

   Reference module: the TOP STORIES widget (.ow-pitc + .hh-tabbed-widget, see
   tabbed-widget.css) — it is the closest analogue, a small JS-rendered list of
   headlines with thumbnails inside a 303px rail column.

   Design language taken from that module, not invented here:

     header bar ....... navy #092f7a, GillSansRegular 16/28, 32px + 5px top
                        padding, uppercase, left-aligned, inset highlight
                        ([class*=header__header] in site.css)
     module chrome .... 1px solid #efefef, square corners
                        (.ow-pitc, .poll, .ow-topic-tracker)
     body padding ..... 15px  (.ow-topic-tracker-content)
     headline ......... Helvetica, weight 500 (600 for the hero lead), pure
                        black — NOT navy and NOT GillSansRegular; navy is
                        reserved for header bars
                        (.block-infos-title in tabbed-widget.css)
     headline hover ... #191970  (.hh-tabbed-widget-area a:hover)
     round arrow ...... the site's own section banner uses a circular arrow
                        button; reused here as each row's affordance
     thumbnails ....... 72 x 60, near-square — measured off the live module;
                        a 16:9 crop there reads wrong
                        (.hh-side-infos.hh-block-infos-left .hh-block-image)
     separators ....... 1px #d1d1d1  (.hh-block-separator)
     line clamp ....... 2 lines with ellipsis  (.hh-line-clamp)

   Layout note — a deliberate departure from TOP STORIES: this module keeps its
   lead/hero card, because the widget exists to promote reports and the README
   records that a flat headline-only list was tried first and dropped as too
   cramped. What changed on the second pass is that the hero is now a photo
   with its headline and deck ON it (see section 4) instead of a photo with
   text under it — that was what kept the whole module reading as a plain card
   no matter how the type was tuned.

   HOW THIS OVERRIDES THE WIDGET'S OWN CSS
   ---------------------------------------
   The Worker's widget.js injects its own <style> block as the FIRST element
   in <head>, deliberately, so that the host page's stylesheet wins any
   same-specificity tie. That is why nothing in this file needs !important:
   this stylesheet is linked later in <head> than the widget's injected tag,
   so equal-specificity rules here win.

   Class groups, one per `data-layout`:
     rail (default)  ->  __hero-*, __more, __card, __thumb, __title
     row             ->  --row, __row-grid, __row-card, __row-img, __row-title
   `.hh-insight-widget` and `__kicker` apply to both.

   Written against the markup widget.js already emits — no worker.js change,
   deliberately. Only these classes are available; anything needing a new
   element (e.g. a per-report date line) would need the Worker redeployed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Module shell — both layouts
   -------------------------------------------------------------------------- */

.hh-insight-widget {
	background: #fff;
	border: 1px solid #efefef;
	border-radius: 0;   /* rail modules are square, not rounded */
	overflow: hidden;   /* clips the navy header bar to the shell's corners */
	font-family: Helvetica, Arial, sans-serif;
	/* .ad-block (the widget's wrapper in _Sidebar.cshtml) sets
	   text-align:center for the ad slots it also wraps. text-align inherits,
	   so without this the report titles render centred. */
	text-align: left;
}


/* --------------------------------------------------------------------------
   2. Header bar — both layouts
   Mirrors [class*=header__header] from site.css. The site's own rule forces
   box-sizing:unset, which resolves to content-box; that plus height:32px and
   5px top padding is what produces the 37px bar every other rail module has.
   content-box is already the effective default here (there is no global
   border-box reset in the production CSS), but it is stated explicitly so
   the height can't drift if one is ever introduced.
   -------------------------------------------------------------------------- */

.hh-insight-widget__kicker {
	background: #092f7a;
	color: #fff;
	font-family: GillSansRegular, Arial, sans-serif;
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	letter-spacing: normal;      /* widget ships .03em; site header has none */
	text-transform: uppercase;
	text-align: left;
	height: 32px;
	padding: 5px 10px 0 15px;
	box-sizing: content-box;
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .1), 0 1px 0 0 rgba(0, 0, 0, .1);
}


/* --------------------------------------------------------------------------
   3. Links and headlines — shared by every layout
   -------------------------------------------------------------------------- */

/* The whole card is the click target; only the headline underlines, on hover.
   Restated for :visited/:active so site.css can't reintroduce decoration. */
.hh-insight-widget a,
.hh-insight-widget a:visited,
.hh-insight-widget a:active {
	color: inherit;
	text-decoration: none;
}

/* Base headline treatment, matching .block-infos-title in tabbed-widget.css:
   Helvetica, pure black, weight 500. Weight matters more than it looks — Arial
   and Helvetica have no medium face, so 500 renders as regular and 600 renders
   as full bold. 500 keeps these rows looking like TOP STORIES rather than
   shoutier than everything around them.
   The hero is deliberately NOT in this list: it sits on an image and needs
   white type, so its rules live in section 4. */
.hh-insight-widget__title,
.hh-insight-widget__row-title {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #000;
	text-align: left;
	transition: color .12s ease-in-out;
}

/* Site's own widget hover colour — .hh-tabbed-widget-area a:hover.
   .hh-insight-widget__hero is deliberately absent: it sits on a navy gradient
   where #191970 is invisible, so its hover rules are in section 4.

   No underline on hover, deliberately. The site's own modules don't underline
   either (TOP STORIES doesn't change at all on hover), and with the row tint
   and the chevron badge already carrying the hover, an underline on top of
   them reads as clutter. `text-decoration:none` is stated explicitly rather
   than left to the anchor's own value, so nothing in site.css can reintroduce
   it — site.css does set a global `a{text-decoration:underline}`. */
.hh-insight-widget__card:hover .hh-insight-widget__title,
.hh-insight-widget__row-card:hover .hh-insight-widget__row-title {
	color: #191970;
	text-decoration: none;
}

/* The widget ships no focus treatment and these are large card targets, so a
   keyboard user would otherwise have no visible position at all. */
.hh-insight-widget a:focus-visible {
	outline: 2px solid #191970;
	outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   4. rail layout — image-backed feature card + arrow-badged rows
   -------------------------------------------------------------------------- */

/* The lead report is a full-bleed photo with its headline and deck sitting ON
   the image over a navy gradient. Chosen over "photo, then text underneath"
   for two reasons: it removes the dead white gap between the two that made the
   module read as a plain card, and the overlay is the site's own image idiom
   (.hh-block-image carries a dark gradient) deepened enough to actually carry
   white type. The navy is the same #092f7a as the header bar, so the module is
   bookended by its own brand colour. */
.hh-insight-widget__hero {
	position: relative;
	display: block;
	overflow: hidden;      /* clips the hover zoom */
	background: #092f7a;   /* what shows while the photo loads */
}

.hh-insight-widget__hero-img {
	width: 100%;
	height: 227px;
	display: block;
	object-fit: cover;
	background: #0b2340;
	transition: transform .5s cubic-bezier(.2, .6, .3, 1), filter .3s ease-in-out;
}

/* 4:3, not 16:9 — a taller crop reads as a feature card instead of a banner
   and leaves somewhere for the overlay to sit without eating the whole photo.
   227px is that ratio at the 303px rail width; aspect-ratio keeps it exact if
   the widget is ever embedded somewhere wider. */
@supports (aspect-ratio: 4 / 3) {
	.hh-insight-widget__hero-img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* The top padding is gradient runway, not spacing — it is what lets the photo
   dissolve into the text rather than hitting a hard edge. */
.hh-insight-widget__hero-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 15px 13px;
	background: linear-gradient(to top,
		rgba(6, 30, 78, .97) 0%,
		rgba(9, 47, 122, .90) 40%,
		rgba(9, 47, 122, .55) 72%,
		rgba(9, 47, 122, 0) 100%);
}

.hh-insight-widget__hero-title {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;   /* the one headline that outranks the rows */
	color: #fff;
	text-align: left;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	margin: 0 0 5px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hh-insight-widget__hero-synopsis {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 17px;
	color: rgba(255, 255, 255, .85);
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The hero can't use the shared hover colour: #191970 is invisible on navy.
   `color:#fff` is NOT redundant even though it matches the resting state —
   widget.js ships its own
   `.hh-insight-widget__hero:hover .hh-insight-widget__hero-title{color:#004fe0}`
   at the same specificity. An earlier version of this rule declared only the
   decoration, which left that rule still winning the colour property, so the
   headline turned bright blue (#004fe0) on the navy gradient. Any future edit
   here must keep declaring colour, or that resurfaces.

   With no underline, the hero's feedback is the photo plus the arrow badge
   below rather than the type, so the photo does more work here than it does on
   the row cards. */
.hh-insight-widget__hero:hover .hh-insight-widget__hero-title {
	color: #fff;
	text-decoration: none;
}

.hh-insight-widget__hero:hover .hh-insight-widget__hero-img {
	transform: scale(1.05);
	filter: brightness(.9);   /* deepens the photo so the white type pops */
}

/* Arrow badge that fades in over the photo. Same round-arrow motif the site's
   own section banners use, and it gives the hero an explicit "this opens
   something" cue — a photo with a headline on it doesn't really have one. */
.hh-insight-widget__hero::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(9, 47, 122, .92);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

.hh-insight-widget__hero:hover::after,
.hh-insight-widget__hero:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

.hh-insight-widget__more {
	border-top: 1px solid #d1d1d1;
}

/* Thumbnail-led rows, matching TOP STORIES. */
.hh-insight-widget__card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 15px;
	border-top: 1px solid #d1d1d1;
	transition: background-color .15s ease-in-out;
}

.hh-insight-widget__card:first-child {
	border-top: none;
}

.hh-insight-widget__card:hover {
	background: #f6f8fb;
}

/* Circular chevron badge on every row. The site already uses a round arrow
   button on the article's section banner, so it is native vocabulary rather
   than something imported — and it gives the row a clear affordance that a
   bare text link doesn't. Inline SVG data URI: crisp at any DPI, no request. */
.hh-insight-widget__card::after {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #eef1f7;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092f7a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
	transition: background-color .15s ease-in-out, transform .18s ease-in-out;
}

.hh-insight-widget__card:hover::after {
	background-color: #092f7a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	transform: translateX(2px);
}

/* Measured off the live TOP STORIES module: 72 x 64, i.e. nearer square than
   16:9. That near-square crop is most of what gives those rows their weight —
   a 16:9 thumb here reads as a strip of filmstrips instead. */
.hh-insight-widget__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 60px;
	object-fit: cover;
	background: #eef1f7;
}

.hh-insight-widget__title {
	flex: 1 1 auto;
	min-width: 0;
	/* 15.6px / 1.3 is exactly what .block-infos-title renders at in TOP
	   STORIES (font-size:calc(3px + 1em) against that module's 12.6px base,
	   with line-height:1.3). */
	font-size: 15.6px;
	line-height: 1.3;
	/* two lines then ellipsis, same clamp the site already uses */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* --------------------------------------------------------------------------
   5. row layout — horizontal grid, for the bottom of articles / news items
   -------------------------------------------------------------------------- */

.hh-insight-widget--row {
	background: #fff;
	border: 1px solid #efefef;
	border-radius: 0;
}

.hh-insight-widget__row-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 15px;
}

.hh-insight-widget__row-card {
	display: block;
	flex: 1 1 180px;
	min-width: 0;
	transition: transform .18s ease-in-out;
}

/* A small lift is the one hover move available here. These cards have no
   clipping wrapper — the card is the only ancestor and it also holds the
   headline — so a scaled image would overlap its own text. */
.hh-insight-widget__row-card:hover {
	transform: translateY(-2px);
}

.hh-insight-widget__row-img {
	width: 100%;
	height: 121px;
	display: block;
	object-fit: cover;
	background: #eef1f7;
	transition: opacity .18s ease-in-out, box-shadow .18s ease-in-out;
}

.hh-insight-widget__row-card:hover .hh-insight-widget__row-img {
	opacity: .86;
	box-shadow: 0 8px 18px rgba(9, 47, 122, .18);
}

@supports (aspect-ratio: 16 / 9) {
	.hh-insight-widget__row-img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.hh-insight-widget__row-title {
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;   /* wide bottom-of-article card — can carry more weight
	                       than a rail row without looking out of place */
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The widget ships its own sub-520px rule that turns the row grid into a
   horizontal scroll strip; it is left untouched here so that still applies.
   Stated for clarity, not overridden. */