body {
    background: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10pt;
    margin: 0;
    padding: 16px;
    gap: 16px;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: #8a6040;
}

header, main {
    width: min(800px, calc(100vw - 32px));
    box-sizing: border-box;
    background: white;
    border-radius: 4px;
    overflow: clip;
    border: 2px solid grey;
}

header {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr auto;
    align-items: center;
    background: #963;

    > * {
	padding: 8px;
    }

    a {
	background: linear-gradient(to right, #ca9a7a, #963);
	display: block;
	color: white;
	font-weight: bold;
	width: max-content;
	font-size: 0;
	&::after {
	    font-size: 16pt;
	    content: 'BBC Sounds';
	}
    }
}

inline-display-module {
    display: flex;
    flex-direction: column;

    h2 {
	text-align: center;
	margin: 0;
	background: linear-gradient(to bottom, #ffeeca, #efba99);
	padding: 8px;
	border-top: 1px solid #daaa55;
	margin-top: 16px;
    }

    item-titles {
	display: grid;
	background: linear-gradient(to bottom, #fefefe, #efefef);
	padding: 8px;
	gap: 4px;
	border-top: 2px solid #eee;
	border-bottom: 1px solid #eee;
    }
    item-first-titles {
	grid-row: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr auto;
	align-items: baseline;
    }
    h3 {
	margin: 0;
    }

    item-network {
	grid-row: 1;
	grid-column: 2;
    }
    secondary-title {
	font-weight: bold;
	grid-row: 2;
	grid-column: 1;
    }
    tertiary-title {
	grid-row: 3;
	grid-column: 1;
    }

    module-description, synopsis {
	white-space: pre-wrap;
	margin: 8px;
	display: block;
    }

    details {
	summary {
	    list-style: none;
	    &::after {
		font-weight: bold;
		content: ' More…';
	    }
	}
	&[open] summary {
	    font-size: 0;
	    &::after {
		font-size: 10pt;
		content: 'Less…';
	    }
	}
    }

    a {
	display: block;
	background: #efefef;
	padding: 4px;
	text-align: center;
	font-weight: bold;
    }
    
    container-item, playable-item, broadcast-summary, display-item {
	display: grid;
	grid-template-columns: 1fr 72px;
	
	img {
	    grid-row-start: 1;
	    grid-row-end: 1000;
	    grid-column: 2;
	    width: 100%;
	    
	}
	> :not(img, a) { grid-column: 1; }
	> a { grid-column: 1 / 3; }
    }
}

inline-header-module {
    display: block;
    padding: 16px;
    text-align: center;
    module-items {
	display: none;
    }
}

#listen_sign_in_upsell {
    h2 { margin-top: 0; }
    module-description::after {
	display: block;
	margin-top: 8px;
	content: "Please note this is an unofficial frontend to BBC services and is not affiliated with or endorsed by the BBC in any way.";
    }
}
inline-display-module:first-child h2 { margin-top: 0; }

#listen_live {
    overflow-x: scroll;

    module-description {
	display: none;
    }

    h2 {
	position: sticky;
	left: 0;
    }

    playable-item {
	display: block;
	border-right: 1px solid #ccc;
	width: 300px;
	background: #eee;
        position: relative;

        img {
	    opacity: 20%;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    filter: blur(4px);
	    pointer-events: none;
	    height: 100%;
	}
    }

    module-items {
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	border-bottom: 1px solid #ccc;
	width: max-content;
    }
}

#single_item_promo {
    margin: 32px;
    border: 1px solid #963;
    border-radius: 4px;
    overflow: clip;
    > module-items > display-item > item-titles {
	background: #ffeecb;
	border: none;
    }
    h2 { display: none; }
    
    display-item {
	display: grid;
	background: #ffeecb;
	grid-template-columns: max-content 1fr;
	> :not(item-titles, img) {
	    grid-column: 1 / 3;
	    background: white;
	}
	> img {
	    height: 80px;
	    width: 100%;
	    object-fit: cover;
	    object-position: 0 30%;
	    mask-image: linear-gradient(to left, #fff9, #fff0);
	}
    }
}

#categories {
    display: flex;

    container-item {
	display: flex;
	align-items: baseline;
	background: #efefef;
	border-top: 1px solid #fec;
	border-bottom: 1px solid #aaa;

	item-titles {
	    background: none;
	    border: none;
	}

	a {
	    font-size: 0;
	    &::after {
		font-size: 10pt;
		content: "view category »";
	    }
	}
	img {
	    display: none;
	}
    }
}

segment-item {
    display: grid;
    grid-template-columns: 1fr auto auto 80px;
    &:not(:has(img)) {
	grid-template-columns: 1fr auto auto;
    }
    align-items: baseline;
    background: linear-gradient(to bottom, #fff, #f8f8f8);
    border-bottom: 1px solid #ccc;

    item-titles {
	background: none;
	border: none;
    }

    primary-title {
	grid-row: 1;
	grid-column: 1;
    }
    secondary-title {
	grid-row: 2;
	grid-column: 1;
    }
    tertiary-title {
	white-space: pre-wrap;
	font-size: 8pt;
    }
    offset-start {
	grid-row: 1;
	grid-column: 2;
	&::after {
	    content: '—';
	}
    }
    offset-end {
	grid-row: 1;
	grid-column: 3;
	padding-right: 8px;
    }
    
    img {
	align-self: center;
	grid-column: 4;
	width: 100%;
    }
}

#aod_play_area playable-item a:first-of-type {
    display: none;
}

audio {
    display: block;
    width: 100%;
}