/* Application examples extend the site's shared UI foundation in styles.css. */
.example-page [hidden], .example-entry [hidden] { display:none!important; }
.example-page img, .example-entry img { display:block; max-width:100%; height:auto; }
.example-page figure, .example-entry figure { margin:0; }
.example-page .page-head { margin-bottom:var(--space-6); }
.example-page .page-head h1 { max-width:1050px; margin-bottom:var(--space-4); }
.example-page .page-head>p:not(.eyebrow) { max-width:920px; }
.ex-headline-row { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); margin-bottom:var(--space-6); }
.ex-headline-row p { max-width:760px; color:var(--muted); margin:.6rem 0 0; }
.ex-headline-row .btn { flex-shrink:0; }
.ex-filters { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-4) 0; margin-bottom:var(--space-4); border-block:1px solid var(--line); }
.ex-filter-group { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ex-filter-group button { min-height:var(--control-height); font:inherit; font-size:var(--text-small); border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); padding:.55rem .9rem; cursor:pointer; }
.ex-filter-group button[aria-pressed=true] { color:var(--surface); background:var(--brand); border-color:var(--brand); }
.ex-filter-group button:hover { border-color:var(--brand); }
#example-count { margin-left:auto; color:var(--muted); font-size:var(--text-small); }
.ex-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.ex-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); }
.ex-card:hover { border-color:var(--brand); }
.ex-card-media { display:flex; align-items:center; justify-content:center; background:var(--surface-soft); aspect-ratio:16/9; overflow:hidden; }
.ex-card-media>img { width:100%; height:100%; object-fit:contain; }
.ex-card-copy { padding:var(--space-6); display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.ex-card-copy .eyebrow { margin:0 0 var(--space-2); }
.ex-card-copy h2, .ex-card-copy h3 { margin:0 0 .7rem; }
.ex-card-copy h3 { font-size:1.2rem; }
.ex-card-copy h2>a, .ex-card-copy h3>a { color:var(--ink); text-decoration:none; }
.ex-card-copy h2>a:hover, .ex-card-copy h3>a:hover { color:var(--brand); }
.ex-card-copy>p { margin:0 0 var(--space-4); color:var(--muted); }
.ex-card-meta { font-size:var(--text-small); }
.ex-card-copy>.btn { margin-top:auto; }
.ex-card--featured { grid-column:1/-1; display:grid; grid-template-columns:1.16fr 1fr; }
.ex-card--featured .ex-card-media { aspect-ratio:auto; min-height:300px; }
.ex-card--featured .ex-card-copy { justify-content:center; padding:var(--space-8); }
.ex-card--featured .ex-card-copy>.btn { margin-top:.25rem; }
.ex-card--portrait .ex-card-media>img { width:auto; max-width:100%; height:100%; }
.ex-card-products { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--space-4); }
.ex-tag { font-size:.8rem; color:var(--brand); border:1px solid var(--line); background:var(--surface-soft); border-radius:6px; padding:.2rem .55rem; line-height:1.5; }
.example-entry { margin-block:var(--space-8); }
.example-entry .ex-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.example-entry .ex-card-copy { padding:var(--space-4); }
.example-entry .ex-card-copy>p { font-size:var(--text-small); }
.ex-overview { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr); align-items:start; gap:var(--space-8); }
.ex-overview--portrait { grid-template-columns:minmax(250px,380px) minmax(0,1fr); justify-content:center; gap:clamp(24px,5vw,75px); }
.ex-overview--portrait .ex-facts { max-width:620px; }
.ex-media-column { min-width:0; }
.ex-player, .ex-primary-image { width:100%; max-width:var(--media-max,860px); margin-inline:auto; }
.ex-player { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-soft); }
.ex-player video { display:block; width:100%; height:auto; object-fit:contain; background:var(--ink); }
.ex-toolbar { padding:var(--space-3); background:var(--surface); }
.ex-control-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); }
.ex-control-row .btn { font-size:var(--text-small); }
.ex-video-time { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.ex-progress { display:block; width:100%; min-height:30px!important; padding:0; margin:var(--space-2) 0; accent-color:var(--brand); cursor:pointer; }
.ex-video-status { min-height:1.5em; font-size:.8rem; margin:.4rem 0 0; color:var(--muted); }
.ex-video-status[data-state=error] { color:#8e2530; }
.ex-media-note { font-size:var(--text-small); color:var(--muted); margin:var(--space-3) 0 0; line-height:1.6; }
.ex-media-file { display:inline-flex; align-items:center; min-height:44px; gap:var(--space-2); color:var(--brand); font-size:var(--text-small); text-underline-offset:3px; }
.ex-facts h2 { margin:0 0 var(--space-4); }
.ex-facts dl { margin:0 0 var(--space-6); }
.ex-facts dl>div { padding:var(--space-4) 0; border-bottom:1px solid var(--line); }
.ex-facts dl>div:first-child { padding-top:0; }
.ex-facts dt { color:var(--muted); font-size:var(--text-small); margin-bottom:.35rem; }
.ex-facts dd { margin:0; }
.ex-facts ul { padding:0; margin:0; list-style:none; display:grid; gap:.8rem; }
.ex-facts a:not(.btn) { color:var(--brand); text-underline-offset:3px; font-weight:650; }
.ex-facts .ex-role { display:block; color:var(--muted); font-size:var(--text-small); margin-top:.2rem; }
.ex-portrait-context { margin-bottom:var(--space-6); }
.ex-portrait-context h3 { margin:0 0 var(--space-2); font-size:1.1rem; }
.ex-portrait-context p { margin:0; color:var(--muted); max-width:600px; }
.ex-story-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); gap:var(--space-8); align-items:start; }
.ex-copy { display:grid; gap:var(--space-6); }
.ex-copy h2 { margin:0 0 var(--space-3); }
.ex-copy p { margin:0; color:var(--muted); }
.ex-reading { border-left:1px solid var(--line); padding-left:var(--space-6); }
.ex-reading h2 { font-size:1.15rem; margin-bottom:var(--space-3); }
.ex-reading p { font-size:var(--text-small); color:var(--muted); }
.ex-reading a { color:var(--brand); text-underline-offset:3px; }
.ex-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); margin-top:var(--space-6); }
.ex-gallery--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ex-gallery--portrait { max-width:950px; margin-inline:auto; }
.ex-photo { display:block; border:1px solid var(--line); border-radius:var(--radius-control); overflow:hidden; background:var(--surface-soft); }
.ex-photo img { width:100%; height:auto; }
.ex-gallery figcaption { margin-top:.65rem; font-size:var(--text-small); color:var(--muted); }
.ex-gallery figcaption a { display:inline-block; min-height:32px; margin-top:.25rem; color:var(--brand); }
.ex-related-inline { margin-block:var(--space-6); }
.ex-related-inline h2 { margin:0 0 .6rem; }
.ex-related-inline>p { color:var(--muted); }
.ex-inline-links { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.ex-inline-links a { color:var(--brand); font-weight:650; text-underline-offset:3px; padding:.5rem 0; }
.ex-next-step { margin-top:var(--space-8); }
.ex-next-step p { max-width:900px; color:var(--muted); }
.ex-player:fullscreen { width:100%; max-width:none; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--ink); border:0; border-radius:0; padding:20px; }
.ex-player:fullscreen video { width:min(100%,var(--media-max,860px)); max-height:calc(100dvh - 220px); object-fit:contain; }
.ex-player:fullscreen .ex-toolbar { width:min(100%,var(--media-max,860px)); }
#example-image-dialog { border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--surface); color:var(--ink); padding:55px 18px 18px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
#example-image-dialog::backdrop { background:rgba(10,26,45,.86); }
#example-image-dialog>button { position:absolute; top:8px; right:12px; min-height:36px; }
#example-image-dialog img { display:block; width:auto; max-width:100%; max-height:calc(100dvh - 165px); object-fit:contain; margin:auto; }
#example-image-dialog p { max-width:950px; margin:12px auto 0; font-size:var(--text-small); }
.example-page :is(a,button,input):focus-visible, .example-entry :is(a,button):focus-visible, #example-image-dialog button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
@media(max-width:900px){.ex-overview{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:var(--space-6)}.ex-overview--portrait{grid-template-columns:minmax(230px,330px) minmax(0,1fr)}.ex-card--featured .ex-card-copy{padding:var(--space-6)}.ex-story-layout{gap:var(--space-6)}.example-entry .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-entry .ex-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.ex-gallery{gap:var(--space-4)}}
@media(max-width:760px){.ex-headline-row{display:block}.ex-headline-row>.btn{margin-top:var(--space-4)}.ex-overview,.ex-overview--portrait,.ex-story-layout{grid-template-columns:1fr}.ex-overview--portrait .ex-media-column{width:100%;max-width:380px;margin:auto}.ex-card--featured{grid-template-columns:1fr}.ex-card--featured .ex-card-media{aspect-ratio:16/9;min-height:0}.ex-card-copy{padding:var(--space-4)}.ex-card-copy h3{font-size:1.1rem}.ex-reading{border-left:0;border-top:1px solid var(--line);padding:var(--space-6) 0 0}.ex-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.ex-gallery--portrait{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ex-gallery--portrait figcaption{font-size:.75rem}#example-count{width:100%;margin:0}.ex-inline-links{flex-direction:column;gap:.3rem}}
@media(max-width:560px){.ex-grid,.example-entry .ex-grid{grid-template-columns:1fr}.example-entry .ex-card:last-child{grid-column:auto;display:flex}.ex-card--portrait .ex-card-media{height:305px;aspect-ratio:auto}.ex-card--featured .ex-card-copy{padding:var(--space-4)}.ex-gallery{grid-template-columns:1fr}.ex-gallery--portrait{grid-template-columns:1fr;max-width:320px;gap:var(--space-6)}.ex-gallery--portrait figcaption{font-size:var(--text-small)}.ex-filter-group button{padding:.5rem .65rem;font-size:.8rem}.ex-control-row{gap:8px}.ex-control-row .btn{padding:.55rem .7rem}.ex-headline-row{margin-bottom:var(--space-4)}}
@media(prefers-reduced-motion:reduce){.example-page *, .example-entry *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}