/* BREAKPOINTS (equivalentes a Bootstrap):
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
*/

/* Fuentes importadas desde Google Fonts en el HTML:
   - Fira Sans Condensed
   - IBM Plex Sans
*/

/* ============================================
   GRID SYSTEM (reemplazo de Bootstrap)
   ============================================ */
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

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

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

.container-md {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container-md {
        max-width: 720px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col {
    flex: 1 0 0%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* ============================================
   DISPLAY UTILITIES (reemplazo de Bootstrap)
   ============================================ */
/* Base utilities */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

/* Responsive utilities - sm (576px+) */
@media (min-width: 576px) {
    .d-sm-block {
        display: block !important;
    }
    .d-sm-none {
        display: none !important;
    }
    .d-none.d-sm-block {
        display: block !important;
    }
}

/* Responsive utilities - md (768px+) */
@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }
    .d-md-none {
        display: none !important;
    }
    .d-none.d-md-block {
        display: block !important;
    }
    .d-none.d-md-block.d-xl-none {
        display: block !important;
    }
}

/* Responsive utilities - lg (992px+) */
@media (min-width: 992px) {
    .d-lg-block {
        display: block !important;
    }
    .d-lg-none {
        display: none !important;
    }
}

/* Responsive utilities - xl (1200px+) */
@media (min-width: 1200px) {
    .d-xl-block {
        display: block !important;
    }
    .d-xl-none {
        display: none !important;
    }
    .d-none.d-xl-block {
        display: block !important;
    }
    .d-none.d-md-block.d-xl-none {
        display: none !important;
    }
}

/* ============================================
   UTILITY CLASSES (reemplazo de Bootstrap)
   ============================================ */
.w-100 {
    width: 100% !important;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
    background-color: #000;
    color: #ffffff; /*el color de la letra debería definirse por separado, a no ser que todas sean BLANCO*/
    padding: 0;
    margin: 0;
    }

/* Básicamente tít. principal (mi nombre) */
  h1 {
      font-family: 'Fira Sans Condensed', sans-serif;
      text-align: center;
      color: white;
  }

/* Títulos helvética (seccs) */
  h2 {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #f0f0f0;
  }

  h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    color: white;
  }

  p {
      font-family: 'IBM Plex Sans', sans-serif;
      color: #f0f0f0;
  }

/* TAMAÑOS RESPONSIVE para TEXTO
sm = móvil    md = computer

h1 = "Gabriel Aljundi" y "Pepperoncino" 
h2 = "Still lifes for the 2020 season"
p = "Photography" + "> see more"
*/
.h1-sm { /*Títulos telf*/
  font-size: calc(1.5em + 6vw);
}
.h1-md { /*Títulos pc*/
  font-size: calc(2em + 6vw);
}
  .h2-sm { /*Títulos telf*/
    font-size: calc(1.5em + 5vw);
  }
  .h2-md { /*Títulos pc*/
    font-size: calc(1em + 2.5vw);
  }
  .p-sm { /*Txt telf*/
    font-size: calc(0.6em + 2.2vw);
  }
  .p-md { /*Txt pc*/
    font-size: calc(0.5em + 1vw);
  }

  svg {
      color: white;
  }

  video {
    filter: opacity(0.5);
  }

  .about {
    background: rgb(9,9,9);
    background: linear-gradient(180deg, rgba(9,9,9,1) 0%, rgba(14,14,14,1) 10%, rgba(0,93,174,1) 40%, rgba(1,93,174,1) 51%, rgba(9,95,170,1) 55%, rgba(243,137,73,1) 92%, rgba(255,139,68,1) 100%);
    background-attachment: fixed;
  }

  .link-about-sm { /* enlace about en el nav, movil */
    text-decoration: none; 
    color: #fff; 
    text-align: left; 
    font-family: 'IBM Plex Sans', sans-serif; 
    font-size: calc(1rem + 1vw);
  }

  .link-about-md {
    color: #fff; 
    text-align: left; 
    font-family: 'IBM Plex Sans', sans-serif; 
    font-size: calc(0.9rem + 0.3vw);
  }

  /* ============================================
     CAROUSEL CUSTOM (reemplazo de Bootstrap)
     ============================================ */
  .carousel {
    position: relative;
    max-width: 100%;
  }

  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .carousel-item {
    display: none;
    position: relative;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
  }

  .carousel-item.active {
    display: block;
  }

  .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    cursor: pointer;
  }

  .carousel-control-prev {
    left: 0;
  }

  .carousel-control-next {
    right: 0;
  }

  .carousel-control-prev:hover,
  .carousel-control-next:hover {
    opacity: 0.9;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
  }

  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  }

  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .rot {
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}

