/* ============================================================
   HOME SERVICES STRIP — "Ολοκληρωμένες υπηρεσίες ακινήτου"
   ------------------------------------------------------------
   (2026-08-28) Νέα ενότητα στην αρχική, ανάμεσα στο πλαίσιο
   αναζήτησης (.rossis-search) και στο "Επιλεγμένα Ακίνητα"
   (.rf-listings-section). Φορτώνεται ΜΟΝΟ στην αρχική σελίδα
   (is_front_page(), βλ. functions.php §27) — δεν επηρεάζει καμία
   άλλη σελίδα.

   Σχεδιαστικές αποφάσεις (σε συνέχεια του front-page.css):
   - Selectors με πρόθεμα "rf-svc-" ώστε να μη συγκρούονται με
     τίποτα υπάρχον.
   - Eyebrow: επαναχρησιμοποιεί ΑΥΤΟΥΣΙΑ την κλάση .rf-sec-eyebrow
     (front-page.css) — εγγυάται ΑΚΡΙΒΩΣ το ίδιο στυλ/συμπεριφορά
     με το "ΑΠΟ ΕΜΑΣ ΓΙΑ ΕΣΑΣ" (ίδιο μέγεθος/letter-spacing/χρώμα,
     ίδιο text-transform:uppercase — άρα ίδια, ήδη-δοκιμασμένη,
     σωστή συμπεριφορά σε όλους τους browsers για τους τόνους).
   - Τίτλος: ΝΕΑ κλάση .rf-svc-title (ΟΧΙ επαναχρησιμοποίηση της
     .rf-sec-title) — ίδιες τιμές (γραμματοσειρά/βάρος/χρώμα/
     letter-spacing) ΕΚΤΟΣ από το μέγεθος, σκόπιμα μικρότερο
     (26px έναντι 32px desktop) ώστε η ενότητα να είναι οπτικά πιο
     ελαφριά από το "Επιλεγμένα Ακίνητα" που ακολουθεί — να μην
     ανταγωνίζονται οι δύο τίτλοι σε βάρος.
   - Χρώματα/spacing από τα υπάρχοντα --rossis-* CSS variables
     (style.css :root) όπου υπάρχει αντίστοιχη τιμή. Το ελαφρύ
     πράσινο φόντο των ετικετών (pills) χρησιμοποιεί το ΙΔΙΟ
     --rossis-green σε χαμηλή αδιαφάνεια (rgba, δεν υπάρχει έτοιμο
     "soft background" token) — καμία νέα απόχρωση, μόνο opacity.
   - border-radius 6px στις κάρτες = ΑΚΡΙΒΩΣ η ίδια τιμή με το
     .rossis-search / .rs-bedrooms-panel (style.css) — οπτική
     συνέχεια με το πλαίσιο αναζήτησης από πάνω.
   - Εξαίρεση: οι ετικέτες (pills) χρησιμοποιούν border-radius:999px
     (πλήρως στρογγυλό "chip" σχήμα) — καμία υπάρχουσα τιμή στο site
     δεν είναι pill-shaped, αυτή η τιμή είναι μηχανική αναγκαιότητα
     για το σχήμα που ζητήθηκε ρητά (pills/chips), όχι αυθαίρετη
     διακοσμητική επιλογή.
   - Breakpoints ΤΑΥΤΙΖΟΝΤΑΙ με τα ήδη υπάρχοντα του front-page.css
     (1024px / 768px / 380px) αντί για νέα δικά της, ώστε η σελίδα
     να "σπάει" σε ΕΝΑ σύνολο σημείων παντού, όχι δύο διαφορετικά.

   (2026-08-28, β') ΔΙΟΡΘΩΣΗ ΑΝΑΛΟΓΙΩΝ (μετρημένο σε 1920px):
   - Η αρχική `.rf-svc-text{max-width:34ch}` ήταν η ρίζα του κενού
     ~370px ανάμεσα στο κείμενο και την 1η κάρτα — στα ~600px της
     αριστερής στήλης (grid 1fr/2fr σε ~1800px διαθέσιμο πλάτος), 34ch
     (~240px) άφηνε πάνω από τα μισά της στήλης άδεια. ΑΦΑΙΡΕΘΗΚΕ
     εντελώς — το κείμενο γεμίζει τώρα όλο το πλάτος της στήλης του,
     η ίδια η στήλη είναι το μόνο "lever" που ελέγχει το μήκος γραμμής.
   - Grid ratio άλλαξε σε explicit ~30/70 (minmax(260px,30%) 1fr) από
     1fr/2fr (~33/67) — μικρή διόρθωση, ζητήθηκε ρητά.
   - column-gap 40px → 48px (ζητήθηκε ρητά). Το gap ΑΝΑΜΕΣΑ ΣΤΙΣ
     ΚΑΡΤΕΣ (.rf-svc-cards, 20px) ΚΑΙ το padding-top/bottom της ίδιας
     της ενότητας (.rf-services-strip) ΔΕΝ άλλαξαν — ρητά ζητήθηκε να
     μείνουν όπως ήταν.
   - align-items:start → center στο .rf-svc-wrap: το αριστερό μπλοκ
     κεντράρεται πλέον κάθετα ως προς το (ψηλότερο) μπλοκ καρτών.
   - Icon+τίτλος καρτών: νέο wrapper .rf-svc-card-head (flex row) στο
     template — το εικονίδιο κάθεται πλέον ΔΙΠΛΑ στον τίτλο, όχι από
     πάνω, γλιτώνοντας κάθετο χώρο.
   ============================================================ */

