@charset "utf-8";


/* --------------------------------------------------------------------------
   Contacts
-------------------------------------------------------------------------- */

body {

	> main {

		> .container {

			display: flex;
			width: var(--registration-width);
			max-width: calc(100% - var(--space-32));
			flex-direction: column;
			gap: var(--space-64);
			box-sizing: border-box;
			margin: 0 auto;
			padding: var(--space-32) 0 var(--space-64);


			/* --------------------------------------------------------------------------
               Contacts
            -------------------------------------------------------------------------- */
			> header {

				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--space-24);

				address,
				#map {
					height: 25rem;
					box-sizing: border-box;
					background: var(--color-brand-surface-lowest);
					border-radius: var(--radius-500);
				}

				address {

					display: flex;
					min-width: 0;
					flex-direction: column;
					align-items: flex-start;
					padding: var(--space-32);
					font-style: normal;

					small {
						max-width: 18rem;
						color: var(--color-neutral-content-medium);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-s);
					}

					.phone {
						margin-top: var(--space-32);
						color: var(--color-neutral-content-high);
						font-size: var(--font-size-body-l);
						font-weight: var(--font-weight-semibold);
						line-height: var(--line-height-body-l);
						text-decoration: none;
					}

					> span {
						margin-top: var(--space-4);
						color: var(--color-neutral-content-medium);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-s);
					}

					> a:not(.phone),
					> p {

						display: flex;
						align-items: center;
						gap: var(--space-12);
						margin: 0;
						color: var(--color-neutral-content-high);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-semibold);
						line-height: var(--line-height-body-s);

						svg {
							display: block;
							width: var(--space-24);
							height: var(--space-24);
							flex: 0 0 var(--space-24);
							color: var(--color-brand-primary);
						}

					}

					> a:not(.phone) {
						margin-top: auto;
						text-decoration: none;
					}

					> p {
						margin-top: var(--space-12);
						font-weight: var(--font-weight-regular);
					}

				}

				#map {

					min-width: 0;
					overflow: hidden;

					.marker {
						width: 2.5rem;
						height: auto;
						object-fit: contain;
						transform: translate(-50%, -100%);
						pointer-events: none;
					}

					.ymaps3--map-container {

						z-index: 1;

						.ymaps3--controls:has(.ymaps3--open-maps-button), .ymaps3--map-copyrights__logo {
							display: none;
						}

					}

				}

			}


			/* --------------------------------------------------------------------------
               AnimalFace
            -------------------------------------------------------------------------- */
			> article {

				display: flex;
				flex-direction: column;
				gap: var(--space-16);

				h1,
				h2 {
					margin: 0;
					color: var(--color-neutral-content-high);
					font-size: var(--font-size-heading-m);
					font-weight: var(--font-weight-semibold);
					line-height: var(--line-height-heading-m);
				}

				> p {
					margin: 0;
					color: var(--color-neutral-content-medium);
					font-size: var(--font-size-body-s);
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-body-s);
				}

				.cards {

					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
					gap: var(--space-24);
					margin-top: var(--space-16);

					> p {
						margin: 0;
						padding: var(--space-24);
						color: var(--color-neutral-content-medium);
						background: var(--color-brand-surface-lowest);
						border-radius: var(--radius-500);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-s);
					}

				}

			}


			/* --------------------------------------------------------------------------
               Vet.AF
            -------------------------------------------------------------------------- */
			> .vetaf {

				.screens {
					display: grid;
					grid-template-columns: repeat(3, minmax(0, 1fr));
					gap: var(--space-40);
					margin-top: var(--space-24);

					figure {
						min-width: 0;
						margin: 0;
						padding: 2.375rem 0 0 2.375rem;
						overflow: hidden;
						background: var(--color-brand-surface-lowest);
						border-radius: var(--radius-500);

						img {
							display: block;
							width: 100%;
							height: auto;
						}

					}

				}

				> .button {
					display: flex;
					width: fit-content;
					height: var(--space-40);
					align-items: center;
					justify-content: center;
					align-self: center;
					box-sizing: border-box;
					margin-top: var(--space-24);
					padding: 0 var(--space-24);
					color: var(--color-neutral-white);
					background: var(--color-brand-secondary-primary);
					border: 0;
					border-radius: var(--radius-200);
					font-size: var(--font-size-body-s);
					font-weight: var(--font-weight-medium);
					line-height: var(--line-height-body-s);
					text-decoration: none;
					transition: background var(--transition-default);

					&:hover {
						background: var(--color-brand-secondary-primary-hover);
					}
				}

			}

		}

	}

}