import{p as R,f as p,a as o,c as G}from"./props-b4vEeO_8.js";import{J as w,G as ie,B as ae,F as l,I as u,C as m,k as s,N as ve,a3 as se,a4 as le,D as N}from"./runtime-C3rQLW--.js";import{i as ue}from"./lifecycle-F2p_Qkk3.js";import{c as he,d as xe}from"./create-runtime-stories-7AWWVphH.js";import{s as Y}from"./snippet-C5kbqVpq.js";import{i as v}from"./svelte-component-C8Ginrj8.js";import{a as me}from"./attributes-Cg6aLqN3.js";import{s as b}from"./style-DvJ3IcV1.js";import{B as z}from"./Block-D3Ui8rd-.js";import{G as Q}from"./GraphicBlock-uLJTqaY1.js";import{P as fe}from"./PaddingReset-_TGvg1_B.js";import{H as ee}from"./Headline-C-tkYFZ6.js";import{B as ye}from"./Byline-BhU2Zjcl.js";import{F as we}from"./FeaturePhoto-CKELMwR8.js";import{S as O}from"./SiteHeader-D-9D6sLa.js";import{V as be}from"./Video-yHzv19g_.js";import{b as oe}from"./size-DMdj3-I9.js";var ke=p('<div class="background-image svelte-ecckzc"></div>'),Ae=p('<!> <div class="graphic-container"><!></div>',1),_e=p('<!> <div class="graphic-container"><!></div>',1),Te=p('<div><div><!> <!></div> <div class="hero-byline fmb-6 svelte-ecckzc"><!></div></div>');function D($,e){ae(e,!0);let f=R(e,"stacked",3,!0),A=R(e,"class",3,""),P=R(e,"hedSize",3,"normal"),_=R(e,"hedAlign",3,"center"),S=R(e,"hedWidth",3,"normal"),T=R(e,"authors",19,()=>[]),I=R(e,"width",3,"widest"),c=R(e,"embedded",3,!1);var y=Te(),r=u(y);let d;var a=u(r);{var i=h=>{z(h,{width:"fluid",class:"hero-headline background-hero fmt-0",children:(H,q)=>{var V=Ae(),C=m(V);ee(C,{get class(){return`${A()??""} !text-${_()??""}`},get width(){return S()},get section(){return e.section},get hedSize(){return P()},get hed(){return e.hed},get dek(){return e.dek}});var U=l(C,2),j=u(U);{var M=x=>{var k=G(),B=m(k);Y(B,()=>e.children),o(x,k)},J=x=>{var k=G(),B=m(k);{var F=E=>{Q(E,{get width(){return I()},role:"img",class:"my-0",textWidth:"normal",get notes(){return e.notes},get ariaDescription(){return e.ariaDescription},children:(X,vt)=>{var Z=ke();w(()=>b(Z,`background-image: url(${e.img??""})`)),o(X,Z)},$$slots:{default:!0}})};v(B,E=>{e.img&&E(F)},!0)}o(x,k)};v(j,x=>{e.children?x(M):x(J,!1)})}o(H,V)},$$slots:{default:!0}})};v(a,h=>{f()&&h(i)})}var t=l(a,2);{var n=h=>{z(h,{width:"fluid",class:"hero-headline inline-hero",children:(H,q)=>{var V=_e(),C=m(V);fe(C,{containerIsFluid:!0,children:(x,k)=>{ee(x,{get class(){return`${A()??""} !text-${_()??""}`},get width(){return S()},get section(){return e.section},get hedSize(){return P()},get hed(){return e.hed},get dek(){return e.dek}})},$$slots:{default:!0}});var U=l(C,2),j=u(U);{var M=x=>{var k=G(),B=m(k);Y(B,()=>e.children),o(x,k)},J=x=>{var k=G(),B=m(k);{var F=E=>{{let X=ve(()=>e.ariaDescription||"");we(E,{get width(){return I()},class:"my-0",get src(){return e.img},get caption(){return e.notes},get altText(){return s(X)}})}};v(B,E=>{e.img&&E(F)},!0)}o(x,k)};v(j,x=>{e.children?x(M):x(J,!1)})}o(H,V)},$$slots:{default:!0}})};v(t,h=>{f()===!1&&h(n)})}var g=l(r,2),K=u(g);{var ge=h=>{var H=G(),q=m(H);Y(q,()=>e.byline),o(h,H)},ce=h=>{var H=G(),q=m(H);{var V=C=>{ye(C,{get authors(){return T()},get publishTime(){return e.publishTime},get updateTime(){return e.updateTime},get getAuthorPage(){return e.getAuthorPage},get published(){return e.published},get updated(){return e.updated},align:"auto"})};v(q,C=>{(T().length>0||e.publishTime)&&C(V)},!0)}o(h,H)};v(K,h=>{e.byline?h(ge):h(ce,!1)})}w(h=>{b(y,`--heroHeight: ${c()?"850px":"100svh"}; display:contents;`),d=me(r,1,"hero-wrapper fmb-6 svelte-ecckzc",null,d,h)},[()=>({embedded:c()})]),o($,y),ie()}D.__docgen={data:[{name:"hed",visibility:"public",description:"Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"union",type:[{kind:"type",type:"string",text:"string"},{kind:"function",text:"Snippet<[]>"}],text:"string | Snippet<[]>"},static:!1,readonly:!1},{name:"children",visibility:"public",description:"Optional snippet for a custom hero graphic, photo, etc.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"stacked",visibility:"public",description:"Set to `false` for inline hero media",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"},{name:"img",visibility:"public",description:"Path to the background hero image",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"ariaDescription",visibility:"public",description:"ARIA description, passed in as a markdown string.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"notes",visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"class",visibility:"public",description:"Add classes to the block tag to target it with custom CSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"hedSize",visibility:"public",description:"Headline size: small, normal, big, bigger, biggest",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"small",text:'"small"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"big",text:'"big"'},{kind:"const",type:"string",value:"bigger",text:'"bigger"'},{kind:"const",type:"string",value:"biggest",text:'"biggest"'}],text:'"small" | "normal" | "big" | "bigger" | "biggest"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"hedAlign",visibility:"public",description:"Headline horizontal alignment: left, center, right",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"left",text:'"left"'},{kind:"const",type:"string",value:"center",text:'"center"'},{kind:"const",type:"string",value:"right",text:'"right"'}],text:'"left" | "center" | "right"'},static:!1,readonly:!1,defaultValue:'"center"'},{name:"hedWidth",visibility:"public",description:"Width of the headline: normal, wide, wider, widest",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'}],text:'"normal" | "wide" | "wider" | "widest"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"dek",visibility:"public",description:"Dek, parsed as a markdown string OR as a custom snippet.",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"type",type:"string",text:"string"},{kind:"function",text:"Snippet<[]>"}],text:"string | Snippet<[]>"},static:!1,readonly:!1},{name:"section",visibility:"public",description:"Section title",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"authors",visibility:"public",description:"Array of author names, which will be slugified to create links to Reuters author pages",keywords:[],kind:"let",type:{kind:"type",type:"array",text:"string[]"},static:!1,readonly:!1,defaultValue:"[]"},{name:"publishTime",visibility:"public",description:"Publish time as a datetime string.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"updateTime",visibility:"public",description:"Update time as a datetime string.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"width",visibility:"public",description:"Width of the hero graphic: normal, wide, wider, widest",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'}],text:'"normal" | "wide" | "wider" | "widest"'},static:!1,readonly:!1,defaultValue:'"widest"'},{name:"embedded",visibility:"public",description:"Set to true for embeds.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"getAuthorPage",visibility:"public",description:"Custom function that returns an author page URL.",keywords:[],kind:"let",type:{kind:"function",text:"(author: string) => string"},static:!1,readonly:!1},{name:"byline",visibility:"public",description:"Optional snippet for a custom byline.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"published",visibility:"public",description:"Optional snippet for a custom published dateline.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"updated",visibility:"public",description:"Optional snippet for a custom updated dateline.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1}],name:"HeroHeadline.svelte"};const te=""+new URL("polar-DgpYaCWG.jpg",import.meta.url).href,Pe=""+new URL("eurovis-WPrXQJ_8.jpeg",import.meta.url).href,Se=""+new URL("CRASH_1-xs-Dbz0bL9L.jpeg",import.meta.url).href,He=""+new URL("CRASH_1-sm-yYc5Zrvl.jpeg",import.meta.url).href,Ce=""+new URL("CRASH_1-md-HofNiiOZ.jpeg",import.meta.url).href,Ie=""+new URL("CRASH_1-lg-C8JZiDcr.jpeg",import.meta.url).href,Re=""+new URL("CRASH_1-xl-BRel9Pbh.jpeg",import.meta.url).href,De=""+new URL("CRASH_1-xl_copy-UpEPShVt.jpeg",import.meta.url).href;var $e=p('<div id="g-CRASH_1-xs" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 93.0303% 0;"></div> <div id="g-CRASH_1-xs-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai0-1" class="g-xs-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai0-2" class="g-xs-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle0 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai0-3" class="g-xs-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"><p class="g-pstyle2 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle2 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai0-4" class="g-xs-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"><p class="g-pstyle2 svelte-12cxoa9">Last known</p> <p class="g-pstyle2 svelte-12cxoa9">location</p></div> <div id="g-ai0-5" class="g-xs-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"><p class="g-pstyle2 svelte-12cxoa9">Crash</p> <p class="g-pstyle2 svelte-12cxoa9">site</p></div></div>'),Ve=p('<div id="g-CRASH_1-sm" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 77.8431% 0;"></div> <div id="g-CRASH_1-sm-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai1-1" class="g-sm-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai1-2" class="g-sm-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle0 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai1-3" class="g-sm-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"><p class="g-pstyle2 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle2 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai1-4" class="g-sm-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"><p class="g-pstyle2 svelte-12cxoa9">Last known</p> <p class="g-pstyle2 svelte-12cxoa9">location</p></div> <div id="g-ai1-5" class="g-sm-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"><p class="g-pstyle2 svelte-12cxoa9">Crash</p> <p class="g-pstyle2 svelte-12cxoa9">site</p></div></div>'),Be=p('<div id="g-CRASH_1-md" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 68.7879% 0;"></div> <div id="g-CRASH_1-md-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai2-1" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai2-2" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"><p class="g-pstyle1 svelte-12cxoa9">2.20 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Slight descent</p></div> <div id="g-ai2-3" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle0 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai2-4" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"><p class="g-pstyle2 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle2 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai2-5" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"><p class="g-pstyle0 svelte-12cxoa9">Last known</p> <p class="g-pstyle0 svelte-12cxoa9">location</p></div> <div id="g-ai2-6" class="g-md-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"><p class="g-pstyle2 svelte-12cxoa9">Approximate</p> <p class="g-pstyle2 svelte-12cxoa9">crash site</p></div></div>'),Ee=p('<div id="g-CRASH_1-lg" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 61.3978% 0;"></div> <div id="g-CRASH_1-lg-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai3-1" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai3-2" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"><p class="g-pstyle1 svelte-12cxoa9">2.20 pm</p> <p class="g-pstyle2 svelte-12cxoa9">Slight descent</p></div> <div id="g-ai3-3" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle2 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle2 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai3-4" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"><p class="g-pstyle3 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle3 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai3-5" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"><p class="g-pstyle2 svelte-12cxoa9">Last known</p> <p class="g-pstyle2 svelte-12cxoa9">location</p></div> <div id="g-ai3-6" class="g-lg-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"><p class="g-pstyle3 svelte-12cxoa9">Approximate</p> <p class="g-pstyle3 svelte-12cxoa9">crash site</p></div></div>'),ze=p('<div id="g-CRASH_1-xl" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 47% 0;"></div> <div id="g-CRASH_1-xl-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai4-1" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai4-2" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"><p class="g-pstyle1 svelte-12cxoa9">2.20 pm</p> <p class="g-pstyle2 svelte-12cxoa9">Slight descent</p></div> <div id="g-ai4-3" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle2 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle2 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai4-4" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"><p class="g-pstyle3 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle3 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai4-5" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"><p class="g-pstyle2 svelte-12cxoa9">Last known</p> <p class="g-pstyle2 svelte-12cxoa9">location</p></div> <div id="g-ai4-6" class="g-xl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"><p class="g-pstyle3 svelte-12cxoa9">Approximate</p> <p class="g-pstyle3 svelte-12cxoa9">crash site</p></div></div>'),Ge=p('<div id="g-CRASH_1-xl_copy" class="g-artboard svelte-12cxoa9" style=""><div style="padding: 0 0 46.8889% 0;"></div> <div id="g-CRASH_1-xl_copy-img" class="g-aiImg svelte-12cxoa9"></div> <div id="g-ai5-1" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"><p class="g-pstyle0 svelte-12cxoa9">Cruising at</p> <p class="g-pstyle0 svelte-12cxoa9">29,100 feet</p></div> <div id="g-ai5-2" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"><p class="g-pstyle1 svelte-12cxoa9">2.20 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Slight descent</p></div> <div id="g-ai5-3" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"><p class="g-pstyle1 svelte-12cxoa9">2.21 pm</p> <p class="g-pstyle0 svelte-12cxoa9">Steep drop from</p> <p class="g-pstyle0 svelte-12cxoa9">27,025 feet</p></div> <div id="g-ai5-4" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"><p class="g-pstyle2 svelte-12cxoa9">Typical path to</p> <p class="g-pstyle2 svelte-12cxoa9">Guangzhou</p></div> <div id="g-ai5-5" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"><p class="g-pstyle0 svelte-12cxoa9">Last known</p> <p class="g-pstyle0 svelte-12cxoa9">location</p></div> <div id="g-ai5-6" class="g-xxl-text g-aiAbs g-aiPointText svelte-12cxoa9" style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"><p class="g-pstyle2 svelte-12cxoa9">Approximate</p> <p class="g-pstyle2 svelte-12cxoa9">crash site</p></div></div>'),Ne=p('<div id="g-CRASH_1-box" class="svelte-12cxoa9"><!> <!> <!> <!> <!> <!></div>');function ne($){let e=le(void 0);var f=Ne(),A=u(f);{var P=t=>{var n=$e(),g=l(u(n),2);w(()=>b(g,`background-image: url(${Se});`)),o(t,n)};v(A,t=>{s(e)&&s(e)>=0&&s(e)<510&&t(P)})}var _=l(A,2);{var S=t=>{var n=Ve(),g=l(u(n),2);w(()=>b(g,`background-image: url(${He});`)),o(t,n)};v(_,t=>{s(e)&&s(e)>=510&&s(e)<660&&t(S)})}var T=l(_,2);{var I=t=>{var n=Be(),g=l(u(n),2);w(()=>b(g,`background-image: url(${Ce});`)),o(t,n)};v(T,t=>{s(e)&&s(e)>=660&&s(e)<930&&t(I)})}var c=l(T,2);{var y=t=>{var n=Ee(),g=l(u(n),2);w(()=>b(g,`background-image: url(${Ie});`)),o(t,n)};v(c,t=>{s(e)&&s(e)>=930&&s(e)<1200&&t(y)})}var r=l(c,2);{var d=t=>{var n=ze(),g=l(u(n),2);w(()=>b(g,`background-image: url(${Re});`)),o(t,n)};v(r,t=>{s(e)&&s(e)>=1200&&s(e)<1350&&t(d)})}var a=l(r,2);{var i=t=>{var n=Ge(),g=l(u(n),2);w(()=>b(g,`background-image: url(${De});`)),o(t,n)};v(a,t=>{s(e)&&s(e)>=1350&&t(i)})}oe(f,"clientWidth",t=>se(e,t)),o($,f)}ne.__docgen={version:3,name:"crash.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const Le=""+new URL("quake-map-top-xs-DW13fyLH.jpeg",import.meta.url).href,We=""+new URL("quake-map-top-sm-BxeF2VbG.jpeg",import.meta.url).href,qe=""+new URL("quake-map-top-md-kvIh_wQD.jpeg",import.meta.url).href,Oe=""+new URL("quake-map-top-lg-izACKuCR.jpeg",import.meta.url).href,Ke=""+new URL("quake-map-top-xl-7FmRtkZ1.jpeg",import.meta.url).href;var Ue=p('<div id="g-quake-map-top-xs" class="g-artboard svelte-11uc9ua" style=""><div style="padding: 0 0 117.5758% 0;"></div> <div id="g-quake-map-top-xs-img" class="g-aiImg svelte-11uc9ua"></div> <div id="g-ai0-1" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:-1.3529%;margin-top:-6.8px;left:33.0848%;width:46px;"><p class="g-pstyle0 svelte-11uc9ua">Kabul</p></div> <div id="g-ai0-2" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:4.3062%;margin-top:-7.7px;left:4.0902%;width:65px;"><p class="g-pstyle1 svelte-11uc9ua">Shaking</p></div> <div id="g-ai0-3" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:8.1722%;margin-top:-7.7px;left:4.0902%;width:78px;"><p class="g-pstyle2 svelte-11uc9ua">Very strong</p></div> <div id="g-ai0-4" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:19.5124%;margin-top:-7.7px;left:4.0902%;width:49px;"><p class="g-pstyle2 svelte-11uc9ua">Weak</p></div> <div id="g-ai0-5" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:22.4511%;margin-top:-5.1px;left:45.2353%;margin-left:-74px;width:148px;"><p class="g-pstyle3 svelte-11uc9ua">AFGHANISTAN</p></div> <div id="g-ai0-6" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:29.7371%;margin-top:-8.4px;left:34.8676%;width:56px;"><p class="g-pstyle4 svelte-11uc9ua">Gardez</p></div> <div id="g-ai0-7" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:39.2732%;margin-top:-8.4px;left:65.8508%;width:50px;"><p class="g-pstyle4 svelte-11uc9ua">Khost</p></div> <div id="g-ai0-8" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:45.9742%;margin-top:-8.4px;left:46.1799%;width:73px;"><p class="g-pstyle5 svelte-11uc9ua">Epicentre</p></div> <div id="g-ai0-9" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:49.8402%;margin-top:-8.4px;left:93.2747%;margin-left:-27px;width:54px;"><p class="g-pstyle6 svelte-11uc9ua">Bannu</p></div> <div id="g-ai0-10" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:63.4369%;margin-top:-5.1px;left:65.9996%;margin-left:-50px;width:100px;"><p class="g-pstyle7 svelte-11uc9ua">PAKISTAN</p></div></div>'),je=p('<div id="g-quake-map-top-sm" class="g-artboard svelte-11uc9ua" style=""><div style="padding: 0 0 83.5294% 0;"></div> <div id="g-quake-map-top-sm-img" class="g-aiImg svelte-11uc9ua"></div> <div id="g-ai1-1" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:5.3132%;margin-top:-8.6px;left:3.5997%;width:71px;"><p class="g-pstyle0 svelte-11uc9ua">Shaking</p></div> <div id="g-ai1-2" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:9.3038%;margin-top:-8.6px;left:3.5997%;width:86px;"><p class="g-pstyle1 svelte-11uc9ua">Very strong</p></div> <div id="g-ai1-3" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:18.8592%;margin-top:-5.3px;left:41.2699%;margin-left:-91.5px;width:183px;"><p class="g-pstyle2 svelte-11uc9ua">AFGHANISTAN</p></div> <div id="g-ai1-4" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:21.2757%;margin-top:-8.6px;left:3.5997%;width:53px;"><p class="g-pstyle1 svelte-11uc9ua">Weak</p></div> <div id="g-ai1-5" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:30.6101%;margin-top:-9.4px;left:40.186%;width:61px;"><p class="g-pstyle3 svelte-11uc9ua">Gardez</p></div> <div id="g-ai1-6" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:34.8355%;margin-top:-9.4px;left:9.9042%;width:60px;"><p class="g-pstyle3 svelte-11uc9ua">Ghazni</p></div> <div id="g-ai1-7" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:40.4693%;margin-top:-9.4px;left:63.0024%;width:54px;"><p class="g-pstyle3 svelte-11uc9ua">Khost</p></div> <div id="g-ai1-8" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:47.2768%;margin-top:-9.4px;left:48.5165%;width:80px;"><p class="g-pstyle4 svelte-11uc9ua">Epicentre</p></div> <div id="g-ai1-9" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:50.7979%;margin-top:-9.4px;left:82.1761%;margin-left:-29px;width:58px;"><p class="g-pstyle5 svelte-11uc9ua">Bannu</p></div> <div id="g-ai1-10" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:68.3897%;margin-top:-5.3px;left:73.6919%;margin-left:-67.5px;width:135px;"><p class="g-pstyle2 svelte-11uc9ua">PAKISTAN</p></div></div>'),Me=p('<div id="g-quake-map-top-md" class="g-artboard svelte-11uc9ua" style=""><div style="padding: 0 0 91.8182% 0;"></div> <div id="g-quake-map-top-md-img" class="g-aiImg svelte-11uc9ua"></div> <div id="g-ai2-1" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:3.5477%;margin-top:-7.5px;left:2.6635%;width:62px;"><p class="g-pstyle0 svelte-11uc9ua">Shaking</p></div> <div id="g-ai2-2" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:6.188%;margin-top:-7.5px;left:2.6635%;width:74px;"><p class="g-pstyle1 svelte-11uc9ua">Very strong</p></div> <div id="g-ai2-3" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:7.0759%;margin-top:-6.9px;right:6.4574%;width:100px;"><p class="g-pstyle2 svelte-11uc9ua">Afghanistan</p></div> <div id="g-ai2-4" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:15.2639%;margin-top:-7.5px;left:2.6635%;width:47px;"><p class="g-pstyle1 svelte-11uc9ua">Weak</p></div> <div id="g-ai2-5" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:18.7377%;margin-top:-7.6px;left:38.071%;margin-left:-136.5px;width:273px;"><p class="g-pstyle3 svelte-11uc9ua">AFGHANISTAN</p></div> <div id="g-ai2-6" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:30.2476%;margin-top:-10.3px;left:38.0816%;width:63px;"><p class="g-pstyle4 svelte-11uc9ua">Gardez</p></div> <div id="g-ai2-7" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:33.8779%;margin-top:-10.3px;left:9.3056%;margin-left:-31px;width:62px;"><p class="g-pstyle5 svelte-11uc9ua">Ghazni</p></div> <div id="g-ai2-8" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:40.1486%;margin-top:-10.3px;left:63.0563%;width:55px;"><p class="g-pstyle4 svelte-11uc9ua">Khost</p></div> <div id="g-ai2-9" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:47.1569%;margin-top:-10.8px;left:47.4444%;width:86px;"><p class="g-pstyle6 svelte-11uc9ua">Epicentre</p></div> <div id="g-ai2-10" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:50.8746%;margin-top:-10.3px;left:84.5785%;margin-left:-30px;width:60px;"><p class="g-pstyle5 svelte-11uc9ua">Bannu</p></div> <div id="g-ai2-11" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:62.467%;margin-top:-7.6px;left:80.6735%;margin-left:-100px;width:200px;"><p class="g-pstyle3 svelte-11uc9ua">PAKISTAN</p></div></div>'),Je=p('<div id="g-quake-map-top-lg" class="g-artboard svelte-11uc9ua" style=""><div style="padding: 0 0 55.1667% 0;"></div> <div id="g-quake-map-top-lg-img" class="g-aiImg svelte-11uc9ua"></div> <div id="g-ai3-1" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:4.1944%;margin-top:-8.8px;left:1.7817%;width:67px;"><p class="g-pstyle0 svelte-11uc9ua">Shaking</p></div> <div id="g-ai3-2" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:6.9135%;margin-top:-8.8px;left:1.7817%;width:81px;"><p class="g-pstyle1 svelte-11uc9ua">Very strong</p></div> <div id="g-ai3-3" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:7.006%;margin-top:-7.4px;right:4.4122%;width:100px;"><p class="g-pstyle2 svelte-11uc9ua">Afghanistan</p></div> <div id="g-ai3-4" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:14.111%;margin-top:-8.4px;left:29.9587%;margin-left:-151px;width:302px;"><p class="g-pstyle3 svelte-11uc9ua">AFGHANISTAN</p></div> <div id="g-ai3-5" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:16.128%;margin-top:-8.8px;left:1.7818%;width:51px;"><p class="g-pstyle1 svelte-11uc9ua">Weak</p></div> <div id="g-ai3-6" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:28.2991%;margin-top:-11.3px;left:44.1554%;width:67px;"><p class="g-pstyle4 svelte-11uc9ua">Gardez</p></div> <div id="g-ai3-7" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:31.9244%;margin-top:-11.3px;left:26.4286%;margin-left:-33px;width:66px;"><p class="g-pstyle5 svelte-11uc9ua">Ghazni</p></div> <div id="g-ai3-8" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:37.676%;margin-top:-8.4px;left:85.4421%;margin-left:-110.5px;width:221px;"><p class="g-pstyle3 svelte-11uc9ua">PAKISTAN</p></div> <div id="g-ai3-9" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:38.42%;margin-top:-11.3px;left:59.5142%;width:59px;"><p class="g-pstyle4 svelte-11uc9ua">Khost</p></div> <div id="g-ai3-10" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:45.5991%;margin-top:-11.9px;left:49.9132%;width:94px;"><p class="g-pstyle6 svelte-11uc9ua">Epicentre</p></div> <div id="g-ai3-11" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:53.9788%;margin-top:-11.3px;left:72.7294%;margin-left:-32px;width:64px;"><p class="g-pstyle5 svelte-11uc9ua">Bannu</p></div></div>'),Fe=p('<div id="g-quake-map-top-xl" class="g-artboard svelte-11uc9ua" style=""><div style="padding: 0 0 51.2308% 0;"></div> <div id="g-quake-map-top-xl-img" class="g-aiImg svelte-11uc9ua"></div> <div id="g-ai4-1" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:3.8689%;margin-top:-8.8px;left:1.5293%;width:67px;"><p class="g-pstyle0 svelte-11uc9ua">Shaking</p></div> <div id="g-ai4-2" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:6.063%;margin-top:-7.4px;right:4.342%;width:100px;"><p class="g-pstyle1 svelte-11uc9ua">Afghanistan</p></div> <div id="g-ai4-3" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:6.5716%;margin-top:-8.8px;left:1.5293%;width:81px;"><p class="g-pstyle2 svelte-11uc9ua">Very strong</p></div> <div id="g-ai4-4" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:13.726%;margin-top:-8.4px;left:30.8465%;margin-left:-151px;width:302px;"><p class="g-pstyle3 svelte-11uc9ua">AFGHANISTAN</p></div> <div id="g-ai4-5" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:15.7308%;margin-top:-8.8px;left:1.5294%;width:51px;"><p class="g-pstyle2 svelte-11uc9ua">Weak</p></div> <div id="g-ai4-6" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:27.8288%;margin-top:-11.3px;left:43.9511%;width:67px;"><p class="g-pstyle4 svelte-11uc9ua">Gardez</p></div> <div id="g-ai4-7" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:31.4324%;margin-top:-11.3px;left:27.588%;margin-left:-33px;width:66px;"><p class="g-pstyle5 svelte-11uc9ua">Ghazni</p></div> <div id="g-ai4-8" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:37.1494%;margin-top:-8.4px;left:82.0619%;margin-left:-110.5px;width:221px;"><p class="g-pstyle3 svelte-11uc9ua">PAKISTAN</p></div> <div id="g-ai4-9" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:37.8889%;margin-top:-11.3px;left:58.1285%;width:59px;"><p class="g-pstyle4 svelte-11uc9ua">Khost</p></div> <div id="g-ai4-10" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:45.025%;margin-top:-11.9px;left:49.2661%;width:94px;"><p class="g-pstyle6 svelte-11uc9ua">Epicentre</p></div> <div id="g-ai4-11" class="g-tt g-aiAbs g-aiPointText svelte-11uc9ua" style="top:53.3543%;margin-top:-11.3px;left:70.3271%;margin-left:-32px;width:64px;"><p class="g-pstyle5 svelte-11uc9ua">Bannu</p></div></div>'),Xe=p('<div id="g-quake-map-top-box" class="svelte-11uc9ua"><!> <!> <!> <!> <!></div>');function re($){let e=le(void 0);var f=Xe(),A=u(f);{var P=a=>{var i=Ue(),t=l(u(i),2);w(()=>b(t,`background-image: url(${Le});`)),o(a,i)};v(A,a=>{s(e)&&s(e)>=0&&s(e)<510&&a(P)})}var _=l(A,2);{var S=a=>{var i=je(),t=l(u(i),2);w(()=>b(t,`background-image: url(${We});`)),o(a,i)};v(_,a=>{s(e)&&s(e)>=510&&s(e)<660&&a(S)})}var T=l(_,2);{var I=a=>{var i=Me(),t=l(u(i),2);w(()=>b(t,`background-image: url(${qe});`)),o(a,i)};v(T,a=>{s(e)&&s(e)>=660&&s(e)<1200&&a(I)})}var c=l(T,2);{var y=a=>{var i=Je(),t=l(u(i),2);w(()=>b(t,`background-image: url(${Oe});`)),o(a,i)};v(c,a=>{s(e)&&s(e)>=1200&&s(e)<1300&&a(y)})}var r=l(c,2);{var d=a=>{var i=Fe(),t=l(u(i),2);w(()=>b(t,`background-image: url(${Ke});`)),o(a,i)};v(r,a=>{s(e)&&s(e)>=1300&&a(d)})}oe(f,"clientWidth",a=>se(e,a)),o($,f)}re.__docgen={version:3,name:"quakemap.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const pe={title:"Components/Text elements/HeroHeadline",component:D,argTypes:{hedSize:{control:"select",options:["small","normal","big","bigger","biggest"]},hedWidth:{control:"select",options:["normal","wide","wider","widest"]},hedAlign:{control:"select",options:["left","center","right"]},width:{control:"select",options:["normal","wide","wider","widest"]}}},{Story:L}=xe();var Ye=p("<!> <!>",1),Qe=p('<div class="transparent-header svelte-hpp14i"><!> <!></div>'),Ze=p(`<!> <!> <style lang="scss">.hero-wrapper {
  --heroHeight: 85svh;
}
@media (max-width: 960px) {
  .hero-wrapper {
    --heroHeight: 65svh;
  }
}
@media (max-height: 850px) {
  .hero-wrapper {
    --heroHeight: 100svh;
  }
}
@media (max-width: 960px) and (orientation: landscape) {
  .hero-wrapper {
    --heroHeight: 200svh;
  }
}
.hero-wrapper .custom-hero.headline {
  align-items: flex-end !important;
}
@media (max-width: 1100px) {
  .hero-wrapper .custom-hero.headline {
    max-width: var(--normal-column-width) !important;
  }
}

.hero-wrapper.embedded {
  --heroHeight: 1000px;
}</style>`,1),et=p(`<!> <!> <style lang="scss">.hero-wrapper {
  --heroHeight: calc(100svh - 60px);
}
.hero-wrapper .video-hero.headline header {
  top: calc(50svh - 250px);
}
.hero-wrapper .video-hero.headline h1 {
  color: #ffd430;
  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
}</style>`,1),tt=p("<!> <!>",1),it=p('<h1><div class="body-note">A visual guide to</div> <div class="title text-6xl font-light tracking-widest">EUROVISION</div></h1>'),at=p(`<div class="dek"><p>Performers from 37 countries are coming together May 9-13 in
          Liverpool, England, for the 67th annual Eurovision Song Contest. The
          winner gets the trophy and their country gets the right to host next
          year’s event, produced by the European Broadcasting Union (EBU).</p></div>`),st=p(`<!> <style lang="scss">.custom-hed h1 .body-note {
  color: #ffffff;
}
.custom-hed h1 .title {
  color: #ffffff;
  text-shadow: 1px 1px 8px #ff7c88;
  filter: drop-shadow(0px 0px 12px #ff7c88);
}
.custom-hed .dek {
  margin-block-start: 1rem;
}
.custom-hed .dek p {
  color: #ffffff;
  text-shadow: 1px 1px 8px #ff7c88;
  filter: drop-shadow(0px 0px 12px #ff7c88);
}</style>`,1),lt=p("<!> <!> <!> <!> <!> <!>",1);function de($,e){ae(e,!1),ue();var f=lt(),A=m(f);L(A,{name:"Photo hero",exportName:"PhotoHero",children:(c,y)=>{var r=Ye(),d=m(r);z(d,{width:"fluid",class:"chromatic-ignore",children:(i,t)=>{O(i,{})},$$slots:{default:!0}});var a=l(d,2);{let i=N(()=>new Date("2022-03-04").toISOString());D(a,{section:"World News",hed:"Reuters Graphics Interactive",dek:"The beginning of a beautiful page",authors:["Jane Doe","John Doe"],get publishTime(){return s(i)},get img(){return te},notes:"Photo by REUTERS",ariaDescription:"A photo of a polar bear"})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid" class="chromatic-ignore">
  <SiteHeader />
</Block>
<HeroHeadline
  section="World News"
  hed="Reuters Graphics Interactive"
  dek="The beginning of a beautiful page"
  authors={['Jane Doe', 'John Doe']}
  publishTime={new Date('2022-03-04').toISOString()}
  img={polarImgSrc}
  notes="Photo by REUTERS"
  ariaDescription="A photo of a polar bear"
/>`}}});var P=l(A,2);L(P,{name:"Transparent header",exportName:"TransparentHeader",children:(c,y)=>{var r=Qe(),d=u(r);z(d,{width:"fluid",class:"chromatic-ignore",children:(i,t)=>{O(i,{})},$$slots:{default:!0}});var a=l(d,2);{let i=N(()=>new Date("2022-03-04").toISOString());D(a,{section:"World News",hed:"Reuters Graphics Interactive",dek:"The beginning of a beautiful page",authors:["Jane Doe","John Doe"],get publishTime(){return s(i)},get img(){return te},ariaDescription:"A photo of a polar bear"})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<div class="transparent-header">
  <Block width="fluid" class="chromatic-ignore">
    <SiteHeader />
  </Block>
  <HeroHeadline
    section="World News"
    hed="Reuters Graphics Interactive"
    dek="The beginning of a beautiful page"
    authors={['Jane Doe', 'John Doe']}
    publishTime={new Date('2022-03-04').toISOString()}
    img={polarImgSrc}
    ariaDescription="A photo of a polar bear"
  />
</div>`}}});var _=l(P,2);L(_,{name:"Ai2svelte hero",exportName:"Ai2svelteHero",children:(c,y)=>{var r=Ze(),d=m(r);z(d,{width:"fluid",class:"chromatic-ignore",children:(i,t)=>{O(i,{})},$$slots:{default:!0}});var a=l(d,2);{let i=N(()=>new Date("2022-06-24").toISOString());D(a,{hed:"Earthquake devastates Afghanistan",hedSize:"big",hedWidth:"wide",class:"custom-hero mb-0",authors:["Anand Katakam","Vijdan Mohammad Kawoosa","Adolfo Arranz","Wen Foo","Simon Scarr","Aman Bhargava","Jitesh Chowdhury","Manas Sharma","Aditi Bhandari"],get publishTime(){return s(i)},children:(t,n)=>{Q(t,{width:"widest",role:"figure",class:"my-0",ariaDescription:"Earthquake impact map",children:(g,K)=>{re(g)},$$slots:{default:!0}})},$$slots:{default:!0}})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid" class="chromatic-ignore">
  <SiteHeader />
</Block>

<HeroHeadline
  hed={'Earthquake devastates Afghanistan'}
  hedSize={'big'}
  hedWidth="wide"
  class="custom-hero mb-0"
  authors={[
    'Anand Katakam',
    'Vijdan Mohammad Kawoosa',
    'Adolfo Arranz',
    'Wen Foo',
    'Simon Scarr',
    'Aman Bhargava',
    'Jitesh Chowdhury',
    'Manas Sharma',
    'Aditi Bhandari',
  ]}
  publishTime={new Date('2022-06-24').toISOString()}
>
  <GraphicBlock
    width="widest"
    role="figure"
    class="my-0"
    ariaDescription="Earthquake impact map"
  >
    <QuakeMap />
  </GraphicBlock>
</HeroHeadline>
<style lang="scss">.hero-wrapper {
--heroHeight: 85svh;
}
@media (max-width: 960px) {
.hero-wrapper {
  --heroHeight: 65svh;
}
}
@media (max-height: 850px) {
.hero-wrapper {
  --heroHeight: 100svh;
}
}
@media (max-width: 960px) and (orientation: landscape) {
.hero-wrapper {
  --heroHeight: 200svh;
}
}
.hero-wrapper .custom-hero.headline {
align-items: flex-end !important;
}
@media (max-width: 1100px) {
.hero-wrapper .custom-hero.headline {
  max-width: var(--normal-column-width) !important;
}
}

.hero-wrapper.embedded {
--heroHeight: 1000px;
}</style>`}}});var S=l(_,2);L(S,{name:"Video hero",exportName:"VideoHero",children:(c,y)=>{var r=et(),d=m(r);z(d,{width:"fluid",class:"chromatic-ignore",children:(i,t)=>{O(i,{})},$$slots:{default:!0}});var a=l(d,2);{let i=N(()=>new Date("2020-12-18").toISOString());D(a,{class:"video-hero",hed:"The conflict in Ethiopia",hedSize:"bigger",hedWidth:"wide",authors:["Aditi Bhandari ","David Lewis"],get publishTime(){return s(i)},children:(t,n)=>{be(t,{width:"widest",class:"my-0",showControls:!1,preloadVideo:"auto",playVideoWhenInView:!1,src:"https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4",poster:"https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg",notes:"Drone footage from the Village 8 refugee camp in Sudan.",ariaDescription:"Aerial footage of people houses in refugee camp"})},$$slots:{default:!0}})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid" class="chromatic-ignore">
  <SiteHeader />
</Block>

<HeroHeadline
  class="video-hero"
  hed="The conflict in Ethiopia"
  hedSize="bigger"
  hedWidth="wide"
  authors={['Aditi Bhandari ', 'David Lewis']}
  publishTime={new Date('2020-12-18').toISOString()}
>
  <Video
    width="widest"
    class="my-0"
    showControls={false}
    preloadVideo="auto"
    playVideoWhenInView={false}
    src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
    poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
    notes="Drone footage from the Village 8 refugee camp in Sudan."
    ariaDescription="Aerial footage of people houses in refugee camp"
  />
</HeroHeadline>
<style lang="scss">.hero-wrapper {
--heroHeight: calc(100svh - 60px);
}
.hero-wrapper .video-hero.headline header {
top: calc(50svh - 250px);
}
.hero-wrapper .video-hero.headline h1 {
color: #ffd430;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
}</style>`}}});var T=l(S,2);L(T,{name:"Inline hero",exportName:"InlineHero",children:(c,y)=>{var r=tt(),d=m(r);z(d,{width:"fluid",class:"chromatic-ignore",children:(i,t)=>{O(i,{})},$$slots:{default:!0}});var a=l(d,2);{let i=N(()=>new Date("2020-01-01").toISOString());D(a,{stacked:!1,section:"Global news",hed:"The plunge from 29,000 feet",dek:"How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.",class:"mb-0",authors:["Simon Scarr","Vijdan Mohammad Kawoosa"],get publishTime(){return s(i)},children:(t,n)=>{Q(t,{width:"widest",role:"figure",class:"my-0",ariaDescription:"Earthquake impact map",notes:"Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus",children:(g,K)=>{ne(g)},$$slots:{default:!0}})},$$slots:{default:!0}})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid" class="chromatic-ignore">
  <SiteHeader />
</Block>

<!-- Set \`stacked\` to \`false\` -->
<HeroHeadline
  stacked={false}
  section="Global news"
  hed="The plunge from 29,000 feet"
  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
  class="mb-0"
  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
  publishTime={new Date('2020-01-01').toISOString()}
>
  <GraphicBlock
    width="widest"
    role="figure"
    class="my-0"
    ariaDescription="Earthquake impact map"
    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
  >
    <CrashMap />
  </GraphicBlock>
</HeroHeadline>`}}});var I=l(T,2);L(I,{name:"Custom hed",exportName:"CustomHed",children:(c,y)=>{var r=st(),d=m(r);{const a=n=>{var g=it();o(n,g)},i=n=>{var g=at();o(n,g)};let t=N(()=>new Date("2023-05-11").toISOString());D(d,{class:"custom-hed",authors:["Prasanta Kumar Dutta","Dea Bankova","Aditi Bhandari","Anurag Rao"],get publishTime(){return s(t)},get img(){return Pe},getAuthorPage:n=>`mailto:${n.replace(" ","")}@example.com`,hed:a,dek:i,$$slots:{hed:!0,dek:!0}})}o(c,r)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<HeroHeadline
  class="custom-hed"
  authors={[
    'Prasanta Kumar Dutta',
    'Dea Bankova',
    'Aditi Bhandari',
    'Anurag Rao',
  ]}
  publishTime={new Date('2023-05-11').toISOString()}
  img={eurovisImgSrc}
  getAuthorPage={(author: string) => {
    return \`mailto:\${author.replace(' ', '')}@example.com\`;
  }}
>
  {#snippet hed()}
    <h1>
      <div class="body-note">A visual guide to</div>
      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
    </h1>
  {/snippet}

  {#snippet dek()}
    <div class="dek">
      <p>
        Performers from 37 countries are coming together May 9-13 in
        Liverpool, England, for the 67th annual Eurovision Song Contest. The
        winner gets the trophy and their country gets the right to host next
        year’s event, produced by the European Broadcasting Union (EBU).
      </p>
    </div>
  {/snippet}
</HeroHeadline>

<style lang="scss">.custom-hed h1 .body-note {
color: #ffffff;
}
.custom-hed h1 .title {
color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88;
filter: drop-shadow(0px 0px 12px #ff7c88);
}
.custom-hed .dek {
margin-block-start: 1rem;
}
.custom-hed .dek p {
color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88;
filter: drop-shadow(0px 0px 12px #ff7c88);
}</style>`}}}),o($,f),ie()}de.__docgen={version:3,name:"HeroHeadline.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const W=he(de,pe),ot=["PhotoHero","TransparentHeader","Ai2svelteHero","VideoHero","InlineHero","CustomHed"],nt=W.PhotoHero,rt=W.TransparentHeader,pt=W.Ai2svelteHero,dt=W.VideoHero,gt=W.InlineHero,ct=W.CustomHed,Rt=Object.freeze(Object.defineProperty({__proto__:null,Ai2svelteHero:pt,CustomHed:ct,InlineHero:gt,PhotoHero:nt,TransparentHeader:rt,VideoHero:dt,__namedExportsOrder:ot,default:pe},Symbol.toStringTag,{value:"Module"}));export{pt as A,ct as C,Rt as H,gt as I,nt as P,rt as T,dt as V};