From 96d428ae8e2061f576014a3a4d3c1066ba8b766e Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 11 Jun 2026 17:54:02 +0100
Subject: [PATCH 1/3] Move AudioLayout to grid

---
 .../src/layouts/AudioLayout.stories.tsx       |   6 +-
 dotcom-rendering/src/layouts/AudioLayout.tsx  | 757 ------------------
 dotcom-rendering/src/layouts/DecideLayout.tsx |   5 +-
 .../src/layouts/StandardLayout.tsx            |  82 +-
 4 files changed, 67 insertions(+), 783 deletions(-)
 delete mode 100644 dotcom-rendering/src/layouts/AudioLayout.tsx

diff --git a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx b/dotcom-rendering/src/layouts/AudioLayout.stories.tsx
index 9227a2e43d9..9b13f7271c8 100644
--- a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx
+++ b/dotcom-rendering/src/layouts/AudioLayout.stories.tsx
@@ -5,12 +5,12 @@ import { ArticleDesign } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
 import { extractNAV } from '../model/extract-nav';
 import { enhanceArticleType } from '../types/article';
-import { AudioLayout } from './AudioLayout';
+import { StandardLayout } from './StandardLayout';
 
 const meta = {
 	title: 'Layouts/Audio',
-	component: AudioLayout,
-} satisfies Meta<typeof AudioLayout>;
+	component: StandardLayout,
+} satisfies Meta<typeof StandardLayout>;
 
 export default meta;
 
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
deleted file mode 100644
index 94aebed7489..00000000000
--- a/dotcom-rendering/src/layouts/AudioLayout.tsx
+++ /dev/null
@@ -1,757 +0,0 @@
-import { css } from '@emotion/react';
-import {
-	from,
-	palette as sourcePalette,
-	space,
-	until,
-} from '@guardian/source/foundations';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import { AdPortals } from '../components/AdPortals.island';
-import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
-import { AppsAudioPlayer } from '../components/AppsAudioPlayer.island';
-import { AppsFooter } from '../components/AppsFooter.island';
-import { ArticleBody } from '../components/ArticleBody';
-import { ArticleContainer } from '../components/ArticleContainer';
-import { ArticleHeadline } from '../components/ArticleHeadline';
-import { ArticleMetaApps } from '../components/ArticleMeta.apps';
-import { ArticleMeta } from '../components/ArticleMeta.web';
-import { ArticleTitle } from '../components/ArticleTitle';
-import { AudioPlayerWrapper } from '../components/AudioPlayerWrapper.island';
-import { Border } from '../components/Border';
-import { Carousel } from '../components/Carousel.island';
-import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
-import { DiscussionLayout } from '../components/DiscussionLayout';
-import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
-import { HeaderAdSlot } from '../components/HeaderAdSlot';
-import { Island } from '../components/Island';
-import { LabsHeader } from '../components/LabsHeader';
-import { formatAudioDuration } from '../components/ListenToArticle.island';
-import { Masthead } from '../components/Masthead/Masthead';
-import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
-import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
-import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island';
-import { OnwardsUpper } from '../components/OnwardsUpper.island';
-import { RightColumn } from '../components/RightColumn';
-import { Section } from '../components/Section';
-import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
-import { Standfirst } from '../components/Standfirst';
-import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
-import { SubMeta } from '../components/SubMeta';
-import { SubNav } from '../components/SubNav.island';
-import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
-import { getAudioData } from '../lib/audio-data';
-import { canRenderAds } from '../lib/canRenderAds';
-import { getContributionsServiceUrl } from '../lib/contributions';
-import { decideStoryPackageTrails } from '../lib/decideTrail';
-import { parse } from '../lib/slot-machine-flags';
-import { worldCupTagId } from '../lib/worldCup2026';
-import type { NavType } from '../model/extract-nav';
-import { palette as themePalette } from '../palette';
-import type { ArticleDeprecated } from '../types/article';
-import type { RenderingTarget } from '../types/renderingTarget';
-import { BannerWrapper, Stuck } from './lib/stickiness';
-
-const AudioGrid = ({ children }: { children: React.ReactNode }) => (
-	<div
-		css={css`
-			/* IE Fallback */
-			display: flex;
-			flex-direction: column;
-			${until.leftCol} {
-				margin-left: 0;
-			}
-			${from.leftCol} {
-				margin-left: 151px;
-			}
-			${from.wide} {
-				margin-left: 230px;
-			}
-
-			@supports (display: grid) {
-				display: grid;
-				width: 100%;
-				margin-left: 0;
-				grid-column-gap: 0;
-				grid-template-columns: 100%; /* Main content */
-				grid-template-areas:
-					'title'
-					'headline'
-					'disclaimer'
-					'media'
-					'standfirst'
-					'meta'
-					'body';
-				${from.desktop} {
-					grid-template-columns: 620px 300px;
-					grid-template-areas:
-						'title         .'
-						'headline      .'
-						'disclaimer    right-column'
-						'media         right-column'
-						'standfirst     right-column'
-						'meta          right-column'
-						'body          right-column'
-						'.             right-column';
-				}
-				${from.leftCol} {
-					grid-column-gap: 10px;
-					grid-template-columns: 140px 1px 620px 300px;
-					grid-template-areas:
-						'title  border  headline     .'
-						'.      border  disclaimer   right-column'
-						'meta   border  media        right-column'
-						'meta   border  standfirst    right-column'
-						'meta   border  body         right-column'
-						'.      border  .            right-column';
-				}
-				${from.wide} {
-					grid-template-columns: 219px 1px 620px 80px 300px;
-					grid-template-areas:
-						'title  border  headline   .     .'
-						'.  	border  disclaimer .     right-column'
-						'meta   border  media      media right-column'
-						'meta   border  standfirst  .     right-column'
-						'meta   border  body       .     right-column'
-						'.      border  .          .     right-column';
-				}
-			}
-		`}
-	>
-		{children}
-	</div>
-);
-
-const maxWidth = css`
-	${from.desktop} {
-		max-width: 620px;
-	}
-`;
-
-interface Props {
-	article: ArticleDeprecated;
-	format: ArticleFormat;
-	renderingTarget: RenderingTarget;
-	serverTime?: number;
-}
-
-interface WebProps extends Props {
-	NAV: NavType;
-	renderingTarget: 'Web';
-}
-
-interface AppProps extends Props {
-	renderingTarget: 'Apps';
-}
-
-export const AudioLayout = (props: WebProps | AppProps) => {
-	const { article, format, renderingTarget, serverTime } = props;
-	const isWeb = renderingTarget === 'Web';
-	const isApps = renderingTarget === 'Apps';
-	const audioData = getAudioData(article.mainMediaElements);
-
-	const {
-		config: { isPaidContent, host, hasSurveyAd },
-		editionId,
-	} = article;
-
-	const showBodyEndSlot = parse(article.slotMachineFlags ?? '').showBodyEnd;
-
-	const showComments = article.isCommentable && !isPaidContent;
-
-	const { branding } = article.commercialProperties[article.editionId];
-
-	const contributionsServiceUrl = getContributionsServiceUrl(article);
-
-	const isLabs = format.theme === ArticleSpecial.Labs;
-
-	const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId);
-
-	const renderAds = canRenderAds(article);
-
-	return (
-		<>
-			{isWeb && (
-				<div data-print-layout="hide" id="bannerandheader">
-					{renderAds && (
-						<Stuck>
-							<Section
-								fullWidth={true}
-								showTopBorder={false}
-								showSideBorders={false}
-								padSides={false}
-								shouldCenter={false}
-							>
-								<HeaderAdSlot />
-							</Section>
-						</Stuck>
-					)}
-					<Masthead
-						nav={props.NAV}
-						editionId={article.editionId}
-						idUrl={article.config.idUrl}
-						mmaUrl={article.config.mmaUrl}
-						discussionApiUrl={article.config.discussionApiUrl}
-						idApiUrl={article.config.idApiUrl}
-						contributionsServiceUrl={contributionsServiceUrl}
-						showSubNav={!isLabs && !isWorldCup2026}
-						showSlimNav={false}
-						hasPageSkinContentSelfConstrain={true}
-						pageId={article.pageId}
-						sectionId={article.config.section}
-						tagIds={article.tags.map((tag) => tag.id)}
-						contentType={article.contentType}
-					/>
-				</div>
-			)}
-
-			{isWeb && format.theme === ArticleSpecial.Labs && (
-				<Stuck zIndex="subNavBanner">
-					<Section
-						fullWidth={true}
-						showTopBorder={false}
-						backgroundColour={sourcePalette.labs[400]}
-						borderColour={sourcePalette.neutral[60]}
-						sectionId="labs-header"
-						element="aside"
-					>
-						<LabsHeader editionId={editionId} />
-					</Section>
-				</Stuck>
-			)}
-
-			{isWeb && renderAds && hasSurveyAd && (
-				<AdSlot position="survey" display={format.display} />
-			)}
-
-			<main data-layout="AudioLayout">
-				{isApps && renderAds && (
-					<Island priority="critical">
-						<AdPortals />
-					</Island>
-				)}
-				<DirectoryPageNavIsland
-					pageTags={article.tags}
-					pageId={article.pageId}
-				/>
-
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					borderColour={themePalette('--article-border')}
-					innerBackgroundColour={themePalette(
-						'--article-inner-background',
-					)}
-					element="article"
-				>
-					<AudioGrid>
-						<GridItem area="title" element="aside">
-							<ArticleTitle
-								format={format}
-								tags={article.tags}
-								sectionLabel={article.sectionLabel}
-								sectionUrl={article.sectionUrl}
-								guardianBaseURL={article.guardianBaseURL}
-							/>
-						</GridItem>
-						<GridItem area="border">
-							{format.theme === ArticleSpecial.Labs ? (
-								<></>
-							) : (
-								<Border />
-							)}
-						</GridItem>
-						<GridItem area="headline">
-							<div css={maxWidth}>
-								<ArticleHeadline
-									format={format}
-									headlineString={article.headline}
-									tags={article.tags}
-									byline={article.byline}
-									webPublicationDateDeprecated={
-										article.webPublicationDateDeprecated
-									}
-								/>
-							</div>
-						</GridItem>
-						<GridItem area="meta" element="aside">
-							<div css={maxWidth}>
-								{renderingTarget === 'Web' ? (
-									<ArticleMeta
-										branding={branding}
-										format={format}
-										pageId={article.pageId}
-										webTitle={article.webTitle}
-										byline={article.byline}
-										source={article.config.source}
-										tags={article.tags}
-										primaryDateline={
-											article.webPublicationDateDisplay
-										}
-										secondaryDateline={
-											article.webPublicationSecondaryDateDisplay
-										}
-										isCommentable={article.isCommentable}
-										discussionApiUrl={
-											article.config.discussionApiUrl
-										}
-										shortUrlId={article.config.shortUrlId}
-										mainMediaElements={
-											article.mainMediaElements
-										}
-									/>
-								) : (
-									<ArticleMetaApps
-										branding={branding}
-										format={format}
-										pageId={article.pageId}
-										byline={article.byline}
-										tags={article.tags}
-										primaryDateline={
-											article.webPublicationDateDisplay
-										}
-										secondaryDateline={
-											article.webPublicationSecondaryDateDisplay
-										}
-										isCommentable={article.isCommentable}
-										discussionApiUrl={
-											article.config.discussionApiUrl
-										}
-										shortUrlId={article.config.shortUrlId}
-										mainMediaElements={
-											article.mainMediaElements
-										}
-									/>
-								)}
-								{!!article.affiliateLinksDisclaimer && (
-									<AffiliateDisclaimer />
-								)}
-							</div>
-						</GridItem>
-						<GridItem area="media">
-							{isWeb && audioData && (
-								<Island
-									priority="critical"
-									defer={{ until: 'visible' }}
-								>
-									<AudioPlayerWrapper
-										contentIsNotSensitive={
-											!article.config.isSensitive
-										}
-										isAcastEnabled={
-											!!article.config.switches.acast
-										}
-										src={audioData.audioDownloadUrl}
-										mediaId={audioData.mediaId}
-									/>
-								</Island>
-							)}
-							{isApps && audioData && (
-								<Island
-									priority="critical"
-									defer={{ until: 'visible' }}
-								>
-									<AppsAudioPlayer
-										audioDuration={
-											typeof audioData.durationSeconds ===
-											'number'
-												? formatAudioDuration(
-														audioData.durationSeconds,
-													)
-												: undefined
-										}
-									/>
-								</Island>
-							)}
-							<StraightLines
-								cssOverrides={css`
-									display: block;
-									margin-bottom: ${space[2]}px;
-								`}
-								count={1}
-								color={themePalette('--straight-lines')}
-							/>
-						</GridItem>
-						<GridItem area="standfirst">
-							<Standfirst
-								format={format}
-								standfirst={article.standfirst}
-							/>
-						</GridItem>
-						<GridItem area="body">
-							<ArticleContainer format={format}>
-								<ArticleBody
-									format={format}
-									blocks={article.blocks}
-									pinnedPost={article.pinnedPost}
-									host={host}
-									pageId={article.pageId}
-									webTitle={article.webTitle}
-									ajaxUrl={article.config.ajaxUrl}
-									switches={article.config.switches}
-									isSensitive={article.config.isSensitive}
-									isAdFreeUser={article.isAdFreeUser}
-									sectionId={article.config.section}
-									shouldHideReaderRevenue={
-										article.shouldHideReaderRevenue
-									}
-									tags={article.tags}
-									isPaidContent={
-										!!article.config.isPaidContent
-									}
-									contributionsServiceUrl={
-										contributionsServiceUrl
-									}
-									contentType={article.contentType}
-									isPreview={article.config.isPreview}
-									idUrl={article.config.idUrl ?? ''}
-									isDev={!!article.config.isDev}
-									keywordIds={article.config.keywordIds}
-									abTests={article.config.abTests}
-									tableOfContents={article.tableOfContents}
-									lang={article.lang}
-									isRightToLeftLang={
-										article.isRightToLeftLang
-									}
-									editionId={article.editionId}
-									shouldHideAds={article.shouldHideAds}
-									idApiUrl={article.config.idApiUrl}
-								/>
-								{isWeb && showBodyEndSlot && (
-									<Island
-										priority="feature"
-										defer={{ until: 'visible' }}
-									>
-										<SlotBodyEnd
-											contentType={article.contentType}
-											contributionsServiceUrl={
-												contributionsServiceUrl
-											}
-											idApiUrl={article.config.idApiUrl}
-											isMinuteArticle={
-												article.pageType.isMinuteArticle
-											}
-											isPaidContent={
-												article.pageType.isPaidContent
-											}
-											pageId={article.pageId}
-											sectionId={article.config.section}
-											shouldHideReaderRevenue={
-												article.shouldHideReaderRevenue
-											}
-											tags={article.tags}
-											renderAds={renderAds}
-											isLabs={isLabs}
-											articleEndSlot={
-												!!article.config.switches
-													.articleEndSlot
-											}
-											isSensitive={
-												article.config.isSensitive
-											}
-										/>
-									</Island>
-								)}
-								<StraightLines
-									data-print-layout="hide"
-									count={4}
-									cssOverrides={css`
-										display: block;
-									`}
-									color={themePalette('--straight-lines')}
-								/>
-								<SubMeta
-									format={format}
-									subMetaKeywordLinks={
-										article.subMetaKeywordLinks
-									}
-									subMetaSectionLinks={
-										article.subMetaSectionLinks
-									}
-									pageId={article.pageId}
-									webUrl={article.webURL}
-									webTitle={article.webTitle}
-									showBottomSocialButtons={
-										article.showBottomSocialButtons
-									}
-								/>
-							</ArticleContainer>
-						</GridItem>
-						<GridItem area="right-column">
-							{isWeb && (
-								<div
-									css={css`
-										padding-top: 0;
-										height: 100%;
-										${from.desktop} {
-											/* above 980 */
-											margin-left: 20px;
-											margin-right: -20px;
-											padding-bottom: 41px;
-										}
-										${from.leftCol} {
-											/* above 1140 */
-											margin-left: 0;
-											margin-right: 0;
-										}
-									`}
-								>
-									<RightColumn>
-										<Island
-											priority="feature"
-											defer={{
-												until: 'visible',
-												// Provide a much higher value for the top margin for the intersection observer
-												// This is because the most viewed would otherwise only be lazy loaded when the
-												// bottom of the container intersects with the viewport
-												rootMargin: '700px 100px',
-											}}
-										>
-											<MostViewedRightWithAd
-												format={format}
-												isPaidContent={
-													article.pageType
-														.isPaidContent
-												}
-												renderAds={renderAds}
-												shouldHideReaderRevenue={
-													!!article.config
-														.shouldHideReaderRevenue
-												}
-												shouldHideMostViewed={true}
-											/>
-										</Island>
-									</RightColumn>
-								</div>
-							)}
-						</GridItem>
-					</AudioGrid>
-				</Section>
-
-				{isWeb && renderAds && !isLabs && (
-					<Section
-						fullWidth={true}
-						padSides={false}
-						showTopBorder={false}
-						showSideBorders={false}
-						backgroundColour={themePalette('--ad-background')}
-						element="aside"
-					>
-						<AdSlot
-							data-print-layout="hide"
-							position="merchandising-high"
-							display={format.display}
-						/>
-					</Section>
-				)}
-
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={decideStoryPackageTrails(
-									article.storyPackage.trails,
-									article.webURL,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-								serverTime={serverTime}
-								renderingTarget={renderingTarget}
-							/>
-						</Island>
-					</Section>
-				)}
-
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-						serverTime={serverTime}
-						renderingTarget={renderingTarget}
-						webURL={article.webURL}
-					/>
-				</Island>
-				{isWeb && showComments && (
-					<Section
-						fullWidth={true}
-						sectionId="comments"
-						element="section"
-						backgroundColour={themePalette(
-							'--discussion-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--discussion-text')}
-					>
-						<DiscussionLayout
-							discussionApiUrl={article.config.discussionApiUrl}
-							shortUrlId={article.config.shortUrlId}
-							format={format}
-							discussionD2Uid={article.config.discussionD2Uid}
-							discussionApiClientHeader={
-								article.config.discussionApiClientHeader
-							}
-							enableDiscussionSwitch={
-								!!article.config.switches.enableDiscussionSwitch
-							}
-							isAdFreeUser={article.isAdFreeUser}
-							shouldHideAds={article.shouldHideAds}
-							idApiUrl={article.config.idApiUrl}
-						/>
-					</Section>
-				)}
-
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
-
-				{isWeb && renderAds && !isLabs && (
-					<Section
-						fullWidth={true}
-						padSides={false}
-						showTopBorder={false}
-						showSideBorders={false}
-						backgroundColour={themePalette('--ad-background')}
-						element="aside"
-					>
-						<AdSlot
-							position="merchandising"
-							display={format.display}
-						/>
-					</Section>
-				)}
-			</main>
-
-			{isWeb && (
-				<>
-					{props.NAV.subNavSections && (
-						<Section
-							fullWidth={true}
-							padSides={false}
-							element="aside"
-						>
-							<Island
-								priority="enhancement"
-								defer={{ until: 'visible' }}
-							>
-								<SubNav
-									subNavSections={props.NAV.subNavSections}
-									currentNavLink={props.NAV.currentNavLink}
-									position="footer"
-								/>
-							</Island>
-						</Section>
-					)}
-					<Section
-						fullWidth={true}
-						padSides={false}
-						backgroundColour={sourcePalette.brand[400]}
-						borderColour={sourcePalette.brand[600]}
-						showSideBorders={false}
-						element="footer"
-					>
-						<Footer
-							pageFooter={article.pageFooter}
-							selectedPillar={props.NAV.selectedPillar}
-							pillars={props.NAV.pillars}
-							urls={article.nav.readerRevenueLinks.footer}
-							editionId={article.editionId}
-						/>
-					</Section>
-					<BannerWrapper data-print-layout="hide">
-						<Island priority="feature" defer={{ until: 'idle' }}>
-							<StickyBottomBanner
-								contentType={article.contentType}
-								contributionsServiceUrl={
-									contributionsServiceUrl
-								}
-								idApiUrl={article.config.idApiUrl}
-								isMinuteArticle={
-									article.pageType.isMinuteArticle
-								}
-								isPaidContent={article.pageType.isPaidContent}
-								isPreview={!!article.config.isPreview}
-								isSensitive={article.config.isSensitive}
-								pageId={article.pageId}
-								sectionId={article.config.section}
-								shouldHideReaderRevenue={
-									article.shouldHideReaderRevenue
-								}
-								remoteBannerSwitch={
-									!!article.config.switches.remoteBanner
-								}
-								tags={article.tags}
-								host={host}
-							/>
-						</Island>
-					</BannerWrapper>
-					{renderAds && (
-						<MobileStickyContainer data-print-layout="hide" />
-					)}
-				</>
-			)}
-			{isApps && (
-				<div
-					css={{
-						backgroundColor: themePalette(
-							'--apps-footer-background',
-						),
-					}}
-				>
-					<Island priority="critical">
-						<AppsFooter design={format.design} />
-					</Island>
-				</div>
-			)}
-		</>
-	);
-};
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index b6dd7f4a27c..7724a3dbd64 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -2,7 +2,6 @@ import { ArticleDesign, ArticleDisplay } from '../lib/articleFormat';
 import type { NavType } from '../model/extract-nav';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { AudioLayout } from './AudioLayout';
 import { CommentLayout } from './CommentLayout';
 import { CrosswordLayout } from './CrosswordLayout';
 import { FullPageInteractiveLayout } from './FullPageInteractiveLayout';
