/* ─────────────────────────────────────────────────────────────
   Αρχική σελίδα — αναβάθμιση.
   Φορτώνεται ΜΕΤΑ το style.css και μόνο στην αρχική. Το style.css
   δεν αλλάζει, γιατί ο browser και το PWA το κρατούν ένα χρόνο.
   ───────────────────────────────────────────────────────────── */

/* ── 1. ΑΡΧΙΚΗ ΕΙΚΟΝΑ ─────────────────────────────────────── */
.hero-bg-img {
  display: block; position: absolute; inset: 0; z-index: 0;
  background: url('hero-studio.webp') center 45% / cover no-repeat;
  animation: heroZoom 20s ease-out both;
}
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }

.hero-bg {
  z-index: 1;
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(196,151,42,.16), transparent 70%),
    linear-gradient(180deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.64) 45%, rgba(10,10,10,.95) 100%);
}
#hero-canvas, #hero-spotlight, .hero-grid, .hero-lines, .hero-particles, .hero-corner { z-index: 2; }
.hero-grid { opacity: .45; }
.hero-watermark { z-index: 1; }
.hero-watermark img { opacity: .05; }
.hero-content { z-index: 3; }

/* Το μήνυμα εμφανίζεται αμέσως, όχι μετά από 2 δευτερόλεπτα */
.hero-tag {
  background: rgba(196,151,42,.14); color: #E9C46A;
  border: 1px solid rgba(196,151,42,.5); border-radius: 999px; padding: 8px 18px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation-duration: .5s;
}
.hero-title { animation-duration: .6s; animation-delay: .05s; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero-title span {
  background: linear-gradient(90deg, #C4972A 0%, #EBC66B 50%, #C4972A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub  { animation-duration: .6s; animation-delay: .12s; color: rgba(255,255,255,.84); }
.hero-btns { animation-duration: .6s; animation-delay: .2s; }

/* Κουμπιά */
.btn-primary, .btn-outline { border-radius: 999px; }
.btn-primary { box-shadow: 0 10px 28px rgba(196,151,42,.3); }
.btn-primary:hover, .btn-outline:hover { transform: translateY(-2px); }
.btn-outline { background: rgba(255,255,255,.05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Το «Ξεκίνα τώρα» στη μπάρα έσπαγε σε δύο γραμμές σε μεσαίες οθόνες */
.nav-cta { white-space: nowrap; }

@media (max-width: 768px) {
  .hero-watermark { display: none; }
  .hero-bg-img { background-position: center 40%; }
}

/* ── 2. ΜΕΝΟΥ ΚΑΤΗΓΟΡΙΩΝ — κολλάει κάτω από την κύρια μπάρα ──
   Το style.css βάζει overflow-x:hidden σε html και body, που κάνει το body
   «κουτί με κύλιση» και ακυρώνει το position:sticky. Το clip κόβει το ίδιο
   ό,τι ξεχειλίζει στα πλάγια, χωρίς αυτή την παρενέργεια. Σε παλιούς browsers
   χωρίς clip, το μενού απλώς δεν κολλάει — δεν χαλάει τίποτα άλλο. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

.cat-nav {
  position: sticky; top: var(--catnav-top, 72px); z-index: 900;
  background: rgba(17,17,17,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196,151,42,.2);
}
.cat-nav-inner {
  max-width: 1140px; margin: 0 auto; display: flex; gap: 6px; justify-content: center;
  padding: 10px 16px; overflow-x: auto; scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav a {
  color: rgba(255,255,255,.72); text-decoration: none; font-weight: 600; font-size: .85rem;
  letter-spacing: .03em; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.cat-nav a:hover { color: #fff; }
.cat-nav a.active { background: var(--gold); color: var(--black); }

/* ── 3. ΚΑΤΗΓΟΡΙΕΣ ΜΕ ΚΑΡΤΕΛΕΣ ────────────────────────────── */
.cat, .cat-panel { scroll-margin-top: calc(var(--catnav-top, 72px) + 54px); }
.cat { position: relative; }
.cat-panel[hidden] { display: none !important; }

.cat-tabs {
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(17,17,17,.06); border: 1px solid rgba(17,17,17,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-width: calc(100% - 32px);
}
.cat-tab {
  border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: .9rem;
  color: #555; padding: 10px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, box-shadow .25s;
}
.cat-tab:hover { color: var(--black); }
.cat-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cat-tab.active { background: var(--black); color: var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* Όταν η ενεργή καρτέλα έχει σκούρο φόντο (χώρος, εφαρμογή) */
.cat.on-dark .cat-tabs { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.cat.on-dark .cat-tab { color: rgba(255,255,255,.75); }
.cat.on-dark .cat-tab:hover { color: #fff; }
.cat.on-dark .cat-tab.active { background: var(--gold); color: var(--black); }

/* Χώρος για τις καρτέλες πάνω από το περιεχόμενο */
.cat:not(.cat-single) > .cat-panel { padding-top: 164px !important; }
.cat-panel.panel-in { animation: panelIn .35s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .cat-nav-inner { justify-content: flex-start; padding: 8px 12px; }
  .cat-nav a { padding: 8px 14px; font-size: .82rem; }
  .cat-tabs { top: 26px; }
  .cat-tab { padding: 9px 16px; font-size: .85rem; }
  .cat:not(.cat-single) > .cat-panel { padding-top: 122px !important; }
}

/* ── 4. ΚΡΙΤΙΚΕΣ — καρουζέλ που «κουμπώνει» ─────────────────
   Το πλάτος το υπολογίζει ο browser, οπότε οι κάρτες δεν κόβονται
   και στο κινητό σέρνονται με το δάχτυλο. */
.testimonials-carousel-viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.testimonials-carousel-viewport::-webkit-scrollbar { display: none; }
.testimonials-carousel-track { transform: none !important; transition: none !important; gap: 24px; padding: 8px 2px 22px; }
.testimonials-carousel-track .testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0 !important; max-width: none !important; width: auto !important;
  scroll-snap-align: start;
}
.testimonial-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 1px 2px rgba(17,17,17,.04); transition: transform .3s, box-shadow .3s;
}
.testimonial-card::before {
  content: '\201C'; position: absolute; top: 10px; right: 22px; pointer-events: none;
  font: 700 4.6rem/1 Georgia, serif; color: rgba(196,151,42,.2);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,.08); }
.testimonial-text { font-style: normal; color: #333; flex: 1; margin-bottom: 22px; }
.testimonial-author { padding-top: 18px; border-top: 1px solid var(--border); }
.author-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }

.carousel-dot { border: 0; padding: 0; }
.carousel-dot.active { width: 22px; border-radius: 999px; transform: none; }

.reviews-google { display: flex; justify-content: center; margin-top: 30px; }
.btn-google-reviews {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--black);
  font-weight: 600; font-size: .9rem; text-decoration: none;
  box-shadow: 0 4px 14px rgba(17,17,17,.06); transition: transform .2s, box-shadow .2s;
}
.btn-google-reviews:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,17,17,.1); }
.btn-google-reviews svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .testimonials-carousel-track .testimonial-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 768px) {
  .carousel-btn { display: none; }
  .testimonials-carousel-wrap { margin-inline: -24px; }
  .testimonials-carousel-viewport { padding-inline: 24px; scroll-padding-inline: 24px; }
  .testimonials-carousel-track .testimonial-card { flex-basis: 86%; }
  /* Μία κάρτα τη φορά: η καθεμία με το δικό της ύψος, χωρίς κενό στις σύντομες */
  .testimonials-carousel-track { align-items: flex-start; }
  .testimonial-card { padding: 26px 22px; }
}

/* ── 5. Λιγότερη κίνηση για όσους το έχουν ζητήσει στη συσκευή ── */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img, .cat-panel.panel-in { animation: none; }
  .testimonial-card, .btn-primary, .btn-outline, .btn-google-reviews { transition: none; }
}