/* ========================================
   VENETIAN ARTIST PORTFOLIO - DESIGN SYSTEM
   ======================================== */

/* Import Handwritten Fonts - Ubuntu */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Import Custom Font - Amoria */
@font-face {
  font-family: 'Amoria';
  src: url('fonts/AMORIA.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Import Custom Font - Quilge */
@font-face {
  font-family: 'Quilge';
  src: url('fonts/Quilge DEMO VERSION.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Import Handwritten Fonts - Legacy kept for reference if needed, but overridden */

/* ========================================
   CSS VARIABLES - DESIGN TOKENS
   ======================================== */
:root {
  /* Venetian Color Palette - inspired by lagoon and watercolors */
  /* Venetian Minimal Red Palette */
  --color-primary-red: #8E1C14;
  --color-primary-red-dark: #6d1510;
  --color-text-main: #2c2c2c;
  --color-text-secondary: #555555;
  --color-mist-gray: #999999;
  --color-border-light: #dddddd;
  --color-ink-dark: #2c2c2c;
  --color-paper-cream: #fafafa;
  --color-paper-white: #ffffff;

  /* Aliases for compatibility */
  --color-lagoon-blue: var(--color-primary-red);
  --color-lagoon-deep: var(--color-text-main);
  --color-watercolor-blue: var(--color-primary-red);

  /* Typography */
  --font-main: 'Nunito Sans', sans-serif;
  --font-menu: 'Quilge', sans-serif;
  --font-handwritten: var(--font-main);
  --font-casual: var(--font-main);
  --font-serif: var(--font-main);
  --font-display: var(--font-main);
  --font-sans: var(--font-main);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.18);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Image Protection: Disable selection and drag-ghost */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  /* Ensure clicks still work for lightbox */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling on mobile */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  background-color: #5c5c5c;
  color: var(--color-ink-dark);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  /* Ensure body doesn't overflow */
  margin: 0;
}



/* Background fisso che non crea stacchi durante lo scrolling */
body::before {
  content: '';
  position: fixed;
  /* Mantiene lo sfondo fermo rispetto alla finestra */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* Copre solo l'altezza della vista */
  z-index: -1;
  background-image: url('images/sfondoQuadro2.png');
  background-size: cover;
  /* Assicura che l'immagine copra tutto senza ripetersi */
  background-position: center;
  background-repeat: no-repeat;
  /* Evita la ripetizione che crea lo stacco */
  opacity: 0.94;
}




/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #b8b8b3;
}

::-webkit-scrollbar-thumb {
  background-color: #8E1C14;
  /* Navy Blue */
  border-radius: 6px;
  border: 3px solid rgba(0, 0, 0, 0);
  /* Creates padding effect */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9b231b;
  /* Darker Navy */
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* Base Header Styles */
header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
  min-height: 80px;
  gap: 3rem;
}

/* Page-Specific Background Images with Opacity */
/* Page-Specific Background Images with Blur & Dimming */
.header-home {
  background: transparent;
  /* Nessun background o blur sulla home */
}

/* Common Header Settings for Subpages */
.header-gallery,
.header-biografia,
.header-materiali,
.header-contatti {
  position: relative;
  overflow: hidden;
  /* Contiene l'immagine sfocata/scalata */
  background: transparent;
  /* L'immagine va nello pseudo-elemento */
}

/* Pseudo-element per Background Filter */
.header-gallery::before,
.header-biografia::before,
.header-materiali::before,
.header-contatti::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.4;
  filter: blur(0.7px) contrast(0.9) saturate(1.9);

  /* Sfocatura e riduzione luminosità */
  transform: scale(1.02);
  /* Evita bordi bianchi dati dal blur */
}

.header-gallery::before {
  background-image: url('images/header1.jpg');
}

.header-biografia::before {
  background-image: url('images/header2.jpg');
}

.header-materiali::before {
  background-image: url('images/header3.jpg');
}

.header-contatti::before {
  background-image: url('images/header4.jpg');
}

/* Logo Container - Center */
.logo-container {
  flex-shrink: 0;
  z-index: 5;
}

.header-logo {
  max-width: 150px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: var(--transition-smooth);
}

.header-logo:hover {
  transform: scale(1.05);
}

/* Navigation - Left and Right */
.nav-left,
.nav-right {
  flex-shrink: 0;
  z-index: 6;
}

.nav-left ul,
.nav-right ul {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-left li,
.nav-right li {
  display: flex;
  align-items: center;
}

.nav-left a,
.nav-right a {
  font-family: var(--font-menu);
  font-size: 1.2rem;
  color: var(--color-ink-dark);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.nav-left a:hover,
.nav-right a:hover {
  color: #8E1C14;
  /* Red on hover */
}

/* Active State - Red with Underline */
.nav-left a.active,
.nav-right a.active {
  color: #8E1C14;
  /* Red color */
  border-bottom: 2px solid #8E1C14;
}

/* Mobile Navigation - Hidden by Default */
.mobile-nav {
  display: none;
}

/* Hamburger - Hidden by Default on Desktop */
.hamburger {
  display: none;
}

/* ========================================
   HOME PAGE STYLES
   ======================================== */

.home-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hero Section */
.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.hero-content h1 {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  color: var(--color-ink-dark);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-watercolor-blue);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-ink-dark);
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-family: var(--font-serif);
  text-decoration: none;
  border-radius: 30px;
  /* Angoli curvi moderni */
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-primary {
  background-color: #8E1C14;
  color: white;
  border: 2px solid #8E1C14;
}

.btn-primary:hover {
  background-color: #6d1510;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(142, 28, 20, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: #8E1C14;
  border: 2px solid #8E1C14;
}

.btn-secondary:hover {
  background-color: #8E1C14;
  color: white;
  transform: translateY(-2px);
}

/* Quick Links Section */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 0 5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.link-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-top: 4px solid var(--color-watercolor-blue);
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.link-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-ink-dark);
  margin-bottom: 0.8rem;
}

.link-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.link-card a {
  color: #8E1C14;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.link-card a:hover {
  color: #6d1510;
  text-decoration: underline;
}

/* Logo Container - Center */
.logo-container {
  flex-shrink: 0;
  z-index: 5;
}

.header-logo {
  max-width: 110px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: var(--transition-smooth);
}

.header-logo:hover {
  transform: scale(1.05);
}

/* Navigation - Left and Right */
.nav-left,
.nav-right {
  flex-shrink: 0;
  z-index: 6;
}

.nav-left ul,
.nav-right ul {
  list-style: none;
  display: flex;
  gap: 3.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-left li,
.nav-right li {
  display: flex;
  align-items: center;
}

.nav-left a,
.nav-right a {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-ink-dark);
  text-decoration: none;
  padding-bottom: 0.1rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.nav-left a:hover,
.nav-right a:hover {
  color: #8E1C14;
  /* Red on hover */
}

/* Active State - Red with Underline */
.nav-left a.active,
.nav-right a.active {
  color: #8E1C14;
  /* Red color */
  border-bottom: 2px solid #8E1C14;
  /* Red underline */
  font-weight: 600;
}

/* Mobile Navigation - Hidden by Default */
.mobile-nav {
  display: none;
}

/* Hamburger - Hidden by Default on Desktop */
.hamburger {
  display: none;
}

/* ========================================
   MAIN CONTENT CONTAINER
   ======================================== */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  padding-top: var(--spacing-sm);
}

/* ========================================
   PAGE TITLES
   ======================================== */
h1,
h2,
h3 {
  font-family: var(--font-serif);
  color: var(--color-primary-red);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  letter-spacing: 0.02em;
}

