/* ============================================================
   ACS: أزرار المنشور (acs-pub-actions) — the two action buttons under the
   publication hero/meta (Figma «publication» frame, last row):
     • «شاهد ملخص المقال»  → opens the intro video (ACF `video`)
     • «تحميل كملف PDF»    → downloads the publication PDF (ACF `file`)

   Figma spec: two 176×36 buttons, space-between; teal-tint background
   rgba(6,135,136,.22); 1px rgba(247,247,247,1) border; 4px radius; icon
   rgba(203,155,42,1) (24×24); text Readex Pro 500/14/150% rgba(35,31,32,1).
   Inside each button: icon ↔ text space-between, 8px side padding.
   ============================================================ */

.acs-pubact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.acs-pubact__btn {
	flex: 0 0 auto;               /* fixed 176px — never stretch to full width */
	display: flex;
	align-items: center;          /* icon + text vertically centred */
	/* justify-content: space-between; */
	justify-content: start;
	gap: 8px;
	box-sizing: border-box;
	width: 176px;
	height: 36px;
	padding: 0 8px;               /* 8px left/right */
	border-radius: 4px;
	border: 1px solid rgba(247, 247, 247, 1);
	background: rgba(6, 135, 136, 0.22);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.acs-pubact__btn:hover,
.acs-pubact__btn:focus-visible { background: rgba(6, 135, 136, 0.30); }

/* When only one button shows (publication has no video, or no PDF), keep it at
   176px in ITS lane instead of stretching full-width: the video button sits at
   the start (RIGHT in RTL) on its own via space-between; a lone PDF button is
   pushed to the end (LEFT) so it stays where the two-button layout put it. */
.acs-pubact__btn--pdf:only-child { margin-inline-start: auto; }

.acs-pubact__ic {
	flex: 0 0 auto;
	width: auto;                  /* client SVGs aren't square — keep their ratio */
	height: 20px;
	color: rgba(203, 155, 42, 1); /* brand yellow */
	display: block;
}

.acs-pubact__label {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 150%;
	color: rgba(35, 31, 32, 1);
	text-align: right;
	white-space: nowrap;
}

/* Phones: when BOTH buttons show, let them share the row (matches the Figma phone
   frame). A lone button keeps its fixed 176px width and lane — never full width. */
@media (max-width: 478px) {
	.acs-pubact__btn { flex: 1 1 0; width: auto; }
	.acs-pubact__btn:only-child { flex: 0 0 176px; width: 176px; max-width: 100%; }
	.acs-pubact__label { white-space: normal; font-size: 12px;}
}