/* ==========================================================================
   Banner Καρτέλες (2) - banner kind 37
   Markup : views/general/view_included_pages/banners.php
   Πίνακας: homepage_banner_cards (article_id = homepage_banner.id)
   ========================================================================== */

/* Τα padding του section και το κενο κατω απο τον τιτλο ερχονται απο το
   .cardsBanner (01-general-style.css) - οπως σε ολα τα banner. Εδω στυλιζουμε
   μονο τις καρτες.

   Το χρωμα ΔΕΝ οριζεται εδω: καθε καρτα παιρνει inline background απο το
   color_card της (gradient τριων στασεων, banner_card_colors() στο banners.php)
   και το κουμπι παιρνει inline το βασικο χρωμα στα γραμματα. */

.bannerCards2 .cards2Grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:24px;
	max-width:1180px;
	margin:0 auto;
}

.bannerCards2 .cards2One{
	grid-template-columns:minmax(0, 1fr);
	max-width:590px;
}

.bannerCards2 .cards2Card{
	border-radius:24px;
	padding:34px 30px;
	color:#fff;
	display:flex;
	flex-direction:column;
	min-width:0;
}

.bannerCards2 .cards2Tag{
	display:block;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	opacity:.85;
	margin-bottom:10px;
}

.bannerCards2 .cards2Title{
	font-size:21px;
	font-weight:800;
	letter-spacing:-.2px;
	margin-bottom:8px;
}

.bannerCards2 .cards2Text{
	font-size:14.5px;
	line-height:1.5;
	opacity:.94;
	margin-bottom:22px;
}

/* Το margin-top:auto κολλαει το κουμπι στο κατω μερος, ωστε δυο καρτες με
   διαφορετικου μηκους κειμενο να εχουν τα κουμπια τους στην ιδια γραμμη. */
.bannerCards2 .cards2Btn{
	align-self:flex-start;
	margin-top:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	border-radius:999px;
	padding:12px 24px;
	font-size:14px;
	font-weight:700;
	line-height:1;
	text-decoration:none;
	transition:transform .15s ease, box-shadow .15s ease;
}

.bannerCards2 .cards2Btn:hover,
.bannerCards2 .cards2Btn:focus{
	text-decoration:none;
	transform:translateY(-1px);
	box-shadow:0 12px 26px -14px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   Κουμπιά banner (banner_buttons) κάτω από τις κάρτες
   Ισχύει και για το kind 25 και για το 37 - γι' αυτό δεν είναι κάτω από το
   .bannerCards2. Το ίδιο το κουμπί το στυλίζει το .button του 01-general-style.
   -------------------------------------------------------------------------- */

.bannerButtonsCenter{
	margin-top:34px;
}

/* Hover/κλικ: σκουραίνουν, όπως τα κουμπιά της sticky support bar.
   Με filter:brightness και ΟΧΙ με σταθερό χρώμα, γιατί το background κάθε
   κουμπιού έρχεται inline από το admin (banner_buttons.Background) - ένα
   καρφωτό hex θα έσβηνε τη ρύθμιση του συντάκτη. Έτσι σκουραίνει σωστά
   όποιο χρώμα κι αν έχει μπει, ακόμα και το προεπιλεγμένο μωβ. */
.bannerButtonsCenter .button button{
	cursor:pointer;
	transition:filter .2s ease;
}

.bannerButtonsCenter .button a:hover button,
.bannerButtonsCenter .button a:focus button,
.bannerButtonsCenter .button button:hover,
.bannerButtonsCenter .button button:focus{
	filter:brightness(.88);
}

.bannerButtonsCenter .button a:active button,
.bannerButtonsCenter .button button:active{
	filter:brightness(.78);
}

/* Σε κινητό τα κουμπιά μπαίνουν το ένα κάτω από το άλλο (d-block) - χωρίς αυτό
   μένουν αριστερά, γιατί το justify-content δουλεύει μόνο σε flex. */
@media (max-width:767px){
	.bannerButtonsCenter{
		text-align:center;
	}

	.bannerButtonsCenter .button{
		display:inline-block;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:991px){
	.bannerCards2 .cards2Grid{
		grid-template-columns:minmax(0, 1fr);
		gap:18px;
	}
}

@media (max-width:575px){
	.bannerCards2 .cards2Card{
		padding:28px 24px;
	}

	.bannerCards2 .cards2Title{
		font-size:19px;
	}
}