h1 {
  font-family: var(--font-handwritten);
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary-red);
  text-shadow: none;
  /* Minimal: via l'ombra */
}

h2 {
  font-size: 2.2rem;
  font-weight: 400;
  padding-bottom: 0.5rem;
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
}

.content-section h2 {
  margin-top: var(--spacing-lg);
}

.content-section>h2:first-child {
  margin-top: 0;
}

/* ========================================
   GALLERY - MASONRY LAYOUT ARTISTICO
   ======================================== */
.gallery {
  column-count: 3;
  column-gap: 4rem;
  margin-top: 1rem;
}

/* Card */
.painting-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  break-inside: avoid;
  margin-bottom: 2rem;
  display: inline-block;
  width: 100%;
  z-index: 1;
}


.painting-card img {
  width: 100%;
  height: auto;
  display: block;
  /* Soften contrast for digital photos to look more like natural watercolors */
  transition: filter 0.3s ease;
}



/* ========================================
   IMAGE & HOVER OVERLAY
   ======================================== */
.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* Ensure rounded corners on the image wrapper */
  isolation: isolate;
  /* Fix for Safari overflow issues */
  width: 100%;
  display: block;
}

/* Fix for black background bleeding: ensure image fills container */
.image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  /* Prevent ghosting during transition */
}

.painting-card:hover .image-container img {
  transform: scale(1.05);
  /* Subtle zoom on image only */
}

.hover-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  /* Semi-transparent black */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.3s ease;
  cursor: pointer;
  z-index: 2;
  /* Optional: slight blur for elegance */
  border-radius: 8px;
  /* Match container */
}

.painting-card:hover .hover-overlay {
  opacity: 1;
  /* Show on hover */
}

.hover-overlay span {
  color: white;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
  margin-top: 0.8rem;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hover-overlay .arrow-icon {
  width: 32px;
  height: 32px;
  stroke: white;
  margin-bottom: 0.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}


/* Universal Card Info Style */
.painting-info {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  /* Vertically align title and likes */
  flex-wrap: nowrap;
  /* Prevent wrapping */
  padding: 0.8rem 0;
  background: transparent;
  width: 100%;
  pointer-events: none;
  min-height: 40px;
  /* Ensure minimum height */
}

/* Enable pointer events on interactive children */
.painting-info>* {
  pointer-events: auto;
}

.painting-info h3 {
  margin: 0;
  font-size: 1.15rem;
  /* Match user preference */
  font-family: var(--font-serif);
  color: var(--color-ink-dark);
  font-weight: 500;
  text-align: left;
  flex: 1;
  padding-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  /* Tweak line height */
}

/* Card Wrapper for Like Button */
.card-likes-wrapper {
  display: flex;
  align-items: center;
}

/* Card Like Button Style */
.card-likes-wrapper .btn-like {
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
}

.card-likes-wrapper .btn-like:hover {
  transform: scale(1.1);
}

.card-likes-wrapper .heart-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-primary-red);
  stroke-width: 2;
  transition: all 0.3s ease;
}

.card-likes-wrapper .btn-like.liked .heart-icon {
  fill: var(--color-primary-red);
}

.card-likes-wrapper .like-count {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-red);
}

.btn-contact {
  background: transparent;
  color: var(--color-primary-red);
  border: 1px solid var(--color-primary-red);
  padding: 0.6rem 1.8rem;
  border-radius: 30px;
  /* Angoli curvi moderni */
  font-family: var(--font-serif);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  font-weight: 600;
}

.btn-contact:hover {
  background: var(--color-primary-red);
  color: white;
  transform: none;
  box-shadow: 0 4px 10px rgba(142, 28, 20, 0.2);
}

.btn-share {
  background: transparent;
  color: #25D366;
  /* WhatsApp Greenish or just distinct */
  border: 1px solid #25D366;
  padding: 0.6rem 1.8rem;
  border-radius: 30px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  font-weight: 600;
  margin-left: 1rem;
  cursor: pointer;
}

.btn-share:hover {
  background: #25D366;
  color: white;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

/* ========================================
   LIGHTBOX
   ======================================== */
/* ========================================
   LIGHTBOX (Sheet Modal Layout)
   ======================================== */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* Dimmed Backdrop */
  z-index: 2000;
  align-items: center;
  justify-content: flex-end;
  /* Align sheet to bottom */
  flex-direction: column;
  transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.active {
  display: flex;
}

/* Header (Close Button on Sheet Top) */
.lightbox-header {
  position: absolute;
  top: 10%;
  /* Matches sheet top */
  left: 0;
  width: 100%;
  height: 60px;
  /* Area for buttons */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 2020;
  pointer-events: none;
  /* Let clicks pass through if needed, but buttons need pointer-events: auto */
}

.header-icon-btn {
  pointer-events: auto;
  background: white;
  border: none;
  cursor: pointer;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: transform 0.2s, background 0.2s;
  font-size: 2rem;
  padding: 0;
  line-height: 1;
}

.header-icon-btn svg {
  width: 20px;
  height: 20px;
}

.header-icon-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

.header-icon-btn:hover {
  transform: scale(1.1);
  color: var(--color-primary-red);
}

#lightbox-close-btn {
  font-family: var(--font-casual);
  font-size: 2.2rem;
}

/* Scrollable Container (The Sheet) */
.lightbox-scroll-container {
  width: 100%;
  height: 90%;
  background-image: url('images/sfondoQuadro2.png');
  background-color: #fafafa;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3);
  overflow-y: hidden;
  overflow-x: hidden;
  padding-top: 50px;
  /* Reduced from 60px */
  padding-bottom: 80px;
  /* Increased for nav bar space */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

.lightbox-scroll-container.closing {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px 10 20px;
  /* Bottom padding for fixed buttons */
  height: 100%;
  /* Full height for flex */
}

/* Top Text Section */
.lightbox-text-top {
  text-align: center;
  margin-bottom: 1rem;
  /* Reduced from 1.5rem */
  width: 100%;
}

#lightbox-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  /* Slightly smaller */
  color: var(--color-primary-red);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

#lightbox-description {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  /* Slightly smaller */
  color: #555;
  line-height: 1.4;
}

/* Image Container - CENTERED IN AVAILABLE SPACE */
.lightbox-image-container {
  width: 100%;
  flex: 1;
  /* Take all available space */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Center vertically */
  position: relative;
  min-height: 200px;
  margin-bottom: 0;
  /* No margin, buttons are fixed */
}

#lightbox-img {
  width: 100%;
  min-height: 100%;
  /* Fill container */
  max-width: 100%;
  max-height: 100%;
  /* Adaptive to available space */
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.2s;
}

/* Vertical Painting - Adapts naturally to available space */
/* Vertical Painting rules removed to prevent font shrinking */

/* Bottom Actions Section - FIXED AT BOTTOM */
.lightbox-actions-bottom {
  position: fixed;
  bottom: 60px;
  /* Above navigation bar (60px height) */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* Tight spacing */
  padding: 12px 20px;
  background: linear-gradient(to top, rgba(250, 250, 250, 0.98), rgba(250, 250, 250, 0.95));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 2025;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* Like Button Wrapper */
.lightbox-likes-wrapper {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  /* Constrain width */
}

/* Style the Like Button - Compact */
#lightbox-like-container .btn-like {
  background: white;
  border: 2px solid #e8e8e8;
  border-radius: 22px;
  padding: 6px 12px;
  /* Even smaller */
  min-width: 75px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
  box-shadow: none;
}

#lightbox-like-container .btn-like:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border-color: #d0d0d0;
}

