/**
 * Small-screen refinements, applied across every page.
 *
 * The per-page stylesheets (home, document, roster, auth, dashboard) each
 * carry their own breakpoints; this file is the layer that tunes what they
 * have in common — nothing may overflow the viewport, text stays legible,
 * and anything tappable is big enough for a thumb. It loads last, so a rule
 * here wins over the same selector elsewhere.
 *
 * Checked at 375, 768, 1024 and 1440 px.
 */

/* ------------------------------------------------------------- safety net */

/* Media never decides the page's width. A picture pasted into a legacy page,
   an embedded map, a wide table — all of them shrink instead of pushing a
   horizontal scrollbar onto every screen. */
img,
svg,
video,
iframe,
canvas {
	max-width: 100%;
}

/* Long words — an e-mail, a URL, an Armenian compound — break instead of
   widening their column. `anywhere` also lets flex and grid items shrink
   below their longest word, which is what keeps the cards from overflowing. */
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote,
h1,
h2,
h3,
h4 {
	overflow-wrap: anywhere;
}

/* A grid or flex item is `min-width: auto` by default and refuses to shrink
   below its content: the usual cause of a row that sticks out of its card. */
.arm-roster__col,
.arm-job__body,
.arm-job__aside,
.arm-topic__body,
.arm-ccard,
.arm-boxes__item,
.arm-files__card,
.arm-dash__main {
	min-width: 0;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
	cursor: pointer;
}

/* Keyboard focus is visible everywhere. `:where()` keeps this at zero
   specificity, so a component with its own focus ring still wins. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--arm-brown);
	outline-offset: 2px;
}

/* Someone who asked for less motion gets none of ours. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------- imported content */

/* Pages that still hold markup from the old site (Կապ, Մեր մասին) bring raw
   <svg> icons with no width attribute — left alone they stretch to the full
   column. Everything else here keeps that markup inside the page. */
.arm-single__content svg {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.15em;
}

.arm-single__content img {
	height: auto;
}

.arm-single__content iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* A table too wide for the screen scrolls by itself rather than the page. */
.arm-single__content table,
.arm-article__body table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.arm-single__content ul,
.arm-single__content ol {
	padding-left: 1.3em;
}

/* --------------------------------------------------------------- overflow */

/* ԱՐՏՈՆԱԳՐՈՒՄ / ԱՆԴԱՄԱԳՐՈՒՄ: the form cards. Their download button carries a
   258px floor that, on a phone, made the whole page 190px wider than the
   screen. The button keeps its width while there is room for it. */
[data-arm-layout="document"] .arm-files__card-btn {
	min-width: min(258px, 100%);
}

/* Two side by side only while the page is wide; below 900px the document
   sheet already stacks them, and that rule must keep winning. */
