/*
Theme Name: lwc-edu
Theme URI:
Author: LW Conseils
Author URI:
Description: Thème WordPress LW Conseils — Accompagnement étudiants africains vers la France
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lw-conseils
Tags: custom-theme
*/
 
 

/* ============================================================
   2. VARIABLES GLOBALES
   ============================================================ */

:root {

  /* --- Couleurs brand --- */
  --color-eu-blue:         #003399;
  --color-eu-blue-dark:    #002270;
  --color-eu-blue-light:   #E8EEFF;
  --color-eu-yellow:       #FFCC00;
  --color-eu-yellow-light: #FFF8D6;
  --color-anthracite:      #1F2937;
  --color-gray-mid:        #6B7280;
  --color-gray-border:     #D1D5DB;
  --color-light-gray:      #F3F4F6;
  --color-white:           #FFFFFF;

  /* --- Gradients --- */
  --gradient-bg:
    radial-gradient(900px circle at 15% 20%, rgba(255,204,0,0.12), transparent 55%),
    radial-gradient(900px circle at 85% 25%, rgba(0,51,153,0.12),  transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,244,246,0.60));

  --gradient-btn-primary: linear-gradient(135deg, #003399, #1d4ed8);
  --gradient-badge:       linear-gradient(135deg, #FFCC00, #f59e0b);

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* --- Ombres --- */
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px  12px  rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 20px 40px  rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px  8px   rgba(0, 51, 153, 0.08);

  /* --- Rayons --- */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.25rem;  /* 20px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* ============================================================
     MARGES — RÈGLE FONDAMENTALE
     ❌ On ne limite jamais la largeur d'une SECTION
     ✅ Sections = pleine largeur
     ✅ Seul le contenu est contraint (via .content-wrap)
     ============================================================ */

  /* Marges latérales fixes par breakpoint */
  --px-mobile:  1.25rem; /* 20px  ≤ 767px  */
  --px-tablet:  4rem;    /* 64px  768–1279px */
  --px-desktop: 4rem;    /* 96px  ≥ 1280px  */

  /* Respirations verticales de section */
  --py-mobile:  2rem;    /* 32px */
  --py-tablet:  4rem;    /* 64px */
  --py-desktop: 6rem;    /* 96px */

  /* Marges internes entre blocs (multiples de 8) */
  --gap-xs:  0.5rem;    /*  8px — label ↔ champ         */
  --gap-sm:  0.75rem;   /* 12px — titre ↔ sous-titre     */
  --gap-md:  1rem;      /* 16px — paragraphe ↔ paragraphe */
  --gap-lg:  1.5rem;    /* 24px — bloc ↔ bloc            */
  --gap-xl:  2rem;      /* 32px — grilles, groupes       */
  --gap-2xl: 2.5rem;    /* 40px — groupes larges         */

  /* Largeur max du contenu */
  --container-max:    1240px;
  --container-max-lg: 1280px;

  /* Sidebar */
  --sidebar-width:      300px;
  --sidebar-sticky-top: 120px;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-anthracite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: var(--leading-normal);
  background-color: var(--color-white);
}

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

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: var(--font-sans);
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}


/* ============================================================
   4. LAYOUT — SECTION & CONTENT-WRAP
   Section  → toujours pleine largeur (jamais de max-width)
   Content  → contraint uniquement par .content-wrap
   ============================================================ */

/* Section — pleine largeur, respiration verticale */
.section {
  width: 100%;
  padding-block: var(--py-mobile);
}

@media (min-width: 768px) {
  .section { padding-block: var(--py-tablet); }
}

@media (min-width: 1280px) {
  .section { padding-block: var(--py-desktop); }
}

/* Wrapper de contenu — appliqué à l'intérieur des sections */
.content-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

@media (min-width: 768px) {
  .content-wrap { padding-inline: var(--px-tablet); }
}

@media (min-width: 1280px) {
  .content-wrap {
    padding-inline: var(--px-desktop);
    max-width: var(--container-max-lg);
  }
}


/* ============================================================
   5. SYSTÈME DE COLONNES (12 colonnes)
   ============================================================ */

/* Mobile : 1 colonne par défaut pour tout */
.grid-2,
.grid-3,
.grid-4,
.grid-hero,
.grid-text-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}

@media (min-width: 768px) {

  /* 2 col — 6/12 + 6/12 */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 col — 4/12 + 4/12 + 4/12 */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4 col — 3/12 chacune */
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hero — texte 6/12 + visuel 6/12 */
  .grid-hero {
    grid-template-columns: 6fr 6fr;
    gap: var(--gap-2xl);
    align-items: center;
  }

  /* Texte + liste — 7/12 + 5/12 */
  .grid-text-list {
    grid-template-columns: 7fr 5fr;
    gap: var(--gap-2xl);
    align-items: start;
  }

  /* Contenu long centré — 8/12 */
  .col-content {
    max-width: calc((8 / 12) * 100%);
    margin-inline: auto;
  }
}