#lightbox-like-container .btn-like svg {
  width: 18px;
  /* Smaller */
  height: 18px;
  fill: none;
  stroke: var(--color-primary-red);
  /* Red stroke for unliked heart */
  stroke-width: 2;
  transition: all 0.3s;
  flex-shrink: 0;
}

#lightbox-like-container .btn-like .like-count {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  /* Smaller */
  color: var(--color-primary-red);
  /* Red text */
  font-weight: 500;
  transition: all 0.3s;
}

#lightbox-like-container .btn-like.liked {
  border-color: var(--color-primary-red);
  background: rgba(142, 28, 20, 0.05);
}

#lightbox-like-container .btn-like.liked svg {
  fill: var(--color-primary-red);
  stroke: var(--color-primary-red);
}

#lightbox-like-container .btn-like.liked .like-count {
  color: var(--color-primary-red);
  font-weight: 600;
}

.btn-inquiry-primary {
  width: 100%;
  max-width: 600px;
  /* Constrain width */
  background-color: var(--color-primary-red);
  color: white;
  padding: 11px;
  /* Smaller */
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  /* Smaller */
  box-shadow: none;
  /* Removed shadow default */
  transition: all 0.3s ease;
  display: block;
}

.btn-inquiry-primary:hover {
  background-color: var(--color-primary-red);
  /* Keep same red background */
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(142, 28, 20, 0.35);
  color: white;
}

@media (max-width: 768px) {
  .btn-inquiry-primary {
    width: 85%;
    margin: 0 auto;
  }
}

/* Secondary Nav: PINNED TO ABSOLUTE BOTTOM */
.lightbox-secondary-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
  z-index: 2030;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}


.lightbox-counter {
  font-family: var(--font-serif);
  color: #777;
  font-size: 1rem;
  min-width: 60px;
  text-align: center;
}

/* Nav Arrows Restored */
.nav-arrow-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-ink-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.nav-arrow-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
}

.nav-arrow-btn svg {
  width: 20px;
  height: 20px;
}

/* Adjust Like Button for Lightbox Context */
#lightbox-like-container .btn-like {
  border-color: transparent;
  padding: 0.5rem;
  background: transparent;
}

#lightbox-like-container .btn-like.liked {
  background: transparent;
  color: var(--color-primary-red);
  /* Just color for icon */
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.content-section {
  padding: var(--spacing-lg);
  border-radius: 8px;
  margin-bottom: var(--spacing-lg);
}

.content-section p {
  font-size: 1rem;
  line-height: 1.6;
}

.content-section a {
  color: var(--color-primary-red);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.content-section a:hover {
  color: var(--color-primary-red-dark);
  border-bottom-color: var(--color-primary-red);
}


/* ========================================
   CONTACT FORM
   ======================================== */
.contact-form {
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-ink-dark);
}

/* Page Header & Description */
.page-header {
  margin-bottom: 3rem;
}

.page-header-title {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0;
}

.page-header-title h2 {
  font-family: var(--font-serif);
  color: var(--color-primary-red);
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  letter-spacing: 0.1em;
}

.page-description {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .page-header-title {
    margin-bottom: 6rem;
    gap: 0.3rem;
    margin-top: 2rem;
  }

  .page-header-title h2 {
    letter-spacing: 0.05em;
  }

  .page-description {
    font-size: 0.9rem;
    line-height: 1;
    color: #666;
  }
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: #000;
  display: block;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 1rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  color: var(--color-ink-dark);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary-red);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(142, 28, 20, 0.1);
}

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

.btn-submit {
  background: var(--color-primary-red);
  color: white;
  border: 1px solid var(--color-primary-red);
  padding: 1rem 3rem;
  border-radius: 30px;
  /* Angoli curvi */
  font-family: var(--font-serif);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin: 2rem auto 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(142, 28, 20, 0.15);
}

.btn-submit:hover {
  background: var(--color-primary-red-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(142, 28, 20, 0.25);
}

/* Painting Grid Selector Modernized */
.painting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .painting-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  .painting-grid-item img {
    height: 100px;
  }
}

.painting-grid-item {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 2px solid transparent;
}

.painting-grid-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
}

.painting-grid-item.selected {
  border-color: var(--color-primary-red);
  background: rgba(142, 28, 20, 0.03);
}

.painting-grid-item.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--color-primary-red);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
  animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkPop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.painting-grid-item img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.painting-grid-item:hover img {
  transform: scale(1.05);
}



.collapsible-selector {
  margin-top: 0.8rem;
  border-radius: 12px;
  overflow: hidden;
}

.toggle-btn {
  width: 100%;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-weight: 500;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-primary-red);
}

.toggle-btn .arrow-icon {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.toggle-btn.active {
  color: var(--color-primary-red);
}

.toggle-btn.active .arrow-icon {
  transform: rotate(180deg);
}

.selector-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
  background-color: transparent;
}

.selector-content:not(.collapsed) {
  max-height: 1000px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.selector-inner {
  padding: 1.5rem;
}

@media (max-width: 600px) {
  .selector-inner {
    padding: 0;
  }
}

.selector-hint {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1.5rem;
  text-align: center;
  font-style: italic;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.btn-page {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.8rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #555;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  min-width: 44px;
  /* Area di tocco ottimale per mobile */
  min-height: 44px;
}

@media (max-width: 400px) {
  .pagination-controls {
    gap: 1rem;
  }

  .btn-page {
    padding: 0.6rem;
    min-width: 40px;
    min-height: 40px;
  }
}

.btn-page:hover:not(:disabled) {
  background: var(--color-primary-red);
  color: white;
  border-color: var(--color-primary-red);
  transform: translateY(-2px);
}

.btn-page:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#page-num {
  font-family: var(--font-serif);
  font-weight: 600;
  color: #333;
  font-size: 1.1rem;
  min-width: 20px;
  text-align: center;
}

/* Selected Thumbnails Feedback */
.selected-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.thumb-item {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: thumbPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes thumbPop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

.thumb-item .remove-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--color-primary-red);
  border: 2px solid var(--color-primary-red);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  opacity: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 2;
  text-shadow: 0 0 5px white;
  /* Make X stand out */
}

@media (max-width: 600px) {
  .thumb-item .remove-thumb {
    opacity: 1;
  }
}

.thumb-item:hover .remove-thumb {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.selection-feedback {
  margin-top: 0.8rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-primary-red);
  font-weight: 500;
  min-height: 1.2rem;
}

.toggle-btn .arrow {
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.toggle-btn.active .arrow {
  transform: rotate(180deg);
}

.selector-content {
  padding: 1rem;
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
  max-height: 1000px;
  opacity: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  /* Separatore sottilissimo */
}

.selector-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}

/* Griglia Quadri nel Selettore */
.painting-grid-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
  /* Bordo leggero per definire la card */
  /* Sfondo bianco come richiesto */
  padding: 0.4rem;
  /* Spazio interno per creare l'effetto "foto polaroid" o cornice */
  position: relative;
}

.painting-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.painting-grid-item.selected {
  border-color: var(--color-primary-red);
  transform: scale(0.98);
  box-shadow: 0 0 0 2px rgba(142, 28, 20, 0.1);
  background: #d8abab24;
}

.painting-grid-item img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  margin: 0;
  border-radius: 2px;
  /* Leggero smussamento immagine interna */
}



@media (max-width: 600px) {
  .painting-grid-item img {
    height: 110px;
  }
}

/* Nascondiamo titolo item griglia se ridondante o ingombrante, o stilizziamolo minimal */
.painting-grid-title {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  padding: 0.3rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pulsanti Paginazione */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-page {
  border: 1px solid #ccc;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  /* Angoli curvi ma proporzionati */
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: #555;
  background: #ffffff56;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-page:hover:not(:disabled) {
  border-color: var(--color-primary-red);
  color: var(--color-primary-red);
  background: #ffffffaa;
}

.btn-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #eee;
}

