/* ==========================================================================
   Cards: generic, case, law, issue, row — with spotlight + tilt
   ========================================================================== */

/* Shared spotlight: a soft glow following the cursor (--mx/--my set in JS) */
.spotlight { position: relative; isolation: isolate; }
.spotlight::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 154, 46, .14), transparent 45%);
	opacity: 0; transition: opacity .35s var(--ease);
}
.spotlight:hover::after { opacity: 1; }

.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Generic card ---------- */
.card {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 10px; box-shadow: var(--shadow-sm);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card:hover .ph__svg, .card:hover .media img { transform: scale(1.06); }
.card:hover .ph__orb--a { transform: translate(-30px, 20px); }
.card__media { display: block; border-radius: var(--r); overflow: hidden; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px 10px; flex: 1; }
.card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card__type { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.card__title { font-size: 1.22rem; margin: 0; line-height: 1.28; }
.card__title a, .case-card__title a, .law-card__title a, .issue-card__title a, .row-card__title a {
	color: var(--ink); text-decoration: none;
	background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat;
	transition: background-size .5s var(--ease);
}
.card__title a:hover, .case-card__title a:hover, .law-card__title a:hover, .issue-card__title a:hover, .row-card__title a:hover { background-size: 100% 2px; }
/* Whole card clickable */
.card__title a::before, .row-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__meta a, .card .chip { position: relative; z-index: 2; }
.card__ur, .row-card__ur { margin: 0; font-size: 1rem; color: var(--green); line-height: 2; }
.card__foot { display: flex; gap: 16px; margin-top: auto; padding-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.card__foot span { display: inline-flex; align-items: center; gap: 6px; }
.card__foot .icon { width: 15px; height: 15px; }

/* ---------- Case card ---------- */
.case-card {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); overflow: hidden;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.case-card:hover { box-shadow: var(--shadow-lg); }
.case-card__media { display: block; margin: 10px 10px 0; border-radius: var(--r); overflow: hidden; }
.case-card:hover .ph__svg { transform: scale(1.05); }
.case-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1; position: relative; }
.case-card__body::before {
	content: "§"; position: absolute; right: 18px; top: 4px;
	font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--paper-2);
	z-index: -1; transition: transform .6s var(--ease), color .4s;
}
.case-card:hover .case-card__body::before { transform: rotate(12deg) scale(1.1); color: var(--gold-soft); }
.case-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-card__court { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.case-card__court .icon { color: var(--gold); width: 18px; height: 18px; }
.case-card__title { font-size: 1.28rem; margin: 0; line-height: 1.25; }
.case-card--lg .case-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.case-card__ur { margin: -4px 0 0; color: var(--green); font-size: 1.05rem; line-height: 2; }
.case-card__takeaway {
	display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px;
	background: var(--gold-soft); color: #6E5210; font-size: .95rem; line-height: 1.5;
}
.case-card__takeaway .icon { flex: none; margin-top: 2px; }
.case-card__facts { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.case-card__facts div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; font-size: var(--fs-sm); }
.case-card__facts dt { color: var(--ink-3); }
.case-card__facts dd { margin: 0; color: var(--ink); font-weight: 550; }
.case-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.case-card__go {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--ink); color: #fff;
	transition: transform .45s var(--ease-spring), background .3s;
}
.case-card:hover .case-card__go { transform: rotate(45deg); background: var(--green); }

/* ---------- Law card ---------- */
.law-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 12px;
	padding: 24px; border-radius: var(--r-lg);
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .35s, scale .35s;
}
.law-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.law-card.is-filtered { display: none; }
.law-card__year {
	position: absolute; right: -6px; bottom: -22px; z-index: -1;
	font-family: var(--font-display); font-weight: 800; font-size: 6.5rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 1.5px var(--line);
	transition: transform .7s var(--ease), -webkit-text-stroke-color .4s;
}
.law-card:hover .law-card__year { transform: translateY(-10px); -webkit-text-stroke-color: var(--gold-2); }
.law-card__top { display: flex; align-items: center; justify-content: space-between; }
.law-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sky-soft); color: var(--sky); transition: transform .5s var(--ease-spring); }
.law-card:hover .law-card__icon { transform: rotate(-10deg) scale(1.08); }
.law-card__title { font-size: 1.2rem; margin: 6px 0 0; line-height: 1.3; }
.law-card__ur { margin: -6px 0 0; color: var(--green); font-size: 1rem; line-height: 2; }
.law-card__for-you { margin: 0; font-size: .95rem; color: var(--ink-2); }
.law-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.law-card__juris { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.law-card__juris .icon { width: 16px; height: 16px; }
.link-arrow--sm { padding: 4px 0; font-size: var(--fs-sm); border-bottom-width: 1px; }

/* ---------- Issue card ---------- */
.issue-card {
	display: flex; flex-direction: column; gap: 14px;
	padding: 24px; border-radius: var(--r-lg);
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.issue-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.issue-card__head { display: flex; gap: 14px; align-items: center; }
.issue-card__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--rose-soft); color: var(--rose); }
.issue-card:hover .issue-card__icon .icon { animation: shout .6s var(--ease); }
.issue-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-card__city { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.issue-card__city .icon { width: 14px; height: 14px; }
.issue-card__title { font-size: 1.2rem; margin: 0; line-height: 1.3; }
.issue-card__ur { margin: -6px 0 0; color: var(--green); font-size: 1rem; line-height: 2; }
.issue-card__progress { margin-top: auto; }
.issue-card__progress p { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.issue-card__progress strong { color: var(--ink); font-size: 1.05rem; }
.issue-card__bar { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.issue-card__bar span {
	display: block; height: 100%; width: var(--pct); border-radius: inherit;
	background: linear-gradient(90deg, var(--rose), var(--gold-2));
	transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease) .2s;
}
.is-visible .issue-card__bar span, .issue-card.is-visible .issue-card__bar span { transform: scaleX(1); }
.support-btn { align-self: flex-start; }
.support-btn__heart { display: grid; color: var(--rose); transition: transform .4s var(--ease-spring); }
.support-btn:hover .icon { transform: none; }
.support-btn:hover .support-btn__heart { transform: scale(1.2); }
.support-btn.is-supported { --bg: var(--rose-soft); --bd: transparent; --fg: #B53A2E; }
.support-btn.is-supported .support-btn__heart svg { fill: currentColor; }
.support-btn.is-burst .support-btn__heart { animation: heartbeat .7s var(--ease-spring); }

/* ---------- Row card ---------- */
.row-card {
	position: relative;
	display: grid; grid-template-columns: auto 1fr 112px; gap: 20px; align-items: center;
	padding: 18px 4px; border-bottom: 1px solid var(--line);
	transition: padding .4s var(--ease);
}
.row-card:hover { padding-inline: 14px; }
.row-card__num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; color: var(--line-2); line-height: 1; transition: color .3s; min-width: 2.2ch; }
.row-card:hover .row-card__num { color: var(--gold); }
.row-card__body { display: grid; gap: 6px; }
.row-card__title { font-size: 1.12rem; margin: 0; line-height: 1.3; }
.row-card__thumb { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; }
.row-card__thumb .ph, .row-card__thumb .media { border-radius: 14px; }
.row-card:hover .ph__svg { transform: scale(1.1) rotate(2deg); }

@media (max-width: 1024px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
	.row-card { grid-template-columns: auto 1fr 80px; gap: 14px; }
	.row-card__num { font-size: 1.6rem; }
}