src/pages/about/fees-and-charges.astro

@@ -46,6 +46,11 @@ const additionalCharges = [
   ['Runway closure', '£50', 'At management discretion following incident or accident.'],
   ['Drones', '£25', 'Commercial drones need 2 days notice before flight and a permit.'],
 ];
+
+const gaHeaders = ['Type', 'Landing fee', 'Daytime parking', 'Overnight parking outside', 'Overnight parking hangar'];
+const touchAndGoHeaders = ['Type', 'Single', 'Unlimited'];
+const businessHeaders = ['MTOW', 'Landing fee', 'Daytime parking', 'Overnight parking'];
+const additionalHeaders = ['Charge', 'Price', 'Notes'];
 ---
 
 <BaseLayout title="Fees and Charges" description="Swansea Airport landing, parking, handling, and related charges.">
@@ -60,17 +65,13 @@ const additionalCharges = [
         <table class="fee-table">
           <thead>
             <tr>
-              <th scope="col">Type</th>
+              {gaHeaders.map((header) => <th scope="col">{header}</th>)}
-              <th scope="col">Landing fee</th>
-              <th scope="col">Daytime parking</th>
-              <th scope="col">Overnight parking outside</th>
-              <th scope="col">Overnight parking hangar</th>
             </tr>
           </thead>
           <tbody>
             {gaCharges.map((row) => (
               <tr>
-                {row.map((cell) => <td>{cell}</td>)}
+                {row.map((cell, index) => <td data-label={gaHeaders[index]}>{cell}</td>)}
               </tr>
             ))}
           </tbody>
@@ -84,15 +85,13 @@ const additionalCharges = [
         <table class="fee-table">
           <thead>
             <tr>
-              <th scope="col">Type</th>
+              {touchAndGoHeaders.map((header) => <th scope="col">{header}</th>)}
-              <th scope="col">Single</th>
-              <th scope="col">Unlimited</th>
             </tr>
           </thead>
           <tbody>
             {touchAndGoCharges.map((row) => (
               <tr>
-                {row.map((cell) => <td>{cell}</td>)}
+                {row.map((cell, index) => <td data-label={touchAndGoHeaders[index]}>{cell}</td>)}
               </tr>
             ))}
           </tbody>
@@ -119,16 +118,13 @@ const additionalCharges = [
         <table class="fee-table">
           <thead>
             <tr>
-              <th scope="col">MTOW</th>
+              {businessHeaders.map((header) => <th scope="col">{header}</th>)}
-              <th scope="col">Landing fee</th>
-              <th scope="col">Daytime parking</th>
-              <th scope="col">Overnight parking</th>
             </tr>
           </thead>
           <tbody>
             {businessCharges.map((row) => (
               <tr>
-                {row.map((cell) => <td>{cell}</td>)}
+                {row.map((cell, index) => <td data-label={businessHeaders[index]}>{cell}</td>)}
               </tr>
             ))}
           </tbody>
@@ -149,15 +145,13 @@ const additionalCharges = [
         <table class="fee-table">
           <thead>
             <tr>
-              <th scope="col">Charge</th>
+              {additionalHeaders.map((header) => <th scope="col">{header}</th>)}
-              <th scope="col">Price</th>
-              <th scope="col">Notes</th>
             </tr>
           </thead>
           <tbody>
             {additionalCharges.map((row) => (
               <tr>
-                {row.map((cell) => <td>{cell}</td>)}
+                {row.map((cell, index) => <td data-label={additionalHeaders[index]}>{cell}</td>)}
               </tr>
             ))}
           </tbody>
@@ -236,4 +230,101 @@ const additionalCharges = [
   .fee-section ul {
     margin-top: 0.6rem;
   }
+
+  @media (max-width: 700px) {
+    .fees-page {
+      gap: 1rem;
+    }
+
+    .fee-section {
+      padding-block: 0.35rem;
+    }
+
+    .fee-table-wrap {
+      overflow: visible;
+    }
+
+    .fee-table,
+    .fee-table tbody,
+    .fee-table tr,
+    .fee-table td {
+      display: block;
+      width: 100%;
+    }
+
+    .fee-table {
+      min-width: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .fee-table-wrap.compact .fee-table {
+      min-width: 0;
+    }
+
+    .fee-table thead {
+      display: none;
+    }
+
+    .fee-table tbody {
+      display: grid;
+      gap: 0.75rem;
+    }
+
+    .fee-table tr {
+      overflow: hidden;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-sm);
+      background: rgba(255, 255, 255, 0.88);
+      box-shadow: 0 10px 22px rgba(16, 34, 51, 0.07);
+    }
+
+    .fee-table tbody tr:nth-child(even) {
+      background: rgba(255, 255, 255, 0.88);
+    }
+
+    .fee-table td {
+      display: grid;
+      grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1.1fr);
+      gap: 0.75rem;
+      padding: 0.68rem 0.85rem;
+      border-bottom: 1px solid var(--line);
+      overflow-wrap: anywhere;
+    }
+
+    .fee-table td:first-child {
+      display: block;
+      padding: 0.85rem;
+      background: linear-gradient(180deg, rgba(11, 79, 122, 0.12), rgba(29, 118, 184, 0.07));
+      color: var(--text);
+      font-weight: 800;
+    }
+
+    .fee-table td:first-child::before {
+      content: none;
+    }
+
+    .fee-table td:last-child {
+      border-bottom: 0;
+    }
+
+    .fee-table td::before {
+      content: attr(data-label);
+      color: var(--brand);
+      font-size: 0.78rem;
+      font-weight: 800;
+      letter-spacing: 0.04em;
+      line-height: 1.25;
+      text-transform: uppercase;
+    }
+  }
+
+  @media (max-width: 420px) {
+    .fee-table td {
+      grid-template-columns: 1fr;
+      gap: 0.2rem;
+    }
+  }
 </style>