#page-num {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}

.selection-feedback {
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-primary-red);
  min-height: 1.5rem;
}


/* Painting Preview */
.painting-preview {
  display: none;
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(249, 246, 240, 0.5);
  border-radius: 8px;
  text-align: center;
}

.painting-preview img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  box-shadow: var(--shadow-medium);
  margin-bottom: var(--spacing-sm);
}

.painting-preview p {
  font-size: 0.95rem;
  color: var(--color-ink-dark);
  font-style: italic;
}

/* Social Media Section Modernized */
.social-section {
  text-align: center;
  padding: 3rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.social-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-primary-red);
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.social-label {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
  transition: color 0.3s ease;
}

.social-item:hover .social-label {
  color: var(--color-primary-red);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-tap-highlight-color: transparent;
}

.social-link:hover {
  transform: scale(1.1);
  border: none;
  outline: none;
  box-shadow: none;
}

.social-svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-primary-red);
  stroke-width: 1.8;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/* ========================================
   FOOTER
   ======================================== */
footer {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);

  border-top: 1px solid #ddd;
  margin-top: var(--spacing-xl);
  color: var(--color-lagoon-deep);
  font-style: italic;
}

/* ========================================
   RESPONSIVE
   ======================================== */
/* ========================================
   RESPONSIVE & MOBILE MENU
   ======================================== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 29px;
  height: 29px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: var(--color-primary-red);
  border-radius: 10px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}

/* Hamburger Animation when Active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}


@media (max-width: 1024px) {
  .gallery {
    column-count: 2;
    column-gap: 1.5rem;
  }

  /* Painting grid 2 columns on tablet */
  .painting-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  /* Show Hamburger Button on Mobile */
  .hamburger {
    display: flex;
    position: fixed;
    right: 3rem;
    top: 60px;
    /* 50% of header height (90px) */
    transform: translateY(-50%);
    z-index: 1200;
    transition: opacity 0.3s ease;
  }

  /* Hide Desktop Navigation on Mobil e */
  .nav-left,
  .nav-right {
    display: none;
  }

  /* Hide Room View Button on Mobile */
  #lightbox-room-btn,
  #lightbox-room-btn-desktop {
    display: none !important;
  }

  /* Mobile Header Adjustments */
  header {
    padding: 0 2rem;
    height: 120px;
    /* Fixed height to ensure perfect centering */
    min-height: 90px;
    z-index: 10;
    display: flex;
    align-items: center;
  }

  .logo-container {
    margin-left: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
  }

  .header-logo {
    max-width: 100px;
    height: auto;
  }

  /* Mobile Navigation Menu */
  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    background-image: url('images/sfondoQuadro2.png');
    background-size: cover;
    background-position: center;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    transition: right 0.4s ease-in-out;
    z-index: 1100;
    padding-top: 150px;
  }

  .mobile-nav.active {
    right: 0;
  }

  .mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    padding: 0;
    margin: 0;
  }

  .mobile-nav li {
    width: 100%;
    text-align: center;
  }

  .mobile-nav a {
    font-family: var(--font-menu);
    font-size: 1.5rem;
    color: var(--color-ink-dark);
    text-decoration: none;
    display: block;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
  }

  .mobile-nav a:hover {
    color: #8E1C14;
  }

  .mobile-nav a.active {
    color: #8E1C14;
    font-weight: 600;
    border-bottom: 2px solid #8E1C14;
  }

  /* Mobile Nav Overlay Backdrop */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(3px);
  }

  .mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  .gallery {
    column-count: 1;
    column-gap: 0;
  }

  h1 {
    font-size: 2.2rem;
  }

  .logo {
    max-width: 200px;
  }

  .painting-card {
    margin-bottom: 2rem;
    box-shadow: none;
    background: transparent;
    width: calc(100% - 5rem);
    /* 100% minus total margins (2.5rem * 2) */
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    display: block;
    /* Ensure it respects width/margin correctly in block flow */
  }



  .painting-card .painting-info p {
    display: none;
  }

  .painting-card .painting-actions {
    display: none;
  }


  /* --- Mobile Grid Layout Refinement --- */
  /* Inherits completely from global styles now */


  /* --- Lightbox Floating Actions (Mobile) --- */
  .lightbox-floating-actions {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background: transparent;
    width: 100%;
    z-index: 10;
  }

  .lightbox-floating-actions .btn-like {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--color-primary-red);
    padding: 0.8rem 1.5rem;
  }

  .social-links {
    gap: 1.5rem;
  }

  .social-item {
    gap: 0.5rem;
  }

  .social-link {
    width: 50px;
    height: 50px;
  }

  .social-label {
    font-size: 0.8rem;
  }

  .social-svg {
    width: 22px;
    height: 22px;
  }

  .painting-preview img {
    max-height: 200px;
  }

  .btn-submit {
    width: 100%;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
  }

  .form-group label {
    font-size: 0.85rem;
  }
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

/* ========================================
   HOME PAGE FULLSCREEN IMAGE
   ======================================== */
.home-body {
  overflow: hidden;
  /* Nessuno scroll sulla home */
  height: 100vh;
  width: 100vw;
  position: relative;
}

.home-body footer {
  display: none;
  /* Rimuove il footer dalla home */
}

/* Override padding del main se necessario */
.home-body main {
  padding: 0;
  margin: 0;
}