@media (min-width: 1280px) {

  /* Hero premium — 5/12 texte + 7/12 visuel */
  .grid-hero {
    grid-template-columns: 5fr 7fr;
  }

  /* Contenu long — 7/12 max */
  .col-content {
    max-width: calc((7 / 12) * 100%);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-hero,
  .grid-text-list {
    gap: var(--gap-2xl);
  }
}


/* ============================================================
   6. LAYOUT AVEC SIDEBAR
   Tablet/Desktop : sidebar 3/12 + contenu 9/12
   Mobile         : sidebar masquée, bouton "Sommaire"
   ============================================================ */

.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}

.sidebar {
  display: none;
}

@media (min-width: 768px) {

  .layout-sidebar {
    grid-template-columns: 3fr 9fr;
    gap: var(--gap-2xl);
    align-items: start;
  }

  .sidebar {
    display: block;
    position: sticky;
    top: var(--sidebar-sticky-top);
    max-width: var(--sidebar-width);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--gap-lg);
    box-shadow: var(--shadow-card);
  }
}

.sidebar-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-anthracite);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--gap-md);
}

.sidebar-link {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-mid);
  padding-block: var(--gap-xs);
  padding-left: var(--gap-sm);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-link:hover,
.sidebar-link.active {
  color: var(--color-eu-blue);
  border-left-color: var(--color-eu-blue);
}

/* Bouton Sommaire — mobile uniquement */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-eu-blue);
  padding: var(--gap-sm) var(--gap-md);
  border: 1.5px solid var(--color-eu-blue);
  border-radius: var(--radius-lg);
  margin-bottom: var(--gap-lg);
  cursor: pointer;
  background: transparent;
}

@media (min-width: 768px) {
  .sidebar-toggle { display: none; }
}


/* ============================================================
   7. BACKGROUNDS
   ============================================================ */

.bg-gradient    { background: var(--gradient-bg); }
.bg-blue-light  { background-color: var(--color-eu-blue-light); }
.bg-yellow-light{ background-color: var(--color-eu-yellow-light); }
.bg-gray        { background-color: var(--color-light-gray); }
.bg-blue        { background-color: var(--color-eu-blue); color: var(--color-white); }
.bg-white       { background-color: var(--color-white); }


/* ============================================================
   8. TYPOGRAPHIE
   ============================================================ */

.heading-1 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-anthracite);
}

.heading-2 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-anthracite);
}

.heading-3 {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-anthracite);
}

.heading-4 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-anthracite);
}

@media (min-width: 768px) {
  .heading-1 { font-size: var(--text-4xl); }
  .heading-2 { font-size: var(--text-3xl); }
  .heading-3 { font-size: var(--text-2xl); }
  .heading-4 { font-size: var(--text-xl); }
}

@media (min-width: 1280px) {
  .heading-1 { font-size: var(--text-5xl); }
}

.text-lead {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-mid);
}

.text-body {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-mid);
}

.text-small {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--color-gray-mid);
}

.text-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-eu-blue);
}

.text-blue   { color: var(--color-eu-blue); }
.text-yellow { color: var(--color-eu-yellow); }
.text-white  { color: var(--color-white); }
.text-muted  { color: var(--color-gray-mid); }
.text-dark   { color: var(--color-anthracite); }
.text-center { text-align: center; }
.text-left   { text-align: left; }


/* ============================================================
   9. BOUTONS
   ============================================================ */

/* Base commune */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform    var(--transition-base),
    filter       var(--transition-base),
    background   var(--transition-base),
    color        var(--transition-base),
    box-shadow   var(--transition-base),
    border-color var(--transition-base);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-full { width: 100%; }

/* Primary — bleu dégradé */
.btn-primary {
  color: var(--color-white);
  background: var(--gradient-btn-primary);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(1.08);
}

/* Secondary — jaune */
.btn-secondary {
  color: var(--color-eu-blue);
  background: var(--color-eu-yellow);
}

.btn-secondary:hover {
  filter: brightness(1.05);
}

/* Ghost — contour bleu, fond transparent */
.btn-ghost {
  color: var(--color-eu-blue);
  background: transparent;
  border-color: var(--color-eu-blue);
}

.btn-ghost:hover {
  background: var(--color-eu-blue);
  color: var(--color-white);
}

/* Tertiary — texte seul */
.btn-tertiary {
  color: var(--color-eu-blue);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: 0;
}

.btn-tertiary:hover {
  opacity: 0.7;
}


/* ============================================================
   10. CARDS
   ============================================================ */

