/* Media queries separadas de los estilos base */

/* Modales y descripciones en móviles */
@media (max-width: 768px) {
	.modal-active .project-description {
		display: block;
		color: var(--light-gray);
		font-size: var(--fs-6);
		font-weight: var(--fw-300);
		padding: 0 0 1em 0;
		line-height: 1.6;
	}
}

@media (max-width: 768px) {
	.modal-avatar-box img {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.modal-avatar-box img {
		max-width: 100%;
		height: auto;
	}
}

/* responsive larger than 450px */
@media (min-width: 450px) {
	.clients-item {
		min-width: calc(33.33% - 10px);
	}
	.project-img,
	.blog-banner-box {
		height: auto;
	}
}

/* responsive larger than 580px */
@media (min-width: 580px) {
	:root {
		--fs-1: 32px;
		--fs-2: 24px;
		--fs-3: 26px;
		--fs-4: 18px;
		--fs-6: 15px;
		--fs-7: 15px;
		--fs-8: 12px;
	}
	.sidebar,
	article {
		width: 520px;
		margin-inline: auto;
		padding: 30px;
	}
	.sidebar.active {
		max-height: 950px;
	}
	.article-title {
		font-weight: var(--fw-600);
		padding-bottom: 15px;
	}
	.article-title::after {
		width: 40px;
		height: 5px;
	}
	.icon-box {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		font-size: 18px;
	}
	main {
		margin-top: 60px;
		margin-bottom: 100px;
	}
	.sidebar {
		max-height: 180px;
		margin-bottom: 30px;
	}
	.sidebar.active {
		max-height: 584px;
	}
	.sidebar-info {
		gap: 25px;
	}
	.info-content .name {
		margin-bottom: 15px;
	}
	.info-content .title {
		padding: 5px 18px;
	}
	.info_more-btn {
		top: -30px;
		right: -30px;
		padding: 10px 15px;
	}
	.info_more-btn span {
		display: block;
		font-size: var(--fs-8);
	}
	.info_more-btn ion-icon {
		display: none;
	}
	.separator {
		margin: 32px 0;
	}
	.contacts-list {
		gap: 20px;
	}
	.contact-info {
		max-width: calc(100% - 64px);
		width: calc(100% - 64px);
	}
	.avatar-box {
		width: 120px;
		height: 120px;
	}
	.navbar {
		border-radius: 20px 20px 0 0;
	}
	.navbar-list {
		gap: 20px;
	}
	.navbar-link {
		--fs-8: 14px;
	}
	.about .article-title {
		margin-bottom: 20px;
	}
	.about-text {
		margin-bottom: 10px;
	}
	.service-item,
	.contact-me-item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 18px;
		padding: 30px;
	}
	.service-icon-box {
		margin-bottom: 0;
		margin-top: 5px;
	}
	.service-content-box {
		text-align: left;
	}
	.skill-icon-box,
	.contact-me-icon-box {
		margin-bottom: 0;
		margin-top: 5px;
		width: 35%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.skill-content-box,
	.contact-me-content-box {
		text-align: left;
		width: 65%;
	}
	.skill-icon-box img,
	.contact-me-icon-box img {
		width: 100%;
		height: 100%;
	}
	.skill-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 18px;
		padding: 25px;
	}
	.clients-list {
		gap: 50px;
		margin: 0 -30px;
		padding: 45px;
		scroll-padding-inline: 45px;
	}
	.clients-item {
		min-width: calc(33.33% - 35px);
	}
	.timeline-list {
		margin-left: 65px;
	}
	.timeline-item:not(:last-child)::before {
		left: -40px;
	}
	.timeline-item::after {
		height: 8px;
		width: 8px;
		left: -43px;
	}
	.skills-item:not(:last-child) {
		margin-bottom: 25px;
	}
	.project-img,
	.blog-banner-box {
		border-radius: 16px;
	}
	.blog-posts-list {
		gap: 30px;
	}
	.blog-content {
		padding: 25px;
	}
	.mapbox {
		height: 380px;
		border-radius: 18px;
	}
	.input-wrapper {
		gap: 30px;
		margin-bottom: 30px;
	}
	.form-input {
		padding: 15px 20px;
	}
	textarea.form-input {
		margin-bottom: 30px;
	}
	.form-btn {
		--fs-6: 16px;
		padding: 16px 20px;
	}
	.form-btn ion-icon {
		font-size: 18px;
	}
}

