/*
 * Base styles for the Paco Cleret portfolio.  
 * The layout is inspired by the provided mock‑up and uses a flexible
 * three‑column design that stacks gracefully on smaller viewports.  
 * Each block has a subtle drop shadow and rounded corners to echo the
 * playful aesthetic of the original design.  
 */

/* Reset some default browser settings */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
  /* Light grid‑like background to mirror the notebook aesthetic.  Increase the line opacity slightly
     and enlarge the spacing to better approximate the supplied mock‑up. */
  background-color: #f8f9fc;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 50px),
                    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 50px);
  background-size: 100% 100%;
}

/* Wrapper constrains the page to a reasonable width and centers the content */
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* Header for the name banner */
.banner {
  margin-bottom: 25px;
  text-align: center;
}
.banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flex container for columns */
.columns {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Column styling */
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 280px;
}

/* Generic block styling for all panels */
.block {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}
.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specific heights for each block to approximate the mock‑up proportions */
.left .card {
  height: 360px;
}
.left .icons-deco {
  height: 332px;
}
.middle .hackthebox {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b8f7ce; /* green background behind the icon */
}
.middle .hackthebox img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  filter: invert(0%) brightness(0) saturate(100%);
}
.middle .fiverr {
  height: 350px;
}
.right .small-icons {
  height: 110px;
  display: flex;
  align-items: center;
  /* Use consistent spacing between icons instead of space-around. */
  justify-content: center;
  gap: 32px;
  /* Make the background transparent so the block blends seamlessly into the grid.
     Padding is retained to keep breathing space around the icons. */
  background-color: transparent;
  padding: 15px;
  /* Remove the default box-shadow inherited from .block so the container becomes invisible. */
  box-shadow: none;
}
.right .small-icons img {
  /* Make the icons substantially larger to match the mock‑up proportions */
  width: 75px;
  height: 75px;
  object-fit: contain;
}

/* Rotate and scale the PACO pattern so the text runs diagonally like the mock‑up.  The parent
   container already has overflow hidden and a relative position from `.block`, so we can position
   the image absolutely and enlarge it beyond the boundaries to ensure it fills the block when rotated. */
.right .pattern {
  position: relative;
}

.right .pattern img {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  transform: rotate(-20deg);
}

/* Adjust the Instagram block so the important part of the phone screenshot (the top with the notch
   and username) is visible.  Without this, `object-fit: cover` crops the image centered vertically,
   which can cut off the top details. */
/* Ensure the full phone screenshot remains visible.  Use contain to avoid cropping */
/* Style adjustments for the Instagram panel: restore the image element and apply a blue
   rounded border around the container.  The image uses `contain` to display fully
   within the block while aligning to the top. */
.right .instagram {
  /* Give the container a light blue fill and a border with rounded corners */
  border: 4px solid #79a8ff;
  border-radius: 20px;
  background-color: #d5e7ff;
  position: relative;
  overflow: hidden;
}

/* When hovering over the Instagram block, raise the background image toward the top,
   imitating the sliding effect seen on Aywen.fr. */
/* When hovering over the Instagram block, move the phone image upward slightly */
.right .instagram:hover img {
  transform: translateX(-50%) translateY(-13%);
}

/* Style the embedded Instagram image for animation: start slightly lower in the container
   and centre horizontally.  A transition animates the upward movement on hover. */
.right .instagram img {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  /* Start higher inside the container for a smaller initial gap */
  transform: translateX(-50%) translateY(-5%);
  width: 100%;
  height: auto;
  /* Speed up the animation */
  transition: transform 0.25s ease-out;
}
.right .pattern {
  height: 250px;
}
.right .instagram {
  height: 332px;
}

/* Footer styling */
.footer {
  margin-top: 30px;
  text-align: left;
  font-size: 0.9rem;
  color: #555;
}

/* Responsive adjustments: stack columns on narrow screens */
@media (max-width: 900px) {
  .columns {
    flex-direction: column;
    gap: 30px;
  }
  .column {
    min-width: unset;
  }
  /* Reduce block heights slightly on smaller screens for better fit */
  .left .card { height: 320px; }
  .left .icons-deco { height: 282px; }
  .middle .hackthebox { height: 220px; }
  .middle .fiverr { height: 305px; }
  .right .small-icons { height: 100px; }
  .right .pattern { height: 220px; }
  .right .instagram { height: 290px; }
}