asdf

src/components/home/Sectors.astro

@@ -3,13 +3,16 @@ import { Picture } from 'astro:assets';
 import fiveG from '../../assets/images/sector-5g.jpg';
 import substation from '../../assets/images/sector-substation.jpg';
 import controlRoom from '../../assets/images/sector-ot.jpg';
+import products from '../../assets/images/sector-rd-engineer.jpg';
 import datacentre from '../../assets/images/sector-datacentre.jpg';
 import { t, type Lang } from '../../i18n/ui';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
 const ui = t(lang);
-const images = [fiveG, substation, controlRoom, datacentre];
-const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id: `sector-${i + 1}` }));
+const images = [fiveG, substation, controlRoom, products, datacentre];
+/* Where each picture keeps its subject when cropped; the R&D engineer sits on the left. */
+const focus = ['center', 'center', 'center', '30% center', 'center'];
+const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], focus: focus[i], id: `sector-${i + 1}` }));
 ---
 <section class="section sectors" id="sectors" aria-labelledby="sectors-title">
   <div class="container sectors__grid" data-sectors>
@@ -42,6 +45,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
                   loading="lazy"
                   decoding="async"
                   class="sectors__img img-doc"
+                  style={`object-position: ${item.focus}`}
                   pictureAttributes={{ class: 'sectors__picture' }}
                 />
               </div>
@@ -62,6 +66,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
           loading="lazy"
           decoding="async"
           class="sectors__img img-doc"
+          style={`object-position: ${item.focus}`}
           pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-stage-item': '', 'data-active': i === 0 ? '' : undefined }}
         />
       ))}
@@ -70,6 +75,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
 </section>
 
 <style>
+  .sectors { border-top: var(--hairline) solid var(--line); }
   .sectors__grid {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -144,7 +150,16 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
   }
   :global(html.js) .sectors__panel-inner { min-height: 0; }
   :global(html.js) .sectors__panel[data-open] { grid-template-rows: 1fr; }
-  :global(html.js) .sectors__panel:not([data-open]) { margin-bottom: calc(var(--space-5) - var(--space-3)); }
+  /* A closed panel is hidden, not only collapsed, so it does not take focus while invisible.
+     Visibility switches at the end of the collapse and at the start of the expand. */
+  :global(html.js) .sectors__panel:not([data-open]) {
+    margin-bottom: calc(var(--space-5) - var(--space-3));
+    visibility: hidden;
+    transition:
+      grid-template-rows var(--dur-slow) var(--ease),
+      margin var(--dur-slow) var(--ease),
+      visibility 0s linear var(--dur-slow);
+  }
 
   @media (min-width: 64rem) {
     .sectors__text { grid-column: 1 / span 5; }
@@ -152,15 +167,21 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
        half of whatever the window is wider than the container. The section clips, so a classic
        scrollbar (counted in 100vw) cannot cause a horizontal scroll. */
     .sectors { overflow-x: clip; }
+    /* The image box is at least 5:4 (never taller than 45rem), and stretches with the row when
+       the list beside it is taller, so its top and bottom always meet the heading and the last rule. */
     .sectors__media {
       grid-column: 7 / span 6;
-      display: grid;
+      display: block;
+      position: relative;
       margin-right: calc(-1 * (max(var(--gutter), var(--safe-right)) + max(0px, (100vw - var(--container)) / 2)));
     }
-    /* Near square, but never taller than a screenful on very wide windows. */
-    .sectors__media :global(.sectors__img) { aspect-ratio: 5 / 4; max-height: 45rem; }
+    /* The minimum: a spacer as tall as 5:4 of the width, capped at 45rem. A grid item stretches
+       to its row, so a taller list beside it makes the box taller; the pictures fill the box. */
+    .sectors__media::before { content: ''; display: block; padding-top: min(80%, 45rem); }
+    .sectors__media :global(.sectors__img) { height: 100%; aspect-ratio: auto; }
     .sectors__media :global(.sectors__picture--stage) {
-      grid-area: 1 / 1;
+      position: absolute;
+      inset: 0;
       opacity: 0;
       transition: opacity var(--dur-slow) var(--ease);
     }
@@ -170,7 +191,11 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sectors__panel, .sectors__tab::before, .sectors__media :global(.sectors__picture--stage) { transition: none; }
+    .sectors__panel,
+    :global(html.js) .sectors__panel,
+    :global(html.js) .sectors__panel:not([data-open]),
+    .sectors__tab::before,
+    .sectors__media :global(.sectors__picture--stage) { transition: none; }
   }
 </style>