/* ForgeInt — αρχική (agency-first). Επεκτείνει το brain.css, δεν το αντιγράφει:
   ίδια tokens (--bx-*), ίδιο πλέγμα, ίδιο mono. Εδώ ζει ΜΟΝΟ ό,τι είναι νέο —
   η ενότητα ΕΡΓΑ.

   Κανόνες που τηρούνται ρητά: μηδέν backdrop-filter, μηδέν background-clip σε
   επικεφαλίδα, μηδέν gradient σε κείμενο, μηδέν box-shadow/drop-shadow —
   μόνο γραμμές. Καμία κάρτα «εικονίδιο + τίτλος + κείμενο» σε πανομοιότυπο
   grid: οι κάρτες εδώ δεν έχουν εικονίδιο, και η πρώτη πιάνει διπλό πλάτος
   ώστε το πλέγμα να έχει ιεραρχία αντί για πέντε ίσα κουτιά. */

.landing .wk-grid {
  list-style: none;
  margin: clamp(28px, 4vh, 46px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                          /* οι γραμμές είναι το κενό */
  background: var(--bx-rule-soft);
  border: 1px solid var(--bx-rule-soft);
}

/* Το πρώτο έργο είναι το μόνο με ολοκληρωμένο, ανεξάρτητο PASS — παίρνει το
   βάρος που του αναλογεί αντί να ισοπεδωθεί σε πέντε ίδια πλακίδια. */
.landing .wk-card:first-child { grid-column: 1 / -1; }

.landing .wk-card {
  background: var(--bx-bg);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;                      /* αλλιώς τα grid children δεν συρρικνώνονται */
}

.landing .wk-cat {
  font: 400 10.5px/1.4 var(--bx-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ember);
  font-variant-numeric: tabular-nums;
}

.landing .wk-h {
  margin: 0;
  font: 400 clamp(17px, 1.5vw, 21px)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--bx-ink);
}

.landing .wk-p {
  margin: 0;
  font: 300 clamp(14px, 1.05vw, 15.5px)/1.62 var(--font-sans);
  color: var(--bx-ink-2);
  max-width: 62ch;
}

/* Χωρίς pills. Η σειρά από περιγράμματα-χάπια κάτω από κάθε κάρτα είναι η πιο
   αναγνωρίσιμη template χειρονομία που υπάρχει — και επαναλαμβανόταν πέντε
   φορές πανομοιότυπη. Μένει το ίδιο περιεχόμενο ως μία γραμμή mono με τελείες,
   που διαβάζεται σαν προδιαγραφή αντί για ταμπελάκια.
   Επίσης: ΟΧΙ `margin-top:auto`. Το πλέγμα ισοϋψώνει τις γραμμές, οπότε το auto
   έσπρωχνε τα chips στον πάτο και άνοιγε τέσσερις κενές γραμμές ανάμεσα στο
   κείμενο και σε αυτά όταν η διπλανή κάρτα είχε μεγαλύτερο κείμενο. */
.landing .wk-chips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font: 400 10.5px/1.9 var(--bx-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
}

/* Ο διαχωριστής μπαίνει ΜΕΤΑ το στοιχείο, όχι πριν το επόμενο. Με ::before σε
   flex-wrap, όταν η γραμμή τύλιγε, η νέα γραμμή ΞΕΚΙΝΟΥΣΕ με «· SECURITY AUDIT»
   — διαβαζόταν ως σφάλμα απόδοσης. Κολλημένος στο προηγούμενο στοιχείο, η
   αλλαγή γραμμής γίνεται μετά τον διαχωριστή, ποτέ πριν. */
.landing .wk-chips li:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--bx-ink-4);
}

/* Η αρχική δεν έχει 3D — το #atmo μόνο του αφήνει το hero να ξεκινά ψηλά.
   Το κάτω padding κόβεται: μετρήθηκε κενό ~206px hero→ΕΡΓΑ ενώ κάθε άλλη
   ενότητα είχε ~112px, επειδή η αριστερή στήλη τελειώνει στα CTA και η δεξιά
   στο ΣΥΝΤΗΡΗΣΗ — το κάτω δεξιά τεταρτημόριο έμενε τρύπα. */
.landing .bx-hero {
  padding-top: clamp(96px, 15vh, 168px);
  padding-bottom: clamp(48px, 6vh, 72px);
}

