rework tfe.php layout: row1 author above title, row2 meta+synopsis 2-col grid, row3 flex files

app/public/assets/css/tfe.css

@@ -10,23 +10,77 @@
     padding: var(--space-l) var(--space-m) var(--space-xl);
 }
 
-/* Two-column article layout */
+/* Stacked article layout */
 .tfe-layout {
-    display: grid;
-    grid-template-columns: 1fr 1.4fr;
+    display: flex;
+    flex-direction: column;
     gap: var(--space-xl);
     width: 100%;
+}
+
+/* Row 1: Author above Title */
+.tfe-header-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+/* Row 2: Two columns — meta left, synopsis right */
+.tfe-content-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl);
     align-items: start;
 }
 
-/* Left column — article header */
-.tfe-left {
+/* Row 3: Files flex container */
+.tfe-files {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--space-m);
 }
 
-/* Author (p) — above title */
+.tfe-file-item {
+    flex: 1 1 300px;
+    min-width: 0;
+    overflow: hidden;
+    border-radius: var(--radius);
+}
+
+.tfe-file-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--radius);
+}
+
+.tfe-file-item embed,
+.tfe-file-item video {
+    width: 100%;
+    display: block;
+    border: none;
+}
+
+.tfe-file-item video {
+    max-height: 500px;
+}
+
+.tfe-file-item embed {
+    height: clamp(300px, 80vh, 700px);
+}
+
+.tfe-file-item figcaption {
+    font-size: var(--step--2);
+    color: var(--text-secondary);
+    margin: var(--space-3xs) 0 0;
+    font-style: italic;
+}
+
+.tfe-synopsis-empty {
+    /* placeholder to maintain grid column */
+}
+
+/* Author (p) — inline with title */
 .tfe-author {
     font-family: var(--font-display);
     font-size: var(--step-1);
@@ -88,50 +142,6 @@
     margin: 0;
 }
 
-/* Right column — aside (supplementary media) */
-.tfe-right {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-m);
-}
-
-/* Each file display unit — target <figure> directly inside <aside> */
-aside figure {
-    overflow: hidden;
-    margin: 0;
-    border-radius: var(--radius);
-}
-
-aside figure img {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: var(--radius);
-}
-
-aside figure embed,
-aside figure video {
-    width: 100%;
-    display: block;
-    border: none;
-}
-
-aside figure video {
-    max-height: 500px;
-}
-
-aside figure embed {
-    height: clamp(300px, 80vh, 700px);
-}
-
-/* figcaption under media — target <figcaption> inside <aside> */
-aside figcaption {
-    font-size: var(--step--2);
-    color: var(--text-secondary);
-    margin: var(--space-3xs) 0 0;
-    font-style: italic;
-}
-
 /* PDF fallback download link */
 .tfe-pdf-fallback {
     font-size: var(--step--1);
@@ -294,11 +304,15 @@ aside figcaption {
 
 /* Responsive */
 @media (max-width: 900px) {
-    .tfe-layout {
+    .tfe-content-row {
         grid-template-columns: 1fr;
         gap: var(--space-l);
     }
 
+    .tfe-file-item {
+        flex: 1 1 100%;
+    }
+
     .tfe-title {
         font-size: var(--step-2);
     }