/**
 * ODIN Google Reviews
 *
 * Μόνο ό,τι δεν καλύπτουν οι κλάσεις του theme. Καμία τιμή χρώματος,
 * ακτίνας ή σκιάς δεν γράφεται εδώ — όλα από τα custom properties του theme.
 */

/* ---------- Γραμμή μέσου όρου ---------- */

.odrev-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 2rem;
}

.odrev-score {
	font-family: var(--font-sans);
	font-size: var(--text-display-sm);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-brand-800);
}

.odrev-summary-meta {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.odrev-count {
	font-size: 0.8125rem;
	color: var(--color-ink-500);
}

.odrev-link {
	margin-inline-start: auto;
}

/* ---------- Πλέγμα ----------

   Πλέγμα, όχι στήλες CSS. Οι στήλες γεμίζουν κατά στήλη — έτσι το ορίζει η
   προδιαγραφή, δεν ρυθμίζεται — οπότε η δεύτερη νεότερη κριτική προσγειωνόταν
   κάτω από την πρώτη αντί δίπλα της. Οι κριτικές βγαίνουν με σειρά, και η
   σειρά που διάβαζε ο επισκέπτης δεν είχε καμία σχέση με αυτήν.

   Το πλέγμα είχε δοκιμαστεί πρώτο και είχε εγκαταλειφθεί επειδή άφηνε περίπου
   150px κενό πάνω από την υπογραφή. Δεν έφταιγε το πλέγμα. Το item απλώνεται
   στο ύψος της σειράς με το προεπιλεγμένο stretch, η κάρτα είναι flex column,
   και το .o-quote-text του theme έχει flex: 1 1 auto — μεγαλώνει δηλαδή και
   ρουφάει κάθε επιπλέον ύψος, σπρώχνοντας την υπογραφή στον πάτο. Με start η
   κάρτα δεν απλώνεται καθόλου: δεν περισσεύει ύψος, άρα δεν υπάρχει κενό να
   γεννηθεί. Ό,τι κενό μένει τώρα είναι κάτω από τις κοντές κάρτες, ανάμεσα σε
   κάρτες και όχι μέσα σε μία.

   Δεύτερο κέρδος: το «περισσότερες» απλώς προσθέτει κάρτες στο τέλος. Με τις
   στήλες κάθε αποκάλυψη ξαναμοίραζε τα πάντα και οι κάρτες που διάβαζε ήδη ο
   επισκέπτης πηδούσαν σε άλλη στήλη.

   Τα σημεία αλλαγής είναι του theme (.o-grid-3), ώστε οι κριτικές να σπάνε σε
   στήλες στα ίδια πλάτη με κάθε άλλο πλέγμα καρτών του site. Το όνομα
   «masonry» μένει ιστορικό: το στοχεύει ενδεχομένως custom CSS σε live site. */

.odrev-masonry {
	display: grid;
	gap: 1.5rem;
	/* Κάθε κάρτα κρατά το ύψος του περιεχομένου της. */
	align-items: start;
}

@media (min-width: 40rem) {
	.odrev-cols-2,
	.odrev-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.odrev-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Σφιχτό πακετάρισμα ----------

   Το πλέγμα από μόνο του ισοϋψώνει τη σειρά, και με κριτικές που πάνε από δύο
   γραμμές ως δέκα αυτό αφήνει μεγάλα κενά κάτω από τις κοντές.

   Όταν το JavaScript αναλάβει, οι σειρές γίνονται 1px και κάθε κάρτα δηλώνει
   πόσες πιάνει. Η τοποθέτηση του πλέγματος σαρώνει κατά σειρά και βάζει την
   επόμενη κάρτα στο πρώτο ελεύθερο κελί που συναντά — δηλαδή ανεβαίνει κάτω
   από την κοντή γειτόνισσά της αντί να περιμένει να τελειώσει η ψηλότερη της
   σειράς. Το διάκενο μπαίνει μέσα στο span, γι' αυτό το row-gap μηδενίζεται.

   Χωρίς JavaScript δεν μπαίνει το attribute, οπότε μένει το απλό πλέγμα από
   πάνω: σωστή σειρά, μεγαλύτερα κενά. Τίποτα δεν σπάει. */

.odrev-masonry[data-odrev-packed] {
	grid-auto-rows: 1px;
	row-gap: 0;
	/* Το διάκενο ταξιδεύει μέσα στο span, άρα το κουβαλά και η τελευταία κάρτα
	   κάθε στήλης: το πλέγμα τελειώνει 1.5rem πιο κάτω από την τελευταία κάρτα
	   και το κουμπί θα έπεφτε τόσο πιο μακριά. Εδώ επιστρέφεται. */
	margin-block-end: -1.5rem;
}

/* Χωρίς JavaScript δεν υπάρχει κουμπί, οπότε οι κρυμμένες κριτικές θα έμεναν
   κρυμμένες για πάντα. Εμφανίζονται όλες αντ' αυτού. */
.odrev-item[hidden] { display: none; }

/* ---------- Κάρτα ---------- */

.odrev-quote {
	display: flex;
	flex-direction: column;
}

.odrev-quote .o-quote-text {
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.odrev-quote .o-quote-author {
	padding-block-start: 1rem;
}

/* ---------- Κουμπί ---------- */

.odrev-actions {
	display: flex;
	justify-content: center;
	/* Το πλέγμα τελειώνει στον πάτο της τελευταίας σειράς — το gap δεν αφήνει
	   τίποτα από κάτω — οπότε δεν έρχεται κανένας χώρος από πάνω: με 0.5rem το
	   κουμπί κολλούσε στην κάρτα από πάνω του. */
	margin-block-start: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
}

/* ---------- Η απάντησή μας ----------

   Γραμμή στο πλάι, όχι γεμάτο κουτί. Οι απαντήσεις είναι σχεδόν πάντα η ίδια
   ευχαριστήρια πρόταση, και τρεις γεμάτες γκρι πλάκες σε μια σειρά τραβούσαν
   το μάτι περισσότερο από τις ίδιες τις κριτικές. */

.odrev-reply {
	margin-block-start: 1.125rem;
	padding-inline-start: 0.875rem;
	border-inline-start: 2px solid var(--color-brand-200);
}

.odrev-reply-label {
	display: block;
	margin-block-end: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-500);
}

.odrev-reply p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-ink-600);
}

