/* =========================================
   1. RESET & BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: #1a1a1a; 
	-webkit-font-smoothing: antialiased; 
}
.fp-watermark { display: none !important; }

/* =========================================
   2. GLOBAL LAYOUTS & UTILITIES
   ========================================= */
.section { background-size: cover; background-position: center; position: relative; }
.page-container { width: 100%; height: 100%; display: flex; padding: 6% 8%; }
.bg-light { background-color: #f9f8f3; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

h2 { font-size: 2.2rem; font-weight: 300; margin-bottom: 25px; letter-spacing: 2px; text-transform: uppercase; }
p { font-size: 1rem; line-height: 1.8; color: #444; }
.page-num { position: absolute; bottom: 3%; color: #ccc; font-size: 0.8rem; letter-spacing: 2px; }

.category-tag {
	background-color: #8e9191;
	color: white;
	padding: 6px 15px;
	letter-spacing: 3px;
	font-size: 0.8rem;
	width: fit-content;
	margin-bottom: 25px;
	text-transform: uppercase;
}

/* =========================================
   3. NAVIGATION DOTS
   ========================================= */
#fp-nav ul li a span { 
	background: #fff !important; 
	width: 8px !important; 
	height: 8px !important; 
	margin: -4px 0 0 -4px !important; 
	border-radius: 50% !important; /* Αυτό τα κάνει ξανά τέλεια στρογγυλά! */
	border: none !important;
	transition: transform 0.3s ease, background-color 0.3s ease !important; 
}

#fp-nav ul li a.active span { 
	transform: scale(1.8) !important; /* Όταν είναι ενεργό μεγαλώνει λίγο παραπάνω */
}

/* Όταν η σελίδα έχει λευκό φόντο, τα dots γίνονται μαύρα για να φαίνονται */
.black-dots #fp-nav ul li a span { 
	background: #000 !important; 
}

/* =========================================
   4. PAGE SPECIFIC LAYOUTS (DESKTOP)
   ========================================= */

