/**
 * Insights listing and article styles.
 *
 * Values are taken from the compiled theme stylesheet (css/etp-law-02.css) so this matches
 * the rest of the site rather than introducing a second design language:
 *   crimson  #c80815  brand / links / eyebrows
 *   accent   #ff003d  1px border-top on content blocks
 *   body     #444444  running text
 *   rule     #efefef  hairlines
 * Type: Prata for display, Open Sans 300/400/600 for text, Campton 500/700 for UI labels.
 */

/* ---------- Listing grid ---------- */

.articles-grid {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 100%;
	padding-right: 40px;
}

/*
 * Desktop: cards have a minimum width and wrap into more columns as the screen widens
 * (Rashid, 2026-09-29), the way the Lawyers grid adds thumbnails. With a fixed 3 columns a card
 * was ~976px wide on a 3346px screen.
 *
 * From 1280px: auto-fill minmax(400px, 1fr) - minimum raised twice at Rashid's request, last
 * to 400 (2026-09-29). A column is added whenever another 400px fits, so cards stay ~400-560px:
 * 2 columns up to ~1680, 3 at 1920, 5 at 2560, 7 at 3346. 992-1279px has no room for two
 * 400px cards, so it is fixed at two columns (as the tablet layout below it) rather than
 * dropping to one very wide card. auto-fill keeps empty tracks, so filtered results do not
 * stretch. Below 992px the existing 2-column / 1-column widths apply.
 *
 * Archive only, scoped to its .lawyer-grid-wrapper: the practice-page Insights block and an
 * article's "More on this topic" reuse .articles-grid but always show up to three cards in the
 * 33.333% flex row. In this grid the practice cards shrank to a third of a cell (regression
 * caught by Rashid on the Litigation page) and related cards went two across, the third on a
 * row of its own (caught in article QA), both 2026-09-29.
 */
@media screen and (min-width: 992px) {
	.lawyer-grid-wrapper .articles-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lawyer-grid-wrapper .articles-grid > .article-item {
		width: auto;
	}

	/* The grid carries Webflow's w-clearfix, whose ::before/::after (display: table) become grid
	   items and take the first and last cells - the first card started in column 2. */
	.lawyer-grid-wrapper .articles-grid::before,
	.lawyer-grid-wrapper .articles-grid::after {
		content: none;
		display: none;
	}
}

@media screen and (min-width: 1280px) {
	.lawyer-grid-wrapper .articles-grid {
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	}
}

.article-item {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 33.333%;
	padding-right: 30px;
	margin: 0 0 48px;
	position: relative;
}

.article-thumb {
	display: block;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background-color: #f9f9f9;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

/*
 * Card hover (Rashid, 2026-09-29): the photo scales up subtly and the title turns crimson - on
 * hovering anywhere on the card, or keyboard focus inside it. (A crimson rule under the image
 * was tried first and dropped.) The photo is set inline on .article-thumb; ::before inherits it
 * so the photo can scale inside the fixed 16:9 frame without moving the frame or the badge.
 * Hover-capable pointers only (no sticky hover after a tap). It runs for prefers-reduced-motion
 * too, matching the site's other hovers: on 2026-08-26 Rashid chose to override Elementor 4's
 * reduced-motion kill switch so hovers keep animating (see etp-practice-area-filter). Elementor's
 * `html *` rule cannot reach this anyway - `*` does not match ::before. Applies wherever the
 * card is used (archive, practice pages).
 */
.article-thumb {
	overflow: hidden;
}

.article-thumb::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background-image: inherit;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}

@media (hover: hover) {
	.article-item:hover .article-thumb::before {
		transform: scale(1.06);
	}

	.article-item:hover .article-title-link {
		color: #c80815;
	}
}

.article-item:focus-within .article-thumb::before {
	transform: scale(1.06);
}

.article-item:focus-within .article-title-link {
	color: #c80815;
}