@@ -191,7 +190,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 					);
 				case ArticleDesign.Audio:
 					return (
-						<AudioLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
@@ -353,7 +352,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 					);
 				case ArticleDesign.Audio:
 					return (
-						<AudioLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							NAV={NAV}
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 8d24f6d3b8f..4ef12ebfdde 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -11,6 +11,7 @@ import { StraightLines } from '@guardian/source-development-kitchen/react-compon
 import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
 import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
+import { AppsAudioPlayer } from '../components/AppsAudioPlayer.island';
 import { AppsEpic } from '../components/AppsEpic.island';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
@@ -19,6 +20,7 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
+import { AudioPlayerWrapper } from '../components/AudioPlayerWrapper.island';
 import { Carousel } from '../components/Carousel.island';
 import { CricketMatchHeaderWrapper } from '../components/CricketMatchHeaderWrapper.island';
 import { DecideLines } from '../components/DecideLines';
@@ -31,7 +33,10 @@ import { GuardianLabsLines } from '../components/GuardianLabsLines';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
-import { ListenToArticle } from '../components/ListenToArticle.island';
+import {
+	formatAudioDuration,
+	ListenToArticle,
+} from '../components/ListenToArticle.island';
 import { MainMedia } from '../components/MainMedia';
 import { Masthead } from '../components/Masthead/Masthead';
 import { MatchHeaderFallback } from '../components/MatchHeaderFallback';
@@ -52,6 +57,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getAudioData } from '../lib/audio-data';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
@@ -181,6 +187,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = canRenderAds(article);
 
