/* Robotsys Projects — grid ([rsx_projects]) + single project
 *
 * Colours on headings/text use !important on purpose: the Elementor Kit
 * (.elementor-kit-N h2 {color:…}) loads after this file and would otherwise
 * paint dark text on the dark blue background.
 */

.rsx-pj,
.rsx-ps {
  --bg0: #04070f; --bg1: #0a1a3a; --line: rgba(99,140,255,.28);
  --blue: #7fa7ff; --txt: #c3cde0; --muted: #8fa3c4;
  --card1: #10214a; --card2: #081127;
}
.rsx-pj, .rsx-pj *, .rsx-ps, .rsx-ps * { box-sizing: border-box; }

/* ======================= Grid / listing =======================
 * Copied 1:1 from the original "Τα Έργα μας" HTML widget (same selectors
 * and specificity) so the grid looks identical to the original design —
 * e.g. card titles take their size from the Elementor Kit like before.
 */

.rsx-pj{
  width:100vw; margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 100%);
  padding:90px 24px;
}
.rsx-pj h1,.rsx-pj h3,.rsx-pj p,.rsx-pj span{margin:0 !important;padding:0;font-family:inherit;}
.rsx-pj__wrap{max-width:1240px;margin:0 auto;}
section.rsx-pj p.rsx-pj__eyebrow{color:var(--blue) !important;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;text-align:center !important;
  margin:0 0 12px !important;}
section.rsx-pj h1.rsx-pj__title{color:#fff !important;font-size:clamp(28px,4vw,40px);
  font-weight:700;text-align:center !important;margin:0 0 16px !important;}
section.rsx-pj p.rsx-pj__sub{color:var(--txt) !important;font-size:16px;line-height:1.65;
  max-width:720px;margin:0 auto 44px !important;
  text-align:center !important;display:block;}

.rsx-pj__filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:48px;}
.rsx-pj__filters button{
  background:transparent;border:1px solid var(--line);color:var(--txt) !important;
  font-size:14px;font-family:inherit;padding:9px 20px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;
}
.rsx-pj__filters button:hover,
.rsx-pj__filters button:focus{border-color:var(--blue);color:#fff !important;background:transparent;} /* beats Hello theme's pink button:focus */
.rsx-pj__filters button.is-active,
.rsx-pj__filters button.is-active:hover,
.rsx-pj__filters button.is-active:focus{
  background:var(--blue);border-color:var(--blue);color:#04070f !important;font-weight:700;
}

.rsx-pj__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.rsx-pj__card{
  position:relative;border-radius:16px;overflow:hidden;height:360px;
  border:1px solid var(--line);display:block;
  text-decoration:none !important;color:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rsx-pj__card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.4);}
.rsx-pj__card:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.rsx-pj__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--card2);
  transition:transform .4s ease;
}
.rsx-pj__card:hover .rsx-pj__img{transform:scale(1.06);}
.rsx-pj__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,15,0) 0%,rgba(4,7,15,.55) 45%,rgba(4,7,15,.96) 100%);
}
.rsx-pj__body{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 24px;}
.rsx-pj__cat{color:var(--blue) !important;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;}
.rsx-pj__ctitle{color:#fff !important;font-size:20px;font-weight:700;line-height:1.3;
  margin:8px 0 0 !important;}
.rsx-pj__excerpt{color:var(--txt) !important;font-size:13px;line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;
  margin-top:8px !important;}
.rsx-pj__card:hover .rsx-pj__excerpt{max-height:70px;opacity:1;}

/* Added: cards are links now → small "view project" hint on hover */
.rsx-pj__more{color:var(--blue) !important;font-size:13px;font-weight:700;padding-top:10px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;}
.rsx-pj__card:hover .rsx-pj__more,
.rsx-pj__card:focus-visible .rsx-pj__more{max-height:40px;opacity:1;}
.rsx-pj__card:focus-visible .rsx-pj__excerpt{max-height:70px;opacity:1;}

.rsx-pj__card.is-hidden{display:none;}

@media(max-width:900px){.rsx-pj__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .rsx-pj{padding:64px 16px;}
  .rsx-pj__grid{grid-template-columns:1fr;}
  .rsx-pj__card{height:300px;}
  .rsx-pj__filters{gap:8px;}
  .rsx-pj__filters button{padding:7px 14px;font-size:13px;}
}

/* "Related projects" heading on single pages (h2, not part of the original) */
.rsx-pj .rsx-pj__title--sm{color:#fff !important;font-size:clamp(22px,3vw,30px) !important;font-weight:700;
  text-align:center;margin:0 0 36px !important;}

/* ======================= Single project ======================= */

.rsx-ps { background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%); color: var(--txt); }
.rsx-ps h1, .rsx-ps h2, .rsx-ps h3, .rsx-ps p { font-family: inherit; }
.rsx-ps__wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.rsx-ps__wrap--wide { max-width: 1140px; }