.home-fullscreen {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.hero-fullscreen-image {
  position: fixed;
  top: 12px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Ancora l'immagine in alto al centro */
  z-index: 1;
  /* Sotto l'header (z-index 10) ma sopra il background base */
  pointer-events: none;
  display: block;
  /* Rimuove comportamenti inline */
  margin: 0;
}

/* Assicuriamo che il footer stia sopra l'immagine se presente in ALTRE pagine */
footer {
  position: relative;
  z-index: 2;
}

/* Assicuriamo che il main content delle altre pagine non venga influenzato */
main:not(.home-fullscreen) {
  position: relative;
  z-index: 2;
}

/* ========================================
   LIGHTBOX NAVIGATION & COUNTER
   ======================================== */


/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {


  /* Smaller Painting Titles on Mobile */
  .painting-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }


  /* --- LIGHTBOX MOBILE OPTIMIZATION --- */

  /* Darker Backdrop for Mobile */
  .lightbox {
    background: rgba(0, 0, 0, 0.9) !important;
    /* Extremely dark for focus */
  }

  /* Hide Desktop Sidebar Close Area on Mobile */
  .lightbox-sidebar-left {
    display: none !important;
  }

  /* Make lightbox taller on mobile (but show backdrop) */
  .lightbox-scroll-container {
    height: 92%;
    /* Leave space at top for backdrop visibility */
    /* Increased from 90% */
    border-radius: 15px 15px 0 0;
    padding-top: 10px;
    /* Reduced from 50px/standard to give more space to image */
    padding-bottom: 100px;
    /* Space for bottom nav */
    margin-top: 8%;
    /* Push down to reveal backdrop */
    width: 100% !important;
    /* Ensure it takes full width */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Smooth drag release */
    overflow-y: auto !important;
    /* Enable scrolling for content */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth iOS scrolling */
  }

  /* Drag Handle Styling */
  .lightbox-handle-wrapper {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align to top */
    padding-top: 12px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2050;
    cursor: grab;
  }

  .lightbox-handle {
    width: 40px;
    height: 3px;
    background-color: #565655ba;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* Adjust header position to match new height */
  .lightbox-header {
    top: 0;
    padding: 0 15px 0px 15px !important;
    z-index: 2040;
    pointer-events: none;
    /* Let clicks pass through if needed, but buttons need pointer-events: auto */
  }

  .lightbox-header .header-icon-btn {
    pointer-events: auto;
    /* Re-enable buttons */
    z-index: 2101;
    opacity: 0.85;
  }

  /* Optimize Close Button for Mobile (Arrow Down Style) */
  #lightbox-close-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: none;
    background-color: transparent;
    border: none;
    display: flex !important;
    /* Force display on mobile */
    align-items: center;
    justify-content: center;
    /* Adjust top position */
    right: 8px;
    position: absolute;
    /* Fix position relative to header or container */
    pointer-events: auto;
    /* Ensure button is clickable */
    z-index: 2100;
    /* Ensure it's above other elements */
    cursor: pointer;
    /* Visual feedback that it's clickable */
  }

  #lightbox-close-btn svg {
    opacity: 1;
    /* SVG itself has color #545452, no need for opacity dimming unless requested */
    width: 22px !important;
    /* Larger arrow */
    height: 22px !important;
    transform: rotate(180deg);
    /* Rotate Up arrow to point Down */
    opacity: 0.85;
    pointer-events: auto;
    /* Allow SVG to receive click events */
  }

  /* Reduce Padding for Content */
  .lightbox-content {
    padding: 0 10px 0px 10px !important;
    /* Minimize side padding */
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    justify-content: center;
    /* Center title + image vertically */
  }

  /* Compact Text Area */
  .lightbox-text-top {
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    margin-top: 20px;
    /* Keep it from shrinking too much, but allow it to be compact */
  }

  #lightbox-title {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
  }

  #lightbox-description {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines on small screens if needed */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Maximize Image Area */
  .lightbox-image-container {
    flex: 0 1 auto;
    /* Use auto/content height, but allow shrinking if needed */
    /* Grow and shrink */
    min-height: 0;
    /* Critical for flex child scrolling/sizing */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Removed min-height: 40% which forced gap */
  }

  #lightbox-img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;

  }

  .lightbox-counter {
    font-size: 1rem;
  }

  /* Widen text content on mobile */
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .content-section {
    padding: 1rem 0.8rem;
  }
}



/* ========================================
   BACK TO TOP BUTTON
   ======================================== */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary-red);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background-color: var(--color-primary-red-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ========================================
   SMART HEADER
   ======================================== */
header {
  transition: transform 0.3s ease-in-out;
}

header.header-hidden {
  transform: translateY(-100%);
}

/* =========================================
   Language Switcher - Current Language Display
   ========================================= */
.lang-switcher {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.lang-current-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}

.lang-switcher:hover .lang-current-display {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.6);
}

.flag-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.flag-it {
  background: linear-gradient(to right, #009246 0%, #009246 33%, #F1F2F1 33%, #F1F2F1 66%, #CE2B37 66%, #CE2B37 100%);
}

.flag-en {
  background-image: url('images/BandieraInglese.png');
  background-size: 140%;
  background-position: center;
}

.lang-text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #000000;
}

.change-icon {
  width: 12px;
  height: 12px;
  color: #000000;
  transition: all 0.3s ease;
  margin-left: 2px;
}

.lang-switcher:hover .change-icon {
  color: rgba(0, 0, 0, 0.7);
  transform: rotate(180deg);
}

/* Desktop: Fixed top-right position */
.lang-switcher-desktop {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* Mobile: Bottom of menu */
.lang-switcher-mobile {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.lang-switcher-mobile .lang-current-display {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}

.lang-switcher-mobile .flag-circle {
  width: 22px;
  height: 22px;
}

.lang-switcher-mobile .lang-text {
  font-size: 0.95rem;
  color: #000000;
  font-weight: 700;
}

.lang-switcher-mobile .change-icon {
  width: 16px;
  height: 16px;
  color: #000000;
}

.lang-switcher-mobile:hover .lang-current-display {
  background: rgba(0, 0, 0, 0.2);
  transform: none;
}

.lang-switcher-mobile:hover .change-icon {
  color: rgba(255, 255, 255, 0.8);
}

/* Hide desktop switcher on mobile */
@media (max-width: 768px) {
  .lang-switcher-desktop {
    display: none;
  }
}

/* Hide mobile switcher on desktop */
@media (min-width: 769px) {
  .lang-switcher-mobile {
    display: none;
  }
}

/* =========================================
   Mobile Share Button
   ========================================= */
.lightbox-share-mobile {
  position: fixed;
  top: 35px;
  left: 20px;
  color: white;
  cursor: pointer;
  z-index: 1010;
  display: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, background 0.3s;

  /* Button styling */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  padding: 8px 16px 8px 12px;

  /* Flexbox for icon + text */
  align-items: center;
  gap: 8px;
}

.lightbox-share-mobile .share-text {
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
}

.lightbox-share-mobile svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lightbox-share-mobile:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .lightbox-share-mobile {
    display: flex;
  }
}

/* ========================================
   LIKE SYSTEM STYLES
   ======================================== */

/* Painting Actions Container */
.painting-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Like Button */
.btn-like {
  background: transparent;
  color: var(--color-primary-red);
  border: 1px solid var(--color-primary-red);
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.btn-like:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
  /* No shadow when not liked */
}

.btn-like:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Heart Icon */
.btn-like .heart-icon {

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
}



/* Liked State: Only red fill for the heart */
.btn-like.liked .heart-icon {
  fill: var(--color-primary-red);
  stroke: var(--color-primary-red);
}

.btn-like.liked:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* Heart Pop Animation */
@keyframes heartPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.btn-like.heart-pop .heart-icon {
  animation: heartPop 0.3s ease;
}

/* Like Counter */
.like-count {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 20px;
  text-align: center;
}

/* Mobile Adjustments for Like Button */
@media (max-width: 768px) {
  .btn-like {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }



  .like-count {
    font-size: 0.9rem;
  }
}

/* Ensure painting-actions in lightbox are centered */
.lightbox-info .painting-actions {
  margin-top: 1.5rem;
}

/* ========================================
   BACK TO TOP BUTTON
   ======================================== */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary-red);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(142, 28, 20, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background-color: var(--color-primary-red-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(142, 28, 20, 0.4);
}

/* Hide back-to-top when lightbox is open */
.lightbox.active~#back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ========================================
   LIGHTBOX HEADER BUTTONS
   ======================================== */
.lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-top: 30px;
  z-index: 2040;
  pointer-events: none;
}

.header-icon-btn {
  pointer-events: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 2rem;
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.header-icon-btn:hover {
  transform: scale(1.1);
  color: var(--color-primary-red);
  background: rgba(255, 255, 255, 0.1);
}

.header-icon-btn svg {
  width: 24px;
  height: 24px;
}

/* ========================================
   DOUBLE-TAP LIKE ANIMATION
   ======================================== */
.like-heart-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
}

.like-heart-overlay svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary-red);
  filter: drop-shadow(0 4px 12px rgba(142, 28, 20, 0.4));
}