+	const audioData = getAudioData(article.mainMediaElements);
+
 	const layoutType: LayoutType = isMedia
 		? 'media'
 		: isShowcase
@@ -283,25 +291,59 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						]}
 					>
 						<GridItem area="media" layoutType={layoutType}>
-							<MainMedia
-								format={format}
-								elements={article.mainMediaElements}
-								host={host}
-								pageId={article.pageId}
-								webTitle={article.webTitle}
-								ajaxUrl={article.config.ajaxUrl}
-								abTests={article.config.abTests}
-								switches={article.config.switches}
-								isAdFreeUser={article.isAdFreeUser}
-								isSensitive={article.config.isSensitive}
-								editionId={article.editionId}
-								hideCaption={isMedia}
-								shouldHideAds={article.shouldHideAds}
-								contentType={article.contentType}
-								contentLayout={`${
-									ArticleDisplay[format.display]
-								}Layout`}
-							/>
+							{audioData ? (
+								<>
+									{isApps ? (
+										<AppsAudioPlayer
+											audioDuration={
+												typeof audioData.durationSeconds ===
+												'number'
+													? formatAudioDuration(
+															audioData.durationSeconds,
+														)
+													: undefined
+											}
+										/>
+									) : (
+										<AudioPlayerWrapper
+											contentIsNotSensitive={
+												!article.config.isSensitive
+											}
+											isAcastEnabled={
+												!!article.config.switches.acast
+											}
+											src={audioData.audioDownloadUrl}
+											mediaId={audioData.mediaId}
+										/>
+									)}
+									<StraightLines
+										cssOverrides={css`
+											display: block;
+											margin-bottom: ${space[2]}px;
+										`}
+										count={1}
+										color={themePalette('--straight-lines')}
+									/>
+								</>
+							) : (
+								<MainMedia
+									format={format}
+									elements={article.mainMediaElements}
+									host={host}
+									pageId={article.pageId}
+									webTitle={article.webTitle}
+									ajaxUrl={article.config.ajaxUrl}
+									abTests={article.config.abTests}
+									switches={article.config.switches}
+									isAdFreeUser={article.isAdFreeUser}
+									isSensitive={article.config.isSensitive}
+									editionId={article.editionId}
+									hideCaption={isMedia}
+									shouldHideAds={article.shouldHideAds}
+									contentType={article.contentType}
+									contentLayout="StandardLayout"
+								/>
+							)}
 						</GridItem>
 						<GridItem
 							area="title"

