/*
 * Page heroes, shown above the menu bar.
 *
 * Layouts: logo and introduction (Home, Children's), dark with a section logo
 * and an enquiry button (Animation, Art Licensing), and boxed with the menu
 * bars inside (About, Contact, Artist Submission).
 */

:root { --b-push: 0px; }

@media (max-width: 1200px) {
	:root { --b-push: clamp(0px, (1200px - 100vw) * 0.5, 220px); }
}

.hero { position: relative; padding: 10px; }

.hero--circles {
	background-image: url("../img/circles-left.svg"), url("../img/circles-right.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
	background-size: 300px, 300px;
}

.hero--home { min-height: 68vh; background-position: left top, right 0 bottom calc(-1 * var(--b-push)); }
.hero--childrens { display: flex; flex-direction: column; min-height: 68vh; }
.hero--dark { display: flex; flex-direction: column; gap: 20px; background-color: var(--c-dark); }
.hero--licensing { min-height: 48vh; }
.hero--animation { min-height: 40vh; }

/* Logo, text and button column */
.hero__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 10px; }
.hero--childrens .hero__inner,
.hero--licensing .hero__inner { min-height: 24vh; }
.hero--animation .hero__inner { min-height: 12vh; }

.hero__logo { position: relative; margin-top: 66px; text-align: center; }
.hero__logo a { display: inline-block; }
.hero__logo img { display: inline-block; vertical-align: middle; max-width: 78%; height: auto; }

.hero__image { position: relative; text-align: center; }
.hero__image img { display: inline-block; vertical-align: middle; width: 342px; max-width: 100%; height: auto; }
.hero--licensing .hero__image { margin-bottom: 32px; }

.hero__text { position: relative; display: flex; flex-direction: column; padding: 0 10px; }
.hero__text-inner { display: flex; flex-direction: column; flex-grow: 1; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0; }

@media (min-width: 768px) {
	.hero--dark .hero__text-inner { max-width: 1060px; }
}

.hero__copy { position: relative; font-family: "Oxygen", Sans-serif; font-weight: 400; color: var(--c-text); }
.hero--home .hero__copy { padding: 0 8%; text-align: center; font-size: 16px; }
.hero--childrens .hero__copy { text-align: center; font-size: 17px; }
.hero--dark .hero__copy { text-align: left; font-size: 18px; color: var(--c-white); }
.hero--page .hero__copy { text-align: center; font-size: 18px; }

.hero__cta { position: relative; text-align: center; }
.hero--licensing .hero__cta { margin: 42px 0 26px; }
.hero--animation .hero__cta { margin: 34px 0 -12px; }

/* Boxed layout with the menu bars inside (About, Contact, Artist Submission) */
.hero__box { position: relative; display: flex; flex-direction: column; padding: 0 10px; }
.hero--contact .hero__box,
.hero--submission .hero__box { min-height: 24vh; }
.hero__box-inner { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-end; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0; }
.hero--about .hero__box-inner { align-items: center; }

.hero__logo-row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; justify-content: center; align-items: center; gap: 20px; width: 100%; margin-top: 66px; padding: 10px; }
.hero__logo-row .hero__logo { grid-column: 2; justify-self: center; width: auto; max-width: 100%; margin-top: 0; overflow: hidden; }

.hero__contact-line { position: relative; font-family: "Oxygen", Sans-serif; font-size: 18px; font-weight: 400; line-height: 27px; color: var(--c-text); }
.hero__actions { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 10px; }

@media (max-width: 767px) {
	.hero--childrens, .hero--dark,
	.hero__inner, .hero__text-inner, .hero__box-inner, .hero__actions { flex-wrap: wrap; }
	.hero__logo-row { grid-template-columns: 1fr auto; }
	.hero__logo-row .hero__logo { grid-column: 1; }
}