/* Το «διπλό πλάτος» πρέπει να ΣΗΜΑΙΝΕΙ κάτι. Πριν, η κάρτα 01 κρατούσε το
   κείμενό της σε στενή αριστερή στήλη και το δεξί μισό έμενε άδειο μαύρο —
   δηλαδή έμοιαζε με σπασμένο component, όχι με ιεραρχία. Τώρα η προδιαγραφή
   μετακομίζει σε δικό της ράφι, χωρισμένη με γραμμή: το πλάτος γεμίζει με
   πραγματικό περιεχόμενο, κανένα νέο κείμενο δεν επινοήθηκε. */
@media (min-width: 861px) {
  .landing .wk-card:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    /* ΡΗΤΑ min-content στις δύο πρώτες γραμμές. Χωρίς αυτό, τα chips που
       εκτείνονται σε ΟΛΕΣ τις γραμμές μοίραζαν το ύψος τους πίσω στη γραμμή
       του eyebrow — και άνοιγε τρύπα ~90px ανάμεσα στο «01 · ΞΕΝΟΔΟΧΕΙΟ» και
       τον τίτλο, μοναδική σε αυτή την κάρτα. */
    grid-template-rows: min-content min-content 1fr;
    column-gap: clamp(28px, 4vw, 56px);
  }
  .landing .wk-card:first-child > .wk-cat,
  .landing .wk-card:first-child > .wk-h,
  .landing .wk-card:first-child > .wk-p { grid-column: 1; }

  /* Το πλάτος από μόνο του δεν λέει «κύριο έργο» — αν ο τίτλος και το κείμενο
     είναι ίδιου μεγέθους με τις άλλες τέσσερις, η κάρτα διαβάζεται ως λάθος
     πλέγματος. Ένα σκαλί πάνω, και στα δύο. */
  .landing .wk-card:first-child .wk-h { font-size: clamp(22px, 2vw, 28px); }
  .landing .wk-card:first-child .wk-p {
    font-size: clamp(15px, 1.15vw, 17px);
    max-width: none;
  }

  .landing .wk-card:first-child .wk-chips {
    grid-column: 2;
    grid-row: 1 / -1;
    /* stretch, ΟΧΙ start: η γραμμή πρέπει να τρέχει όλο το ύψος της κάρτας.
       Με start σταματούσε εκεί που τελείωνε η λίστα και το υπόλοιπο δεξί μισό
       έμενε αδικαιολόγητα μαύρο. */
    align-self: stretch;
    align-content: start;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding-left: clamp(20px, 2.4vw, 32px);
    border-left: 1px solid var(--bx-rule-soft);
    line-height: 2.2;
  }
  .landing .wk-card:first-child .wk-chips li:not(:last-child)::after { content: none; }
}

@media (max-width: 860px) {
  .landing .wk-grid { grid-template-columns: minmax(0, 1fr); }
  .landing .wk-card:first-child { grid-column: auto; }
}

@media (max-width: 720px) {
  .landing .wk-chips li { font-size: 9.5px; letter-spacing: 0.08em; padding: 4px 6px; }
}

/* --------------------------------------------------------------------------
   (γ) Η κάτω μπάρα με 4 στοιχεία: το site.css τη δηλώνει `1fr 1fr 1fr`, οπότε
   το τέταρτο έπεφτε σε δεύτερη σειρά, αριστερά, με το 65% της σειράς κενό —
   και η μπάρα έτρωγε ~120px (14%) ενός viewport 844px, μόνιμα.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .landing .fi-botbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .landing .fi-botbar .bb-item { font-size: 12px; padding: 0 4px; }
}

/* --------------------------------------------------------------------------
   (δ) Τα δύο CTA του hero στοιβάζονταν στα 768 ενώ χωρούσαν άνετα δίπλα-δίπλα,
   και είχαν διαφορετικό πλάτος — διαβάζονταν κουρελιασμένα. Ίσα, σε μία σειρά,
   με ταβάνι ώστε να μη γίνουν σανίδες στο 1440.
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .landing .bx-hero-actions { flex-wrap: nowrap; }
  .landing .bx-hero-actions .bx-btn {
    flex: 1 1 0;
    max-width: 270px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Γύρος 3
   -------------------------------------------------------------------------- */

/* (α) Ο διαχωριστής δεν κρέμεται πια στην ΑΡΧΗ γραμμής, αλλά σε στενή οθόνη
   έμενε ορφανός στο ΤΕΛΟΣ («… HERO REDESIGN ·» και μετά αλλαγή γραμμής).
   Εκεί που τα chips τυλίγονται ούτως ή άλλως, ο διαχωριστής δεν προσφέρει
   τίποτα — το κενό κάνει την ίδια δουλειά χωρίς ορφανό σημάδι. */