From a9b004da4a08d10ea729bb6f408a047a241755a0 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 23 Jun 2026 14:27:33 +0100
Subject: [PATCH 2/3] Create AudioPlayer component

---
 .../src/components/AudioPlayer.tsx            | 52 +++++++++++++++++++
 .../src/layouts/StandardLayout.tsx            | 49 ++++-------------
 2 files changed, 62 insertions(+), 39 deletions(-)
 create mode 100644 dotcom-rendering/src/components/AudioPlayer.tsx

diff --git a/dotcom-rendering/src/components/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer.tsx
new file mode 100644
index 00000000000..ddb489b8f96
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer.tsx
@@ -0,0 +1,52 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import { palette } from '../palette';
+import { AppsAudioPlayer } from './AppsAudioPlayer.island';
+import { AudioPlayerWrapper } from './AudioPlayerWrapper.island';
+import { formatAudioDuration } from './ListenToArticle.island';
+
+export const AudioPlayer = ({
+	audioData,
+	isSensitive,
+	isAcastEnabled,
+	isApps,
+}: {
+	audioData: {
+		audioDownloadUrl: string;
+		durationSeconds?: number;
+		mediaId: string;
+	};
+	isSensitive: boolean;
+	isAcastEnabled: boolean;
+	isApps: boolean;
+}) => {
+	return (
+		<>
+			{isApps ? (
+				<AppsAudioPlayer
+					audioDuration={
+						typeof audioData.durationSeconds === 'number'
+							? formatAudioDuration(audioData.durationSeconds)
+							: undefined
+					}
+				/>
+			) : (
+				<AudioPlayerWrapper
+					contentIsNotSensitive={!isSensitive}
+					isAcastEnabled={isAcastEnabled}
+					src={audioData.audioDownloadUrl}
+					mediaId={audioData.mediaId}
+				/>
+			)}
+			<StraightLines
+				cssOverrides={css`
+					display: block;
+					margin-bottom: ${space[2]}px;
+				`}
+				count={1}
+				color={palette('--straight-lines')}
+			/>
+		</>
+	);
+};
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 4ef12ebfdde..b8c6c3ed054 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -11,7 +11,6 @@ import { StraightLines } from '@guardian/source-development-kitchen/react-compon
 import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
 import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