.article-badge {
	/* Pill, inset from the corner (Rashid, 2026-09-29; was a square tab flush to the corner). */
	z-index: 1;
	position: absolute;
	top: 12px;
	left: 12px;
	background-color: #c80815;
	color: #fff;
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.article-text {
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.article-eyebrow {
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #c80815;
	margin-bottom: 10px;
}

.article-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.article-title {
	font-family: Prata, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	margin: 0 0 10px;
}

.article-title-link {
	color: #036; /* ETP dark blue, matching the page title (Rashid, 2026-09-29); crimson on hover */
	text-decoration: none;
	transition: color .2s ease;
}

.article-title-link:hover {
	color: #c80815;
}

.article-standfirst {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #444;
	margin: 0 0 14px;
	flex: 1; /* pushes .article-meta to a shared baseline across the row */
}

.article-meta {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #979797;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Decorative (alt=""): the name beside it already says who it is. */
.article-author-pic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	margin-right: 10px;
	flex: none;
	background-color: #efefef;
}

.article-meta-sep {
	margin: 0 5px;
}

/* Name and date: keeps a wrapped second line beside the photo, and never breaks inside a
   name or a date (only between them). */
.article-meta-text {
	flex: 1 1 0;
	min-width: 0;
}

.article-meta-text .article-author,
.article-meta-text time {
	white-space: nowrap;
}

/* Practice-page cards are only ~200px wide between 992 and 1279px, where "Name · date" cannot fit
   on one line. Stack it deliberately there - name over date, no dangling separator. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
	.practice-articles .article-meta-text {
		line-height: 19px;
	}

	.practice-articles .article-meta-sep {
		display: none;
	}

	.practice-articles .article-meta-text .article-author {
		display: block;
	}
}

/* ---------- Search field ---------- */

.etp-article-search {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #444;
	margin-bottom: 8px;
}

/* Separate the filter group from the search box above it (Rashid, 2026-09-29). Only Insights has
   a heading following a form block; the Lawyers panel starts with its filter heading. */
.filter-block .form-block + .filter-by-area {
	margin-top: 24px;
}

.etp-article-search:focus {
	outline: none;
	border-color: #c80815;
}

.etp-no-results p {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #979797;
	padding: 30px 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Single article ---------- */

.article-hero {
	width: 100%;
	height: 420px;
	background-color: #f9f9f9;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.article-body-content {
	max-width: 760px;
	margin: 0 auto;
	padding-top: 46px;
}

.article-body-content .header-title {
	margin-bottom: 18px;
}

.article-standfirst.lead {
	font-size: 18px;
	line-height: 28px;
	color: #979797;
	flex: none;
	margin-bottom: 26px;
}

.article-byline {
	display: flex;
	align-items: center;
	padding: 18px 0 22px;
	border-bottom: 1px solid #efefef;
	margin-bottom: 30px;
}

.article-byline-pic {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #f9f9f9;
	background-position: 50% 0;
	background-size: cover;
	margin-right: 14px;
	flex: none;
}

.article-byline-name {
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #222;
	text-decoration: none;
}

.article-byline-name:hover {
	color: #c80815;
}

.article-byline-meta {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #979797;
	margin-top: 3px;
}

/* Article body copy follows the site scale: 20px / 30px, weight 300. */
.article-body-content .body-text p {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
	color: #444;
	margin-bottom: 22px;
}

.article-body-content .body-text h2 {
	font-size: 32px;
	line-height: 36px;
	margin: 38px 0 16px;
}

.article-body-content .body-text h3 {
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	margin: 30px 0 12px;
}

.article-body-content .body-text a {
	color: #c80815;
}

/* Enquiry block - carries the site's accent top rule, as other content blocks do. */
.article-enquiry {
	border-top: 1px solid #ff003d;
	background-color: #f9f9f9;
	padding: 34px;
	margin: 50px auto 0;
	max-width: 760px;
}

.article-related {
	max-width: 1200px;
	margin: 44px auto 0;
	padding-top: 40px;
	border-top: 1px solid #efefef;
}

.article-related .sub-header {
	margin-bottom: 26px;
}

/* ---------- Pagination ---------- */

.pagination .nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 20px 0 10px;
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 15px;
}

.pagination .page-numbers {
	padding: 9px 15px;
	border: 1px solid #ddd;
	color: #444;
	text-decoration: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background-color: #c80815;
	border-color: #c80815;
	color: #fff;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 991px) {
	.article-item {
		width: 50%;
	}

	.article-hero {
		height: 320px;
	}

	/* Body headings step down with the title (54 -> 38px here); at a fixed 32px an H2 was
	   nearly the title's size, and bigger than it on phones (Rashid, 2026-09-29). */
	.article-body-content .body-text h2 {
		font-size: 26px;
		line-height: 32px;
		margin-top: 34px;
	}
}

@media screen and (max-width: 767px) {
	/*
	 * The grid itself is left to the theme, exactly as on the Lawyers archive: below 992px the
	 * filter panel spans row 1 and the listing spans row 2 across both 50% columns, so cards
	 * get the full width. (An earlier override stacked it with display:block; that exposed the
	 * breadcrumb block the theme hides behind the panel and dropped the panel photo.)
	 */
	.articles-grid {
		padding-right: 0;
	}

	.article-item {
		width: 100%;
		padding-right: 0;
	}

	.article-title {
		font-size: 22px;
		line-height: 30px;
	}

	.article-hero {
		height: 220px;
	}

	/* Title is 26px here: H2 sits below it, just above the 18px copy. */
	.article-body-content .body-text h2 {
		font-size: 21px;
		line-height: 28px;
		margin: 30px 0 12px;
	}

	.article-body-content .body-text h3 {
		font-size: 18px;
		line-height: 24px;
		margin: 24px 0 10px;
	}

	.article-body-content .body-text p {
		font-size: 18px;
		line-height: 28px;
	}

	.article-enquiry {
		padding: 24px 0;
	}

	.article-related {
		margin-top: 32px;
		padding-top: 32px;
	}
}

/* ---------- Archive header: title + intro at the top of the listing column ---------- */

/* Moved out of the full-width breadcrumb row (Rashid, 2026-09-29) so it lines up with the
   cards instead of running across both columns. Below 992px it sits between filter and list. */
.insights-heading {
	margin-bottom: 30px;
}

.header-title.default.insights {
	font-family: Prata, serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 50px;
	color: #036; /* ETP dark blue, as the navigation (Rashid, 2026-09-29) */
	/* No top margin: the title's top lines up with "SEARCH" in the side panel. */
	margin: 0 0 8px;
}

.sub-header.insights-intro {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
	color: #979797;
	margin: 0;
	text-transform: none;
}

/*
 * Side panel: same look as the Lawyers archive - the filter on a light block, the glass photo
 * below it, crimson rule on the right (Rashid, 2026-09-29).
 *
 * The theme paints the photo across the whole panel with `cover`. That works on Lawyers
 * (~1,100px tall), but the Insights panel grows with the article list (5,000px with 30
 * articles) and would blow the 774x1080 photo up ~4.6x. So the panel itself is plain, and the
 * photo sits in its own block under the filter at the Lawyers page's scale. Filter and photo
 * stick together under the 138px header, as the theme already does for the filter alone.
 * Desktop only: below 992px the panel is short again, so the theme's full-panel photo is used.
 */
.etp-panel-photo {
	display: none;
}

/* Below 992px the theme's own panel styling applies unchanged: the photo across the full-width
   panel, the filter on its light block over it - identical to the Lawyers archive. */
@media screen and (min-width: 992px) {
	.grid-lawyers .side-panel {
		background-image: none;
		background-color: #f9f9f9;
	}

	.etp-panel-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 138px;
		height: calc(100vh - 138px);
		display: flex;
		flex-direction: column;
	}

	.etp-panel-sticky .filter-block {
		position: static;
		flex: none;
		/* The theme gives the block no right padding; the search box then touched the crimson rule. */
		padding-right: 20px;
	}

	.etp-panel-photo {
		display: block;
		flex: 1 1 auto;
		background-repeat: no-repeat;
		background-position: 50% 100%;
		/* The Lawyers panel's rendered height, so the glass cells come out the same size. */
		background-size: auto 1132px;
	}
}

@media screen and (max-width: 767px) {
	.header-title.default.insights {
		font-size: 30px;
		line-height: 36px;
	}
}

/* ---------- Single article layout ---------- */

/* The single article is full width, not the two-column grid the Lawyers archive uses. */
.grid-article {
	display: block;
}

/*
 * Breadcrumb and banner share the 1200px column used by "More on this topic", centred. Full
 * width, the 420px-high banner became a letterbox strip on a superwide monitor (3380px, Rashid,
 * 2026-09-29), with the breadcrumb stranded at the far left.
 */
.grid-article .breadcrumb-block {
	box-sizing: border-box;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 60px;
	padding-right: 60px;
}

/*
 * The headline borrows the lawyer-profile heading style, whose line-height equals its font
 * size (54px on 54px, 38px on 38px at tablet). That suits a one-line lawyer name, but on a
 * two- or three-line article title Prata's descenders run into the capitals below ("Buying"
 * touching "Steps"). Unitless, so it scales with the breakpoint font sizes. Scoped to the
 * article page - lawyer profiles are untouched.
 */
.grid-article .header-title.lawyer {
	line-height: 1.15;
	/* ETP dark blue, as the Insights title and card titles (Rashid, 2026-09-29). The lawyer
	   profile heading this borrows stays crimson. */
	color: #036;
}

.article-main {
	padding: 0 60px 60px;
}

.article-main .article-hero {
	max-width: 1200px;
	margin: 0 auto 10px;
}

/* Tablet and phone: the form's fields line up with the article text (Rashid, 2026-09-29). Its
   background matches the page, so side padding only read as an extra indent. */
@media screen and (max-width: 991px) {
	.article-enquiry {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Tablet and phone: hero runs edge to edge (Rashid, 2026-09-29). The negative margins cancel
   .article-main's side padding (60px, 20px on phones), so no 100vw and no scrollbar overflow.
   Desktop keeps the 1200px cap above. */
@media screen and (max-width: 991px) {
	.article-main .article-hero {
		max-width: none;
		width: auto;
		margin-left: -60px;
		margin-right: -60px;
	}
}

@media screen and (max-width: 767px) {
	.grid-article .breadcrumb-block,
	.article-main {
		padding-left: 20px;
		padding-right: 20px;
	}

	.article-main .article-hero {
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* The theme's .body-text carries margin-left/right:15%, which double-indents copy that is
   already inside the constrained article column. Neutralise it here only. */
.article-body-content .body-text {
	margin-left: 0;
	margin-right: 0;
}

/* ---------- Practice area pages: related articles ---------- */

/*
 * .grid-practice defines three named rows - "content", "webinar", "key-contacts" - against a
 * single left column. The "webinar" row is declared in the compiled Webflow CSS but nothing
 * has ever been placed in it. Insights takes that slot, which is why this needs no change to
 * the grid definition and cannot disturb the existing cells or the video blocks.
 */
.practice-articles-block {
	grid-area: webinar;
	background-color: #fff;
	border-top: 1px solid #ff003d;
	padding: 60px 20px 20px 60px;
}

.practice-articles-block .sub-header {
	margin-bottom: 26px;
}

/* Three cards across the practice column, which is narrower than the Insights archive. */
.articles-grid.practice-articles {
	padding-right: 0;
}

.articles-grid.practice-articles .article-item {
	width: 33.333%;
	padding-right: 24px;
	margin-bottom: 30px;
}

.articles-grid.practice-articles .article-title {
	font-size: 19px;
	line-height: 26px;
}

.articles-grid.practice-articles .article-standfirst {
	font-size: 14px;
	line-height: 23px;
}

.practice-articles-more {
	display: inline-block;
	margin-top: 4px;
}

@media screen and (max-width: 991px) {
	.articles-grid.practice-articles .article-item {
		width: 50%;
	}

	.practice-articles-block {
		padding: 40px 20px 20px 30px;
	}
}

@media screen and (max-width: 767px) {
	.articles-grid.practice-articles .article-item {
		width: 100%;
		padding-right: 0;
	}

	.practice-articles-block {
		padding: 30px 20px 20px;
	}
}

/* ---------- Enquiry form (Contact Form 7) ---------- */

/*
 * Scoped to .article-enquiry so no other form on the site is affected. Field classes come
 * from the form template (class:etp-input / class:etp-submit) rather than CF7's own class
 * names, which change between major versions.
 */
.article-enquiry .wpcf7 {
	margin: 0;
}

.article-enquiry .wpcf7 p {
	margin: 0 0 16px;
}

.article-enquiry label {
	display: block;
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	color: #222;
}

.article-enquiry .etp-req {
	color: #c80815;
}

.article-enquiry .etp-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: 7px;
	padding: 13px 16px;
	border: 1px solid #ddd;
	border-radius: 2px;
	background-color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #444;
}

.article-enquiry textarea.etp-input {
	min-height: 120px;
	line-height: 24px;
	resize: vertical;
}

.article-enquiry .etp-input:focus {
	outline: none;
	border-color: #c80815;
}

.article-enquiry .etp-submit {
	font-family: Campton, 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	/* ETP dark blue, turning crimson on hover as the nav links do. Was solid crimson: the
	   site's accent colour, and nowhere else a button fill (Rashid, 2026-09-29). */
	background-color: #036;
	border: 0;
	border-radius: 2px;
	padding: 15px 34px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.article-enquiry .etp-submit:hover,
.article-enquiry .etp-submit:focus-visible {
	background-color: #c80815;
}

/* CF7 validation and response messages */
.article-enquiry .wpcf7-not-valid-tip {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #c80815;
	margin-top: 5px;
}

.article-enquiry .etp-input.wpcf7-not-valid {
	border-color: #c80815;
}

.article-enquiry .wpcf7-response-output {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 24px;
	color: #444;
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid #efefef;
	border-left: 3px solid #c80815;
	border-radius: 2px;
}

.article-enquiry form.sent .wpcf7-response-output {
	border-left-color: #2e7d32;
}

.article-enquiry .wpcf7-spinner {
	margin-left: 12px;
}

/* No margin under the button: the form's own padding closes the box (Rashid, 2026-09-29,
   "a lot of negative space below form"). */
.article-enquiry .wpcf7-form p:has(> .etp-submit) {
	position: relative;
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.article-enquiry .etp-submit {
		width: 100%;
	}

	/* A full-width button pushed CF7's spinner onto a line of its own, 24px of blank space
	   under the button. Sit it inside the button's right end instead. */
	.article-enquiry .wpcf7-spinner {
		position: absolute;
		top: 50%;
		right: 14px;
		margin: -12px 0 0;
	}
}

/*
 * Below 991px the theme centres .header-title.default and hides .breadcrumbs. On the Insights
 * archive the heading then floats oddly against the two-column grid, so keep it left-aligned
 * with the content it introduces.
 */
@media screen and (max-width: 991px) {
	.header-title.default.insights,
	.sub-header.insights-intro {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}

	.header-title.default.insights {
		margin-bottom: 8px;
	}

	.grid-lawyers .breadcrumb-block {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/*
 * Honeypot. Deliberately NOT display:none or visibility:hidden - the better bots skip fields
 * hidden that way. Positioned off-canvas instead, which they do fill. aria-hidden and
 * tabindex="-1" keep it away from screen readers and keyboard users.
 */
.etp-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}