/* Hero */
.rsx-ps__hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.rsx-ps__hero-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.rsx-ps__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,7,15,.35) 0%, rgba(4,7,15,.75) 55%, var(--bg0) 100%);
}
.rsx-ps__hero-inner { position: relative; width: 100%; padding-top: 120px; padding-bottom: 48px; }
.rsx-ps .rsx-ps__back { display: inline-block; margin-bottom: 22px; color: var(--txt) !important; font-size: 14px; text-decoration: none; }
.rsx-ps .rsx-ps__back:hover { color: #fff !important; }
.rsx-ps .rsx-ps__cat { margin: 0 0 10px; color: var(--blue) !important; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rsx-ps .rsx-ps__title { margin: 0 0 14px; color: #fff !important; font-size: clamp(30px, 5vw, 48px); font-weight: 700; line-height: 1.15; }
.rsx-ps .rsx-ps__lead { margin: 0; max-width: 720px; color: #dbe3f1 !important; font-size: 18px; line-height: 1.6; }

/* Key numbers — divs (not ul/li) so theme list styles can't interfere */
.rsx-ps__specs-wrap { padding: 8px 0 0; }
.rsx-ps .rsx-ps__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0; padding: 0;
}
.rsx-ps .rsx-ps__spec {
  display: block; min-width: 0; margin: 0; padding: 20px 20px 18px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--card1), var(--card2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.rsx-ps .rsx-ps__spec-value {
  display: block; margin: 0; color: var(--blue) !important;
  font-size: 24px !important; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere;
}
.rsx-ps .rsx-ps__spec-label {
  display: block; margin: 6px 0 0; color: var(--txt) !important;
  font-size: 14px !important; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere;
}

/* Sections */
.rsx-ps__body { padding: 48px 0 16px; }
.rsx-ps .rsx-ps__content { font-size: 16px; line-height: 1.75; color: var(--txt); }
.rsx-ps .rsx-ps__h2 {
  margin: 2em 0 .6em; color: #fff !important; font-size: 26px !important; font-weight: 700; line-height: 1.3;
}
.rsx-ps .rsx-ps__content > .rsx-ps__h2:first-child { margin-top: 0; }
.rsx-ps .rsx-ps__content p { margin: 0 0 1em; color: var(--txt) !important; }
.rsx-ps .rsx-ps__equipment { display: grid; gap: 10px; margin: 0; }
.rsx-ps .rsx-ps__equipment-item { position: relative; padding-left: 22px; color: var(--txt) !important; }
.rsx-ps .rsx-ps__equipment-item::before {
  content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
}

/* Extra post content (block editor / Elementor) */
.rsx-ps .rsx-ps__extra { margin-top: 2em; }
.rsx-ps .rsx-ps__extra h2, .rsx-ps .rsx-ps__extra h3, .rsx-ps .rsx-ps__extra h4 { color: #fff !important; }
.rsx-ps .rsx-ps__extra p, .rsx-ps .rsx-ps__extra li { color: var(--txt) !important; }
.rsx-ps .rsx-ps__extra strong { color: #fff !important; }
.rsx-ps .rsx-ps__extra a { color: var(--blue) !important; }
.rsx-ps .rsx-ps__extra img { border-radius: 12px; }

/* Gallery */
.rsx-ps__gallery-wrap { padding: 24px 0 8px; }
.rsx-ps .rsx-ps__gallery-title { margin-top: 0; }
.rsx-ps__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rsx-ps__gallery-item { display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.rsx-ps__gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.rsx-ps__gallery-item:hover img { transform: scale(1.05); }
.rsx-ps__gallery-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 900px) { .rsx-ps__gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rsx-ps__gallery { grid-template-columns: 1fr; } }

/* CTA */
.rsx-ps__cta { padding: 40px 0 80px; }
.rsx-ps .rsx-ps__cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--card1), var(--card2));
}
.rsx-ps .rsx-ps__cta-title { margin: 0 0 6px !important; font-size: 22px !important; }
.rsx-ps .rsx-ps__cta-text { margin: 0; color: var(--txt) !important; }
.rsx-ps .rsx-ps__btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55); background: #0b1d3f; color: #fff !important;
  font-size: 15px; font-weight: 700; text-decoration: none !important;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rsx-ps .rsx-ps__btn:hover { background: #fff; color: #000 !important; transform: translateY(-2px); }

/* Related */
.rsx-pj--related { width: auto; margin-left: 0; background: none; padding-top: 0; }

/* Shortcode embeds inside Elementor templates: no own background/padding */
.rsx-embed { width: auto; margin-left: 0; padding: 0; background: none; }
.rsx-embed .rsx-ps__content > .rsx-ps__h2:first-child,
.rsx-embed > .rsx-ps__h2:first-child,
.rsx-embed > .rsx-pj__title:first-child { margin-top: 0; }

@media (max-width: 600px) {
  .rsx-ps__hero { min-height: 380px; }
  .rsx-ps__wrap { padding: 0 16px; }
  .rsx-ps .rsx-ps__cta-box { padding: 24px 20px; }
  .rsx-ps .rsx-ps__h2 { font-size: 22px !important; }
}

/* ======================= Lightbox ======================= */

.rsx-lb {
  position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center;
  background: rgba(2,5,12,.94); padding: 56px 64px;
}
.rsx-lb.is-open { display: flex; }
.rsx-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.rsx-lb .rsx-lb__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(16,33,74,.7); color: #fff !important; font-size: 28px; line-height: 1; cursor: pointer;
}
.rsx-lb .rsx-lb__btn:hover, .rsx-lb .rsx-lb__btn:focus { background: #7fa7ff; color: #04070f !important; }
.rsx-lb__close { top: 14px; right: 14px; }
.rsx-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.rsx-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.rsx-lb__btn[hidden] { display: none !important; }
.rsx-lb__count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #aebbd3; font-size: 13px; }
@media (max-width: 600px) {
  .rsx-lb { padding: 56px 12px; }
  .rsx-lb__prev, .rsx-lb__next { top: auto; bottom: 8px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rsx-pj__card, .rsx-pj__img, .rsx-pj__excerpt, .rsx-pj__more, .rsx-ps__btn, .rsx-ps__gallery-item img { transition: none; }
}