/* =========================================================
   AnteEnti Telugu Q&A UI

   File:
   assets/css/components/question-card.css

   Component:
   Question Card Component v1

   Explanation:
   This file controls the visual styling for the reusable Question Card
   component rendered from:

   includes/components/question-card.php

   Current flow:

   AnsPress question-list-item.php
   ↓
   Question Card Component
   ↓
   Meta Row Component + Pill Component
   ↓
   Question Card Connector

   Why this file exists:
   Earlier, the Question Card styles lived inside:

   assets/css/question-cards.css

   That file also contains AnsPress list toolbar, filters, pagination,
   empty states, and list wrapper styling.

   Moving the actual card styling here makes the component cleaner and
   prepares it for reuse in:

   - Questions page
   - Home feed
   - Search results
   - Profile question list
   - Related questions
   - Tag archive
   - Category archive

   This is part of the move toward:

   Pages
   ↓
   Components
   ↓
   Templates
   ↓
   Connectors
   ↓
   Data Sources
========================================================= */


/* ---------------------------------------------------------
   Question Card Base
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 14px;
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: 16px;
	box-shadow: 0 6px 16px rgba(31, 24, 18, 0.08);
	overflow: hidden;
}

body.anteenti-qa-ui #anspress .anteenti-question-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 45%),
		linear-gradient(135deg, rgba(255,255,255,0.4), transparent 60%);
	opacity: 0.75;
}

body.anteenti-qa-ui #anspress .anteenti-question-card > * {
	position: relative;
	z-index: 1;
}


/* ---------------------------------------------------------
   Top User Row
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__author {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	color: var(--anteenti-color-text);
	font-family: var(--anteenti-font-main);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__avatar,
body.anteenti-qa-ui #anspress .anteenti-question-card__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: 0 0 auto;
	object-fit: cover;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__author-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   Verified Badge
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	max-width: 48%;
	padding: 3px 7px;
	background: rgba(20, 132, 72, 0.1);
	border: 1px solid rgba(20, 132, 72, 0.18);
	border-radius: 999px;
	color: #13723f;
	font-family: var(--anteenti-font-main);
	font-size: 0.66rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__verified-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #148448;
	color: #ffffff;
	font-size: 0.58rem;
	line-height: 1;
}


/* ---------------------------------------------------------
   Question Type Label
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__type {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	margin: 2px 0 6px;
	padding: 3px 8px;
	background: var(--anteenti-color-primary-soft);
	border: 1px solid rgba(122, 31, 43, 0.14);
	border-radius: 999px;
	color: var(--anteenti-color-primary-dark);
	font-family: var(--anteenti-font-main);
	font-size: 0.68rem;
	font-weight: 850;
	line-height: 1.2;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__type-icon {
	font-size: 0.72rem;
	line-height: 1;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__type-text {
	line-height: 1;
}


/* ---------------------------------------------------------
   Title
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__title {
	margin: 0;
	padding: 0;
	font-family: var(--anteenti-font-main);
}

body.anteenti-qa-ui #anspress .anteenti-question-card__title-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--anteenti-color-text);
	font-family: var(--anteenti-font-main);
	font-size: 1.02rem;
	font-weight: 850;
	line-height: 1.34;
	letter-spacing: -0.01em;
	text-decoration: none;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__title-link:hover {
	color: var(--anteenti-color-primary);
	text-decoration: none;
}


/* ---------------------------------------------------------
   Excerpt
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--anteenti-color-text-soft);
	font-family: var(--anteenti-font-main);
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.45;
}


/* ---------------------------------------------------------
   Topic Pills Container
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__topics {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__topics::-webkit-scrollbar {
	display: none;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 22px;
	padding: 3px 8px;
	background: var(--anteenti-color-bg-soft);
	border: 1px solid var(--anteenti-color-border);
	border-radius: 999px;
	color: var(--anteenti-color-muted);
	font-family: var(--anteenti-font-main);
	font-size: 0.68rem;
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
}


/* ---------------------------------------------------------
   Bottom Row
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 11px;
}


/* ---------------------------------------------------------
   Meta Row Inside Question Card
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row::-webkit-scrollbar {
	display: none;
}

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	min-height: 26px;
	padding: 3px 7px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--anteenti-color-border);
	border-radius: 999px;
	color: var(--anteenti-color-muted);
	font-family: var(--anteenti-font-main);
	font-size: 0.69rem;
	font-weight: 750;
	line-height: 1.2;
}

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row__value {
	color: var(--anteenti-color-text);
	font-weight: 850;
}

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row__label {
	color: var(--anteenti-color-muted);
	font-weight: 750;
}



/* ---------------------------------------------------------
   Soft Answer Prompt + CTA Actions
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-top: 10px;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 34px;
	padding: 6px 11px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(122, 31, 43, 0.22);
	border-radius: 999px;
	color: var(--anteenti-color-muted);
	font-family: var(--anteenti-font-main);
	font-size: 0.74rem;
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt:hover {
	border-color: rgba(122, 31, 43, 0.34);
	color: var(--anteenti-color-primary-dark);
	text-decoration: none;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt-text {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt-icon {
	flex: 0 0 auto;
	font-size: 0.86rem;
	line-height: 1;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__actions .anteenti-question-card__cta {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 30px;
	padding: 5px 11px;
	background: var(--anteenti-color-action);
	border: 1px solid var(--anteenti-color-action);
	border-radius: 999px;
	color: #ffffff;
	font-family: var(--anteenti-font-main);
	font-size: 0.72rem;
	font-weight: 850;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 14px rgba(37, 127, 76, 0.18);
}

body.anteenti-qa-ui #anspress .anteenti-question-card__cta:hover {
	background: var(--anteenti-color-action-dark);
	border-color: var(--anteenti-color-action-dark);
	color: #ffffff;
	text-decoration: none;
}


/* ---------------------------------------------------------
   Controlled Variants
--------------------------------------------------------- */

