@charset "utf-8";
/* Responsive layout of the custom-wide-v3 popup pages (#page > #header, #main > three .column, #recommendation; see
   custom-wide-v3.css). Loaded by _radio/inc/responsive-head.jsp right after custom-popup-responsive.css, for the
   pages that import custom-wide-v3.jsp, and it builds on the rules of that file for the ids both families
   share (#player, #socialbar, #info, #shows, #messages, #recommendation, the phone bar and the mobile ad).
     >= 1000px   desktop: untouched (every rule sits in a max-width media query)
     768-999px   tablet: two columns of 300px, the programme and the station info centred under them
     <= 767px    phone: the look of the custom mobile page, like the custom-wide family */

@media (max-width: 999px) {
	html body #header_banner {width: auto; max-width: 100%;}
	html body #page > div[style*="margin-left"] {margin-left: 0 !important; max-width: 100%; overflow: hidden;}

	html body #main {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px; width: auto; max-width: 100%;}
	html body #main > br {display: none;}
	html body #main .column {float: none; flex: 0 0 300px; width: 300px; margin: 0; max-width: 100%;}
	html body #main #right_column {flex: 0 0 380px; width: 380px;}
	html body #shows-info {width: auto; height: auto; overflow: visible;}
	html body #shows_placeholder {height: auto; max-height: 290px; overflow: auto;}
	html body #live24 {width: auto;}
	html body #live24 img {display: block; width: 380px; max-width: 100%; height: auto; margin: 0 auto;}
	html body #player {max-width: 300px;}
	html body #now_playing {margin-top: 0 !important; height: auto; min-height: 102px; overflow: hidden;}
	html body #messages_box {height: 227px !important; overflow: hidden;}
	html body #socialbar {width: auto; margin-top: 0 !important; overflow: hidden;}
}

@media (max-width: 767px) {
	html body #page {overflow: hidden;}
	html body #header {overflow: hidden;}
	html body #header img,
	html body #header img.logo {display: block; margin: 0 auto; max-width: 100%;}
	html body #header_banner,
	html body #header > div[style*="float"],
	html body #header img[src*="live24.gr-200x90"],
	html body #main > br,
	html body #main .banner {display: none !important;}
	html body #page > div[style*="margin-left"] {margin-left: 0 !important; text-align: center;}

	/* the three columns and the boxes inside them become items of the grid of #main (custom-popup-responsive.css) */
	html body #main {display: grid; grid-template-columns: 150px 1fr; grid-template-rows: minmax(70px, auto) minmax(70px, auto); justify-content: normal; align-items: stretch; gap: 0; max-width: none;}
	html body #main .column,
	html body #shows-info,
	html body #messages_box {display: contents;}
	html body #main .column {width: auto;}
	html body #main #right_column {width: auto;}
	html body #now_playing,
	html body #live24 {grid-column: 1 / -1;}
	html body #messages_box {height: auto !important;}
	html body #now_playing {order: 2;}
	html body #live24 {order: 7;}

	/* now playing, programme and contact: the blocks of the custom mobile page, the sprite headings become labels */
	html body #now_playing {height: auto; min-height: 0; margin: 0 !important; padding: 0 0 12px; border: 0; text-align: center; background: #2288b8 !important; color: #fff !important;}
	html body #now_playing h3,
	html body #shows h3,
	html body #messages h3 {display: block; width: 70%; height: auto; margin: 0 auto 10px; padding: 10px 0; text-align: center; text-indent: 0; text-transform: uppercase; font-size: 17px; font-weight: 700; line-height: 1.2; border-radius: 0 0 3px 3px; background: #fff !important; color: #333;}
	html body #shows h3,
	html body #messages h3 {background: #455e87 !important; color: #fff;}
	html body #shows h3 a,
	html body #info h3 a {display: block; width: auto; height: auto; text-indent: 0; text-decoration: none; background: none !important; font-size: 0; line-height: 0; color: inherit;}
	html body #shows h3 a::after {content: "ΠΡΟΓΡΑΜΜΑ"; font-size: 17px; line-height: 1.2;}
	html body #messages h3 {font-size: 0;}
	html body #messages h3::after {content: "ΕΠΙΚΟΙΝΩΝΙΑ"; font-size: 17px;}
	html body #info h3 {display: none;}
	html body #now_playing p {margin: 0 10px 8px; color: #fff;}
	html body #currentShow {font-weight: 700;}
	html body #shows {background: #2389b9 !important; color: #fff !important;}
	html body #shows_placeholder {margin: 0;}
	html body #info {font-size: 17px;}
	html body #info p {font-size: 17px;}

	html body #messages {height: auto;}
	html body #send_message_controls {display: flex; align-items: flex-start; gap: 8px; position: static; margin: 0; padding: 5px 15px 10px;}
	html body #messages textarea#message {float: none; display: block; flex: 1 1 auto; min-width: 0; width: auto; height: 50px; margin: 0; box-sizing: border-box; resize: none;}
	html body #send_message_controls #submit {float: none; display: block; flex: none; margin: 0;}

	html body #live24 {width: auto; margin: 0; padding: 10px 0; background: #fff; text-align: center;}
	html body #live24 img {display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto;}
}