/* responsive larger than 768px */
@media (min-width: 768px) {
	.sidebar,
	article {
		width: 700px;
	}
	.sidebar.active {
		max-height: 700px;
	}
	.has-scrollbar::-webkit-scrollbar-button {
		width: 100px;
	}
	.contacts-list {
		grid-template-columns: 1fr 1fr;
		gap: 30px 15px;
	}
	.navbar-link {
		--fs-8: 15px;
	}
	.projects-modal {
		gap: 35px;
	}

	/* Modal en 2 columnas desde tablet */
	.modal-img-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}
	.modal-img-wrapper .swiper {
		width: 100%;
		height: 60vh; /* alto generoso en tablet */
	}
	.modal-content {
		overflow: auto;
		max-height: 60vh;
		padding-right: 4px;
	}
	.article-title {
		padding-bottom: 20px;
	}
	.filter-select-box {
		display: none;
	}
	.filter-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 25px;
		padding-left: 5px;
		margin-bottom: 30px;
	}
	.filter-item button {
		background-color: var(--eerie-black-1);
		color: var(--light-gray);
		font-size: var(--fs-7);
		padding: 8px 15px;
		border-radius: 20px;
		transition: var(--transition-1);
		box-shadow: var(--shadow-1);
		font-weight: var(--fw-500);
	}
	.filter-item button:hover {
		background-color: var(--jet);
		color: var(--white-2);
	}
	.filter-item button.active {
		background-color: var(--orange-yellow-crayola);
		color: var(--eerie-black-1);
		box-shadow: 0 0 10px var(--orange-yellow-crayola);
		transform: scale(1.05);
		text-shadow: 0 0 5px var(--orange-yellow-crayola);
	}
	.project-list,
	.blog-posts-list {
		grid-template-columns: 1fr 1fr;
	}
	/* Certs: mantener 1 columna en tablet */
	.cert-grid { grid-template-columns: 1fr; }
	.input-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	.form-btn {
		width: max-content;
		margin-left: auto;
	}
}