/* White heart for unlike */
.like-heart-overlay.unlike svg {
  fill: white;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Heart pulse animation */
.like-heart-overlay.animate {
  animation: likeHeartPulse 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes likeHeartPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ========================================
   MAGNIFYING GLASS LENS
   ======================================== */
/* ========================================
   MAGNIFYING GLASS LENS
   ======================================== */
.magnifier-lens {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  cursor: none;
  pointer-events: none;
  z-index: 150;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.3);
  background-repeat: no-repeat;
  backdrop-filter: blur(0);

  /* Initial offset variables */
  --offset-x: 0px;
  --offset-y: 0px;
  transform: translate(var(--offset-x), var(--offset-y)) scale(1);

  /* Fluid transition for transform (smooth side/vertical flips) */
  transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: magnifierAppear 0.25s ease-out;
}

@keyframes magnifierAppear {
  from {
    opacity: 0;
    transform: translate(var(--offset-x), var(--offset-y)) scale(0.5);
  }

  to {
    opacity: 1;
    transform: translate(var(--offset-x), var(--offset-y)) scale(1);
  }
}

/* ========================================
   ROOM VIEW OVERLAY
   ======================================== */
.room-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 3000;
  display: none;
  /* Hidden by default */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(10px);
}

.room-view-overlay.active {
  display: flex;
  opacity: 1;
}

.room-view-container {
  position: relative;
  width: 98vw;
  /* Maximized width */
  height: 98vh;
  /* Maximized height */
  max-width: 1800px;
  max-height: 1200px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.room-close-btn {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 50%;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Removed line-height and padding fix since we use SVG now */
}

.room-close-btn:hover {
  transform: scale(1.1);
  background: white;
  color: var(--color-primary-red);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.room-background {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
}

.painting-on-wall-container {
  position: absolute;
  /* Safe wall zone */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 30%;
  /* Default proportional width */
  max-width: 80%;
  z-index: 50;
  /* Higher z-index for visibility */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dragging disabled - standard cursor */
  cursor: default;
}

/* Removed active state since dragging is disabled */

#painting-on-wall {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Image fits inside container maintaining aspect ratio */

  /* No border - clean look */
  border: none;

  /* Enhancement: Add brightness and depth */
  filter: brightness(1.12) contrast(1.01);

  transition: transform 0.1s ease-out;
  /* Smooth follow for movement */
}

.room-info {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 30px;
  background: rgba(0, 0, 0, 0.7);
  /* Semi-transparent dark bg */
  border-radius: 50px;
  /* Rounded capsule shape */
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  z-index: 20;
  width: auto;
  min-width: 200px;
}

.room-dimensions {
  display: block;
  font-family: var(--font-main);
  /* Clean sans-serif font */
  font-weight: 500;
  font-size: 1rem;
  color: white;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.room-hint {
  display: none;
  /* Hide hint text as requested */
}

/* Lightbox Header adjustments to accommodate left alignment */
.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 15px;
}

.header-left {
  display: flex;
  gap: 10px;
}

/* Mobile specific room view tweaks */
@media (max-width: 768px) {
  .room-view-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .room-info p {
    font-size: 0.95rem;
  }

  .painting-on-wall-container {
    width: 45%;
    /* Slightly larger on mobile for visibility */
  }
}

/* ========================================
   DESKTOP ENHANCEMENTS (Min-width 1024px)
   ======================================== */


/* Default: Hide Desktop Share/Room Buttons on Mobile */
#lightbox-share-btn-desktop,
#lightbox-room-btn-desktop {
  display: none;
}