-import { AppsAudioPlayer } from '../components/AppsAudioPlayer.island';
 import { AppsEpic } from '../components/AppsEpic.island';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
@@ -20,7 +19,7 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
-import { AudioPlayerWrapper } from '../components/AudioPlayerWrapper.island';
+import { AudioPlayer } from '../components/AudioPlayer';
 import { Carousel } from '../components/Carousel.island';
 import { CricketMatchHeaderWrapper } from '../components/CricketMatchHeaderWrapper.island';
 import { DecideLines } from '../components/DecideLines';
@@ -33,10 +32,7 @@ import { GuardianLabsLines } from '../components/GuardianLabsLines';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
-import {
-	formatAudioDuration,
-	ListenToArticle,
-} from '../components/ListenToArticle.island';
+import { ListenToArticle } from '../components/ListenToArticle.island';
 import { MainMedia } from '../components/MainMedia';
 import { Masthead } from '../components/Masthead/Masthead';
 import { MatchHeaderFallback } from '../components/MatchHeaderFallback';
@@ -292,39 +288,14 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					>
 						<GridItem area="media" layoutType={layoutType}>
 							{audioData ? (
-								<>
-									{isApps ? (
-										<AppsAudioPlayer
-											audioDuration={
-												typeof audioData.durationSeconds ===
-												'number'
-													? formatAudioDuration(
-															audioData.durationSeconds,
-														)
-													: undefined
-											}
-										/>
-									) : (
-										<AudioPlayerWrapper
-											contentIsNotSensitive={
-												!article.config.isSensitive
-											}
-											isAcastEnabled={
-												!!article.config.switches.acast
-											}
-											src={audioData.audioDownloadUrl}
-											mediaId={audioData.mediaId}
-										/>
-									)}
-									<StraightLines
-										cssOverrides={css`
-											display: block;
-											margin-bottom: ${space[2]}px;
-										`}
-										count={1}
-										color={themePalette('--straight-lines')}
-									/>
-								</>
+								<AudioPlayer
+									audioData={audioData}
+									isSensitive={article.config.isSensitive}
+									isAcastEnabled={
+										!!article.config.switches.acast
+									}
+									isApps={isApps}
+								/>
 							) : (
 								<MainMedia
 									format={format}

From 546b54a7fb96e21cd0c6ba88488b3eaa8520d2e7 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 23 Jun 2026 15:06:13 +0100
Subject: [PATCH 3/3] Conditionally render strech lines, turn of most viewed

---
 .../src/layouts/StandardLayout.tsx            | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index b8c6c3ed054..d90c9546257 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -167,8 +167,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 		format.design === ArticleDesign.Video ||
 		format.design === ArticleDesign.Audio;
 
-	const isVideo = format.design === ArticleDesign.Video;
-
 	const isShowcase = format.display === ArticleDisplay.Showcase;
 
 	const showComments = article.isCommentable && !isPaidContent;
@@ -312,7 +310,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									hideCaption={isMedia}
 									shouldHideAds={article.shouldHideAds}
 									contentType={article.contentType}
-									contentLayout="StandardLayout"
+									contentLayout={`${
+										ArticleDisplay[format.display]
+									}Layout`}
 								/>
 							)}
 						</GridItem>