/* Pages 1 & 2 */
.cover-bg { background: linear-gradient(180deg, #5c4a3d 0%, #2b1d14 100%); color: #fff; }
.center-vh { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; }
.main-title { font-size: clamp(3rem, 8vw, 5rem); letter-spacing: 15px; font-weight: 200; text-transform: uppercase; }
.top-left { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; }

/* Page 3: Contents */
.contents-layout { display: flex; width: 100%; height: 100vh; align-items: center; }
.contents-col-img { width: 25%; height: 100%; }
.contents-col-list { width: 30%; padding: 0 4% 0 6%; display: flex; flex-direction: column; justify-content: center; }
.contents-col-textures { width: 45%; display: flex; justify-content: center; gap: 4%; padding-right: 4%; }
.texture-card { width: 30%; display: flex; flex-direction: column; align-items: center; }
.texture-img-wrap { width: 100%; height: 50vh; overflow: hidden; margin-bottom: 15px; }
.texture-card span { font-size: 0.7rem; letter-spacing: 2px; color: #666; text-transform: uppercase; text-align: center; }

/* Page 4: History */
.history-grid { display: flex; width: 100%; gap: 10%; align-items: center; }
.images-offset { width: 45%; display: flex; gap: 30px; }
.img-portrait { width: 50%; height: 50vh; background-size: cover; border: 1px solid #ddd; }
.up { transform: translateY(-40px); }
.down { transform: translateY(40px); }

/* Pages 5, 7: Text & Image Grid */
.text-image-grid { display: flex; flex-direction: column; align-items: center; text-align: center; width: 40%; }
.text-image-grid p { margin-bottom: 20px; text-align: justify; color: #555; font-size: 0.95rem; line-height: 2; }
.square-frame { width: 100%; aspect-ratio: 1/1; background-size: cover; border: 1px solid #eee; }

/* Page 6: 70/30 Split */
.split-70-30 { display: flex; width: 100%; height: 100vh; align-items: center; }
.w-70 { width: 70%; height: 100%; overflow: hidden; }
.w-30 { width: 30%; height: 100%; padding: 0 5%; display: flex; flex-direction: column; justify-content: center; text-align: center; background-color: #fff; }

/* Page 8: 4 Columns Planters */
.planter-split { display: flex; width: 100%; height: 100vh; align-items: stretch; }
.planter-col { display: flex; flex-direction: column; }
.caption-small { font-size: 0.6rem; color: #999; letter-spacing: 1px; line-height: 1.2; }

/* Pages 9 & 12: Floating White Box */
.image-frame-85 { position: relative; width: 100%; height: 85vh; overflow: hidden; border: 1px solid #eee; }
.floating-box { position: absolute; background: rgba(255, 255, 255, 0.98); padding: 45px; max-width: 420px; z-index: 10; }
.floating-box.bottom-left { bottom: 40px; left: 40px; box-shadow: 15px 15px 40px rgba(0,0,0,0.1); }
.floating-box.top-right { top: 40px; right: 40px; box-shadow: -15px 15px 40px rgba(0,0,0,0.1); }

/* 50/50 Splits (Pages 10, 11, 13) */
.split-50-50 { display: flex; width: 100%; height: 100vh; align-items: stretch; }
.w-50 { width: 50%; height: 100%; }
.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 8px; font-size: 1.4rem; font-weight: 300; color: #333; display: flex; align-items: center; margin-right: 30px; }

/* Page 14: Bespoke Info */
.bespoke-layout { display: flex; width: 100%; height: 100vh; align-items: center; padding: 0 6%; }
.bespoke-text { width: 40%; padding-right: 5%; }
.bespoke-image { width: 60%; position: relative; display: flex; justify-content: center; align-items: center; }
.bespoke-features { display: flex; gap: 40px; border-top: 1px solid #ddd; padding-top: 30px; margin-bottom: 30px; }
.bespoke-features h4 { color: #c5a47e; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.bespoke-features p { font-size: 0.75rem; color: #444; }

/* Page 16: Footer */
.footer-page { width: 100%; height: 100vh; background-color: #9d9489; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; }
.footer-page h3 { font-size: 0.8rem; letter-spacing: 3px; font-weight: 400; margin-bottom: 15px; text-transform: uppercase; opacity: 0.9; }
.footer-page p { font-size: 0.75rem; line-height: 1.8; letter-spacing: 1px; opacity: 0.8; }
.footer-page a { color: white; text-decoration: none; font-size: 0.8rem; letter-spacing: 2px; display: block; margin-bottom: 10px; }


/* =========================================
   5. MOBILE RESPONSIVENESS (Κάτω από 768px)
   ========================================= */
@media screen and (max-width: 768px) {
	
	/* Γενικά: Όλα γίνονται στήλες */
	.page-container, .history-grid, .split-50-50, .split-70-30, .planter-split {
		flex-direction: column !important;
		height: auto !important;
		padding: 10% 5% !important;
		gap: 30px;
	}

	.w-50, .w-70, .w-30, .planter-col, 
	.history-grid > div, .split-70-30 > div, .planter-split > div {
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}

	.main-title { font-size: 3rem !important; letter-spacing: 8px !important; }
	h2 { font-size: 1.8rem !important; }
	
	/* Σελίδα 3: Περιεχόμενα */
	.contents-layout { flex-direction: column; height: auto; padding-bottom: 50px; }
	.contents-col-img { width: 100%; height: 35vh; }
	.contents-col-list { width: 100%; padding: 10% 8%; }
	.contents-col-textures { width: 100%; padding: 0 5%; flex-direction: row; justify-content: space-between; gap: 2%; }
	.texture-card { width: 31%; }
	.texture-img-wrap { height: 120px; }

	/* Σελίδες 9 & 12: Floating Boxes */
	.image-frame-85 { height: auto !important; border: none; display: flex; flex-direction: column; }
	.image-frame-85 .cover-img { height: 50vh !important; }
	.floating-box {
		position: relative !important;
		bottom: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 30px 20px !important;
		box-shadow: none !important;
		background: #fff !important;
	}
	
	/* Vertical Text */
	.vertical-text { writing-mode: horizontal-tb !important; transform: none !important; margin: 0 0 20px 0 !important; text-align: center; }
	
	/* Σελίδα 14: Bespoke Mobile */
	.bespoke-layout { flex-direction: column !important; height: auto !important; padding: 10% 8% !important; }
	.bespoke-text { width: 100% !important; padding-right: 0 !important; margin-bottom: 40px; }
	.bespoke-image { width: 100% !important; }
	.bespoke-features { flex-direction: column !important; gap: 20px !important; }

	/* Ύψη Φωτογραφιών στα Split Layouts */
	.w-50 img, .w-70 img { height: 40vh !important; }
	.img-portrait { height: 40vh !important; transform: none !important; }

	/* Αριθμοί σελίδων: Κρύβονται στο κινητό */
	.page-num { display: none !important; }
}