@media (min-width: 1024px) {

  /* --- 1. Desktop Gallery Grid Enhancement --- */

  /* Make sure the main grid is clean */
  .painting-card {
    box-shadow: none;
    background: transparent;
  }

  .painting-card:hover {
    transform: none;
    /* remove card lift, we lift image only */
    box-shadow: none;
  }

  /* Apply shadow and lift to IMAGE only */
  .painting-card img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    border-radius: 4px;
    /* Optional rounded corners */
  }

  .painting-card:hover img {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  }

  /* Redefine .painting-info to be STATIC below the image */
  .painting-info {
    position: static;
    /* Not absolute anymore */
    opacity: 1;
    /* Always visible */
    background: transparent;
    padding: 0.8rem 0;
    /* Align left with image */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    transform: none;
    transition: none;
    color: var(--color-ink-dark);
    box-shadow: none;
    /* Ensure no shadow on text */
  }

  /* Show standard Title style */
  .painting-info h3 {
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
    color: var(--color-ink-dark);
    font-family: var(--font-serif);
    font-weight: 600;
  }

  /* Hide the description paragraph on desktop grid to match "Mobile style" request (Title + Like only) */
  .painting-info p.painting-description {
    display: none;
  }

  /* Hide the standard action buttons (Contact/Like) from grid view - we only want Like count */
  .painting-actions {
    display: none;
    /* We will use the mobile-header structure injected by script.js or custom CSS to show likes */
  }

  /* --- Mobile Grid Layout Refinement --- */
  /* Inherits completely from global styles now */
  .desktop-title {
    display: none;
  }


  /* --- HOVER OVERLAY "SCOPRI" --- */
  .painting-card::after {
    /* Text "Scopri" */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Layout: Flex column to stack Icon and Text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Space between icon and text */

    /* Background: Subtle darken */
    background-color: rgba(0, 0, 0, 0.4);

    /* Minimal Diagonal Arrow Up-Right Icon */
    background-repeat: no-repeat;
    background-position: center calc(50% - 15px);
    /* Shift icon up slightly */
    background-size: 32px;

    color: white;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-top: 25px;
    /* Push text down to make room for icon */

    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
    backdrop-filter: none;
  }

  /* Target only the image part for the overlay if possible */
  /* Since we can't easily target just image height without structure change, 
     we assume image is top part. We use bottom padding or calc if needed, 
     but full cover with transparency is fine for modern look. */

  .painting-card:hover {
    cursor: pointer;
    /* Change cursor to indicate action */
  }

  .painting-card:hover::after {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3);
    /* Slightly darker on hover */
    background-size: 36px;
    /* Subtle icon zoom */
    /* Text transform is handled by flex container, hard to animate separately without 2 elements */
    /* So we just animate the whole overlay */
  }



  /* FIX: Ensure the text below is NOT covered */
  .painting-card {
    display: flex;
    flex-direction: column;
  }

  .painting-card img {
    order: 1;
  }

  .painting-card .painting-info {
    order: 2;
    z-index: 20;
    /* Ensure text is above overlay if overlay is full height */
    position: relative;
    background: transparent;
    /* Make text bg white so overlay doesn't show behind it */
  }

  /* Restrict overlay to image area only using pseudo-element on the image? No, can't add pseudo to img. */
  /* We can make overlay full height but z-index -1 relative to text? */
  /* .painting-card needs to be relative. */
  /* Let's adjust top/height of overlay? */
  .painting-card::after {
    height: auto;
    bottom: 60px;
    /* Leave space for text approx */
    /* This is risky if text height varies. */
    /* Safest: content "APRI" is on the image wrapper. BUT we don't have an image wrapper in HTML for grid items. */
    /* Compromise: Full overlay, but text has higher z-index and white background. */
    z-index: 5;
  }

  .painting-info {
    z-index: 10;
    background: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* Opaque background for info */
  }


  /* --- 2. Desktop Lightbox Redesign (Split Screen) --- */

  /* Lightbox Container */
  .lightbox {
    /* Backdrop already handled by .lightbox background */
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Remove padding */
  }

  /* The actual white content container */


  /* Animation - Slide Out (triggered by script adding .closing class) */
  .lightbox-scroll-container.closing {
    /* Use transitions for smooth exit from any position (hovered or not) */
    transform: translateX(100%) !important;
    transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0);
    animation: none;
    /* Disable keyframe animation to prevent jumping */
  }

  /* REFINED LIGHTBOX CONTAINER for Sidebar Effect */
  .lightbox-scroll-container {
    width: 85%;
    margin-left: auto;
    /* Push to right, leaving 15% on left for Close Area */
    background-image: url('images/sfondoQuadro2.png');
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    /* Shadow to separate from sidebar */

    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    position: relative;
    height: 100%;
    /* FIX: Full height for desktop sidebar */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Ensure return animation matches */
    animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* NEW SIDEBAR ACTION LEFT */
  .lightbox-sidebar-left {
    position: absolute;
    top: 0;
    left: 0;
    left: 0;
    width: 15%;
    height: 100%;
    z-index: 2060;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.6s ease, width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .lightbox-sidebar-left:hover {
    background: rgba(0, 0, 0, 0.19);
    width: calc(15% + 60px);
    /* Expand sidebar to fill the gap created by scroll container translation */
  }

  /* Fade out the main backdrop when hovering the sidebar to see the gallery behind */
  .lightbox:has(.lightbox-sidebar-left:hover) {
    background: rgba(0, 0, 0, 0.7);
  }

  /* Slide Effect on Scroll Container when Sidebar Hovered */
  .lightbox-sidebar-left:hover~.lightbox-scroll-container {
    transform: translateX(60px);
    /* Larger displacement */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Slower, fluid ease-out */
  }

  /* Sidebar Closing Animation */
  .lightbox-sidebar-left.closing {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s ease;
    pointer-events: none;
  }

  .sidebar-action-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    /* More visible initially */
    transition: all 0.3s ease;
    transform: translateX(-10px);
    pointer-events: none;
  }

  .lightbox-sidebar-left:hover .sidebar-action-content {
    color: white;
    transform: translateX(0);
  }

  .sidebar-arrow {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
    opacity: 1;
    /* Fully visible initially */
  }

  .sidebar-text {
    font-family: var(--font-main);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
  }

  /* Remove the generic hover effect */
  /* .lightbox.active:hover::before was causing the issue */

  /* The Content Grid - Adjusted for new Right Panel grouping */
  .lightbox-content {
    display: grid;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 20px;
    margin: 0;
    /* Grid Layout: Left (Image) - Right (Info) */
    grid-template-columns: 1fr 450px;
    /* Rows: 
         1. Spacer Top (Flex 1)
         2. Like Button
         3. Title & Desc
         4. Room Btn (Stacked)
         5. CTA (Stacked)
         6. Share (Stacked)
         7. Spacer Bottom (Flex 1)
      */
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    gap: 0;
    overflow: hidden;
  }

  /* 1. IMAGE PANEL (Left, spans all rows) */
  .lightbox-image-container {
    grid-column: 1;
    grid-row: 1 / -1;
    /* Span full height */
    position: relative;
    background: transparent;
    /* Transparent to show paper bg */
    height: 100%;
    order: -1;
    /* Ensure visually first */
    padding: 40px 40px 100px 40px;
    /* More bottom padding to avoid nav overlap */
    display: flex;
    /* Ensure flex for centering */
    justify-content: center;
    align-items: center;
  }

  #lightbox-img {
    max-height: 100%;
    /* Fill available height (minus padding) */
    max-width: 100%;
    width: auto;
    /* Make sure obj fit doesn't crop */
    object-fit: contain;
    cursor: default;
    /* Remove zoom icon */
  }

  /* 2. NAV (Overlay on Image Panel) - Smaller & Compact */
  /* 2. NAV (Overlay on Image Panel) - Transparent & Consistent Style */
  .lightbox-secondary-nav {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: center;
    position: static;
    margin-bottom: 30px;
    width: auto;
    background: transparent;
    /* Fully transparent as requested */
    backdrop-filter: none;
    /* Removed blur if fully transparent, or keep? User said "transparent background" */
    /* Container now transparent/no-border */
    padding: 0;
    box-shadow: none;
    border: none;
    z-index: 10;
    gap: 15px;
    display: flex;
    align-items: center;
    color: #555;
    /* Dark text/icon */
  }

  /* Smaller arrow buttons */
  .lightbox-secondary-nav .nav-arrow-btn {
    width: 38px;
    /* Slightly larger for button feel */
    height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
  }

  .lightbox-secondary-nav .nav-arrow-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.4);
  }

  /* Directional hover movement for arrows */
  #lightbox-prev:hover {
    transform: translateX(-3px);
  }

  #lightbox-next:hover {
    transform: translateX(3px);
  }

  .lightbox-secondary-nav .nav-arrow-btn svg {
    width: 16px;
    height: 16px;
  }

  .lightbox-counter {
    font-size: 0.95rem;
    /* Smaller font */
    font-weight: 600;
    color: #444;
    min-width: 40px;
  }

  /* 3. HEADER (Right Top) - Room View Button Only */
  .lightbox-header {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    align-items: center;
    z-index: 20;
    align-self: center;
  }

  .close-arrow-icon {
    width: 7px;
    height: 7px;
  }

  /* Hide Close Button AND Header Share/Room Buttons on Desktop */
  #lightbox-close-btn,
  #lightbox-share-btn,
  .lightbox-header {
    display: none !important;
    /* Hide entire header */
  }

  /* Reveal and Style Desktop Share Button - STACKED */
  #lightbox-share-btn-desktop {
    grid-column: 2;
    grid-row: 6;
    position: static;
    margin: 10px 0;
    /* Vertical spacing */
    align-self: start;
    justify-self: center;

    width: 300px;
    /* Equal Width */
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #555;
    border-radius: 30px;
    box-shadow: none;
    z-index: 50;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* Hide the image, we'll use SVG via ::before */
  #lightbox-share-btn-desktop img {
    display: none;
  }

  /* Link Icon via ::before */
  #lightbox-share-btn-desktop::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  /* Add Text "Condividi" */
  #lightbox-share-btn-desktop::after {
    content: "Condividi";
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-serif);
    color: #333;
    transition: all 0.3s ease;
  }

  /* Copied State */
  #lightbox-share-btn-desktop.copied::before {
    /* Red Checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1C14' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }

  #lightbox-share-btn-desktop.copied::after {
    content: "Link Copiato!";
    color: var(--color-primary-red);
  }

  #lightbox-share-btn-desktop:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
  }

  #lightbox-share-btn-desktop:hover img {
    filter: none;
    /* Don't invert, keep dark */
    opacity: 0.8;
  }

  #lightbox-share-btn-desktop:hover::after {
    color: #333;
    /* Keep text dark */
  }

  /* Reveal and Style Desktop ROOM Button - STACKED */
  #lightbox-room-btn-desktop {
    display: flex;
    /* Reveal */
    grid-column: 2;
    grid-row: 4;
    /* Above CTA */
    position: static;
    margin: 10px 0;
    align-self: end;
    justify-self: center;

    width: 300px;
    /* Equal Width */
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #555;
    border-radius: 30px;
    box-shadow: none;
    z-index: 50;
    padding: 0;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-serif);
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #lightbox-room-btn-desktop:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
  }

  /* REORDERED: Like Button (Row 2, Top) */
  #lightbox-like-container {
    grid-column: 2;
    grid-row: 2;
    /* Move to Top */
    padding: 0 40px;
    margin-bottom: 20px;
    align-self: end;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* REORDERED: Title & Desc (Row 3) */
  .lightbox-text-top {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    /* Center Vertically in its space */
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    max-height: 35vh;
    overflow-y: auto;
    text-align: center;
    width: 100%;
  }

  #lightbox-title {
    font-size: 1.7rem;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--color-primary-red);
    line-height: 1.2;
    font-family: var(--font-serif);
  }

  #lightbox-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #777;
    max-width: 90%;
  }

  /* CTA (Row 5 - Center Sandwich) */
  #lightbox-cta {
    grid-column: 2;
    grid-row: 5;
    margin: 5px 0;
    /* Tight spacing in stack */
    align-self: center;
    justify-self: center;
    width: 300px;
    /* Equal Width */
    height: 44px;
    /* Equal Height */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
    border-radius: 30px !important;
    /* Rounded corners */
    text-transform: none !important;
    font-weight: 500;
  }

  /* Desktop CTA hover - keep red background and add arrow */
  #lightbox-cta:hover {
    background-color: var(--color-primary-red) !important;
  }

  /* Hide Room View Overlay Close button on Desktop since we have big area? 
       No, keep it.
    */

  /* Ensure image resets zoom/transform on desktop for clean look */
  #lightbox-img {
    transform: none !important;
  }
}

