/* CSS Document */

/* =====================================
   DIMENSIUNI DE TESTARE (Mobile First)
   =====================================

   320px  - Telefoane mici (iPhone SE)
   360px  - Android standard
   375px  - iPhone 12/13 Mini
   414px  - iPhone Pro Max
   480px - 600px - Telefoane mari / mici tablete
   <768px - Limită maximă pentru mobile
   768px  - Tablete (ex: iPad vertical)
   1024px - Desktop mic (iPad orizontal)
   1280px+ - Desktop normal / mare
*/

/* =====================================================
   Artist Visual – Portofoliu
   CSS curățat · Mobile‑First · 2025‑06‑13
   ===================================================== */

/* ------------------------------
   RESET & BAZĂ (MOBILE FIRST)
--------------------------------*/
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;font-size:1.1rem;line-height:1.5;color:#222;background:#f8f8f8;overflow-x:hidden;padding:1.5rem}
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  overflow-x: hidden;
}

ul,ol{list-style-type:none}
h1,h2{font-family:"Playfair Display",serif;font-weight:700;color:#333;margin-bottom:1rem}
h1{font-size:1.5rem}

/* ------------------------------
   NAVBAR
--------------------------------*/
.navbar{display:flex;justify-content:space-between;align-items:center;background:#eee;padding:1rem;position:relative}
.logo{font-weight:700;font-size:1.2rem}
#menu-toggle{display:none}
.menu-icon{font-size:1.5rem;cursor:pointer;user-select:none}
.nav-links{display:none;position:absolute;top:100%;right:1rem;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.1);flex-direction:column;padding:1rem;border-radius:6px;width:150px}
.nav-links li{margin-bottom:.7rem}
.nav-links a{text-decoration:none;color:#333;font-weight:600}
.nav-links a:focus {
  outline: 2px solid #0077cc;
  outline-offset: 2px;
}

#menu-toggle:checked+label+ul.nav-links{display:flex}

/* ------------------------------
   SECTIUNI INTRO & DESPRE
--------------------------------*/
.intro,.despre{padding:1.5rem 1rem;background:#fff;margin-bottom:2rem;text-align:center}
.intro img,.despre img{display:block;margin:1rem auto;max-width:90%;border-radius:10px}

/* ------------------------------
   SERVICII (CARDS)
--------------------------------*/
.carduri-servicii{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:1rem 0}
.card-serviciu{background:#f9f9f9;border-radius:8px;padding:1.2rem 1rem;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:.3s;cursor:pointer}
.card-serviciu:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.card-serviciu h3{font-size:1.4rem}
.card-serviciu p{margin:0;font-size:1rem;color:#555;line-height:1.4}
.card-serviciu, .grid-galerie img {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.card-serviciu:hover, .grid-galerie img:hover {
  filter: brightness(1.05);
}

/* ------------------------------
   GALERIE
--------------------------------*/
.grid-galerie{display:grid;grid-template-columns:1fr;gap:1rem;width:100%}
.grid-galerie img {
  width: 100%;
  height: 200px; /* sau un altă valoare fixă dacă vrei format uniform */
  object-fit: cover;
  border-radius: 8px;
  transition: .3s;
  cursor: pointer;
}

.grid-galerie img:hover{transform:scale(1.05);box-shadow:0 8px 15px rgba(0,0,0,.3)}

/* ------------------------------
   TESTIMONIALE
--------------------------------*/
.testimoniale{padding:2rem;background:#f9f9f9;text-align:center;scroll-margin-top:100px}
.testimoniale-cards{display:flex;flex-direction:column;gap:1.5rem}
.card-testimonial{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 0 8px rgba(0,0,0,.1);transition:.3s}
.card-testimonial:hover{transform:translateY(-5px)}
.card-testimonial img{width:150px;height:150px;object-fit:cover;border-radius:50%;margin-bottom:1rem}
.card-testimonial p{font-style:italic;margin-bottom:.5rem}
.card-testimonial h4{font-weight:700;color:#333}

/* ------------------------------
   FORMULAR CONTACT
--------------------------------*/
form{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;margin:2rem auto;background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);max-width:600px}
input,textarea{padding:.75rem;border:1px solid #ccc;border-radius:6px;font-size:1rem}
input[type="submit"] {
  background:#0077cc;
  color:#fff;
  padding:.75rem;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

input[type="submit"]:hover {
  background:#005fa3;
}
input:focus, textarea:focus {
  outline: 2px solid #0077cc;
  outline-offset: 2px;
  border-color: #0077cc;
}



/* ------------------------------
   FOOTER
--------------------------------*/
footer {
  background: #222;
  color: #ccc;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
}

footer p {
  margin-bottom: 1rem;
}

footer .social-media {
  margin-top: 1rem;
}

footer .social-media a {
  color: #ccc;
  margin: 0 10px;
  font-size: 1.5rem;
  transition: 0.3s;
	 text-decoration: none;
}

footer .social-media a:hover {
  color: #ffcc00;
}

/* #####################################################
   MEDIA QUERIES
##################################################### */

/* ---------- TABLETE 768px+ ---------- */
@media(min-width:768px){
  h1{font-size:2.5rem}
  .intro,.despre{display:flex;align-items:center;gap:1.5rem;text-align:left;padding:1.5rem 2rem}
  .intro>div,.despre>div{flex:1}
  .intro img,.despre img{max-width:200px;margin:0}
  .carduri-servicii{grid-template-columns:repeat(2,1fr)}
  .grid-galerie{grid-template-columns:repeat(2,1fr)}
  .testimoniale-cards{flex-direction:row;justify-content:center}
  .card-testimonial{flex:1 1 30%;max-width:30%}
  /* Navbar full width */
  .menu-icon,#menu-toggle{display:none}
  .nav-links{display:flex!important;position:static;flex-direction:row;background:none;box-shadow:none;padding:0;width:auto}
  .nav-links li{margin-right:1rem}
  .nav-links li:last-child{margin-right:0}
  .nav-links a{font-weight:400}
	
	 
	
	
}

/* ---------- DESKTOP 1024px+ ---------- */
@media(min-width:1024px){
  body{max-width:1000px;margin:0 auto;padding:0 2rem}
  .navbar{padding:2rem 3rem}
  .logo{font-size:1.8rem}
  .nav-links{gap:2.5rem}
  .nav-links a{font-size:1.1rem}
  .intro,.despre{gap:2rem}
  .intro img,.despre img{max-width:300px}
  .carduri-servicii{grid-template-columns:repeat(3,1fr)}
  .grid-galerie{grid-template-columns:repeat(3,1fr)}
  .galerie{gap:1.5rem;text-align:center}
	
	
	
	 footer {
    display: block;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  footer .social-media {
    margin-top: 1rem;
  }
	
	
	
  
}

/* ---------- DESKTOP LARG 1280px+ ---------- */
@media(min-width:1280px){
  body{max-width:1200px;margin:0 auto}
  .wrapper{max-width:1200px}
  .intro img,.despre img{max-width:100%;max-height:300px;object-fit:cover;border-radius:10px}
}