/*
Theme Name: Norcall
Theme URI: https://www.norcall.fi
Author: Norcall
Author URI: https://www.norcall.fi
Description: A custom WordPress block theme for Norcall.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: norcall
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style
*/

/*
 * Most styling lives in theme.json. Use this file only for rules the block
 * settings cannot express.
 */

/* ---------------------------------------------------------------- bands -- */

/* Bands stack full-bleed with no gap between them. */
.norcall-band,
.norcall-hero,
.norcall-social {
	margin-block: 0;
}

/*
 * WordPress spaces the top-level template blocks (header, main, footer) with the
 * global block gap via `:where(.wp-site-blocks) > *`, which opens a strip above
 * main and — visibly — above the footer, between it and the last band. The bands
 * run edge to edge, so collapse that gap. (The `:where()` origin is zero
 * specificity, so this single class wins.)
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------- eyebrow -- */

/*
 * Small pink label above every section heading. It is the main device that
 * ties the editorial sections together.
 */
.norcall-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

/*
 * An eyebrow that follows prose starts a new section, so it needs a real break
 * above it — the flow block gap alone leaves it glued to the previous
 * paragraph. Eyebrows that follow a full-bleed band already have that band's
 * bottom margin, so they are deliberately excluded.
 */
.wp-block-post-content > p + .norcall-eyebrow,
.wp-block-post-content > ul + .norcall-eyebrow,
.wp-block-post-content > ol + .norcall-eyebrow {
	margin-top: var(--wp--preset--spacing--50);
}

/* On dark bands the pink is too low-contrast for small text. */
.has-secondary-background-color .norcall-eyebrow,
.has-primary-background-color .norcall-eyebrow {
	color: var(--wp--preset--color--base);
	opacity: 0.7;
}

/* ------------------------------------------------------------------ hero -- */

.norcall-hero {
	overflow: hidden;
}

/* Primary-colour fallback behind the hero photo while it loads or if it fails. */
.norcall-hero__media img {
	background-color: var(--wp--preset--color--primary);
}

/*
 * The hero photo bleeds to the right edge of the viewport. Below the stacking
 * breakpoint it returns to a normal, contained image.
 */
@media (min-width: 901px) {
	.norcall-hero__media .wp-block-image {
		margin-right: calc(50% - 50vw);
	}

	.norcall-hero__media img {
		aspect-ratio: 16 / 11;
		object-fit: cover;
		/* Subject sits in the right half of the photo; keep her centred in the
		 * cropped frame instead of clipped against the right edge. */
		object-position: 75% center;
		width: 100%;
	}
}

/* Lead paragraph in the home hero; the column is already narrow. */
.norcall-hero__lead {
	max-width: 36rem;
}

/*
 * The page hero's lead is a Post Excerpt block. Constrained layouts centre any
 * child narrower than the content width (`margin-inline: auto !important`), so
 * narrowing the wrapper would knock it out of line with the title. The measure
 * goes on the inner paragraph instead.
 */
.norcall-page-hero__lead p {
	max-width: 36rem;
}

/* ------------------------------------------------------------- numerals -- */

/*
 * Oversized step numbers for the process section. Outlined so they read as
 * ornament rather than content.
 */
