/**
 * Hand-written additions to the theme.
 *
 * etp-law-02.css is the compiled Webflow export and is frozen - the Webflow project that
 * generated it is deleted, so anything added there would be indistinguishable from the
 * original. New styles live here instead, loaded after it.
 */

/*
 * Homepage tile: Criminal Law.
 *
 * Mirrors the other .practice-thumb rules exactly - the same 45deg navy gradient at rest and
 * maroon on hover - so the tile behaves like its neighbours.
 *
 * PROVISIONAL IMAGE: images/criminal-law-800.jpg is AI-generated (Z-Image-Turbo, local
 * ComfyUI), not a stock or client photo. It needs ETPLAW's approval before go-live. To replace
 * it, overwrite that file at 800x445 - no CSS change needed. The other candidates and the
 * generation settings are in the docs repo under reference/criminal-law-tile-candidates/.
 */
.practice-thumb.criminal {
  background-image: linear-gradient(45deg, #036, rgba(255, 255, 255, 0) 50%), url('../images/criminal-law-800.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.practice-thumb.criminal:hover {
  background-image: linear-gradient(45deg, rgba(103, 22, 28, .81), rgba(255, 255, 255, 0) 60%), url('../images/criminal-law-800.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

/*
 * Criminal Law page: the tall feature image beside the copy. Same rule shape as the other
 * .feature-img variants in etp-law-02.css. The image is the full-size version of the
 * provisional, AI-generated tile image - same approval caveat applies.
 */
.feature-img.criminal {
  background-image: url('../images/criminal-law-bg.jpg');
  background-position: 60%;
}

/*
 * Lawyers page: "no results" message, shown when the ticked practice areas match no lawyer.
 * Every area is now listed in the filter, including ones with no lawyers tagged yet.
 * Same look as the Insights archive's message (insights.css), which does not load here.
 */
.lawyer-grid-wrapper .etp-no-results p {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #979797;
	padding: 30px 0;
}

/*
 * Lawyers and Insights archives: centre the breadcrumb in its row. The theme gives it 60px
 * above and 40px below, so it sat visibly closer to the content than to the header. 50/50
 * keeps the row the same 128px, so nothing below moves. The theme hides .breadcrumbs below
 * 992px, so desktop only.
 */
@media screen and (min-width: 992px) {
	.grid-lawyers .breadcrumbs {
		margin-top: 50px;
		margin-bottom: 50px;
	}
}

/*
 * Side-panel photo on the Insights archive only: smoked textured glass (Pexels 13066103,
 * Pexels licence - free commercial use, no attribution). Replaces the Unsplash glass mosaic
 * there (Rashid, 2026-09-29); the Lawyers archive keeps the mosaic from the compiled theme CSS,
 * at Rashid's request the same day. Insights also sets this file inline on its .etp-panel-photo
 * block. Candidates and previews: docs repo, reference/panel-image-candidates/.
 */
.post-type-archive-legal_article .side-panel {
	background-image: url('../images/panel-smoked-glass.jpg');
}

/*
 * About page quote band ("Over the years, we have acted for ..."). The theme shows its photo at
 * natural size (background-size: auto), and the photo is 1920px wide, so on wider monitors it
 * stopped short and the dark gradient showed beside it (Rashid, 2026-09-29, superwide screen).
 * Above 1920px, scale it proportionally to cover the band; at 1920 and below nothing changes.
 * Two values: the gradient layer stays auto, the photo layer covers.
 */
@media screen and (min-width: 1921px) {
	.about-hero-section {
		background-size: auto, cover;
	}
}

/*
 * Lawyer profile photo on tablets, 480-991px (Rashid, 2026-09-29, Samsung tablet). The theme
 * fixes the top row at 300px while the photo column is half the screen wide, so the (mostly
 * square) portraits were cropped to a wide strip - 450x300 at 900px. The row is now as tall as
 * the photo column is wide (50vw), never below the theme's 300px, and still grows if the name
 * and contact details need more. Phones (below 480px) stack the photo on top and are untouched.
 */
@media screen and (min-width: 480px) and (max-width: 991px) {
	.grid-lawyer {
		grid-template-rows: minmax(max(300px, 50vw), auto);
	}
}

/*
 * Same photo, small desktops / landscape tablets, 992-1279px. The theme gives the blue Practice
 * Areas column a 500px minimum, which squeezed the photo to a 161-177px strip at 992-1024px,
 * cutting the face in half. The three columns share the width equally here instead (the photo
 * is 341px wide at 1024, close to its 385px at 1440). From 1280px the theme layout is unchanged.
 */
@media screen and (min-width: 992px) and (max-width: 1279px) {
	.grid-lawyer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}