@media (max-width: 520px) {
  .landing .wk-chips { gap: 0 16px; }
  .landing .wk-chips li:not(:last-child)::after { content: none; }
}

/* (β) Το δεύτερο CTA του hero έσπαγε σε δύο γραμμές στα 768 («Ξεκινήστε ένα /
   project») μέσα σε κουτί 47px, ενώ το πρώτο ήταν μονόγραμμο και κεντραρισμένο
   — τα δύο κουμπιά δεν μοιράζονταν γραμμή βάσης και διαβάζονταν σπασμένα.
   `min-width: max-content` σημαίνει «ίσα, αλλά ποτέ στενότερα από την ετικέτα
   τους»: το flex:1 μοιράζει μόνο ό,τι περισσεύει ΠΑΝΩ από αυτό το πάτωμα. */
@media (min-width: 560px) {
  .landing .bx-hero-actions .bx-btn {
    white-space: nowrap;
    min-width: max-content;
  }
}

/* (γ) Η ενότητα ΤΟ ΠΡΟΪΟΝ κρατούσε επικεφαλίδα + παράγραφο + κουμπί σε στενή
   αριστερή στήλη και άφηνε ΟΛΟ το δεξί μισό (~640px) μαύρο — τη στιγμή που
   κάθε γειτονική ενότητα χρησιμοποιεί τη δεξιά της στήλη. Διαβαζόταν ημιτελής,
   και ήταν το πιο «template» σημείο της σελίδας ακριβώς επειδή ήταν μισοάδειο. */
.landing .pr-grid { margin-top: clamp(20px, 3vh, 32px); }
.landing .pr-grid .bx-h { margin: 0 0 clamp(14px, 1.6vw, 20px); }
.landing .pr-grid .bx-p { margin: 0; }
.landing .pr-grid .bx-hero-actions { margin-top: clamp(24px, 3vw, 32px); }

/* ==========================================================================
   ΕΙΚΟΝΕΣ ΕΡΓΩΝ — πραγματικά screenshots των ζωντανών site
   Ίδιες διαστάσεις πηγής και για τα πέντε (1200×750), ρητά width/height στο
   markup ώστε ο browser να κρατά τον χώρο πριν φορτώσει η εικόνα — αλλιώς
   κάθε κάρτα θα τίναζε το layout όταν έρχεται (CLS).
   ========================================================================== */
.landing .wk-shot {
  display: block;
  margin: 0 0 clamp(16px, 2vw, 22px);
  border: 1px solid var(--bx-rule-soft);
  overflow: hidden;
  background: var(--bx-bg);
  line-height: 0;
}
.landing .wk-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;      /* ο χώρος κρατιέται ακόμη κι αν λείψει η εικόνα */
  object-fit: cover;
  /* ΜΟΝΟ κορεσμός, ΚΑΜΙΑ μείωση φωτεινότητας. Είχα βάλει brightness(0.9) για
     να «κάτσουν» οι πέντε παλέτες στη σκοτεινή σελίδα — και έσβησα το ίδιο το
     περιεχόμενο: το hero του Season Home είναι ΛΕΥΚΟ κείμενο πάνω σε φωτεινή
     φωτογραφία κήπου, οπότε το σκούρυνα ακριβώς εκεί που είχε ήδη οριακή
     αντίθεση. Ο κριτής το διάβασε τρεις φορές ως «μισοφορτωμένη σελίδα».
     Το ξεθώριασμα ήταν και μικρή παραποίηση: δείχνει τα site των πελατών πιο
     μουντά απ' ό,τι είναι. Μένει μόνο ήπιος κορεσμός για συνοχή. */
  filter: saturate(0.94);
  transform: scale(1.001);
  transition: filter 420ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
              transform 520ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.landing .wk-card:hover .wk-shot img,
.landing .wk-shot:focus-visible img {
  filter: none;
  transform: scale(1.018);
}
.landing .wk-shot:focus-visible { outline: 2px solid var(--bx-sig); outline-offset: 3px; }

/* Το domain κάτω από το όνομα: ο μόνος τρόπος να επαληθεύσει ο επισκέπτης
   μόνος του ότι το έργο υπάρχει. Υπογράμμιση που γράφεται στο hover — δηλώνει
   «είναι ζωντανός σύνδεσμος», δεν διακοσμεί. */
