/* ============================================================
   home.gr — /odigoi/* page styles (μελλοντικό public/odigoi.css)
   Tokens: deep-green.css. Κανένα νέο token. Light only (Δ6).
   ============================================================ */

/* ---------- κοινά με owners.html (αντιγραφή, όχι νέα γλώσσα) ---------- */
.band-deep { background: var(--bg-deep); border-block: 1px solid var(--hairline); }
.dchip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--mint-wash); border: 1px solid color-mix(in oklab, var(--mint) 26%, transparent);
  font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--sand);
  white-space: nowrap;
}
.dchip-pine { background: var(--pine-tint); border-color: color-mix(in oklab, var(--pine) 22%, transparent); color: var(--pine-tint-text); }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-4); margin-bottom: 1.5rem; }
.crumbs a { color: var(--text-3); transition: color .18s var(--ease); }
.crumbs a:hover { color: var(--terra); }
.crumbs .crumb-now { color: var(--ink-2); }

/* ---------- ήρωας οδηγού ---------- */
.g-hero { padding-block: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.g-hero h1 { font-size: clamp(29px, 22px + 2.4vw, 54px); max-width: 21ch; }
.g-lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; max-width: 52ch; margin: 1.1rem 0 0; }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.4rem; margin-top: 1.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-4); }
.g-meta .gm { display: inline-flex; align-items: center; gap: .45rem; }
.g-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.gv-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .92fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }

/* ---------- σύντομη απάντηση ---------- */
.qa {
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
.qa-k { display: inline-flex; align-items: center; gap: .55rem; font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sand); }
.qa p { margin: .85rem 0 0; font-size: var(--fs-body); line-height: 1.65; color: var(--text-para); }
.qa p + p { margin-top: .6rem; }
.qa b { color: var(--ink); font-weight: 700; }
.qa-zones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }

/* ---------- νομική σήμανση (επαναλήψιμη) ---------- */
.gnote { display: flex; align-items: flex-start; gap: .6rem; font-size: 0.8125rem; line-height: 1.55; color: var(--text-3); max-width: 62ch; }
.gnote svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .16em; color: var(--text-4); }
.gnote b { color: var(--text-2); font-weight: 600; }
.qa .gnote { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }

/* ---------- πίνακας δύο ζωνών ---------- */
.zt { background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.zt table { width: 100%; border-collapse: collapse; }
.zt th, .zt td { text-align: left; vertical-align: top; padding: 1.05rem 1.4rem; }
.zt thead th {
  background: var(--surface-3);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line-soft); padding-block: .8rem;
}
.zt tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.zt td b { font-family: var(--font-ui); font-weight: 700; color: var(--ink); font-size: var(--fs-body); }
.zt-sub { display: block; margin-top: .35rem; font-size: 0.75rem; font-weight: 400; line-height: 1.5; color: var(--text-3); white-space: normal; }
.zdocs { font-size: var(--fs-body); color: var(--text-para); font-weight: 600; }
.zt-cap { padding: .85rem 1.4rem; border-top: 1px solid var(--line-soft); background: var(--surface); font-size: 0.75rem; color: var(--text-3); }
.zt .dchip { white-space: normal; }

/* πίνακας μέσα σε κάρτα απάντησης (παραλλαγή Β) */
.zt.flat { border: 1px solid var(--line-soft); box-shadow: none; border-radius: var(--radius-sm); margin-top: 1.15rem; }

@media (max-width: 620px) {
  .zt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .zt tbody tr { display: block; padding-block: .5rem; }
  .zt tbody tr + tr { border-top: 1px solid var(--line-soft); }
  .zt tbody tr + tr td { border-top: 0; }
  .zt td { display: grid; grid-template-columns: minmax(7.2ch, auto) 1fr; gap: .8rem; padding: .5rem 1.15rem; }
  .zt td::before { content: attr(data-l); font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-4); padding-top: .25em; }
}