.statement-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: auto;
  font-weight: bold;
}

.small-iframe {
  display: block;
  background: #000;
  border: none;
  width: 100vw;
}

/* CV centrar verticalmente*/
.CV-outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 98%;
  width: 100%;
}
.CV-middle {
  display: table-cell;
  vertical-align: middle;
}
.CV-inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* REEL responsivo */
.reel-container {
  position: relative;
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  overflow: hidden;

  /*border-style: solid;
  border-width: 5px;*/
}

.reel-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max-content;
}

.reel-container img {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max-content;
}

.iframe-container-s {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 85%;
  padding-top: 85%; /* 1:1 a ratio */
}

.iframe-container-m {
  margin-left: 22.5%;
  margin-right: 0;
  padding: 0;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 55%;
  padding-top: 55%; /* 1:1 a ratio */
}

.iframe-container-l {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 40%;
  padding-top: 40%; /* 1:1 a ratio */
}

.dc-iframe {
  position: absolute;
  top:0;
  bottom:0;

  width: 100%;
  height: 100%;
  
  border-style: solid;
  border-color: #575757;
  border-width: 1px;
}

.dots {
  position: absolute;
  border-image-slice: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#0a0a0a 80%, transparent 10%);
  background-size: 10px 10px;
}

/* ============================================
   GRID DE PROYECTOS
   ============================================ */
.grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  padding: 2% 0;
}

.projects {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project {
  display: flex;
  align-items: center;
  gap: 5%;
  margin-bottom: 5%;
}

.project--reverse {
  flex-direction: row-reverse;
}

.project__media {
  flex: 1;
  max-width: 50%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.project__media video {
  width: 100%;
  height: auto;
  display: block;
}

.project__content {
  flex: 1;
  max-width: 50%;
}

.project__content h3 {
  font-size: calc(1em + 2.5vw);
  margin-bottom: 2%;
  font-family: 'IBM Plex Sans', sans-serif;
  color: white;
}

.project__content .meta {
  font-size: calc(0.5em + 1vw);
  margin-bottom: 5%;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #f0f0f0;
}

.seemore-btn,
.btn {
  font-family: 'IBM Plex Sans', sans-serif;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: calc(0.5em + 1vw);
  text-decoration: none;
  padding: 0;
}

.seemore-btn:hover,
.btn:hover {
  opacity: 0.8;
}

/* Modal */
.modal {
  background: rgba(0, 0, 0, 0.9);
  border: none;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.modal-card {
  background: #000;
  color: #fff;
  padding: 3rem;
  position: relative;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  opacity: 0.7;
}

#modal-content h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
}

#modal-content p {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #f0f0f0;
  line-height: 1.6;
  margin-bottom: 1rem;
}

#modal-content a {
  color: #fff;
  text-decoration: underline;
}

/* Responsive para móvil */
@media (max-width: 767px) {
  .grid {
    max-width: 90%;
    padding: 5% 0;
  }

  .project {
    flex-direction: column;
    gap: 5%;
    margin-bottom: 15%;
  }

  .project--reverse {
    flex-direction: column;
  }

  .project__media {
    max-width: 100%;
  }

  .project__content {
    max-width: 100%;
  }

  .project__content h3 {
    font-size: calc(1.5em + 5vw);
    text-align: center;
  }

  .project__content .meta {
    font-size: calc(0.6em + 2.2vw);
    text-align: center;
  }
}