/* ============================================================
   LAYOUT — Grid principal
   ============================================================ */

body {
   display: grid;
   grid-template-columns: 200px auto auto;
   grid-template-rows: 150px auto auto auto auto;
   height: fit-content;
   column-gap: 1rem;
}

main {
   grid-area: 2 / 2 / 3 / 4;
   min-height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   background-color: #EDF060;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   border: 2px solid #100b00;
   margin: 0 3rem;
   border-radius: .5rem;
}

header {
   grid-area: 3 / 2 / 4 / 4;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: fit-content;
   background-color: #100b00;
   padding: 2rem 3rem 1rem 2rem;
}

aside {
   grid-area: 4 / 2 / 5 / 4;
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 4rem;
   padding: 0 3rem 2rem 3rem;
   margin-top: 2rem;
}

aside:last-child {
   padding-bottom: 5rem;
}


/* ============================================================
   HEADER — Título y metadatos del proyecto
   ============================================================ */

.header-title {
   padding-bottom: .5rem;
}

.project-title {
   font-size: 1.75rem;
   font-weight: 600;
}

.project-tools,
.project-client {
   color: #9c9c9c;
   padding-bottom: .5rem;
   font-weight: 500;
}

.project-date {
   color: #EDF060;
   font-size: 1rem;
   font-weight: 500;
   padding-top: .5rem;
}

.project-date::before {
   content: "Finalizado en ";
   font-weight: 400;
}


/* ============================================================
   CONTENIDO — Objetivo y cuerpo del proyecto
   ============================================================ */

.project-content {
   grid-area: 3 / 2 / 4 / 4;
   padding: 2rem 3rem 0 3rem;
}

.project-content h2 {
   font-family: "Google Sans", sans-serif;
   font-size: 1.25rem;
   font-weight: 400;
   border-bottom: 2px solid #9c9c9c;
   padding-bottom: 2rem;
   width: 100%;
}

.project-content h2::before {
   content: "Objetivo del proyecto: ";
   color: #EDF060;
   font-weight: 500;
}

.project-content div h3 {
   font-size: 1.5rem;
   font-weight: 600;
   padding-bottom: .5rem;
}

.project-content div h3 strong {
   font-weight: 600;
}

.project-content div p {
   font-family: "Google Sans", sans-serif;
   font-weight: 500;
   line-height: 1.5;
   color: #9c9c9c;
}

.project-content div p a {
   font-family: "Google Sans", sans-serif;
   font-weight: 500;
   color: #EDF060;
}

.project-content div img {
   width: 100%;
   padding: 1rem 0;
}

.project-content div ul {
   list-style: none;
}

.project-content div ul li {
   font-family: "Google Sans", sans-serif;
   font-weight: 500;
   line-height: 1.5;
   color: #9c9c9c;
   padding-bottom: .5rem;
}

.project-content div ul li::before {
   content: "➜";
   color: #EDF060;
   padding-right: .5rem;
}

.full-block h3 {
   padding-top: 1rem;
   padding-bottom: .5rem;
   
}


/* ============================================================
   BLOQUES DE CONTENIDO — Video y multimedia
   ============================================================ */

.content-block {
   display: grid;
   grid-template-columns: 1.5fr 2fr;
   row-gap: 1rem;
   padding: 2rem 0 0;
   width: 100%;
   height: auto;
}

.img-block,
.text-block {
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: center;
   padding: 0 2rem 0 0;
}
.content-block video {
   width: 100%;
   height: 80%;
   border-radius: .5rem;
}

.full-block {
   grid-column: 1 / 3;
   padding: 1rem 0 0 0;
   width: fit-content;
   
}

.header-title h1 {
   padding-bottom: .5rem;
}


.quote-block {
   padding: 2rem 2rem 1rem 2rem;
   background-color: #100B00;
   border-radius: .5rem;
}

.quote-block .quote {
   color: #100B00;
   font-size: 1.2rem;
   padding: 1rem 0;
   font-weight: 600;
}

.quote-block .quote {
   background-color: #EDF060;
   padding: 2rem;
   border-radius: .5rem;
   box-shadow: -3px -3px 200px -31px rgba(237,240,96,0.5);
   -webkit-box-shadow: -3px -3px 200px -31px rgba(237,240,96,0.5);
   -moz-box-shadow: -3px -3px 200px -31px rgba(237,240,96,0.5);
   transition: box-shadow 600ms ease-in-out;
}

.quote-block .quote:hover {
   box-shadow: -3px -3px 252px -31px rgba(237,240,96,0.99);
   -webkit-box-shadow: -3px -3px 252px -31px rgba(237,240,96,0.99);
   -moz-box-shadow: -3px -3px 252px -31px rgba(237,240,96,0.99);
}

.quote-block .author {
   color: #9c9c9c;
   padding: .5rem 0 0 0;
   border-radius: .5rem;
   font-size: .8rem;
}

.quote-block .author a {
   color: white;
   font-size: .8rem;
}

/* ============================================================
   ASIDE — Proyectos relacionados
   ============================================================ */


aside h2 {
   grid-column: 1 / 3;
   font-size: 1.5rem;
   font-weight: 600;
   padding: 2rem 0;
}

aside .project-card {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background-color: #100B00;
   border-radius: 8px;
   border: 1px solid #FFFFFF;
   color: #FFFFFF;
   max-height: fit-content;
   transition: max-height 0.7s ease;
}

.project-cover {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 300px;
   width: 100%;
   background-color: #EDF060;
}

aside .project-cover img {
   height: 100%;
}

.project-info {
   padding: 1rem 1.5rem;
}

aside .project-info {
   background-color: #100B00;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3), 0 -2px 6px rgba(0, 0, 0, 0.1);
}

aside .project-card h3 {
   font-family: Archivo, sans-serif;
   font-size: 1.25rem;
   font-weight: 500;
   padding: 1rem 0 .5rem;
}

aside .project-card span {
   display: block;
   font-family: "Google Sans", sans-serif;
   font-size: 1rem;
   font-weight: 500;
   color: #9c9c9c;
   text-transform: capitalize;
   transition: color 0.15s ease-in-out;
}

aside .project-card a {
   display: block;
   font-family: "Google Sans", sans-serif;
   font-size: 1rem;
   font-weight: 500;
   color: #EDF060;
   text-decoration: underline;
   padding: 1.5rem 0 2rem;
}


/* ============================================================
   RESPONSIVE — max-width: 1080px
   ============================================================ */

@media screen and (max-width: 1080px) {

   main {
      width: 100vw;
      margin: 0;
      border: none;
      background-size: cover;
   }

   header {
      width: 100%;
      padding-bottom: 0;
   }

   .header-title {
      flex-wrap: wrap;
   }

   .project-content {
      padding: 0;
   }

   .header-title h1 {
      padding-bottom: .5rem;
   }

   aside {
      display: flex;
      flex-direction: column;
      row-gap: 1rem;
      width: 100%;
      padding: 0 2rem 8rem 2rem;
   }

   aside .project-card a {
      padding-bottom: 1rem;
   }

   .project-cover {
      height: 300px;
      padding: 0;
   }

   .content-block {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: 3rem 0 0;
   }

   .content-block video {
      padding: 1rem 0 0;
   }

   video {
      display: block;
      width: 100%;
      padding: 1.5rem 0 3rem;
      margin: 0;
      border: none;
   }

   .text-block {
      padding: 1rem 2rem;
   }

   .full-block {
      padding: 1.5rem 2rem;
   }

   .project-goal {
      padding: 1rem 2rem;
      margin-bottom: 0;
   }
   
   .img-block {
   padding: 0;
}
}