/* ---------- πράσινη ζώνη απόφασης (παραλλαγή Γ) ---------- */
.vband {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--cypress-lift), var(--cypress) 70%);
  background-color: var(--cypress); color: var(--on-green);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 3.5vw, 3rem);
}
.vband::before { content: ""; position: absolute; right: -18%; top: -35%; width: 58%; height: 130%; background: radial-gradient(circle, rgba(249,247,241,.10), transparent 70%); pointer-events: none; }
.vband > * { position: relative; }
.vband .qa-k { color: var(--peach-on-dark); }
.vband p { margin: .9rem 0 0; font-size: clamp(16px, 15px + .35vw, 19px); line-height: 1.6; color: rgba(249,247,241,.92); max-width: 56ch; }
.vband b { color: #F9F7F1; font-weight: 700; }
.vband .qa-zones { margin-top: 1.2rem; }
.vband .gnote { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(249,247,241,.18); color: rgba(249,247,241,.72); }
.vband .gnote svg { color: rgba(249,247,241,.6); }
.vband .gnote b { color: rgba(249,247,241,.95); }

/* ---------- βήματα ---------- */
.gsteps { max-width: 74ch; }
.gstep { display: flex; gap: clamp(1rem, 2vw, 1.5rem); padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.gsteps .gstep:last-of-type { border-bottom: 1px solid var(--hairline); }
.gnum { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--sand); flex-shrink: 0; min-width: 2.3ch; padding-top: .12em; }
.gstep h3 { font-size: var(--fs-h3); }
.gstep p { margin: .55rem 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-para); max-width: 58ch; }

/* ---------- υποδοχή screenshot ---------- */
.gshot { margin: 1.15rem 0 0; }
.gshot .frame { border: 1px solid var(--line-frame); border-radius: var(--radius-media); overflow: hidden; background: var(--surface-3); }
.gshot .frame.empty { border: 1.5px dashed var(--dash); background: var(--paper-warm); display: grid; place-items: center; min-height: 150px; aspect-ratio: 16 / 9; }
.gshot .empty-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); font-size: 0.75rem; font-weight: 600; color: var(--text-4); }
.gshot .empty-tag svg { width: 14px; height: 14px; }
.gshot img { display: block; width: 100%; height: auto; }
.gshot figcaption { margin-top: .55rem; font-size: 0.75rem; color: var(--text-3); }

/* ---------- παγίδα / προειδοποίηση ---------- */
.trap { background: var(--surface); border: 1px solid var(--terra-border); border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.trap + .trap { margin-top: 1rem; }
.trap-k { display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .75rem; border-radius: 999px; background: var(--terra-tint); color: var(--terra-tint-text); font-size: 0.7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.trap h3 { font-size: var(--fs-h3); margin-top: .9rem; }
.trap > p { margin: .55rem 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-para); max-width: 62ch; }
.trap .fix { margin: .95rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--dash-soft); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.trap .fix b { color: var(--sand); font-weight: 700; }

/* ---------- λίστα ελέγχου (κείμενο, όχι εφαρμογή) ---------- */
.gcheck { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.gcheck li { display: flex; align-items: flex-start; gap: .9rem; padding: .95rem 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-body); line-height: 1.55; color: var(--text-para); }
.gcheck li:last-child { border-bottom: 1px solid var(--line-soft); }
.gcheck .box { flex-shrink: 0; width: 20px; height: 20px; margin-top: .12em; border: 1.5px solid var(--chip-border); border-radius: 6px; background: var(--paper-warm); }
.gcheck b { color: var(--ink); font-weight: 600; }

/* ---------- FAQ (ίδιο μοτίβο με owners.html) ---------- */
.faq { max-width: 68ch; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 0; font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sand); }
.faq summary .fq-ic { margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--sand); transition: transform .3s var(--ease), border-color .2s; }
.faq summary .fq-ic svg { width: 13px; height: 13px; }
.faq details[open] summary .fq-ic { transform: rotate(45deg); border-color: var(--mint); }
.faq details > p { margin: 0 0 1.35rem; font-size: var(--fs-sm); color: var(--ink-2); max-width: 62ch; }