.rf-services-strip{ padding:64px 40px 0; }

.rf-svc-wrap{
	display:grid;
	grid-template-columns: minmax(260px, 30%) 1fr;
	column-gap:48px;
	row-gap:40px;
	align-items:center;
}

.rf-svc-title{
	font-family:'Playfair Display', serif;
	font-weight:700;
	font-size:26px;
	color:#1a1a1a;
	letter-spacing:-.5px;
	margin:0 0 14px;
	line-height:1.25;
}
.rf-svc-text{
	font-size:14px;
	color:#666;
	line-height:1.75;
	margin:0;
}

.rf-svc-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.rf-svc-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #eee;
	border-radius:6px;
	padding:26px 24px;
	text-decoration:none;
	color:inherit;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rf-svc-card:hover,
.rf-svc-card:focus-visible{
	transform:translateY(-3px);
	border-color:var(--rossis-green, #23854a);
	box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.rf-svc-card:focus-visible{
	outline:2px solid var(--rossis-green, #23854a);
	outline-offset:3px;
}

.rf-svc-card-head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}

.rf-svc-icon{
	width:46px; height:46px; border-radius:50%;
	background:#fff; border:1px solid #d8e7dc;
	display:flex; align-items:center; justify-content:center;
	color:var(--rossis-green, #23854a);
	font-size:18px;
	flex-shrink:0;
}

.rf-svc-card-title{
	font-family:'Playfair Display', serif;
	font-weight:600;
	font-size:17px;
	color:#1a1a1a;
	margin:0;
}

.rf-svc-pills{
	list-style:none;
	margin:0 0 18px;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.rf-svc-pills li{
	background:rgba(35, 133, 74, .08); /* --rossis-green σε χαμηλή αδιαφάνεια, βλ. σχόλιο πάνω */
	color:var(--rossis-green-dark, #155730);
	font-size:12px;
	font-weight:500;
	line-height:1.4;
	padding:5px 12px;
	border-radius:999px;
	white-space:nowrap;
}

.rf-svc-more{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:600;
	color:var(--rossis-green, #23854a);
	margin-top:auto;
}
.rf-svc-arrow{ display:inline-flex; transition:transform .2s ease; }
.rf-svc-card:hover .rf-svc-arrow,
.rf-svc-card:focus-visible .rf-svc-arrow{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
	.rf-svc-card, .rf-svc-arrow{ transition:none; }
}

/* ===== RESPONSIVE — TABLET (ταυτίζεται με front-page.css) ===== */
@media (max-width: 1024px){
	.rf-services-strip{ padding:40px 20px 0; }
	.rf-svc-wrap{ grid-template-columns:1fr; row-gap:28px; }
	/* Σε στοιβαγμένη διάταξη το κείμενο θα έπιανε ΟΛΟ το πλάτος της
	   οθόνης χωρίς αυτό το cap (π.χ. ~984px σε tablet 1024px) — εδώ,
	   ΜΟΝΟ εδώ, θέλουμε ρητά περιορισμένο μήκος γραμμής (~65 χαρακτήρες,
	   ζητήθηκε ρητά), ΟΧΙ στο desktop grid όπου η ίδια η στήλη ελέγχει
	   το πλάτος. */
	.rf-svc-text{ max-width:65ch; }
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 768px){
	.rf-services-strip{ padding:40px 14px 0; }
	.rf-svc-title{ font-size:22px; }
	.rf-svc-cards{ grid-template-columns:1fr; gap:16px; }
}

@media (max-width: 380px){
	.rf-svc-title{ font-size:18px; }
	.rf-svc-card{ padding:22px 18px; }
}