.norcall-numeral {
	-webkit-text-stroke: 1px var(--wp--preset--color--primary);
	color: transparent;
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

.has-secondary-background-color .norcall-numeral {
	-webkit-text-stroke-color: var(--wp--preset--color--base);
	opacity: 0.5;
}

/*
 * Outline service icons sit on the pink block where the big numeral used to.
 * White stroke keeps them legible against the primary background.
 */
.norcall-service-icon {
	display: flex;
	justify-content: center;
}

.norcall-service-icon svg {
	aspect-ratio: 1;
	fill: none;
	height: auto;
	stroke: var(--wp--preset--color--base);
	width: clamp(4rem, 8vw, 6rem);
}

/* ----------------------------------------------------------------- stats -- */

.norcall-stat__figure {
	color: var(--wp--preset--color--primary);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ----------------------------------------------------------------- cards -- */

/*
 * Cards fill their column so a row of them lines up top and bottom. The column
 * has to become a flex container for the card's `height: 100%` to resolve.
 */
.norcall-cards > .wp-block-column {
	display: flex;
}

.norcall-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.norcall-card:hover {
	box-shadow: 0 1rem 2.5rem rgba(13, 18, 32, 0.1);
	transform: translateY(-4px);
}

/*
 * The whole card is a link to the service page: the "Lue lisää" anchor is
 * stretched to cover the card so a click anywhere on it follows through.
 */
.norcall-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Pins the "Lue lisää" link to the bottom regardless of description length. */
.norcall-card > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/*
 * The service icons are white artwork on transparency — invisible on a white
 * card. A pink badge gives them a surface to sit on, and lifting it so it
 * straddles the card's top edge breaks up the row of plain rectangles.
 */
.norcall-card > .norcall-card__icon {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.25rem rgba(238, 38, 117, 0.35);
	display: flex;
	height: 72px;
	justify-content: center;
	margin-top: calc((var(--wp--preset--spacing--40) + 36px) * -1);
	width: 72px;
}

/* Leaves room above the cards so the lifted badges are not clipped. */
.norcall-cards {
	padding-top: 36px;
}

.norcall-card__icon img {
	max-width: 36px;
	width: auto;
}

/* ----------------------------------------------------------------- staff -- */

/* Round portraits, shared with the pull quote's attribution photo. */
.norcall-staff__photo img,
.norcall-pullquote__photo img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * The portraits were shot against a near-white backdrop, which on the surface
 * band leaves the top of the crop with no visible edge — the circle reads as a
 * cut-off shape. A pink ring closes it, picking up the quote marks alongside.
 */
.norcall-pullquote__photo img {
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary);
}

.norcall-staff__phone {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------- testimonials -- */

.norcall-quote {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: var(--wp--preset--spacing--30);
}

.norcall-quote cite {
	color: var(--wp--preset--color--neutral);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------- header/footer -- */

/*
 * Only the main bar pins; the navy utility strip above it scrolls away, so the
 * sticky context is the bar itself rather than the whole header.
 */
.norcall-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid rgba(13, 18, 32, 0.08);
	box-shadow: 0 0.25rem 1.5rem rgba(13, 18, 32, 0.06);
	position: sticky;
	top: 0;
	z-index: 10;
}

.norcall-header .wp-block-navigation-item__content,
.norcall-header__cta .wp-block-button__link {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.norcall-header .wp-block-navigation-item__content {
	position: relative;
}

/* Pink underline: wipes in on hover, held open for the current page. */
.norcall-header .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--primary);
	bottom: -0.4em;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.norcall-header .wp-block-navigation-item__content:hover::after,
.norcall-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.norcall-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Navy strip above the main bar carrying phone, email and social. */
.norcall-topbar a {
	color: var(--wp--preset--color--base);
}

.norcall-topbar a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/*
 * The logo PNG is dark artwork. Inverting it in CSS avoids shipping a second
 * file just for the navy footer.
 */
.norcall-footer__logo img {
	filter: brightness(0) invert(1);
}

.norcall-footer a {
	color: var(--wp--preset--color--base);
}

.norcall-footer a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* ------------------------------------------------------------ contact form -- */

/* The default pink link colour is invisible on the pink band. */
.norcall-contact a {
	color: var(--wp--preset--color--base);
}

.norcall-contact a:hover {
	color: var(--wp--preset--color--primary);
}

/*
 * Contact Form 7 renders plain markup with no block styles, so the band's form
 * needs its own rules.
 */
.norcall-contact .wpcf7 input[type="text"],
.norcall-contact .wpcf7 input[type="email"],
.norcall-contact .wpcf7 textarea {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	box-sizing: border-box;
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.9rem 1rem;
	width: 100%;
}

.norcall-contact .wpcf7 input:focus,
.norcall-contact .wpcf7 textarea:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--wp--preset--color--base);
	outline: none;
}

.norcall-contact .wpcf7 input::placeholder,
.norcall-contact .wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--base);
	opacity: 0.75;
}

.norcall-contact .wpcf7 textarea {
	min-height: 8rem;
}

.norcall-contact .wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding: 1rem 2.25rem;
	transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
	width: auto;
}

