* {
  box-sizing: border-box;
}

@font-face {
  font-family: sans-serif;
  src: url("webfonts/Amiamie-Regular.ttf") format("truetype");
}

/* Stile generale del corpo del documento */
body {
  overflow-x: hidden;
  overflow-y: scroll;
  font: 1vw/120% sans-serif;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  display: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 10px 15px 10px;
}

.title,
.title-link {
  font-size: 1vw;
  color: black;
  font-family: sans-serif;
}

.text {
  max-width: 65ch;
  z-index: 2;
}

.bio {
  color: black;
  font-family: sans-serif;
  font-size: 1vw;
  line-height: 120%;
  max-width: 2ch;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: gray;
  transition: color 0.3s ease;
}

.description a {
  color: gray;
  text-decoration: underline;
}

.description a:hover {
  color: black;
  transition: color 0.3s ease;
}

.description {
  color: grey;
  font-family: sans-serif;
}

.combined-text {
  margin: 0px;
  text-align: left;
  word-wrap: break-word;
}

.combined-text-about {
  text-align: left;
  word-wrap: break-word;
  line-height: 135%;
  max-width: 30ch;
}

::selection {
  background-color: grey;
  color: black;
}

.description::selection {
  background-color: grey;
  color: white;
}

/* CAROSELLO */
.owl-carousel {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: auto;
  margin: 0px 0px 0px 10px;
  padding: 0;
  scroll-snap-type: x mandatory; /* Abilita il posizionamento dello scorrimento */
}

.owl-item {
  flex: 0 0 auto; /* Impedisce il restringimento degli elementi */
  scroll-snap-align: start; /* Allineamento dello scorrimento all'inizio di ogni elemento */
}

.owl-carousel .frame .image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Mantiene l'aspetto originale dell'immagine senza distorsione */
  padding-bottom: 10px;
}

.owl-carousel .frame {
  max-width: 800px;
  margin: 0 auto; /* Centra l'elemento nel carosello */
}

.owl-item .image {
  cursor: crosshair;
}

/* About page */
.container.single-column {
  display: flex;
  align-items: baseline;
  max-width: 62ch;
}

.content {
  flex: 1;
  flex-basis: 20%;
  padding: 0px 0px 0px 10px;
}

/* Media Query MOBILE */
@media screen and (max-width: 600px) {
  body {
    margin: 0; /* Ensure no body margin */
    overflow: hidden; /* Prevent scrolling if we want a pure slider experience, or keep scroll if needed. Let's start with standard */
  }

  /* Overlay Header */
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    margin: 0;
    padding: 15px;
    background: transparent;
    pointer-events: none; /* Let clicks pass through if needed, but links need pointer-events auto */
  }

  .title a, .title-link a {
    pointer-events: auto; /* Re-enable clicks on links */
    /* Add a subtle shadow or background to ensure readability over images? User asked for transparency, maybe simple is best first */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Optional: help readability */
  }

  /* Typography matches user preference for readable but not huge */
  body, .title, .title-link {
    font-size: 1.1rem; 
    line-height: 1.4;
  }

  /* Hide Texts */
  .text, .bio, .description, .combined-text, .combined-text-about {
    display: none; 
  }

  /* Full Screen Carousel */
  .owl-carousel {
    position: fixed; /* Fix to background or fill screen */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: block; /* Owl carousel default is usually block with float/flex internal */
  }

  /* Force Owl items to be full screen */
  .owl-item {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }

  .owl-carousel .frame {
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
  }

  .owl-carousel .frame .image, .owl-carousel .image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the screen */
    padding: 0;
  }

  /* About page fix for mobile - might need to be visible independently? 
     If about is linked, it might be a separate page. 
     The user mentioned "About page" in transparency. 
  */
  .container.single-column {
    padding-top: 60px; /* Space for the header */
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
    align-items: flex-start;
    max-width: 100%;
  }
  
  /* Show text only on about page perhaps? User said "Hide paragraphs that are visible on desktop" 
     usually referring to the project descriptions. 
     About page text likely needs to remain. The selector .text inside .frame is what we hid.
     .combined-text-about is likely for about page.
  */
  .combined-text-about {
    display: block; /* Re-enable for about page if it was hidden by generic rule */
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 100%;
  }

  .content {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
}

/* MEDIA QUERY TABLET & SMALL DESKTOP */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body, .title, .title-link, .text {
    font-size: 2vw; /* Adjusted to be proportional to desktop default */
  }

  body {
    line-height: 120%;
    font-family: sans-serif; 
  }

  /* Restore Desktop-like Carousel */
  .owl-carousel {
    width: 100%;
    margin: 0px 0px 0px 10px; /* Match desktop margin */
    display: flex; /* Or whatever desktop uses, line 103 says display: flex */
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
  }

  /* Revert mobile/previous tablet overrides */
  .owl-item {
    flex: 0 0 auto; /* Allow natural width */
    width: auto;
    scroll-snap-align: start;
    margin-bottom: 0;
  }

  .owl-carousel .frame {
    max-width: 800px; /* Restore max width limit */
    margin: 0 auto; /* Centra l'elemento nel carosello */
  }
  
  .owl-carousel .frame .image {
     width: auto;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain; /* Don't cover/crop */
     padding-bottom: 10px;
  }

  .text {
    line-height: 112%;
    max-width: 65ch; /* Ensure text width constraint */
  }

  .container.single-column {
    max-width: 85ch; 
    padding: 0px 10px;
  }

  .content {
    padding: 0px 10px;
  }
}