/*

 #              #   # ##### ##### #   # ##### #   #  ###  #   # #   #
  #             #   # #       #   ##  # #     ## ## #   # ##  # ##  #
   #            ##### ####    #   # # # ####  # # # ##### # # # # # #
  #             #   # #       #   #  ## #     #   # #   # #  ## #  ##
 #     #####    #   # ##### ##### #   # ##### #   # #   # #   # #   #

                #   # ##### ####  #####  ###
                ## ## #     #   #   #   #   #
                # # # ####  #   #   #   #####
                #   # #     #   #   #   #   #
            #   #   # ##### ####  ##### #   #

 TOMEY CASIA2 Cases - overview cards

 Only loaded when the module option "ship the card design" is on. Sites that
 already style .casia-card themselves switch it off and keep their own look.

 Values taken from the customer's own stylesheet (custom_32.css on
 oct-test2.tomey.info, read 11.08.2026), so the shipped design matches the
 hand-built overview page: white card, thin blue-grey border, one rounded
 corner at the bottom left, a red plus badge outside the top left corner and a
 lift on hover.

 Class names deliberately match the ones the customer already uses on their
 hand-built overview page: casia-cards, casia-card, .case, casia-btn.

 @package    com_tomeycases
 @author     Sascha Heinemann <hello@heinemann.media>
 @link       https://heinemann.media
 @copyright  (C) 2026 Sascha Heinemann, heinemann.media
 @license    GNU General Public License version 2 or later; see LICENSE.txt
*/

.casia-cards{
	display:grid;
	/* Four across like the original. minmax(0,1fr) instead of 1fr: the implicit
	   auto minimum is the min-content width, so a long title or a wide image
	   would push the track past the container. */
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:28px 26px;
	margin:28px 0;
}

.casia-card{
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:100%;
	padding:14px 14px 16px;
	background:#fff;
	border:1px solid #5d6f9a;
	border-radius:0 0 0 18px;
	font-family:"Lato",Arial,sans-serif;
	/* The plus badge sits outside the box */
	overflow:visible;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.casia-card:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 24px rgba(10,30,95,.08);
	border-color:#0a1e5f;
}

/* Red plus outside the top left corner, the customer's recurring marker */
.casia-card::before{
	content:"+";
	position:absolute;
	top:-12px;
	left:-8px;
	color:#ff373b;
	font-size:26px;
	font-weight:700;
	line-height:1;
}

/* .casia-user-exp in front: the customer's template carries a copy of this rule
   (custom.scss, 4:3 + contain) that loads after ours - at equal specificity it
   would win and the fix below would never reach the page. */
.casia-user-exp .casia-card img{
	display:block;
	width:100%;
	/* 1.41 = the ratio of the CASIA2 screenshots, so five of seven teasers fill the
	   box exactly; the two 3:2 photos lose 3% at each side. cover, not contain -
	   with contain the visible picture varied in size from card to card. */
	aspect-ratio:1.41;
	object-fit:cover;
	margin-bottom:12px;
	background:#fff;
}

.casia-card .case{
	margin:0 0 6px;
	font-size:.95rem;
	color:#000;
}

.casia-card h3{
	margin:0 0 14px;
	font-size:1.12rem;
	line-height:1.35;
	font-weight:300;
	font-style:italic;
	letter-spacing:-.01em;
	color:#000;
}

.casia-card p{
	margin:0 0 18px;
	font-size:.92rem;
	line-height:1.55;
	color:#000;
	/* The teaser is cut server-side already; this keeps German compounds inside the card */
	overflow-wrap:break-word;
	hyphens:auto;
}

.casia-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	/* Pushes the button to the bottom, so all buttons of a row line up */
	margin-top:auto;
	padding:11px 14px;
	background:#0a1e5f;
	color:#fff;
	text-align:center;
	text-decoration:none;
	font-size:.95rem;
	font-weight:600;
	border-bottom-left-radius:16px;
	transition:background-color .18s ease, transform .18s ease;
}

/* Like the original: the colour stays, only the button lifts */
.casia-btn:hover,
.casia-btn:focus-visible{
	color:#fff;
	text-decoration:none;
	transform:translateY(-1px);
}

/* The whole card is the link: the button's ::after stretches over the card (the
   card is position:relative already). One real <a> stays in the markup, so screen
   readers and the keyboard still get exactly one link per case. Prefixed with
   .casia-user-exp like the image rule, so the template's copy cannot override it. */
.casia-user-exp .casia-card{cursor:pointer;}
.casia-user-exp .casia-card .casia-btn::after{content:"";position:absolute;inset:0;}
/* Hovering anywhere on the card marks the button - with a shadow, NOT a transform:
   a transform would make the button the containing block of its ::after, and the
   overlay would shrink to the button the moment the pointer enters the card. */
.casia-user-exp .casia-card:hover .casia-btn{box-shadow:0 4px 12px rgba(10,30,95,.25);}
/* And the button must not transform on ITS hover either: the overlay makes the
   button :hover wherever the pointer is on the card, the transform would shrink the
   overlay to the button, the hover ends, the overlay grows back - a flicker in which
   no click ever lands on the link. Covers our rule and the template's copy alike. */
.casia-user-exp .casia-card .casia-btn:hover{transform:none;}
/* Card titles in the TOMEY blue, like every heading on the case pages. Prefixed
   again, because the template's copy paints them black. */
.casia-user-exp .casia-card h3{color:#0a1e5f;}

/* Not in the customer's stylesheet - without it a keyboard user cannot see where they are */
.casia-btn:focus-visible{outline:2px solid #ff373b;outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
	.casia-card,.casia-btn{transition:none;}
	.casia-card:hover,.casia-btn:hover,.casia-btn:focus-visible{transform:none;}
}

@media (max-width:1200px){
	.casia-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;}
}

@media (max-width:640px){
	.casia-cards{grid-template-columns:minmax(0,1fr);}
	.casia-card{padding-left:12px;padding-right:12px;}
}