@import url("./styles.css");

/*=============== HOME ===============*/
  /* Featured Grid Layout */
  /* Container to center everything */
.featured {
    display: flex;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.featured__grid {
    display: flex;
    flex-direction: row; /* Keep items side-by-side */
    align-items: center;
    position: relative;
    max-width: 1000px; /* Limit width on large screens */
    width: 100%;
}

/* LARGE ITEM - Horizontal by default (Desktop) */
.featured__item--large {
    flex: 1;
    height: 400px; 
    aspect-ratio: 16 / 9; /* Horizontal ratio */
    z-index: 1;
    
    /* We use a simpler clip-path for the "bite" that works better responsively */
    clip-path: circle(100% at 50% 50%); 
    /* Desktop 'bite' on the right */
    clip-path: inset(0 0 0 0 round 30px); 
}

.featured__item--large picture,
.featured__item--large img {
    width: 100%;
    height: 100%;
    display: block;
}

.featured__item--large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 30px;
}

/* SMALL ITEM (Logo) */
.featured__item--small {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--body-color);
    overflow: hidden;
    margin-left: -75px; /* Overlap the large image */
    z-index: 2;
    background-color: var(--body-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Prevents logo from squishing */
}

.featured__item--small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

  /*=============== FOOTER ===============*/
.contact-infos {
    position: absolute;
    /* Position it where you want on the large image */
    bottom: 40px; 
    left: 50%;
     transform: translateX(-60%);
    
background: rgba(255, 255, 255, 0.2); /* Glass effect */
    backdrop-filter: blur(5px);
    padding: 15px;
    margin: 0;
    border-radius: 20px;
    z-index: 10; /* Ensure it sits above the image */
    
    /* Align items to the left for a cleaner overlay look */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
   }

.contact-infos__email {
    color: var(--text-color);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
    bottom: 10px;
    left: 35%;
}

.contact-infos__socials__section {
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 30px;
    font-size: small;
}

.contact-infos__socials__link {
    font-size: 1.5rem;
    color: var(--text-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.contact-infos__socials__link:hover {
    color: var(--accent-color); /* #FFC22F from your sketch */
    transform: translateY(-3px);
}

.footer__note {
    border: 1.5px solid var(--text-color);
    padding: 10px 25px;
    border-radius: 50px; /* Fully rounded ends like your sketch */
    margin-top: 1rem;
    max-width: 90%;
}

.footer__note p {
    font-size: 0.85rem;
    color: var(--text-color);
    margin: 0;
}

.highlight {
    font-weight: 700;
    font-style: italic;
}

  /* For large devices */
  @media screen and (max-width: 1200px) {
    .home__container {
      grid-template-columns: 5.5fr 6.5fr;
    }
  }

  /* For medium devices */
  @media screen and (max-width: 992px) {
    .home__container {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .featured__item--large {
        height: 450px;
        aspect-ratio: 0.5;
    }
  }

  /*=============== PORTFOLIO (MASONRY) ===============*/
.portfolio {
    padding-bottom: 4rem;
}

.portfolio__masonry {
    /* Create 3 columns */
    column-count: 3;
    /* Space between columns */
    column-gap: 1.5rem;
    width: 100%;
}

.portfolio__item {
    /* Prevents images from breaking across columns */
    break-inside: avoid;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-color: var(--container-color);
}

.portfolio__item img {
    width: 100%;
    display: block; /* Removes bottom whitespace */
    height: auto;   /* Maintains aspect ratio */
    object-fit: cover;
    border-radius: 1rem;
}

.portfolio__item:hover {
    transform: scale(1.02);
}

/* Responsiveness */

/* Large/Medium screens (keeping 3 columns as requested) */
@media screen and (max-width: 992px) {
    .portfolio__masonry {
        column-count: 3; 
        column-gap: 1rem;
    }
}

/* Small devices (Still 3 columns, but reducing gaps) */
@media screen and (max-width: 576px) {
    .portfolio__masonry {
        column-count: 3;
        column-gap: 0.5rem;
    }
    
    .portfolio__item {
        margin-bottom: 0.5rem;
        border-radius: 0.5rem;
    }
    
    .portfolio__item img {
        border-radius: 0.5rem;
    }
}

/* Very small screens - You might want to drop to 2 columns 
   if 3 becomes too narrow to see details */
@media screen and (max-width: 350px) {
    .portfolio__masonry {
        column-count: 2;
    }
}

/*=============== LIGHTBOX ===============*/
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

/* When the lightbox is active */
.lightbox.active {
    display: flex;
}

.lightbox__content {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active .lightbox__content {
    transform: scale(1);
}

.lightbox__close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Hover effect for portfolio items to show they are clickable */
.portfolio__item {
    cursor: pointer;
}