body.anteenti-qa-ui #anspress .anteenti-question-card--compact .anteenti-question-card__title-link {
	font-size: 0.98rem;
}

body.anteenti-qa-ui #anspress .anteenti-question-card--related .anteenti-question-card__title-link {
	font-size: 0.95rem;
}

body.anteenti-qa-ui #anspress .anteenti-question-card--featured {
	border-color: rgba(122, 31, 43, 0.18);
	box-shadow: 0 10px 24px rgba(31, 24, 18, 0.1);
}


/* ---------------------------------------------------------
   Desktop / Tablet
--------------------------------------------------------- */

@media (min-width: 769px) {
	body.anteenti-qa-ui #anspress .anteenti-question-card {
		padding: 20px 22px;
		border-radius: 20px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__avatar,
	body.anteenti-qa-ui #anspress .anteenti-question-card__avatar img {
		width: 44px;
		height: 44px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__author {
		font-size: 0.86rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__verified {
		font-size: 0.74rem;
		padding: 4px 9px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__type {
		margin-bottom: 8px;
		padding: 4px 10px;
		font-size: 0.76rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__title-link {
		font-size: 1.28rem;
		line-height: 1.38;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__excerpt {
		font-size: 0.95rem;
		line-height: 1.55;
		max-width: 760px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__pill {
		font-size: 0.76rem;
		min-height: 25px;
		padding: 4px 10px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row__item {
		font-size: 0.78rem;
		min-height: 30px;
		padding: 5px 10px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt {
		min-height: 38px;
		padding: 7px 14px;
		font-size: 0.84rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
		font-size: 0.82rem;
		min-height: 34px;
		padding: 6px 15px;
	}
}


/* ---------------------------------------------------------
   Very Small Mobile
--------------------------------------------------------- */

@media (max-width: 380px) {
	body.anteenti-qa-ui #anspress .anteenti-question-card {
		padding: 12px;
		border-radius: 15px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__title-link {
		font-size: 0.96rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__excerpt {
		font-size: 0.78rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt {
		min-height: 32px;
		padding-left: 9px;
		padding-right: 9px;
		font-size: 0.68rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 0.68rem;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__verified {
		max-width: 45%;
		font-size: 0.62rem;
	}
}
/* =========================================================
   Step 157 - Question Card Long Content Protection
   Purpose:
   Long English question titles, tags and CTA rows should never
   push the card outside the feed column on desktop or mobile.
========================================================= */

body.anteenti-qa-ui #anspress .anteenti-question-card,
body.anteenti-qa-ui #anspress [data-anteenti-component="question-card"] {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__top,
body.anteenti-qa-ui #anspress .anteenti-question-card__author,
body.anteenti-qa-ui #anspress .anteenti-question-card__title,
body.anteenti-qa-ui #anspress .anteenti-question-card__excerpt,
body.anteenti-qa-ui #anspress .anteenti-question-card__topics,
body.anteenti-qa-ui #anspress .anteenti-question-card__bottom,
body.anteenti-qa-ui #anspress .anteenti-question-card__actions,
body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt,
body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row {
	min-width: 0;
	max-width: 100%;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__title-link,
body.anteenti-qa-ui #anspress .anteenti-question-card__excerpt {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__topics {
	width: 100%;
	max-width: 100%;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__pill,
body.anteenti-qa-ui #anspress .anteenti-pill {
	max-width: min(100%, 320px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__bottom {
	flex-wrap: wrap;
	align-items: center;
}

body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row {
	flex: 1 1 230px;
}

body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
	max-width: 100%;
	white-space: nowrap;
}

@media (max-width: 768px) {
	body.anteenti-qa-ui #anspress .anteenti-question-card__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__answer-prompt {
		width: 100%;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__actions .anteenti-question-card__cta {
		width: 100%;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__bottom {
		align-items: flex-start;
		gap: 10px;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card .anteenti-meta-row {
		flex: 1 1 100%;
		width: 100%;
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
		align-self: flex-end;
	}
}

@media (max-width: 420px) {
	body.anteenti-qa-ui #anspress .anteenti-question-card__pill,
	body.anteenti-qa-ui #anspress .anteenti-pill {
		max-width: min(100%, 240px);
	}

	body.anteenti-qa-ui #anspress .anteenti-question-card__cta {
		width: 100%;
		justify-content: center;
	}
}