/*
=======================================================
 BEM CSS METHODOLOGY IMPLEMENTATION
=======================================================
Este arquivo segue rigorosamente a metodologia BEM:
- BLOCK: Componente independente (intro, projects, contact, etc.)
- ELEMENT: Parte do bloco (intro__title, project-card__image, etc.)
- MODIFIER: Variação do bloco/elemento (intro__tag--css, project-card--special, etc.)

Estrutura de nomenclatura: block__element--modifier
=======================================================
*/

/* CSS Reset */
* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

/* CSS Variables - Design System Colors */
:root {
  /* Base Colors - From Style Guide */
  --color-black   : #000000;
  --color-white   : #FFFFFF;
  --color-gray-100: #E2E4E9;
  --color-gray-200: #C0C4CE;
  --color-gray-300: #878EA1;
  --color-gray-400: #292C34;
  --color-gray-500: #16181D;
  --color-gray-600: #0D0E11;
  --color-gray-900: #C4C4CC;
  --color-gray-950: #E1E1E6;

  /* Main Colors */
  --color-red   : #E3646E;
  --color-purple: #BB72E9;
  --color-blue  : #3996DB;
  --color-yellow: #EABD5F;
  --color-green : #82BC4F;

  /* Typography - From Style Guide */
  --font-inconsolata: 'Inconsolata', monospace;
  --font-asap       : 'Asap', sans-serif;
  --font-maven      : 'Maven Pro', sans-serif;

  /* Font Sizes */
  --text-sm  : 14px;
  --text-base: 16px;
  --text-lg  : 20px;
  --text-xl  : 24px;
  --text-2xl : 56px;
  --tag-sm   : 12px;

  /* Line Heights - From Style Guide */
  --line-height-tight : 1.2;
  /* 120% from Asap and Inconsolata specs */
  --line-height-normal: 1.4;
  /* 140% from Maven Pro specs */
}

/* Base Styles */
body {
  font-family     : var(--font-maven);
  line-height     : var(--line-height-normal);
  color           : var(--color-gray-100);
  background-color: var(--color-gray-500);
}

.portfolio {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  justify-content: flex-end;
  min-height     : 100vh;
}

/*
=======================================================
 INTRO BLOCK - BEM Implementation
=======================================================
Block: .intro - Seção de introdução do portfolio
Elements: __background, __content, __header, etc.
Modifiers: Nenhum modificador específico para este bloco
=======================================================
*/

/* Intro Section */
.intro {
  position: relative;
  width   : 100%;
  height  : 682px;
  overflow: hidden;
}

.intro__background {
  position           : absolute;
  top                : 0;
  left               : 0;
  width              : 100%;
  height             : 100%;
  background-image   : url('../images/intro-bg-new.jpg');
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
}

.intro__content {
  position      : absolute;
  top           : 120px;
  left          : 50%;
  transform     : translateX(-50%);
  width         : 1040px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 80px;
}

.intro__header {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 56px;
  width         : 680px;
}

/* Avatar Styles */
.intro__avatar {
  position: relative;
  width   : 112px;
  height  : 112px;
  overflow: hidden;
}

.intro__avatar-user {
  position: absolute;
  left    : 8px;
  top     : 8px;
  width   : 96px;
  height  : 96px;
}

.intro__avatar-border {
  position     : absolute;
  left         : 8px;
  top          : 8px;
  width        : 96px;
  height       : 96px;
  border       : 2px solid var(--color-red);
  border-radius: 50%;
}

.intro__avatar-image {
  position     : absolute;
  left         : 12.36px;
  top          : 12.36px;
  width        : 87.273px;
  height       : 87.273px;
  border-radius: 50%;
  overflow     : hidden;
}

.intro__avatar-image img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
}

/* Text Styles */
.intro__text-content {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 20px;
  width         : 100%;
  text-align    : center;
}

.intro__title-section {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
  width         : 100%;
  line-height   : var(--line-height-tight);
}

.intro__subtitle {
  font-family: var(--font-inconsolata);
  font-weight: 400;
  font-size  : var(--text-lg);
  color      : var(--color-gray-200);
}

