/* ============================
   style.css - final (with reviews)
   - logo smaller + black drone
   - nav link text slightly bigger
   - gallery images 16:9 (1920x1080 ratio) and more breathing room
   - review card styles added
   ============================ */

/* ========== variables ========== */
:root{
  --pink-500: #f472b6;
  --pink-600: #ec4899;
  --muted: #6b7280;
  --bg: #f9fafb;
  --card-shadow: rgba(2,6,23,0.06);
  --nav-height: 64px;
  --star-gold: #f59e0b;
}

/* ========== base ========== */
*{box-sizing:border-box}
html{scroll-padding-top: calc(var(--nav-height) + 8px);}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:#111827;
  background:var(--bg);
}

/* container utilities used in markup */
.max-w-7xl, .max-w-6xl { max-width:1200px; margin-left:auto; margin-right:auto; }
.container { width:90%; max-width:1200px; margin-left:auto; margin-right:auto; }

/* ========== NAVBAR ========== */
.navbar{
  height: var(--nav-height);
  background-color: rgba(0,0,0,0.88);
  position: fixed;
  top:0; left:0; right:0;
  z-index:60;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

/* logo badge + pink ring */
.logo-badge{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;   /* slightly smaller */
  height:34px;  /* slightly smaller */
  border-radius:999px;
  background: var(--pink-500);
  padding:3px;
}
.logo-badge::after{
  /* subtle pink ring around badge */
  content:"";
  position:absolute;
  left:-6px; top:-6px; right:-6px; bottom:-6px;
  border-radius:999px;
  border:3px solid rgba(244,114,182,0.16);
  pointer-events:none;
}

/* logo text slightly smaller to match reduced badge */
.logo-text { color:#fff; font-weight:600; font-size:0.95rem; }

/* nav links - slightly larger for better legibility */
.nav-links a, .nav-link { color:#fff; text-decoration:none; font-size:1rem; }
.nav-links a:hover, .nav-link:hover { color: var(--pink-500); }

/* ========== HERO ========== */
/* hero now covers full viewport and content is offset so it isn't hidden by navbar */
#hero{
  position:relative;
  height:100vh;               /* full viewport */
  padding-top: var(--nav-height); /* ensure content isn't hidden under navbar */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
#hero .absolute{ /* background handled in markup */
  inset:0;
}
#hero img{ width:100%; height:100%; object-fit:cover; display:block; }
#hero .fade-in{ opacity:0; transform:translateY(12px); animation: fadeInUp 0.9s forwards; }
#hero .fade-in.delay{ animation-delay:0.45s; }
@keyframes fadeInUp{ to{opacity:1; transform:translateY(0);} }

/* ========== BUTTONS ========== */
.btn{
  display:inline-block;
  background:var(--pink-500);
  color:#fff;
  padding:0.55rem 1rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.btn:hover{ transform: translateY(-3px); background:var(--pink-600); }
.btn:active{ transform: scale(0.98); }

/* ========== GALLERY ========== */
/* increased breathing room and larger images with 16:9 aspect ratio */
#gallery{ padding:4rem 0 6rem; }
.gallery-item img{
  width:100%;
  aspect-ratio:16/9; /* 1920x1080 ratio */
  height:auto;
  min-height:160px;
  object-fit:cover;
  border-radius:0.6rem;
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow 0.25s ease;
}
@media (min-width:768px){
  .gallery-item img{ min-height:220px; }
}
@media (min-width:1024px){
  .gallery-item img{ min-height:300px; }
}
.gallery-item:hover img{ transform:scale(1.04); box-shadow: 0 12px 36px rgba(2,6,23,0.12); }

/* remove glightbox caption bar */
.glightbox-clean .gdesc-inner{ display:none !important; }

/* ========== POSTCARDS (feature cards) ========== */
.postcard{
  background: linear-gradient(180deg,#fff,#fff);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow: 0 8px 28px var(--card-shadow);
  display:flex; flex-direction:column; gap:0.5rem;
}
.feature-card .icon-wrap{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background: rgba(236,72,153,0.06); border-radius:12px; }
.feature-card h3{ margin:0; font-size:1.05rem; font-weight:700; }
.feature-card p{ margin:0; color:#374151; font-size:0.95rem; }
.postcard:hover{ transform:translateY(-6px); transition: transform 0.25s ease; }

/* ========== SERVICE CARDS (pricing) ========== */
.service-card{ background:#fff; border-radius:1rem; padding:1.5rem; box-shadow:0 8px 28px var(--card-shadow); display:flex; flex-direction:column; gap:1rem; min-height:260px; transition: transform 0.28s ease, box-shadow 0.28s ease; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.12); }
.service-card h3{ color:#111827; font-size:1.125rem; margin:0 0 0.5rem 0; }
.service-card ul{ color:#374151; padding-left:1.25rem; margin:0 0 1rem 0; }
.price{ font-weight:700; color:#374151; margin-bottom:0.5rem; }
.price-amount{ color: var(--pink-600); }

/* ========== REVIEW CARDS ========== */
.review-card{
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 8px 28px var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.12); }

.avatar-circle{
  width:48px;
  height:48px;
  border-radius:999px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#111827;
  font-size:1.05rem;
  flex-shrink:0;
}

/* review header */
.review-name{ margin:0; color:#111827; }
.review-phone{ color:#6b7280; text-decoration:none; }
.review-phone:hover{ color:var(--pink-500); }

/* rating stars */
.rating{ display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.star{ width:18px; height:18px; display:inline-block; }
.star path{ fill: none; stroke: #e6e6e6; stroke-width:0; }
.star.filled path{ fill: var(--star-gold); stroke: var(--star-gold); }

/* review text */
.review-text{ color:#374151; line-height:1.45; margin:0; }

/* ========== Reveal animation (JS adds .reveal) ========== */
.reveal{ animation: revealUp 0.68s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes revealUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }

/* ========== REVIEWS / CONTACT / FOOTER ========== */
#reviews{ padding:2rem 1rem; }
#reviews p{ color:#374151; }
#kontaktai{ padding:2rem 1rem; }
#kontaktai a{ color:var(--pink-500); text-decoration:none; }
#kontaktai a:hover{ color:var(--pink-600); }
footer{ padding:1.25rem 0; text-align:center; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04); background:var(--bg); }

/* ========== Focus styles for accessibility ========== */
a:focus, button:focus{ outline: 3px solid rgba(236,72,153,0.18); outline-offset:3px; border-radius:0.375rem; }

/* ========== Responsive tweaks ========== */
@media (max-width:768px){
  .service-card{ min-height:auto; }
  #hero{ height:100vh; padding-top: var(--nav-height); }
  .gallery-item img{ aspect-ratio:16/9; min-height:140px; }
  .rating{ justify-content:flex-start; }
}


/* ========== KONTAKTAI ========== */
.kontaktai-card {
  background: #fff;
  box-shadow: 0 8px 28px var(--card-shadow);
}

.icon-box {
  background: rgba(236,72,153,0.08);
  color: var(--pink-600);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
}

.kontakt-link {
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kontakt-link:hover {
  color: var(--pink-600);
}


.icon-box i {
  font-size: 1.25rem;  /* make icon the right size */
}