/* responsive larger than 1024px */
@media (min-width: 1024px) {
	:root {
		--shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
		--shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
		--shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
	}
	.sidebar,
	article {
		width: 950px;
		box-shadow: var(--shadow-5);
	}
	.sidebar.active {
		max-height: 950px;
	}
	.avatar-box {
		width: 140px;
		height: 140px;
	}
	main {
		margin-bottom: 60px;
	}
	.main-content {
		position: relative;
		width: max-content;
		margin: auto;
	}
	.navbar {
		position: absolute;
		bottom: auto;
		top: 0;
		left: auto;
		right: 0;
		width: max-content;
		border-radius: 0 20px;
		padding: 0 20px;
		box-shadow: none;
	}
	.navbar-list {
		gap: 30px;
		padding: 0 20px;
	}
	.navbar-link {
		font-weight: var(--fw-500);
	}
	.service-list,
	.contact-me-list {
		grid-template-columns: 1fr 1fr;
		gap: 20px 25px;
	}
	.skill-list {
		grid-template-columns: 1fr 1fr;
		gap: 20px 25px;
	}
	.clients-item {
		min-width: calc(25% - 38px);
	}
	.project-list {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Certs: mantener 1 columna también en desktop según requerimiento */
	.cert-grid { grid-template-columns: 1fr; }

  /* Cert card: suficiente espacio en desktop para 3 columnas internas */
  .cert-card { grid-template-columns: auto 1fr auto; }
	.blog-banner-box {
		height: 230px;
	}

	/* Modal más alto en desktop */
	.modal-img-wrapper .swiper {
		height: 70vh;
	}
	.modal-content {
		max-height: 70vh;
	}

	/* Modal (>= desktop): recortar al centro para llenar el slide */
	/* Damos prioridad para sobreescribir reglas previas que preservaban proporciones */
	.modal-img-wrapper .swiper-slide .modal-avatar-box img,
	.modal-img-wrapper .swiper-slide .img-project,
	.projects-modal .modal-avatar-box img,
	.projects-modal .img-project {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* Excepción: imágenes panorámicas (muy anchas) deben respetar 100% width y ajustar la altura automáticamente */
	.modal-img-wrapper .swiper-slide .modal-avatar-box img.is-wide,
	.modal-img-wrapper .swiper-slide .img-project.is-wide,
	.projects-modal .modal-avatar-box img.is-wide,
	.projects-modal .img-project.is-wide {
		width: 100%;
		height: auto; /* Evita overflow vertical y mantiene proporción */
		object-fit: contain; /* No recortar, mostrar completa a lo ancho */
	}

	/* En desktop: imagen ~70%, texto ~30% con mínimo legible */
	/* En desktop: imagen 60%, texto 40% con mínimo legible */
	.modal-img-wrapper {
		grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
	}
	/* Aumentar tipografía dentro del modal para mejor lectura (fluida) */
	.modal-content {
		font-size: clamp(calc(var(--fs-6) + 2px), 1.2vw, calc(var(--fs-6) + 6px));
		line-height: 1.75;
	}
	.modal-content p,
	.modal-content li,
	.project-description {
		font-size: inherit;
	}
	.modal-title {
		font-size: clamp(calc(var(--fs-2) + 2px), 2vw, calc(var(--fs-2) + 10px));
	}
	.project-details-title {
		font-size: clamp(calc(var(--fs-4) + 2px), 1.5vw, calc(var(--fs-4) + 8px));
	}
}

/* responsive larger than 1250px */
@media (min-width: 1250px) {
	body::-webkit-scrollbar {
		width: 20px;
	}
	body::-webkit-scrollbar-track {
		background: var(--smoky-black);
	}
	body::-webkit-scrollbar-thumb {
		border: 5px solid var(--smoky-black);
		background: hsla(0, 0%, 100%, 0.1);
		border-radius: 20px;
		box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
	}
	body::-webkit-scrollbar-thumb:hover {
		background: hsla(0, 0%, 100%, 0.15);
	}
	body::-webkit-scrollbar-button {
		height: 60px;
	}
	.sidebar,
	article {
		width: auto;
	}
	article {
		min-height: 100%;
	}
	main {
		max-width: 1200px;
		margin-inline: auto;
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 25px;
	}
	.main-content {
		min-width: 75%;
		width: 75%;
		margin: 0;
	}
	.sidebar {
		position: sticky;
		top: 60px;
		max-height: max-content;
		height: 100%;
		margin-bottom: 0;
		padding-top: 60px;
		z-index: 1;
	}
	.sidebar-info {
		flex-direction: column;
	}
	.info-content .name {
		white-space: nowrap;
		text-align: center;
	}
	.info-content .title {
		margin: auto;
	}
	.info_more-btn {
		display: none;
	}
	.sidebar-info_more {
		opacity: 1;
		visibility: visible;
	}
	.contacts-list {
		grid-template-columns: 1fr;
	}
	.contact-info :is(.contact-link) {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
	}
	.contact-info :is(.contact-link, time, address) {
		--fs-7: 14px;
		font-weight: var(--fw-300);
	}
	.separator:last-of-type {
		margin: 15px 0;
		opacity: 0;
	}
	.social-list {
		justify-content: center;
	}
	.avatar-box {
		width: 160px;
		height: 160px;
	}
	.timeline-text {
		max-width: 700px;
	}
}

/* Mobile timeline layout */
@media (max-width: 700px) {
	.timeline-item {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.timeline-col-left,
	.timeline-col-right {
		min-width: 0;
		width: 100%;
	}
}