.norcall-contact .wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.norcall-contact .wpcf7-not-valid-tip,
.norcall-contact .wpcf7-response-output {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Contact Form 7 wraps every field in its own <p>. Without a real gap the
 * inputs read as one solid block instead of discrete fields.
 */
.norcall-contact .wpcf7 p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.norcall-contact .wpcf7 p:has(> label > .wpcf7-form-control-wrap > textarea),
.norcall-contact .wpcf7 p:has(> .wpcf7-form-control-wrap > textarea) {
	margin-top: var(--wp--preset--spacing--30);
}

.norcall-contact .wpcf7 p:has(input[type="submit"]) {
	margin-top: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------- job form -- */

.norcall-jobform .wpcf7-form {
	max-width: 48rem;
}

/*
 * Contact Form 7 emits a flat sequence of <p>-wrapped fields, so the two-column
 * layout for the application form has to come from CSS. The textarea, file
 * field and submit span the full width.
 */
@media (min-width: 901px) {
	.norcall-jobform .wpcf7-form {
		column-gap: var(--wp--preset--spacing--30);
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* Everything spans both columns unless it is a short text field. */
	.norcall-jobform .wpcf7-form > * {
		grid-column: 1 / -1;
	}

	.norcall-jobform .wpcf7-form > p:has(input[type="text"]),
	.norcall-jobform .wpcf7-form > p:has(input[type="email"]) {
		grid-column: auto;
	}

	.norcall-jobform .wpcf7-form > p:has(input[name="nimi"]) {
		grid-column: 1 / -1;
	}
}

.norcall-jobform .wpcf7 input[type="file"] {
	background: rgba(255, 255, 255, 0.1);
	border: 1px dashed rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	color: var(--wp--preset--color--base);
	padding: 0.9rem 1rem;
	width: 100%;
}

.norcall-jobform .wpcf7 label {
	display: block;
}

.norcall-jobform .wpcf7 .norcall-jobform__filelabel {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------ pull quote -- */

/*
 * Both marks are inline and identically sized, so the quote opens and closes as
 * a matched pair rather than a big decorative glyph on its own line answered by
 * a small one mid-sentence.
 */
.norcall-pullquote__mark {
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-size: 1.4em;
	font-weight: 800;
	line-height: 0;
	transform: translateY(0.18em);
}

/* Hangs the opening mark into the margin so the text keeps a flush left edge. */
.norcall-pullquote p:first-child > .norcall-pullquote__mark:first-child {
	margin-left: -0.5em;
}

.norcall-pullquote p:nth-of-type(2) {
	font-weight: 300;
}

/* The portrait holds its size; only the quote beside it gives way. */
.norcall-pullquote__photo {
	flex-shrink: 0;
}

/*
 * Phone-width quote: the portrait beside 128px of photo and its gap leaves the
 * large quote type two words to a line, so drop the portrait below the
 * attribution instead. Core's flex layout sets the row direction and centring on
 * a single class, which this two-class selector outranks.
 */
@media (max-width: 600px) {
	.norcall-pullquote > .norcall-pullquote__inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* --------------------------------------------------------- page prose -- */

/*
 * Page copy gets a ~70-character measure, but has to stay flush with the left
 * edge of the full-bleed bands around it rather than centring on its own.
 *
 * Core's constrained layout centres children with `margin-inline: auto
 * !important`, which for a full-width child resolves to this same offset — so
 * reproducing it by hand puts narrow prose on exactly the band's left edge,
 * and !important is needed to win against core.
 */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.norcall-pullquote > .norcall-pullquote__inner {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
	max-width: 48rem;
}

/* ------------------------------------------------------- content bands -- */

/*
 * Full-bleed patterns dropped inside a page's prose (values, stats, pull
 * quotes) need their own breathing room. Only open the gap where a band
 * actually meets prose — the front page is nothing but bands, and those must
 * stay flush against each other.
 */
.wp-block-post-content > :not(.alignfull) + .alignfull {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-post-content > .alignfull:has(+ :not(.alignfull)) {
	margin-bottom: var(--wp--preset--spacing--60);
}

/*
 * Inner-page templates (page.html, page-toihin-norcallille.html) hold the post
 * content between the navy page hero above and the pink contact / job-form band
 * below, so the prose needs clearance from both. When that content itself begins
 * or ends with a full-bleed band, the band should meet its neighbour flush
 * instead of being pushed off by this margin — otherwise a white strip opens up
 * between two coloured bands (e.g. the pull quote above the job form on Töihin).
 */
.norcall-page-content {
	margin-block: var(--wp--preset--spacing--60);
}

.norcall-page-content:has(> .alignfull:first-child) {
	margin-top: 0;
}

.norcall-page-content:has(> .alignfull:last-child) {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ responsive -- */

/* Columns stack below 900px, not the block default of 782px. */
@media (max-width: 900px) {
	/*
	 * Stacked cards need clearance for the badge that overhangs their top edge,
	 * otherwise it lands on top of the card above.
	 */
	.norcall-cards > .wp-block-column + .wp-block-column {
		padding-top: 36px;
	}

	/*
	 * Core forces `flex-wrap: nowrap !important` on columns at >=782px, so the
	 * theme's intended 900px stacking needs !important to win in the 782-900 band.
	 */
	.norcall-band .wp-block-columns:not(.is-not-stacked-on-mobile),
	.norcall-hero .wp-block-columns:not(.is-not-stacked-on-mobile),
	.norcall-contact .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.norcall-band .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
	.norcall-hero .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
	.norcall-contact .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/*
	 * The hero runs flush under the header on desktop; stacked on mobile it needs
	 * a little breathing room above it. !important overrides core's constrained
	 * first-child margin reset (the hero is the front page's first block).
	 */
	.norcall-hero {
		margin-top: var(--wp--preset--spacing--40) !important;
	}

	/*
	 * The opening quote mark hangs into the left margin on desktop, where the
	 * quote is offset inward. On mobile the quote sits flush to the gutter, so the
	 * hang would push the mark off the left edge — keep it inline instead.
	 */
	.norcall-pullquote p:first-child > .norcall-pullquote__mark:first-child {
		margin-left: 0;
	}

	/*
	 * Stacked hero: the photo runs full width, bleeding past the hero's root
	 * padding to both viewport edges. The text column keeps its padding.
	 */
	.norcall-hero__media .wp-block-image {
		margin-left: calc(-1 * var(--wp--style--root--padding-left));
		margin-right: calc(-1 * var(--wp--style--root--padding-right));
	}

	.norcall-hero__media img {
		width: 100%;
	}
}

/*
 * Tablet and below use the mobile header: the navigation collapses to its
 * hamburger overlay. WordPress only does this under 600px by default, so widen
 * the switch to 820px by overriding the block's own responsive rules. Within the
 * flex row the "Ota yhteyttä" button then sits to the left of the menu toggle.
 */
@media (max-width: 820px) {
	/*
	 * The wider spacing scale is sized for full-width bands; on a phone the same
	 * gutter and header gaps overflow the row (wrapping the CTA and topbar), so
	 * tighten the header for small screens: smaller page gutter, compact logo, a
	 * one-line CTA and smaller gaps.
	 */
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--30);
		--wp--style--root--padding-right: var(--wp--preset--spacing--30);
	}

	.norcall-header__logo img {
		width: 140px !important;
	}

	.norcall-header__cta .wp-block-button__link {
		white-space: nowrap;
	}

	.norcall-topbar > .wp-block-group,
	.norcall-header > .wp-block-group,
	.norcall-header > .wp-block-group .wp-block-group {
		gap: var(--wp--preset--spacing--30);
	}

	.norcall-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.norcall-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.norcall-header__cta {
		order: -1;
	}

	/* Full-screen overlay menu: large, tappable links. */
	.norcall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.norcall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}

	/*
	 * The close button should read as the same control as the hamburger it
	 * replaces: identical icon size, and pinned to the same spot in the header
	 * row (the overlay otherwise drops it into the top-right corner).
	 */
	/*
	 * 48px touch targets, but keep the icon flush to the header's right content
	 * edge (16px) so it lines up with the topbar and the rest of the header —
	 * the tap area extends inward, not past the edge.
	 */
	.norcall-header .wp-block-navigation__responsive-container-open,
	.norcall-header .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 48px;
		height: 48px;
	}

	.norcall-header .wp-block-navigation__responsive-container-open svg,
	.norcall-header .wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	/*
	 * Align the X with the right-aligned menu links. Its glyph carries ~4.5px of
	 * internal padding inside the 24px icon, so nudge the button 4px past the
	 * content edge for the visible mark to line up with the link text.
	 */
	.norcall-header .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 61px;
		right: 16px;
	}

	/* Start the menu below the header row so it clears the close button there. */
	.norcall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 115px;
	}
}

/*
 * Cookie-consent banner (see norcall_consent_banner() and assets/js/consent.js).
 * Reuses the navy/pink preset tokens. Hidden via the [hidden] attribute the JS
 * toggles; shown as a fixed bar across the bottom of the viewport.
 */
.norcall-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 1000;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	box-shadow: 0 -4px 24px rgba(13, 18, 32, 0.25);
}

.norcall-consent[hidden] {
	display: none;
}

.norcall-consent__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.norcall-consent__text {
	margin: 0;
	flex: 1 1 420px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.5;
}

.norcall-consent__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.norcall-consent__btn {
	font-family: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 12px 24px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

.norcall-consent__btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.norcall-consent__btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.4);
}

.norcall-consent__btn:hover,
.norcall-consent__btn:focus-visible {
	opacity: 0.9;
}

/* Reopen link in the footer. */
.norcall-consent-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.norcall-consent__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.norcall-consent__actions {
		justify-content: flex-end;
	}
}