/* ==========================================================================
   PORTFOLIO.CSS — Phaneon Portfolio
   Contient : section réalisations avec grille asymétrique,
              cartes projet avec overlay au hover et lien flèche
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SECTION PORTFOLIO — FOND LAVANDE CLAIR
   -------------------------------------------------------------------------- */
#portfolio {
  background: var(--c-surface);
}


/* --------------------------------------------------------------------------
   2. EN-TÊTE DE SECTION
   Titre à gauche, bouton "Voir tout" à droite — alignés sur la même ligne
   -------------------------------------------------------------------------- */
.portfolio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap; /* Passe en colonne sur petits écrans */
  gap: 1.5rem;
  margin-bottom: 3rem;
}


/* --------------------------------------------------------------------------
   3. GRILLE ASYMÉTRIQUE DES PROJETS
   Système de 12 colonnes pour des proportions variables (7/5 puis 5/7).
   Chaque rangée a une hauteur fixe de 300px.
   -------------------------------------------------------------------------- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 300px;
  gap: 1.2rem;
}


/* --------------------------------------------------------------------------
   4. CARTE PROJET INDIVIDUELLE
   Conteneur relatif pour les éléments positionnés à l'intérieur.
   Légère réduction au hover pour un effet de profondeur.
   -------------------------------------------------------------------------- */
.pf-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  display: block;        /* Fonctionne aussi comme balise <a> */
  text-decoration: none; /* Supprime le soulignement si <a> */
}
.pf-card:hover {
  transform: scale(.98); /* Légère réduction pour effet de "press" */
}

/* Répartition des colonnes pour chaque carte (disposition asymétrique) */
.pf-card:nth-child(1) { grid-column: span 7; } /* Grande carte gauche */
.pf-card:nth-child(2) { grid-column: span 5; } /* Petite carte droite */
.pf-card:nth-child(3) { grid-column: span 5; } /* Petite carte gauche */
.pf-card:nth-child(4) { grid-column: span 7; } /* Grande carte droite */


/* --------------------------------------------------------------------------
   5. OVERLAY D'INFORMATION (visible au hover)
   Dégradé noir en bas + texte catégorie + titre du projet
   -------------------------------------------------------------------------- */
.pf-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  /* Dégradé transparent → noir pour lisibilité du texte */
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .70));
}

/* Catégorie du projet (ex: "BRANDING") */
.pf-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
  margin-bottom: .4rem;
}

/* Titre du projet */
.pf-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}


/* --------------------------------------------------------------------------
   6. BOUTON FLÈCHE (↗) — coin supérieur droit
   Apparaît et grandit au hover de la carte
   -------------------------------------------------------------------------- */
.pf-link {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  /* Caché par défaut, révélé au hover de .pf-card */
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .3s;
}
.pf-card:hover .pf-link {
  opacity: 1;
  transform: scale(1);
}


/* --------------------------------------------------------------------------
   7. COULEURS DE FOND DES CARTES (dégradés violet/indigo)
   À remplacer par de vraies images de projets :
   .pf-bg-X → background: url('../img/projet-x.jpg') center/cover;
   -------------------------------------------------------------------------- */
.pf-bg-1 { background: linear-gradient(135deg, #5b5bd6 0%, #9c6cfa 100%); }
.pf-bg-2 { background: linear-gradient(135deg, #1a1a2e 0%, #4a4a8a 100%); }
.pf-bg-3 { background: linear-gradient(135deg, #d8d6ff 0%, #b8b5f8 100%); }
.pf-bg-4 { background: linear-gradient(135deg, #6c63ff 0%, #3f3f9a 100%); }

/* Ajustements pour .pf-bg-3 (fond clair → texte foncé) */
.pf-bg-3 .pf-inner {
  background: linear-gradient(180deg, transparent 30%, rgba(60, 60, 120, .50));
}
.pf-bg-3 .pf-cat   { color: rgba(91, 91, 180, .80); }
.pf-bg-3 .pf-title { color: #2a2a6a; }


/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Grille 2 colonnes égales sur tablette */
  .pf-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 220px;
  }
  .pf-card {
    grid-column: span 1 !important; /* Annule les spans asymétriques */
  }
}
@media (max-width: 600px) {
  /* Une seule colonne sur mobile */
  .pf-grid {
    grid-template-columns: 1fr;
  }
}