@media (min-width: 901px) {
	[data-arm-layout="document"] .arm-files__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The news carousel bled past the screen: the arrows sat in a negative margin
   wider than the gutter they borrowed, and were wider than their own column. */
@media (max-width: 480px) {
	.arm-nb__carousel {
		grid-template-columns: 34px minmax(0, 1fr) 34px;
		margin: 0;
	}

	.arm-nb__arrow {
		width: 34px;
	}
}

/* ՊԱԼԱՏԻ ՄԻՋԱՎԱՅՐԸ on the home page: the two photographs are staggered inside
   a 340px column on a wide screen. Once that column becomes the whole width,
   the stagger has nothing to play against — the cards keep the picture's
   260px and leave a ragged margin beside them. Below the desktop layout they
   become a pair of equal cards, then one full-width card on a phone. */
@media (max-width: 1024px) {
	.arm-environment__media {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.arm-environment__figure,
	.arm-environment__figure:nth-child(odd),
	.arm-environment__figure:nth-child(even) {
		width: auto;
		max-width: none;
		margin-inline: 0;
	}

	.arm-environment__figure img {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.arm-environment__media {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The menu card is hung off its item; near the right edge of a tablet it
   must still fit the window. */
.arm-nav__sub {
	max-width: calc(100vw - 32px);
}

/* ------------------------------------------------------------- legibility */

/* The dense card sets are drawn at 10.5–11.5px, which is comfortable in a
   four-column grid on a desktop and too small to read on a phone. Below
   600px nothing drops under 12px. */
@media (max-width: 600px) {
	.arm-container {
		padding-inline: 16px;
	}

	.arm-footer__copyright,
	.arm-card__meta,
	.arm-hcard__meta,
	.arm-hcard__kind,
	.arm-hcard__excerpt,
	.arm-hcard__more {
		font-size: 12.5px;
	}

	.arm-ev__kind,
	.arm-ev__date,
	.arm-ev__place,
	.arm-ev__excerpt,
	.arm-ev__more,
	.arm-nc__date,
	.arm-nc__excerpt,
	.arm-nc__more {
		font-size: 12.5px;
	}

	.arm-ev__title,
	.arm-nc__title {
		font-size: 13.5px;
	}

	.arm-topic__kind,
	.arm-topic__date,
	.arm-topic__more,
	.arm-topic__excerpt {
		font-size: 12.5px;
	}

	.arm-job__name,
	.arm-job__company,
	.arm-job__contact,
	.arm-job__date,
	.arm-job__more,
	.arm-job__text {
		font-size: 13px;
	}

	.arm-jobs__tag,
	.arm-job__tag,
	.arm-na__type,
	.arm-jobs__kind {
		font-size: 12.5px;
	}

	/* These two carry the layout's own attribute selector, so the override
	   has to be written with it as well. */
	[data-arm-layout="document"] .arm-ccard__label {
		font-size: 12.5px;
	}

	[data-arm-layout="document"] .arm-ccard__value {
		font-size: 13.5px;
	}

	/* A developer's card sets the person's name smaller than the company. */
	.arm-job__company + .arm-job__name {
		font-size: 12.5px;
	}

	.arm-nb__archive-hint {
		font-size: 12px;
	}

	/* Justified prose needs a column wide enough to distribute the slack;
	   in a phone's column it opens rivers between the words instead. */
	.arm-environment__intro,
	.arm-environment__item,
	.arm-about__text,
	.arm-ev__excerpt,
	.arm-nc__excerpt,
	.arm-topic__excerpt,
	[data-arm-layout="document"] .arm-about__text,
	[data-arm-layout="document"] .arm-article__body {
		text-align: start;
	}

	/* The dashboard's status pill on a member's own list. */
	.arm-status {
		font-size: 12px;
	}

	.arm-roster__col {
		font-size: 13.5px;
	}

	.arm-jobs__count,
	.arm-nb__subtitle {
		font-size: 12.5px;
	}
}

/* ---------------------------------------------------------- touch targets */

/* On a touch screen every control is at least 44px in the direction it is
   short in. Scoped to a coarse pointer so the mouse-driven layout, where
   these sit inside tight card rows, is left exactly as designed. */
@media (pointer: coarse) {
	.arm-burger {
		width: 44px;
		height: 44px;
		padding: 10px;
		justify-content: center;
	}

	.arm-social {
		width: 40px;
		height: 40px;
	}

	.arm-roster__page,
	.arm-roster__gap,
	.arm-topics__page,
	.arm-topics__gap {
		min-width: 44px;
		height: 44px;
	}

	.arm-roster__kind,
	.arm-jobs__tag,
	.arm-jobs__kind,
	.arm-na__type,
	.arm-tags__option {
		min-height: 40px;
	}

	.arm-roster__sort {
		min-height: 40px;
	}

	/* "read more" links: a line of text is 18px tall, a thumb needs 44. */
	.arm-topic__more,
	.arm-nc__more,
	.arm-ev__more,
	.arm-job__more,
	.arm-ccard__value,
	.arm-nb__link,
	.arm-roster__more,
	.arm-profile__contacts a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.arm-job__name,
	.arm-job__contact a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}

	/* The slideshow's ticks: the mark stays a thin line, the target grows. */
	.arm-hero__tick {
		height: 34px;
	}

	.arm-checkbox input,
	.arm-topics__filter input {
		width: 20px;
		height: 20px;
	}

}

/* The menu's chevrons only grow inside the burger menu: in the bar they sit
   beside their label, and a 44px target there pushes the whole header off a
   1024px tablet. */
@media (pointer: coarse) and (max-width: 900px) {
	.arm-nav__toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------- phone */

@media (max-width: 600px) {
	/* The form cards: the icon over the button rather than beside it. */
	[data-arm-layout="document"] .arm-files__card {
		min-height: 0;
		padding: 20px 18px;
		border-width: 2px;
	}

	[data-arm-layout="document"] .arm-files__card-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	[data-arm-layout="document"] .arm-files__card-btn {
		min-width: 0;
		width: 100%;
	}

	/* The roster's three figures: labels above values, nothing clipped. */
	.arm-roster__col-hchm,
	.arm-roster__col-hchp,
	.arm-roster__col-license {
		padding-inline: 4px;
		overflow-wrap: anywhere;
	}

	/* The profile header stacks, so its avatar no longer eats the name. */
	.arm-profile__head {
		gap: 20px;
	}

	.arm-profile__avatar {
		width: 108px;
		height: 108px;
	}

	/* Dashboard: one column of full-width controls. */
	.arm-dash {
		gap: 20px;
	}

	.arm-dash__form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.arm-dash__form-actions .arm-btn {
		width: 100%;
		text-align: center;
	}

	.arm-project {
		grid-template-columns: minmax(0, 1fr);
	}

	.arm-project__actions {
		flex-wrap: wrap;
	}

	.arm-project__actions .arm-btn,
	.arm-project__actions form {
		flex: 1 1 140px;
	}

	.arm-project__actions .arm-btn {
		text-align: center;
	}

	/* The editor's toolbar wraps instead of scrolling out of its box. */
	.arm-rte__toolbar {
		gap: 4px;
	}

	.arm-dialog {
		width: calc(100vw - 32px);
		padding: 22px 18px 18px;
	}
}

/* The one-line date + action row under a card can sit on two lines. */
@media (max-width: 420px) {
	.arm-topic__foot,
	.arm-job__aside {
		flex-wrap: wrap;
	}

	.arm-h2 {
		overflow-wrap: anywhere;
	}
}