/* Stage D - ARC frontend redesign. Loaded ONLY by sal/arc.php.
   All selectors scoped under .arc-page / .arc-* — must not affect the rest of the site.
   SAF brand: #74ceb7 (light), #2c858d (mid), #004056 (dark). */

.arc-page { color: #333; }

/* responsive grid: desktop 3-4, tablet 2, mobile 1 (auto-fill handles breakpoints) */
.arc-page .arc-category-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin: 14px 0;
}

/* ---- business card ---- */
.arc-page .arc-business-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.arc-page .arc-business-card:hover {
	border-color: #74ceb7;
	box-shadow: 0 4px 14px rgba(0, 64, 86, .10);
}
.arc-page .arc-card-media {
	display: block;
	height: 140px;
	background: #f4f7f7;
	text-align: center;
	line-height: 140px;
	overflow: hidden;
}
.arc-page .arc-card-media img {
	max-width: 100%;
	max-height: 140px;
	width: auto;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}
.arc-page .arc-card-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #74ceb7, #2c858d);
}
.arc-page .arc-card-media--empty span {
	color: #fff;
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
}
.arc-page .arc-card-body {
	flex: 1;                 /* pushes actions to the bottom -> equal height */
	padding: 14px;
	text-align: right;
}
.arc-page .arc-card-title { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.arc-page .arc-card-title a { color: #004056; text-decoration: none; }
.arc-page .arc-card-title a:hover { text-decoration: underline; }
.arc-page .arc-card-area { color: #2c858d; font-size: 13px; margin-bottom: 6px; }
.arc-page .arc-card-desc {
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}
.arc-page .arc-card-actions {
	margin-top: auto;        /* bottom-aligned CTAs */
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.arc-page .arc-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
}
.arc-page .arc-btn-primary { background: #2c858d; color: #fff; }
.arc-page .arc-btn-primary:hover { background: #004056; color: #fff; }
.arc-page .arc-btn-secondary { background: #fff; color: #004056; border-color: #74ceb7; }
.arc-page .arc-btn-secondary:hover { background: #f0faf7; }

.arc-page .arc-empty { padding: 24px; text-align: center; color: #999; }

/* ---- category card (ARC home) ---- */
.arc-page .arc-category-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.arc-page .arc-category-card:hover {
	border-color: #74ceb7;
	box-shadow: 0 4px 14px rgba(0, 64, 86, .10);
}
.arc-page .arc-cat-media {
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #f4f7f7;
}
.arc-page .arc-cat-media.arc-card-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #74ceb7, #2c858d);
}
.arc-page .arc-cat-body { padding: 12px 14px; }
.arc-page .arc-cat-title { margin: 0; color: #004056; font-size: 17px; text-align: center; }

/* ---- ARC modal: a self-contained overlay, fully independent of the legacy hash
   mechanism. Hidden by default; shown ONLY by the ARC-only .arc-modal-open class
   (added by arc.js). No legacy CSS can open it (no "lightbox" class, no matching id). ---- */
.arc-lightbox {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;
}
.arc-lightbox.arc-modal-open { display: block; }
.arc-lightbox .lightbox_content {
	width: 100%;
	max-width: 340px;
	background: #fff;
	position: fixed;
	z-index: 10000;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	text-align: right;
	border-radius: 8px;
	overflow: hidden;
}
.arc-lightbox .lightbox_content h3 { margin: 0; padding: 8px; text-align: center; font-weight: bold; background: #74ceb7; color: #004056; }
.arc-lightbox .lightbox_content h4 { color: #004056; }
.arc-lightbox .lightbox_content .button { text-align: center !important; }
@media (max-width: 380px) {
	.arc-lightbox .lightbox_content { top: 2%; max-width: 94%; }
}

/* ---- mobile ---- */
@media (max-width: 640px) {
	.arc-page .arc-category-grid { grid-template-columns: 1fr; }
	.arc-page .arc-btn { padding: 14px 16px; font-size: 16px; }
}