/* ---------- υπολογιστής αγοραίου κόστους ΠΕΑ ---------- */
.calc-card {
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.calc-fields { display: flex; flex-direction: column; gap: 1.6rem; }
.cfield { display: flex; flex-direction: column; gap: .55rem; }
.cfield label { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cfield .chint { font-size: 0.75rem; color: var(--ink-3); }
.cnum-wrap { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--hairline-2); border-radius: 999px; background: var(--surface); padding: .1rem 1.1rem; max-width: 15rem; }
.cnum-wrap:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-wash); }
.cnum-wrap .cur { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-size: 1.05rem; }
.cnum-wrap input[type="number"] { appearance: none; -moz-appearance: textfield; border: 0; background: transparent; outline: none; font: 700 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); width: 100%; min-width: 0; padding: .85rem 0; }
.cnum-wrap input[type="number"]::-webkit-outer-spin-button, .cnum-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msel { display: flex; align-items: center; border: 1px solid var(--hairline-2); border-radius: 999px; background: var(--surface); padding: .1rem 1.1rem; max-width: 17rem; }
.msel:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-wash); }
.msel select {
  appearance: none; border: 0; outline: none; width: 100%; min-width: 0; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A8378' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right center;
  font: 600 1rem/1.2 var(--font-ui); color: var(--ink); padding: .85rem 1.2rem .85rem 0;
}
.calc-out { background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.calc-out .col { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.calc-total { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.calc-break { font-size: var(--fs-sm); color: var(--ink-2); }
.calc-disc { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--hairline); font-size: 0.75rem; line-height: 1.55; color: var(--ink-3); max-width: 40ch; }

/* ---------- σχετικοί οδηγοί + CTA ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rel { display: flex; flex-direction: column; gap: .45rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.3rem 1.4rem; transition: transform .3s var(--ease), border-color .3s; }
.rel:hover { transform: translateY(-3px); border-color: var(--hairline-2); }
.rel .rk { font-size: 0.7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); }
.rel h3 { font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; margin-top: .1rem; }
.rel p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-3); }
.rel .go { margin-top: auto; padding-top: .7rem; font-size: var(--fs-sm); font-weight: 600; color: var(--sand); }

.gcta {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--cypress-lift), var(--cypress) 70%);
  background-color: var(--cypress); color: var(--on-green);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
}
.gcta::before { content: ""; position: absolute; right: -18%; top: -35%; width: 58%; height: 130%; background: radial-gradient(circle, rgba(249,247,241,.10), transparent 70%); pointer-events: none; }
.gcta > * { position: relative; }
.gcta h2 { font-size: var(--fs-h2); color: var(--on-green); max-width: 24ch; }
.gcta .gcta-lead { margin: .7rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: rgba(249,247,241,.85); max-width: 46ch; }
.gcta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.gcta-actions .fine { font-size: 0.75rem; color: rgba(249,247,241,.72); }

/* ---------- ευρετήριο ---------- */
.idx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.idx-card { display: flex; flex-direction: column; gap: .55rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.35rem, 2.5vw, 1.75rem); transition: transform .3s var(--ease), border-color .3s; }
.idx-card:hover { transform: translateY(-4px); border-color: var(--hairline-2); }
.idx-card.featured { grid-column: 1 / -1; border-color: var(--hairline-2); box-shadow: var(--shadow); }
.idx-card h2 { font-size: var(--fs-h3); }
.idx-card.featured h2 { font-size: var(--fs-h2); max-width: 24ch; }
.idx-card p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); max-width: 56ch; }
.idx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: auto; padding-top: .8rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-4); }
.idx-meta .go { font-size: var(--fs-sm); font-weight: 600; color: var(--sand); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .gv-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-card { grid-template-columns: minmax(0, 1fr); }
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .idx-grid { grid-template-columns: minmax(0, 1fr); }
  .gcta { flex-direction: column; align-items: flex-start; }
}