.card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: var(--gap-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.card-blue   { background: var(--color-eu-blue-light);   border-left: 4px solid var(--color-eu-blue); }
.card-yellow { background: var(--color-eu-yellow-light); border-left: 4px solid var(--color-eu-yellow); }


/* ============================================================
   11. BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-blue   { background: var(--color-eu-blue-light); color: var(--color-eu-blue); }
.badge-yellow { background: var(--gradient-badge);      color: var(--color-anthracite); }
.badge-gray   { background: var(--color-light-gray);    color: var(--color-gray-mid); }


/* ============================================================
   12. FORMULAIRES
   ============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-anthracite);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-anthracite);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-eu-blue);
  box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.10);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}


/* ============================================================
   13. DIVIDER & UTILITAIRES
   ============================================================ */

.divider {
  width: 48px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-eu-yellow);
  margin-block: var(--gap-md);
}

.divider-blue { background: var(--color-eu-blue); }

/* Scrollbar hide (LWC) */
.lwc-header .lwc-scrollbar-hide::-webkit-scrollbar { width: 0; height: 0; }
.lwc-header .lwc-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Marges rapides */
.mt-xs  { margin-top: var(--gap-xs); }
.mt-sm  { margin-top: var(--gap-sm); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mt-2xl { margin-top: var(--gap-2xl); }

.mb-xs  { margin-bottom: var(--gap-xs); }
.mb-sm  { margin-bottom: var(--gap-sm); }
.mb-md  { margin-bottom: var(--gap-md); }
.mb-lg  { margin-bottom: var(--gap-lg); }
.mb-xl  { margin-bottom: var(--gap-xl); }
.mb-2xl { margin-bottom: var(--gap-2xl); }

.gap-xs  { gap: var(--gap-xs); }
.gap-sm  { gap: var(--gap-sm); }
.gap-md  { gap: var(--gap-md); }
.gap-lg  { gap: var(--gap-lg); }
.gap-xl  { gap: var(--gap-xl); }
.gap-2xl { gap: var(--gap-2xl); }












/* ============================================================
   14. IMAGES
   ============================================================ */

/* Image standard */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Ratios */
.img-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.img-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-ratio-16-9  { aspect-ratio: 16 / 9; }
.img-ratio-4-3   { aspect-ratio: 4  / 3; }
.img-ratio-3-2   { aspect-ratio: 3  / 2; }
.img-ratio-1-1   { aspect-ratio: 1  / 1; }
.img-ratio-3-4   { aspect-ratio: 3  / 4; }

/* Styles visuels */
.img-rounded  { border-radius: var(--radius-xl); }
.img-circle   { border-radius: var(--radius-full); aspect-ratio: 1 / 1; object-fit: cover; }
.img-shadow   { box-shadow: var(--shadow-soft); }
.img-border   { border: 3px solid var(--color-eu-blue-light); }

/* Overlay — image avec dégradé par-dessus */
.img-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.img-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 51, 153, 0.65) 100%);
  pointer-events: none;
}

/* Texte positionné sur overlay */
.img-overlay-content {
  position: absolute;
  bottom: var(--gap-lg);
  left: var(--gap-lg);
  right: var(--gap-lg);
  z-index: 1;
  color: var(--color-white);
}

/* Hover zoom doux */
.img-zoom {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.img-zoom img {
  width: 100%;
  display: block;
  transition: transform var(--transition-slow);
}

.img-zoom:hover img {
  transform: scale(1.04);
}

/* Avatar */
.avatar {
  display: inline-block;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-eu-blue-light);
}

.avatar-sm  { width: 32px;  height: 32px; }
.avatar-md  { width: 48px;  height: 48px; }
.avatar-lg  { width: 64px;  height: 64px; }
.avatar-xl  { width: 96px;  height: 96px; }

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

/* Logo */
.logo-img {
  display: block;
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-img-sm { max-height: 32px; }
.logo-img-lg { max-height: 64px; }


/* ============================================================
   15. VIDÉO EMBED (YouTube, Vimeo, iframe)
   ============================================================ */

/* Wrapper responsive — ratio 16/9 par défaut */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-anthracite);
  box-shadow: var(--shadow-soft);
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Variantes de ratio */
.video-embed-4-3  { aspect-ratio: 4 / 3; }
.video-embed-1-1  { aspect-ratio: 1 / 1; }
.video-embed-9-16 { aspect-ratio: 9 / 16; max-width: 360px; } /* Vertical / Reels */

/* Vidéo native HTML5 */
.video-native {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  display: block;
  background: var(--color-anthracite);
}

/* Fake thumbnail avec bouton play */
.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-anthracite);
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.video-thumb:hover img {
  transform: scale(1.03);
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background var(--transition-base);
}

.video-thumb:hover::after {
  background: rgba(0, 0, 0, 0.35);
}

/* Bouton play centré */
.video-play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play-btn span {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.video-play-btn span::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent var(--color-eu-blue);
}

.video-thumb:hover .video-play-btn span {
  transform: scale(1.1);
  box-shadow: var(--shadow-soft);
}


/* ============================================================
   16. FIGURE & LÉGENDE
   ============================================================ */

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.figure-caption {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-gray-mid);
  text-align: center;
  font-style: italic;
}


/* ============================================================
   17. GALERIE
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
  }
}

@media (min-width: 1280px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg);
  }
}

.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.06);
}