/* Move keyframes to top level for reliability */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Elegant Like Overlay (centered on image) */
/* Elegant Like Overlay (centered on image) */
.like-overlay-elegant {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1000;
  color: white;
  /* Pure white */
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  /* Subtle white glow instead of red */
  animation: heartPulseElegant 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.like-overlay-elegant.unlike-celebration {
  color: white;
  /* Keep white even for unlike */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
  animation: brokenHeartPulse 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.like-overlay-elegant svg {
  width: 120px;
  height: 120px;
  overflow: visible !important;
  /* Fix cut-off animation */
}

@keyframes heartPulseElegant {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes brokenHeartPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

/* Broken Heart Halves Animation */
.unlike-celebration .heart-half-left {
  animation: splitLeft 1.2s ease-out forwards;
}

.unlike-celebration .heart-half-right {
  animation: splitRight 1.2s ease-out forwards;
}

@keyframes splitLeft {
  0% {
    transform: translateX(0) rotate(0);
  }

  100% {
    transform: translateX(-30px) rotate(-15deg);
    /* Increased distance for clarity */
  }
}

@keyframes splitRight {
  0% {
    transform: translateX(0) rotate(0);
  }

  100% {
    transform: translateX(30px) rotate(15deg);
    /* Increased distance for clarity */
  }
}


@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

/* Room View Background Switcher */
.room-bg-controls {
  position: absolute;
  left: 25px;
  top: 25px;
  right: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.room-bg-option {
  width: 70px;
  height: 45px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0;
  background: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.room-bg-option:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.room-bg-option.active {
  border-color: var(--color-primary-red);
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(142, 28, 20, 0.2);
}

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

/* Mobile Adjustment for Switcher */
@media (max-width: 768px) {
  .room-bg-controls {
    right: auto;
    left: 50%;
    top: auto;
    /* Above the info bar */
    transform: translateX(-50%);
    flex-direction: row;
    width: auto;
    padding: 8px 12px;
  }
}

/* ========================================
   MODERN PAPER FOOTER REDESIGN
   ======================================== */
.site-footer {
  position: relative;
  z-index: 10;
  margin-top: auto;
  color: var(--color-text-main);
  background-image: url('images/sfondoQuadro2.png');
  background-size: cover;
  background-position: center;
  font-family: var(--font-main);
  overflow: hidden;
  padding: 2.5rem 2rem 1.2rem;
  margin-top: 1.5rem;
}

/* Paper Texture Effect */
.footer-paper-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(252, 250, 245, 0.953), rgba(252, 250, 245, 0.866));
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr 160px;
  gap: 8rem;
  align-items: start;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

/* --- Column 1: About --- */
.footer-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-logo {
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 0.5rem;
}

.footer-brand h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary-red);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.footer-description {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-weight: 300;
  margin: 0;
  max-width: 100%;
  text-align: start;
}

/* --- Column 2: Detailed Nav --- */
.footer-nav-detailed {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.footer-nav-detailed .footer-heading {
  margin-bottom: 0.25rem;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.5rem;
  align-content: start;
  width: 100%;
  max-width: 450px;
}

.nav-item-detailed {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.nav-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-ink-dark);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.3;
  display: block;
  width: 100%;
}

.nav-title:hover {
  color: var(--color-primary-red);
}

.nav-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  text-align: left;
}


/* --- Column 3: Social --- */
.footer-column.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1rem;
}

.footer-heading {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  margin-bottom: 0.25rem;
}

.footer-social-links {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.footer-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: auto;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.footer-social-link:hover {
  transform: scale(1.1);
  border: none;
  outline: none;
  box-shadow: none;
}

.footer-social-link svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-primary-red);
  stroke-width: 1.8;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.footer-social-label {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: #555;
  font-weight: 500;
  transition: color 0.3s ease;
  line-height: 1.4;
  text-align: center;
}

.footer-social-item:hover .footer-social-label {
  color: var(--color-primary-red);
}


/* --- Bottom Bar --- */
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-mist-gray);
  position: relative;
  z-index: 1;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--color-text-secondary);
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 400;
}

.footer-legal-links a:hover {
  color: var(--color-primary-red);
}

.separator {
  color: rgba(0, 0, 0, 0.15);
  font-weight: 300;
  margin: 0 0.2rem;
}

.footer-copyright {
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: var(--color-text-main);
}

.footer-credit {
  font-size: 0.75rem;
  font-weight: 300;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footer-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-credit-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.footer-credit-logo {
  height: 24px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: filter 0.3s ease;
}

.footer-credit-link:hover .footer-credit-logo {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.footer-credit-text {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  gap: 0.25rem;
}

.footer-credit-prefix {
  color: var(--color-text-secondary);
  font-weight: 400;
  font-size: 0.85rem;
}

.footer-credit-name-black {
  color: var(--color-text-main);
}

.footer-credit-name-red {
  color: var(--color-primary-red);
}


/* --- Responsive --- */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: left;
    max-width: 600px;
    padding: 0 1.5rem;
  }

  .footer-about {
    align-items: flex-start;
    text-align: left;
  }

  .footer-nav-detailed {
    text-align: left;
    align-items: flex-start;
  }

  .nav-grid {
    max-width: 100%;
    gap: 2rem 2.5rem;
  }

  .footer-column.footer-social {
    align-items: flex-start;
  }

  .footer-social-links {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    text-align: center;
    align-items: center;
    padding: 2rem 1.5rem;
  }

  .footer-legal-links {
    justify-content: center;
    order: 1;
  }

  .footer-copyright {
    order: 2;
  }

  .footer-credit {
    text-align: center;
    order: 3;
  }

  .footer-description,
  .nav-desc {
    display: none;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 2.5rem 1rem 1.5rem;
  }

  .footer-content {
    gap: 2rem;
    padding: 0;
  }

  /* Hide navigation column on mobile */
  .footer-nav-detailed {
    display: none !important;
  }

  /* Show description on mobile */
  .footer-description {
    display: block !important;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-ink-dark);
    max-width: 80%;
    text-align: center;
  }

  /* Simplify social column */
  .footer-social .footer-heading {
    display: none;
  }



  .footer-social-links {
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
  }

  .footer-about {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .footer-brand {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 3.5rem 1rem 1.5rem;
  }

  .footer-content {
    gap: 2rem;
  }

  .footer-brand {
    width: 80%;
    align-items: center;
    justify-content: start;
    gap: 0.75rem;
    margin-left: 4rem;
  }

  .footer-brand h3 {
    font-size: 1.2rem;
  }

  .footer-social-links {
    gap: 2rem;
    justify-content: center;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.2rem 1rem;
  }

  .footer-legal-links {
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
  }

  .separator {
    display: inline;
  }

  .footer-copyright {
    order: 2;
  }

  .footer-credit {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* ========================================
   GALLERY LOADING OVERLAY
   ======================================== */
.gallery-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(92, 92, 92, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9998;
  transition: opacity 0.3s ease;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid var(--color-primary-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}