:root {
	--orange: #F7A14A;
	--purple: #74147F;
}

/* RESET CLASSES */

body {
		font-family: 'Roboto Condensed', sans-serif;
		margin: 0;
		padding: 0;
}

img {
		width: 100%;
}

button {
	cursor: pointer;
}

/* FUNCTION CLASSES */

.btn {
	padding: 6px 8px;
	background-color: var(--purple);
	border: none;
	border-radius: 4px;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 2px;
}

.container {
	width: 90%;
	max-width: 1024px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

/* HELPER CLASSES */

.orange-text {
	color: var(--orange);
}

.text-center {
	text-align: center;
}

.d-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.flex-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.spacer {
	margin-top: 40px;
}

/***** HEADER *****/

.main-header {
	position: relative;
	overflow: hidden;

	&.responsive {
		display: flex;
		background: #93197e url('assets/hero-bg_dt.png') no-repeat;
		background-size: cover;
		aspect-ratio: 1 / .85;

		& .content {
			box-sizing: border-box;
			position: absolute;
			display: flex;
			flex-direction: column;
			height: 100%;
			padding: 26px 18px 0;

			& .navbar {
				position: relative;
				display: flex;
				flex-direction: column;
				flex: 1;
				border: solid 2px var(--orange);

				& .logo {
					width: 50%;
					padding: 8px 16px 4px;
				}

				& .nav {
					display: flex;
					flex-direction: column;
					flex: 1;
					justify-content: space-around;
					margin: 0;
					padding: 16px 24px 32px;
					background-color: rgba(0, 0, 0, 0.4);
					list-style: none;

					& a {
						display: inline-block;
						color: white;
						font-size: 16px;
						text-decoration: none;
						text-transform: uppercase;

						&:hover {
							text-decoration: underline;
						}
					}
				}

				& .login {
					position: absolute;
					bottom: -16px;
					width: 110px;
					margin-left: 16px;
					background-color: var(--orange);
					font-size: 16px;
					font-weight: 500;
					text-transform: uppercase;
				}
			}

			& .social {
        padding: 24px 32px 6px;
        width: fit-content;

				& .btn-link {
					display: inline-block;
					width: 20px;
					padding: 6px;
    		}
    	}

			& .overlay-img {
				position: absolute;
				display: block;
				bottom: -1px;
				right: -40px;
				width: 70%;
				height: 100%;
				background: url('assets/hero-image_dt.png') no-repeat center bottom;
				background-size: contain;
			}
		}
	}
}

/***** CONTENT CARDS *****/

main {
	padding: 24px 12px;
	background-color: #f1f1f1;

	& section {
		box-sizing: border-box;
		padding: 0 !important;

		& h2 {
			padding: 4px 16px;
			background-color: var(--purple);
			border-radius: 4px;
			color: white;
			font-size: 18px;
			font-weight: 300;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		& .flex-container {
			display: flex;
			flex-direction: column;
			gap: 24px;
		}
	
		&.card {
			position: relative;
			padding: 24px !important;
			background-color: white;
			border-radius: 8px;

			&.has-title {
				margin-top: 24px;
			}

			&.has-image {
				margin-bottom: 60px;
			}
			
			& h2 {
				position: absolute;
				top: -14px;
				left: 0;
				width: fit-content;
				margin: 0;
			}


			& .img-container {
				width: 85%;
				height: 75px;
				margin: 32px auto 0;

				& img {
					border-radius: 16px;
				}
			}
		}

		& p {
			font-size: 18px;
			line-height: 1.4;

			& strong {
				font-weight: 500;
			}
		}
	}

	& .simple-card {
    background-color: white;
    padding: 16px;
    border-radius: 4px;
    position: relative;
	}

	& h3 {
			margin: 0;
			font-weight: 500;
			font-size: 18px;
	}

	& .btn {
		&.card-btn {
			position: absolute;
			right: 12px;
			bottom: -10px;
			border-radius: 2px;
		}

		&.more-btn {
			display: block;
			margin: 50px auto 40px;
			padding: 12px 24px;
			border-radius: 0;
			font-size: 16px;
			text-transform: uppercase;
			opacity: .5;

			&:hover {
				opacity: 1;
			}
		}
	}

	.h-img-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		height: 110px;
		padding: 0;
		background-color: var(--purple);
		color: white;
		cursor: pointer;

		& h3 {
			width: 114px;
			margin: 16px;
			padding-bottom: 6px;
			border-bottom: solid 3px var(--orange);
			font-size: 16px;
			font-weight: 300;
			text-transform: uppercase;
			line-height: 1.2;
			letter-spacing: 1px;

			& strong {
				font-weight: 600;
			}

			/* &.min-w {
				width: 136px !important;
			} */
		}

		& .card-img {
			flex: 1;
			min-height: 100px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;

			&.estagio {
				background-image: url('assets/foto01.png');
			}
			&.vagas {
				background-image: url('assets/foto02.png');
			}
			&.supervisor {
				background-image: url('assets/foto03.png');
			}
			&.concedente {
				background-image: url('assets/foto04.png');
			}
			&.informe {
				background-image: url('assets/foto05.png');
			}
		}
	}

	& .documents {
		margin-top: 50px;
		margin-bottom: 50px;

		& .btn-document {
			border: none;
			width: calc(50% - 4px);
			padding: 0;
		}
	}

	& .box-header {
		position: relative;
		background-color: var(--purple);
		border-radius: 4px 4px 0 0;
		color: white;

		& h2 {
			padding: 10px 0;
			margin: 0;
			font-size: 16px;
			font-weight: 400;
			text-align: center;
			/* background-color: unset; */

			& small {
				font-size: 12px;
			}
		}

		& .parceria-img {
			position: absolute;
			left: -16px;
			top: 40%;
			flex: 1;
			width: 70%;
			max-width: 240px;
			aspect-ratio: 1.832;
			background: url(assets/parceria-coruripe.png) no-repeat;
			background-size: cover;
			border-radius: 14px;
			box-shadow: 0 0 6px rgba(0, 0, 0, .25);
		}

		& .subtitle {
			width: 72px;
			margin-top: 24px;
			margin-left: 70%;
			margin-bottom: 20px;
			font-size: 14px;
			line-height: 1.3;
		}
	}

	& .flex-wide {
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}

	.parceria-container.mobile { display: block }

	.parceria-container.desktop { display: none }

	& .text-parcerias {
		background-color: white;
		padding: 32px 16px 1px;
		border-radius: 0 0 4px 4px;
	}

	& .parcerias {
		margin: 20px 0;

		& h3 {
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 10px;
		}
	}

}

@media screen and (min-width: 900px) {

	.h-img-card {
		align-items: stretch !important;
		height: 140px !important;
		gap: 24px;
		
		& h3 {
			width: 210px !important;
			margin: auto 16px !important;
			font-size: 20px !important;
			line-height: 1.3 !important;

			&.min-w {
				width: 136px !important;
			}
		}

		& .card-img {
			flex: 1;
			min-height: 100px !important;
			background-repeat: no-repeat;
			background-position: right center !important;
			background-size: cover !important;
		}
	}
}

/***** FOOTER *****/

footer {
	background-color: var(--purple);
	color: white;
	padding: 24px 16px;
	text-align: center;

	& .footer-logo {
    width: 50%;
    margin: 0 auto 12px;
	}

	& address, p {
		margin: 0 0 8px;
		font-size: 11px;
		line-height: 1.8;
		text-transform: uppercase;
		font-style: normal;
	}

	& .social {
		display: flex;
		justify-content: center;
		gap: 16px;
		width: auto;
		padding: 8px 0 0;

		& .btn-link {
			width: 24px;
		}
	}
}

/* 
 ***** MEDIA QUERIES *****
 ===== TABLET + DESKTOP =====
*/

@media screen and (min-width: 769px) {

	.container {
		width: 90%;
		max-width: 1440px;
	}

	.main-header {
		
		&.responsive { 
			position: relative;
			display: block;
			height: 90vh;
			background: #93197e url('assets/hero-bg_dt.png') no-repeat;
			background-size: cover;
			aspect-ratio: unset;

			& .content {
				position: relative;
				width: 90%;
				max-width: 1440px;
				height: 100%;
				margin-right: auto;
				margin-left: auto;
				padding: unset;
			}

			& .navbar {
				justify-content: space-between;
				margin: 50px 0 16px;

				& .nav {
					padding: 40px 160px 80px !important;

					& a {
						font-size: 24px !important;
					}
				}

				& .logo {
					width: 300px !important;
					padding: 24px 150px !important;
				}

				& .login {
					margin-left: 160px !important;
					font-size: 18px !important;
				}
			}

			& .social {
				padding: 16px 160px !important;

				& .btn-link {
					width: 36px !important;
				}
			}

			& .overlay-img {
				bottom: -1px !important;
				right: 10% !important;
				width: 600px !important;
				height: 100% !important;
			}
		}
	}

	section {
		&.card {
			&.has-image {
				padding: 0 !important;

				& p {
					flex: 1;
					margin-bottom: 0;
					padding: 40px;
					text-align: center;
				}

				& .img-container {
					flex: 1;
					height: unset !important;
					margin: 0 !important;
					border-radius: 0 6px 6px 0;
					overflow: hidden;
					
					& img {
						height: 100%;
						border-radius: 0;
					}
				}
			}

			& h2 {
				left: calc(25% - 64px) !important;
			}
		}
	}

	article {
    display: flex;
    gap: 40px;
	}

	.flex-container {
		flex-direction: row !important;
		gap: 16px !important;

		& .simple-card {
			width: 33.333%;
		}
	}

	.flex-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
	}

	.parceria-container.mobile { display: none !important }

	.parceria-container.desktop {
    display: flex !important;
		border-radius: 6px;
		background-color: var(--purple);
		overflow: hidden;

		& .text-parcerias {
			display: block;
			flex: 1;
			padding: 40px 80px 30px !important;
			border-radius: 0;
			background-color: transparent;
			color: white;

			& h2 {
				margin-top: 0 !important;
				padding: 0;
				background-color: transparent;
				border-radius: 0;
				color: white;
				font-size: 28px;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 1px;

				& small {
					font-size: 18px;
					font-weight: 300;
				}
			}
		}

		& .box-header {
			flex: 1;
			min-width: 50%;
			background-color: transparent;

			.d-flex {
				display: block;
				height: 100%;
			}

			.parceria-img {
				position: static;
				width: unset;
				height: 100%;
				max-width: unset;
				border-radius: 0;
				box-shadow: none;
				background-size: cover !important;
			}

			.subtitle {
				display: none;
			}
		}
	}

	.parcerias .d-flex {
		justify-content: space-around;
	}

	.footer-logo {
			width: 200px !important;
	}
}

@media screen and (min-width: 1600px) {
	.main-header {
		height: 700px !important;

		& .nav {
			padding: 40px 160px 80px !important;
		}

		& .logo {
			padding: 24px 150px !important;
		}

		& .login {
			margin-left: 160px !important;
		}

		& .social {
			padding: 16px 160px !important;
		}

		& .overlay-img {
			width: 43% !important;
		}
	}
}