/* ==========================================================================
   TriangleClick – Projects / Case Studies page (page #29): supplementary CSS
   --------------------------------------------------------------------------
   Layout, spacing, colours, typography, radii, image sizing and responsive
   behaviour are all set with native Elementor controls on the page and on the
   "Case Study Card" Loop Item template. These rules cover only what Elementor
   has no control for.

   How it loads: functions.php enqueues this file only on pages whose
   Elementor data contains the "tc-case-studies-hero" class
   (handle "triangleclick-case-studies"), after Elementor's own CSS.

   Scope: every selector starts with a tc-case-studies-* class, so nothing
   here reaches the header, footer, the mobile off-canvas popup (#61) or
   other pages.
   ========================================================================== */

/* 1. Page background: faint arch pattern fading out from the top centre,
      fixed to the viewport (the reference's fixed background layer; it shows
      through the translucent green card panels).
      Class "tc-case-studies-hero" is on the hero container:
      Container > Advanced > CSS Classes.
      Elementor has no page-level fixed layer that combines a pattern with a
      radial fade. Same technique as the Home and About pages. */
body:has(.tc-case-studies-hero)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(43.2% 25% at 50% 18.8%, rgba(84, 84, 84, 0) 0%, #ffffff 100%),
		url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V0C4.477 0 0 4.477 0 10v30zm22 0c-5.523 0-10-4.477-10-10V0c5.523 0 10 4.477 10 10v30z' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 / 129.6px 216px repeat,
		rgba(86, 156, 117, 0.3);
}

/* 2. Keyboard focus on a card. The whole card is one link (Container with
      HTML tag "a"); Elementor has no focus-state control for containers. */
.tc-case-studies-card:focus-visible {
	outline: 2px solid #074D31;
	outline-offset: 4px;
	border-radius: 30px;
}

/* 3. Missing results. When a project has no value for a result, Elementor
      skips the empty Heading widget; these rules then hide that result's
      leftover label, and the whole Results row when both are empty, so a
      card never shows an orphan label or an empty gap.
      Classes: "tc-case-studies-metric" on each result container,
      "tc-case-studies-metric-value" on the value Heading,
      "tc-case-studies-metrics" on the Results row (Loop Item template). */
.tc-case-studies-metric:not(:has(.tc-case-studies-metric-value)) {
	display: none;
}

.tc-case-studies-metrics:not(:has(.tc-case-studies-metric-value)) {
	display: none;
}