.intro__name {
  color: var(--color-red);
}

.intro__main-title {
  font-family: var(--font-asap);
  font-weight: 700;
  font-size  : var(--text-2xl);
  color      : var(--color-gray-100);
}

.intro__description {
  font-family: var(--font-maven);
  font-weight: 400;
  font-size  : var(--text-sm);
  color      : var(--color-gray-300);
  line-height: var(--line-height-normal);
}

/* Intro Tags - Following BEM methodology */
.intro__tags-container {
  display    : flex;
  gap        : 12px;
  align-items: flex-start;
}

.intro__tag {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 6px 16px;
  border-radius  : 20px;
  font-family    : var(--font-inconsolata);
  font-weight    : 700;
  font-size      : var(--text-base);
  color          : var(--color-gray-500);
  line-height    : var(--line-height-tight);
  text-align     : center;
  border         : none;
  cursor         : pointer;
  transition     : transform 0.2s ease, box-shadow 0.2s ease;
}

.intro__tag:hover {
  transform : translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Intro Tag Modifiers */
.intro__tag--github {
  background-color: var(--color-green);
}

.intro__tag--php {
  background-color: var(--color-purple);
}

.intro__tag--css {
  background-color: var(--color-blue);
}

.intro__tag--html {
  background-color: var(--color-red);
}

.intro__tag--javascript {
  background-color: var(--color-yellow);
}

/*
=======================================================
 PROJECTS BLOCK - BEM Implementation
=======================================================
Block: .projects - Seção de projetos
Elements: __header, __grid, __title, __subtitle
Modifiers: Nenhum modificador específico para este bloco
=======================================================
*/

/* Projects Section */
.projects {
  width         : 100%;
  height        : 921px;
  padding       : 0 0 152px;
  margin        : 0 auto;
  width         : max(1040px, 30%);
  display       : flex;
  flex-direction: column;
  gap           : 56px;
}

.projects__header {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  width         : 1040px;
  text-align    : center;
  line-height   : var(--line-height-tight);
}

.projects__subtitle {
  font-family: var(--font-inconsolata);
  font-weight: 400;
  font-size  : var(--text-lg);
  color      : var(--color-red);
}

.projects__title {
  font-family: var(--font-asap);
  font-weight: 700;
  font-size  : var(--text-xl);
  color      : var(--color-gray-100);
}

/* Projects Grid */
.projects__grid {
  display  : flex;
  flex-wrap: wrap;
  gap      : 24px;
  width    : 1040px;
  height   : 588px;
}

/*
=======================================================
 PROJECT-CARD BLOCK - BEM Implementation
=======================================================
Block: .project-card - Card individual de projeto
Elements: __image, __content, __title, __text, __tags, __tag
Modifiers: --special (para o card do BEM)
Tag Modifiers: --css, --html, --javascript, --purple, etc.
=======================================================
*/

/* Project Card - Following BEM methodology */
.project-card {
  background-color: var(--color-gray-400);
  border-radius   : 20px;
  padding         : 16px;
  width           : 508px;
  height          : 180px;
  display         : flex;
  gap             : 16px;
  align-items     : flex-start;
  justify-content : center;
  overflow        : hidden;
  cursor          : pointer;
  transition      : transform 0.3s ease, box-shadow 0.3s ease;
  border          : 2px solid transparent;
  text-decoration : none;
  color           : inherit;
}

/* Project Card - Base states */
a,
a:visited {
  text-decoration: none;
  color          : inherit;
}

/* Support for linked project cards */
a .project-card {
  text-decoration: none;
  color          : inherit;
}

a:hover .project-card,
.project-card:hover {
  transform : translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Project Card - Elements */
.project-card__image {
  width        : 224px;
  height       : 148px;
  border-radius: 12px;
  overflow     : hidden;
  flex-shrink  : 0;
  position     : relative;
}

.project-card__image img {
  width          : 100%;
  height         : 151%;
  object-fit     : cover;
  object-position: center;
  position       : absolute;
  top            : -0.04%;
  left           : 0;
}

.project-card__content {
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  align-items    : center;
  flex           : 1;
  min-height     : 1px;
  min-width      : 1px;
  padding        : 8px 4px;
  height         : 148px;
}

.project-card__description {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  align-items   : flex-start;
  width         : 100%;
}

.project-card__title {
  font-family: var(--font-asap);
  font-weight: 700;
  font-size  : var(--text-base);
  color      : var(--color-gray-100);
  line-height: var(--line-height-tight);
}

.project-card__text {
  font-family       : var(--font-maven);
  font-weight       : 400;
  font-size         : var(--text-sm);
  color             : var(--color-gray-200);
  line-height       : var(--line-height-normal);
  height            : 64px;
  overflow          : hidden;
  display           : -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp        : 4;
  -webkit-box-orient: vertical;
}

.project-card__tags {
  display    : flex;
  gap        : 8px;
  align-items: center;
  width      : 100%;
}

/* Project Card Tag - Element within Project Card block */
.project-card__tag {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 4px 12px;
  border-radius  : 20px;
  font-family    : var(--font-inconsolata);
  font-weight    : 700;
  font-size      : var(--tag-sm);
  color          : var(--color-gray-500);
  line-height    : var(--line-height-tight);
  text-align     : center;
  border         : none;
  cursor         : pointer;
  transition     : transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card__tag:hover {
  transform : translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Project Card Tag Modifiers */
.project-card__tag--css {
  background-color: var(--color-blue);
}

.project-card__tag--html {
  background-color: var(--color-red);
}

.project-card__tag--javascript {
  background-color: var(--color-yellow);
}

.project-card__tag--github {
  background-color: var(--color-green);
}

.project-card__tag--php {
  background-color: var(--color-purple);
}

.project-card__tag--purple {
  background-color: var(--color-purple);
}

/* Ensure text colors are preserved in linked cards */
a .project-card__title {
  color: var(--color-gray-100);
}

a .project-card__text {
  color: var(--color-gray-200);
}

/* Project Card - Modifier for Special BEM Card */
.project-card--special {
  border    : 2px solid var(--color-purple);
  background: linear-gradient(135deg, var(--color-gray-400) 0%, #2d2041 100%);
}

.project-card--special:hover {
  border-color: var(--color-blue);
  box-shadow  : 0 8px 24px rgba(187, 114, 233, 0.3);
}

.project-card__bem-icon {
  width          : 100%;
  height         : 100%;
  background     : linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
  border-radius  : 12px;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  position       : relative;
  overflow       : hidden;
}

.project-card__bem-icon::before {
  content : '';
  position: absolute;
  top     : 0;
  left    : 0;
  right   : 0;
  bottom  : 0;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

  0%,
  100% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }
}

.project-card__bem-text {
  font-family: var(--font-asap);
  font-weight: 700;
  font-size  : 32px;
  color      : var(--color-white);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.project-card__bem-subtitle {
  font-family   : var(--font-inconsolata);
  font-weight   : 700;
  font-size     : 12px;
  color         : var(--color-gray-100);
  letter-spacing: 2px;
  opacity       : 0.9;
}

/*
=======================================================
 RESPONSIVE DESIGN - BEM Implementation
=======================================================
Todos os breakpoints mantêm a estrutura BEM
Modificações são aplicadas usando a mesma nomenclatura
=======================================================
*/

/* Responsive Design */
@media (max-width: 1366px) {
  .intro__content {
    width    : 90%;
    max-width: 1040px;
  }

  .intro__header {
    width    : 90%;
    max-width: 680px;
  }

  .projects {
    padding: 72px 0 152px;
    margin : 0 auto;
    width  : max(1040px, 30%);
  }

  .projects__header,
  .projects__grid {
    width    : 100%;
    max-width: 1040px;
  }
}

@media (max-width: 1080px) {
  .projects__grid {
    justify-content: center;
  }

  .project-card {
    width    : 100%;
    max-width: 508px;
  }
}

@media (max-width: 768px) {
  .intro {
    height    : auto;
    min-height: 682px;
    padding   : 60px 20px;
  }

  .intro__content {
    position : static;
    transform: none;
    width    : 100%;
    top      : auto;
    left     : auto;
    gap      : 60px;
    padding  : 60px 0;
  }

  .intro__header {
    width: 100%;
    gap  : 40px;
  }

  .intro__main-title {
    font-size: 36px;
  }

  .intro__tags {
    flex-wrap      : wrap;
    justify-content: center;
  }

  .projects {
    padding: 60px 20px;
    height : auto;
  }

  .projects__grid {
    height: auto;
    gap   : 20px;
  }

  .project-card {
    width         : 100%;
    height        : auto;
    min-height    : 180px;
    flex-direction: column;
    text-align    : center;
  }

  .project-card__image {
    width : 100%;
    height: 200px;
  }

  .project-card__content {
    width  : 100%;
    height : auto;
    padding: 16px 0;
    gap    : 16px;
  }

  .project-card__tags {
    justify-content: center;
    flex-wrap      : wrap;
  }
}

/*
=======================================================
 CONTACT BLOCK - BEM Implementation
=======================================================
Block: .contact - Seção de contato
Elements: __background, __content, __header, __title, etc.
Modifiers: Nenhum modificador específico para este bloco
=======================================================
*/

/* Contact Section */
.contact {
  position       : relative;
  width          : 100%;
  box-sizing     : border-box;
  padding        : 128px 120px 200px;
  display        : flex;
  flex-direction : column;
  gap            : 48px;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

.contact__background {
  position           : absolute;
  top                : 0;
  left               : 0;
  width              : 100%;
  height             : 100%;
  background-image   : url('../images/contact-bg.jpg');
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
  pointer-events     : none;
}

.contact__content {
  position       : relative;
  z-index        : 1;
  display        : flex;
  flex-direction : column;
  gap            : 48px;
  align-items    : center;
  justify-content: center;
}

.contact__header {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  align-items    : flex-start;
  justify-content: center;
  text-align     : center;
}

.contact__subtitle {
  font-family: var(--font-inconsolata);
  font-weight: 400;
  font-size  : var(--text-lg);
  color      : var(--color-purple);
  line-height: var(--line-height-tight);
  width      : 100%;
}

.contact__title {
  font-family: var(--font-asap);
  font-weight: 700;
  font-size  : var(--text-xl);
  color      : var(--color-gray-100);
  line-height: var(--line-height-tight);
  width      : 100%;
}

.contact__description {
  font-family: var(--font-maven);
  font-weight: 400;
  font-size  : var(--text-base);
  color      : var(--color-gray-200);
  line-height: var(--line-height-normal);
  width      : 100%;
}

.contact__links {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
  align-items   : flex-start;
}

/*
=======================================================
 SOCIAL-BUTTON BLOCK - BEM Implementation
=======================================================
Block: .social-button - Botão de rede social
Elements: __icon, __text, __arrow
Modifiers: Nenhum modificador específico para este bloco
=======================================================
*/

/* Social Button - Following BEM methodology */
.social-button {
  display         : flex;
  gap             : 12px;
  align-items     : center;
  justify-content : center;
  padding         : 20px;
  width           : 400px;
  background-color: var(--color-gray-400);
  border-radius   : 16px;
  text-decoration : none;
  color           : inherit;
  transition      : transform 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
  box-sizing      : border-box;
  cursor          : pointer;
  border          : 2px solid transparent;
}

.social-button:hover {
  transform : translateY(-2px);
  border    : 2px solid var(--color-blue);
  box-shadow: 0 6px 20px rgba(57, 150, 219, 0.2);
}

/* Social Button Elements */
.social-button__icon {
  width      : 28px;
  height     : 28px;
  flex-shrink: 0;
}

.social-button__text {
  flex       : 1;
  font-family: var(--font-maven);
  font-weight: 500;
  font-size  : var(--text-base);
  color      : var(--color-gray-200);
  line-height: var(--line-height-normal);
  min-height : 1px;
  min-width  : 1px;
}

.social-button__arrow {
  width      : 20px;
  height     : 20px;
  flex-shrink: 0;
}

/* Contact Section Responsive */
@media (max-width: 768px) {
  .contact {
    padding: 80px 20px 120px;
  }

  .social-button {
    width    : 100%;
    max-width: 400px;
  }
}