@@ -353,18 +353,22 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							layoutType={layoutType}
 							element="aside"
 						>
-							<div css={stretchLines}>
-								{isWeb &&
-								format.theme === ArticleSpecial.Labs &&
-								format.design !== ArticleDesign.Video ? (
-									<GuardianLabsLines />
-								) : (
-									<DecideLines
-										format={format}
-										color={themePalette('--article-border')}
-									/>
-								)}
-							</div>
+							{!audioData && (
+								<div css={stretchLines}>
+									{isWeb &&
+									format.theme === ArticleSpecial.Labs &&
+									format.design !== ArticleDesign.Video ? (
+										<GuardianLabsLines />
+									) : (
+										<DecideLines
+											format={format}
+											color={themePalette(
+												'--article-border',
+											)}
+										/>
+									)}
+								</div>
+							)}
 							{isApps ? (
 								<>
 									<Hide from="leftCol">
@@ -465,7 +469,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
 								<Hide until="leftCol">
-									{!isVideo && (
+									{!isMedia && (
 										<div
 											css={css`
 												margin-top: ${space[2]}px;
@@ -629,6 +633,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 											!!article.config
 												.shouldHideReaderRevenue
 										}
+										shouldHideMostViewed={!!audioData}
 									/>
 								</Island>
 							</Hide>