/* Σε σκούρα επιφάνεια η απάντηση αντιστρέφεται. */
.o-surface-deep .odrev-reply {
	border-inline-start-color: var(--color-brand-700);
}

.o-surface-deep .odrev-reply-label,
.o-surface-deep .odrev-reply p {
	color: var(--color-brand-200);
}

.o-surface-deep .odrev-score {
	color: var(--color-teal-300);
}

.o-surface-deep .odrev-count {
	color: var(--color-brand-200);
}

/* ---------- Αστέρια (μόνο fallback· κανονικά τα δίνει το odin_stars) ---------- */

.odrev-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.odrev-stars svg {
	width: 0.9375rem;
	height: 0.9375rem;
	display: inline-block;
}

.odrev-stars-track svg {
	fill: var(--color-brand-200);
}

.odrev-stars-fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
}

.odrev-stars-fill svg {
	fill: var(--color-accent-500);
}

/* Ο αριθμός δίπλα στα αστέρια, όταν δεν υπάρχει το theme να τον γράψει. */
.odrev-stars-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.odrev-stars-value {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.odrev-summary .odrev-stars svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---------- Μήνυμα μόνο για διαχειριστές ---------- */

.odrev-notice {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--color-brand-300);
	border-radius: var(--radius-btn);
	font-size: 0.9375rem;
	color: var(--color-ink-500);
}

/* Η κάρτα είναι λευκή σε κάθε επιφάνεια, οπότε η γραμμή της απάντησης δεν
   χρειάζεται δικό της τόνο πάνω σε tint — αυτό χρειαζόταν όσο ήταν γεμάτο
   κουτί που χανόταν σε μη λευκό φόντο. */