/* FAQ accordion — Figma «Container» `3546:13413` (the item: Default
   `3546:13387` collapsed, Variant2 `3546:13414` expanded) inside «FAQ Section»
   `3538:13359` / `3648:12119` at 1440 and `4393:26398` / `4426:29260` at 390.

   Numbers, all read from those nodes:

   - section: bg #F3F4F6, padding 80/16 at 390 (4393:26398), 100/56 at 1440
     (3538:13359: title top 100, list bottom 758 of 858), gap 40 between the
     header and the list (4393:26398 itemSpacing);
   - list: itemSpacing −1, so the 1px rules of neighbouring items collapse
     into one; 358 wide at 390 (fill), 765 at 1440, right-aligned inside the
     1328 content column (619 = 56 + 1328 − 765);
   - item: padding 32/0, a REAL 1px #99A4B2 border top and bottom — the .fig
     counts both strokes in the item's own height (106 = 1 + 32 + 40 + 32 + 1
     collapsed, 196 = 1 + 32 + 40 + 24 + 66 + 32 + 1 expanded), which is what
     a border-box border does;
   - question row: HORIZONTAL, gap 24, cross CENTER; question fills
     (701 = 765 − 40 − 24 at 1440, 294 = 358 − 40 − 24 at 390), icon 40×40;
   - expanded: VERTICAL, gap 24 — the answer sits under the icon too, at the
     item's full width (765 / 358, `layoutAlign: STRETCH`).

   There is no 768 or 1920 FAQ frame in the file (inventory.md), so the 390
   layout stays fluid up to 1440 and only the type steps, through tokens.css.

   Animation: none. `interactions` is empty on `3546:13413`, on both its
   variants and on every FAQ section that instantiates them — checked in the
   .fig (`fig-canvas.js interactions`) and in the REST dump. The accordion
   therefore opens and closes instantly, like the mega-menu and the filters
   (animations.md: «відкриття/закриття — миттєве, анімація не додається»),
   which is also why `<details>` needs no script at all. */

.c-faq {
	box-sizing: border-box;
	padding: 80px 16px;
	background: var(--color-neutral-100);
}

.c-faq__inner {
	display: flex;
	flex-direction: column;

	/* 4393:26398 itemSpacing: header → list. */
	gap: 40px;
	margin-inline: auto;
	max-width: 1328px;
}

.c-faq__list {
	display: flex;
	flex-direction: column;
}

/* «FAQ Item …» — one `<details>`. */
.c-faq__item {
	box-sizing: border-box;
	padding: 32px 0;
	border-top: 1px solid var(--color-neutral-400);
	border-bottom: 1px solid var(--color-neutral-400);
}

/* itemSpacing −1 on the list: the rule between two items is one line, not
   two. */
.c-faq__item + .c-faq__item {
	margin-top: -1px;
}

.c-faq__summary {
	display: flex;
	align-items: center;

	/* 3546:13387 / 3546:13421 itemSpacing. */
	gap: 24px;
	cursor: pointer;

	/* The UA's own triangle/disclosure marker is not in the design; the plus
	   and minus glyphs below are. Both spellings are needed: `list-style` for
	   Firefox and Chromium, the pseudo-element for Safari. */
	list-style: none;
}

.c-faq__summary::-webkit-details-marker {
	display: none;
}

/* 3546:13414 itemSpacing: question row → answer. */
.c-faq__item[open] .c-faq__summary {
	margin-bottom: 24px;
}

/* «Чи можна оплатити карткою?» 3538:13356 — «H3», 28/28 at 390, 32/32 at 768,
   36/36 at 1440, 44/44 at 1920, uppercase, leadingTrim CAP_HEIGHT. The
   0.041 em of bottom padding is the Kilok→Exo 2 cap difference (see
   section-title.css). */
.c-faq__question {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding-bottom: 0.041em;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;

	/* A long Ukrainian word at 150 % text scale must wrap, not widen the page
	   (WCAG 1.4.4/1.4.10; the same guard repertoire.css, afisha.css and visit.css
	   use). At 100 % nothing breaks, so the Figma measurement is untouched. */
	overflow-wrap: anywhere;
}

/* «icons/plus» 3546:13372 / «icons/minus» 3546:13416 — a 36×36 glyph inside a
   40×40 box (the export's 20-unit viewBox holds the same 2-unit padding, so
   the path is 36 of 40 once scaled).

   Colour: the .fig's #12AD99 is 2.56:1 on this #F3F4F6 ground and fails WCAG
   1.4.11 for the one graphic that shows the open/closed state, so the next
   step of the same ramp is used — --color-primary-600 (#0C9586, 3.38:1).
   Logged in designer-questions.md. */
.c-faq__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-primary-600);
}

.c-faq__icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

.c-faq__item:not([open]) .c-faq__icon--minus,
.c-faq__item[open] .c-faq__icon--plus {
	display: none;
}

/* «About Text» 3546:13419 / «Answer Text» — «S/S text (regular)», at the
   item's full width. */
.c-faq__answer {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.c-faq__answer > :first-child {
	margin-top: 0;
}

.c-faq__answer > :last-child {
	margin-bottom: 0;
}

/* ================================================================= 1440+ */

@media (min-width: 1440px) {

	/* The 56 is the page column (`--page-gutter`, container.css), not a
	   number of this component's own: the band is full-bleed and its content
	   has to start where the rest of the page's does (client fix ПР-20). The
	   1328 grid inside stays centred in whatever column it is given. */
	.c-faq {
		padding: 100px var(--page-gutter);
	}

	/* 3538:13359 / 3648:12119: the header's 319 column on the left, the 765
	   list flush with the content column's right edge. The two are siblings
	   in the frame, not children of the header — hence the grid here and not
	   in section-title.css. */
	.c-faq__inner {
		display: grid;
		grid-template-columns: 319px 765px;
		justify-content: space-between;
		gap: 0;
	}

	/* The header keeps its own column and does not turn into the 1440 row
	   layout section-title.css gives it by default: in these frames the
	   heading stands alone above nothing, 319 wide. */
	.c-faq__header {
		flex-direction: column;
		align-items: flex-start;
	}
}