.landing .wk-url {
  margin: -4px 0 0;
  font: 400 11.5px/1.5 var(--bx-mono);
  letter-spacing: 0.08em;
}
/* Η υπογράμμιση γράφεται με scaleX σε ψευδοστοιχείο, ΟΧΙ με linear-gradient +
   background-size: το gradient εδώ θα ήταν μονόχρωμο (currentColor→currentColor),
   δηλαδή απλή γραμμή με άλλο όνομα — αλλά ο κανόνας λέει «μόνο transform/opacity»
   και ένα grep για `linear-gradient` δεν ξεχωρίζει την πρόθεση. Το scaleX είναι
   και φθηνότερο: δεν ξαναζωγραφίζει background σε κάθε καρέ. */
.landing .wk-url a {
  position: relative;
  color: var(--bx-ink-3);
  text-decoration: none;
  transition: color 240ms var(--ease-out, ease);
}
.landing .wk-url a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 320ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.landing .wk-card:hover .wk-url a,
.landing .wk-url a:hover,
.landing .wk-url a:focus-visible { color: var(--accent-ember); }
.landing .wk-card:hover .wk-url a::after,
.landing .wk-url a:hover::after,
.landing .wk-url a:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   ΑΠΟΚΑΛΥΨΕΙΣ ΣΤΟ SCROLL
   Η κρυφή κατάσταση ζει ΜΟΝΟ κάτω από .fx, που την προσθέτει το landing-fx.js.
   Χωρίς JS / με σφάλμα JS / με μπλοκαρισμένο script → τίποτα δεν κρύβεται.
   Ποτέ το αντίστροφο. Μόνο transform/opacity — καμία ανασχεδίαση.
   ========================================================================== */
.fx [data-fx] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
              transform 620ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.fx [data-fx].in { opacity: 1; transform: none; }
.fx [data-fx].in { will-change: auto; }

/* Η διαδοχή του log είναι πιο σφιχτή: είναι μία ροή, όχι πέντε αντικείμενα. */
.fx .bx-legend-l > li[data-fx] { transform: translateX(-10px); }
.fx .bx-legend-l > li[data-fx].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fx [data-fx],
  .fx [data-fx].in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .landing .wk-shot img { transition: none; }
}

/* Η κάτω μπάρα είναι fixed και πιάνει 61px (7,2%) σε viewport 844px. Το
   περιεχόμενο περνά από πίσω της κατά το scroll — φυσιολογικό για sticky bar,
   μετρημένο ως παροδικό (2 σημεία, καμία επικεφαλίδα δεν μένει μόνιμα
   κρυμμένη). Αυτό που ΔΕΝ είναι φυσιολογικό είναι να μένει το ΤΕΛΟΣ της
   σελίδας από κάτω της για πάντα: εκεί δεν υπάρχει «σκρόλαρε λίγο ακόμα».
   Κάτω περιθώριο ίσο με τη μπάρα, ώστε το footer να φτάνει πάντα πάνω της. */
@media (max-width: 720px) {
  .landing .content { padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   ΟΡΦΑΝΗ ΚΑΡΤΑ. Το πλέγμα σχεδιάστηκε για 5: η 01 πιάνει και τις δύο στήλες,
   οι 02-05 γεμίζουν δύο καθαρές σειρές. Με 6 κάρτες η τελευταία μένει μόνη
   της σε μισή σειρά, με το άλλο μισό μαύρο — ακριβώς η «τρύπα» που χρειάστηκαν
   τέσσερις γύροι για να φύγει από αυτή την ενότητα.

   Ο κανόνας αυτοδιορθώνεται αντί να κουμπώνει στο «6»: όταν η τελευταία κάρτα
   είναι σε ΖΥΓΗ θέση, η 01 (που πιάνει ολόκληρη σειρά) την αφήνει μόνη — άρα
   απλώνεται κι αυτή. Με 5 κάρτες η τελευταία είναι μονή, δεν πιάνει, τίποτα
   δεν αλλάζει. Δουλεύει και για 7, 8, … χωρίς νέα γραμμή.

   ΔΕΝ κληρονομεί την τυπογραφία της 01: εκείνα τα μεγέθη είναι scoped σε
   :first-child. Εδώ γεμίζει μόνο πλάτος — δεν δηλώνει «κύριο έργο». */
@media (min-width: 861px) {
  .landing .wk-card:last-child:nth-child(even) { grid-column: 1 / -1; }
}