@charset "utf-8";
/* Responsive layout of the custom-v5 popup pages (sportfm): #page > #header (radio-header-wide.jsp), #main > #left /
   #center / #right / #bottom (the article), #recommendation. Loaded by _radio/inc/responsive-head.jsp right after
   custom-popup-responsive.css, which does most of the work for the ids both layouts share (#player, #socialbar,
   #info, #shows, #now, #messages, #recommendation, the phone bar and the mobile ad).
     >= 1000px   desktop: untouched (every rule sits in a max-width media query)
     768-999px   tablet: the columns wrap
     <= 767px    phone: the look of the custom mobile page */

.m-station {display: none;}

@media (max-width: 999px) {
	html body #page {height: auto;}
	html body #main {float: none; clear: both;}
	html body #recommendation {float: none;}
	html body #info_placeholder {height: auto;}
	html body #st-logo {max-width: 100%; height: auto;}
	html body #navigation {float: none; width: auto; max-width: 100%;}
	html body #bottom {width: auto; padding: 10px 0;}
	html body #bottom img {max-width: 100%; height: auto;}
}

@media (max-width: 999px) and (min-width: 768px) {
	html body #header .googlesearch {display: none;}
	html body #navigation #menu,
	html body #navigation #areas {width: auto; background-size: auto; overflow: hidden;}
	html body #areas {height: auto; padding-bottom: 5px;}
}

@media (max-width: 767px) {
	html body #page {overflow: hidden;}
	/* the burger bar replaces the header with the logo, the areas and the search */
	html body #header,
	html body #page > div[id^="google_ads_div"],
	html body #page > div[id^="div-gpt"],
	html body #left .banner,
	html body #st-logo,
	html body #info > #info_placeholder,
	html body #info > p,
	html body .googleresults {display: none !important;}
	html body #page > .clear {display: none;}

	/* sprite headings and the programme heading become the labels of the custom mobile page */
	html body #now > h2:first-child,
	html body #messages > h2:first-child {display: block; width: 70%; height: auto; margin: 0 auto 10px; padding: 10px 0; text-align: center; 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 #now > h2:first-child img,
	html body #messages > h2:first-child img {display: none;}
	html body #now > h2:first-child::after {content: "NOW PLAYING";}
	html body #messages > h2:first-child {background: #455e87 !important; color: #fff;}
	html body #messages > h2:first-child::after {content: "ΕΠΙΚΟΙΝΩΝΙΑ";}
	html body #shows > h2 {display: block; width: 70%; height: auto; margin: 0 auto 10px; padding: 10px 0; text-align: center; text-transform: uppercase; font-size: 17px; font-weight: 700; line-height: 1.2; font-style: normal; font-family: inherit; border-radius: 0 0 3px 3px; background: #455e87 !important; color: #fff;}
	html body #now #currentShow {margin: 0 10px 8px; font-size: 16px; font-weight: 700; font-style: normal;}
	html body #shows_placeholder {height: auto;}
	html body #messages {height: auto;}
	html body #socialbar {margin: 0;}

	/* the station block of the custom mobile page: logo left, contact right, description under a line */
	html body #info .m-station {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px;}
	html body #info .m-station img {flex: 0 0 117px; width: 117px; height: auto;}
	html body #info .m-contact {flex: 1 1 0; min-width: 0; overflow-wrap: anywhere;}
	html body #info .m-contact h4 {margin: 0 0 6px; font-size: 24px; line-height: 1.2; font-weight: 700; color: #333;}
	html body #info .m-desc {flex: 0 0 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid #dee2e6; color: #555;}

	/* the article under the player */
	html body #main > #bottom {grid-column: 1 / -1; order: 8; padding: 0;}
	html body #sport-fm-946-programma {padding: 16px; font-size: 15px;}
	html body #sport-fm-946-programma h1, html body #sport-fm-946-programma h2.sg-title, html body #sport-fm-946-programma div.ph {font-size: 18px;}
}