/* Base styles */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
	margin: 0;
	font-family: "Book Antiqua", Palatino, serif;
	background-color: #fff;
	color: #333;
}

.banner {
  width: 100%;
  display: block;
  margin: 0 auto;
  background-color: #f4f4f4;
  padding: 2rem 1rem 0.5rem;
  text-align: center;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.banner-content {
  max-width: 1200px; /* Match your grid layout width */
  text-align: center;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;

}

.banner h1 {
  color: red;
  font-size: 1.5rem;
  font-weight: 200;
  text-transform: uppercase;
  margin: 0;
}

.banner p {
  color: grey;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* Spacer */
.spacer {
  height: 1px;
  background-color: #ccc;
  width: 100%;
  margin-top: 0; /* remove top margin */
}

/* Page title box */
.page-title {
  text-align: center;
  margin: 1rem 0.5rem 0.2rem;
}

.page-title h2 {
  color: grey;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0;
  line-height: 1.4;
}

.subtitle {
  font-size: 1.2rem;
  color: #888;
}

/* Special title styling for this page */
.page-title h2.special-title {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: #003399; /* now overrides grey */
  font-size: clamp(1rem, 3vw, 1.8rem);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.footer-row {
  text-align: center;
  margin-top: 2em;
}

.footer-row a {
  color: red;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}

.footer-row a:hover {
  text-decoration: underline;
}

/* Grid layout */
.table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.25rem;     /* reduced vertical spacing between rows */
  column-gap: 0.5rem;   /* keep horizontal spacing as is */
  padding: 0rem 0.5rem;
  max-width: 1200px;
  margin: 0 auto 0.25rem; /* add bottom margin to separate from next section */
  align-items: start;   /* ensures top alignment of uneven-height tables */
}

.table-grid:empty {
  margin: 0;
  padding: 0;
  height: 0;
}

/* Image wrapper for desktop */
.table-grid .image-box {
  height: 400px;              /* uniform height for all images */
  overflow: hidden;           /* prevents portrait images from stretching the grid */
  display: flex;
  align-items: flex-start;    /* align image to the top */
}

/* Image inside wrapper */
.table-grid .image-box img {
  height: 100%;           /* fill wrapper height (fixes 16:9 gap) and portrait images shrink to fit height */
  width: auto;                /* prevents stretching */
  object-fit: contain;        /* no cropping */
  object-position: left top;  /* align top-left */
  display: block;
}


/* Desktop override for 16:9 images */

.table-grid .image-box.ratio-16-9 {
  height: 350px; /* or your desired height */
}
.table-grid .image-box.ratio-16-9 img {
  height: 100%;
}

/* Desktop override for small (3:2 or wide) images, not 16:9 */

.table-grid .image-box.small {
  height: 380px; /* or your desired height */
}
.table-grid .image-box.small img {
  height: 100%;
}

/* Desktop override for tall (portrait) images */

.table-grid .image-box.tall {
  height: 500px; /* or your desired height */
}
.table-grid .image-box.tall img {
  height: 100%;
}

@media (max-width: 768px) {
  .table-grid {
    grid-template-columns: 1fr;
  }
  .table-grid > .table-wrapper img {
    height: auto;
    object-fit: contain;
  }
}


/* Full-width table section */
.full-width-table {
  max-width: 1200px;
  margin: 0.25rem auto 0.5rem; /* top, sides, bottom */
  padding: 1rem;
  background-color: #FFFFFF;
  border: 0px solid #ddd;
  text-align: center;
}


/* Table styling */
table {
  border: none;
  border-collapse: collapse;
}

td, th {
  border: none;
}

/* Inner content block */
.full-width-table .content {
  max-width: 1200px; /* matches twin tables width */
  margin: auto;
  padding: 0 1rem;
}

/* Override .content only inside full-width-table */
.full-width-table .content {
  max-width: 1200px;   /* wider than the 595px default */
  margin: 0 auto;
  padding: 0 1rem;
  text-align: left;    /* force left alignment if needed */
  line-height: 1.5;
}

@media (max-width: 768px) {
  .full-width-table {
    padding: 0.5rem; /* reduce outer wrapper padding */
  }

  .full-width-table .content {
    max-width: 100%;   /* remove 595px cap */
    margin: 0;         /* stop auto-centering */
    padding: 0 0.5rem; /* slim inner padding */
  }

  .full-width-table td {
    padding: 0.25rem;  /* match the tighter look of stacked tables */
  }
}

/* Optional: constrain media or text within content */
.full-width-table .media-block {
  max-width: 595px; /* same as individual table content */
  margin: 0.5rem auto;
  text-align: center;
}

.full-width-table .heading {
  color: grey;
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

.full-width-table img,
.full-width-table iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto;
}


.table-wrapper {
  background-color: #FFFFFF;
  padding: 0rem;
  border: 0px solid #ddd;
}

/* Zou Zou Chronology list */

.chronology-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left; /* Ensures left justification */
}

.chronology-list .style133-bold {
  margin-right: 0.5em;
}

.chronology-list ul {
  margin: 0;
  padding-left: 2.5em; /* Indent nested lists */
}

.chronology-list li {
  margin-bottom: 0.5em;
}

/* Ensure consistent spacing between paragraphs */

.style133 {
  margin-bottom: 1em;   /* adjust as needed */
  line-height: 1.4;     /* improves readability on mobile */
  margin-right: 1rem; /* Add this line */
}

.style133-bold {
  margin-bottom: 1em;
  line-height: 1.4;
  margin-right: 1rem;
  font-weight: bold;
}

h2.style133-bold {
  text-align: left;
  margin-bottom: 0.4em; /* or a smaller value as needed */
}

@media (max-width: 768px) {
  .style133 {
    margin-right: 0;
  }
}

/* Optional: add more space after captions */
.style133.caption {
  margin-bottom: 1.5em;
  text-align: left;   /* or center, depending on what you want globally */
}

.center-caption {
  text-align: center;
}

.center-caption img {
  display: inline;
  float: none;
}

.center-style133 {
  margin-bottom: 1em;
  line-height: 1.4;
  margin-right: 1rem;
  text-align: center;
}

/* N.B. Add the following in html table wrapper for left aligned captions:

<p class="style133 caption">
  Site-specific, 3D video projection with sound.  
  17 min (loop). Dimensions variable. Matt's Gallery, London.
</p>

and add the following in html table wrapper for centred captions:
<p class="style133 caption center-caption">
  Plywood, video monitor and mixed media <br>
  Approx. 200 x 244 x 120cm
</p>

*/


/* Control spacing between adjacent table wrappers */
.table-wrapper + .table-wrapper {
  margin-top: 0rem; /* Adjust this value to control vertical spacing between rows */
}


/* Table content */
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 0.25rem;
  vertical-align: top;
  color: #666;
  font-size: 1rem;
}

/* Content container with fixed max width */
.table-wrapper .content {
  max-width: 100%; /* let it expand fully */
}


/* Headings */
.heading {
  color: #666;
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}

/* Sub-headings */
.sub-heading {
  color: #666;
  font-size: 1.125rem;
  font-weight: normal; /* removes bold */
  margin-bottom: 0.15rem;
}

.sub-heading.center {
  text-align: center;
}

/* Temporary debugging styles
.table-wrapper {
  border: 2px dashed red;
}

td {
  border: 2px dotted blue;
}

.heading {
  background-color: rgba(255, 255, 0, 0.3);
  padding: 0.25rem;
}

End of Temporary debugging styles */

/* CSS cross-fading images, e.g. Ground control x 2 */

.fade-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  height: 400px;
}

.fade-container.small {
  height: 380px;
}

.fade-container img {
  width: 100%;
  height: 100%; /* fill container height */
  object-fit: contain; /* show full image, no cropping */
  object-position: left top; /* left-align image */
  display: block;
}

.fade-img {
  position: absolute;   /* stack images on top of each other */
  top: 0;
  left: 0;
  opacity: 0;
}

.img1 {
  animation: fade 10s infinite;   /* full cycle = 10s */
}

.img2 {
  animation: fade 10s infinite 5s; /* offset halfway (5s delay) */
}

@keyframes fade {
  0%, 45%   { opacity: 1; }   /* visible for ~5s */
  50%, 95%  { opacity: 0; }   /* hidden for ~5s */
  100%      { opacity: 1; }   /* loop back */
}


/* Media */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.video-container { 
position: relative; 
height: 0; 
overflow: hidden; 
max-width: 100%;
} 

/* Default: 16:9 */ 
.video-container.ratio-16-9 { 
padding-bottom: 56.25%; } 

/* For SD Vimeo videos (4:3) */ 
.video-container.ratio-4-3 { 
padding-bottom: 75%; }

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Video inside image-box (for paired tables) */
.image-box .video-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.image-box iframe {  
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Desktop: Video inside image-box */
.table-grid .image-box iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* Remove object-fit/object-position */
}

/* Desktop only */
@media (min-width: 900px) {

    /* Control height (as before) */
    .tall-video-fix .vimeo-box {
        padding-top: 45% !important; /* or whatever ratio you want */
    }

    /* Left-align the video */
    .tall-video-fix {
        max-width: 357px;   /* choose a width that suits your layout */
        margin-left: 0;
        margin-right: auto;
    }
}


/* Mobile: Video inside image-box */
@media (max-width: 768px) {
  .table-wrapper .image-box iframe {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.25rem;
  }
}


/* Base link style — no underline, inherits surrounding color */
a {
  text-decoration: none;
  color: inherit;
}

/* No underline on hover */
a:hover {
  text-decoration: none;
}

/* Default link style (active) */
.style137 {
  color: #0099FF;   /* your standard blue */
  text-decoration: none;
}

/* --- Inactive colour options ---
   These are commented out so they won't apply unless you
   deliberately uncomment them later.
*/

/*
.styleAlt {
  color: #CC0000;   /* red */
  text-decoration: none;
} 

.styleGrey {
  color: #666666;   /* grey */
  text-decoration: underline;
}
*/

.left-justified {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;   /* match your other content width */
  line-height: 1.5;
  padding: 0 1rem;     /* default horizontal padding */
}
.content-wide {
  max-width: 1200px;   /* desktop cap */
  margin: 0 auto;
  padding: 0 1rem;
  text-align: left;
  line-height: 1.5;
}

/* make below active to create extra space between paragraphs on desktop (already active on mobile screens */

/*
.extra-space {
  margin-bottom: 2em;
}
*/

/* below corrects image ratios in image-box and display on mobile */

.table-wrapper .image-box img {
  height: 400px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 0.25rem; /* left-aligned by default */
}

.table-wrapper .content p.style133 {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: left; /* left-aligned text */
  /* margin-right: 0.5rem;  Uncomment to override for table captions */
}

@media (max-width: 768px) {
  .table-grid,
  .table-row,
  .table-wrapper {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .table-wrapper .image-box,
  .table-wrapper .caption,
  .table-wrapper .caption-text,
  .table-wrapper p {
    margin-top: 0;
    margin-bottom: 0.25rem;
    height: auto !important;
  }
  .table-wrapper .image-box img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.25rem;
    object-fit: contain;
  }
}

/* Mobile override for 16:9 images if needed */

@media (max-width: 768px) {
  .table-grid .image-box.ratio-16-9 {
    height: auto !important;
  }
  .table-grid .image-box.ratio-16-9 img {
    height: auto;
    width: 100%;
  }
}

/* Above corrects image ratios in image-box and display on mobile */

/* Mobile override */
@media (max-width: 768px) {
  .content-wide {
    max-width: 100%;   /* remove the 1200px cap */
    margin: 0;         /* no auto-centering */
    padding: 0 0.3rem; /* slim side padding */
  }
    .extra-space {
    margin-bottom: 1em; /* Larger space for mobile, adjust as needed */
  }
}


/* Responsive override for smaller screens */
@media (max-width: 768px) {
  .banner h1 {
    font-size: 1rem;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .banner p {
    font-size: 0.75rem;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
  }

  .banner-content {
    padding: 0 0.5rem;
  }
}


/* Responsive stacking */
@media (max-width: 768px) {
  .table-grid {
    grid-template-columns: 1fr;
    row-gap: 0.01rem; /* reduce vertical spacing between stacked tables */
    padding: 0 0rem; /* horizontal padding to keep content off screen edge */
  }

  .table-wrapper {
    margin-bottom: 0.01rem; /* consistent spacing between stacked tables */
  }

  .table-wrapper + .table-wrapper {
    margin-top: 0; /* override desktop rule */
  }

  .content {
    padding: 0; /* remove any internal padding that might add vertical space */
  }

  .heading {
    margin-top: 0;
    margin-bottom: 0.25rem;
  }

  p {
    margin: 0.25rem 0; /* tighten paragraph spacing */
  }
}

/* Mobile: stacking, auto height */
@media (max-width: 768px) {
  .fade-container,
  .fade-container.small {
    height: auto; /* let container grow with image */
    max-width: 100%;
  }
  .fade-container img,
  .fade-container.small img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}


/* Thumbnails sizes for slideshows and stacking */

/* === Global caption thumbnails (default behaviour) === */
.caption {
  display: flex;
  flex-wrap: wrap;       /* allow thumbnails to wrap to new lines */
  gap: 5px;              /* consistent spacing between thumbnails */
  justify-content: center; /* center thumbnails in the row */
}

.caption a img {
  width: 100%;           /* fill available width by default */
  height: auto;          /* keep natural aspect ratio */
}

.caption a:empty {
  display: none;         /* removes empty anchors from the grid */
}

/* === Table-wrapper specific captions === */
.table-wrapper .content p.style133.caption {
  display: block;        /* undo flex for text captions */
  text-align: left;      /* force left alignment */
}

.caption p {
  flex-basis: 100%;
  width: 100%;
}

/* Mobile tweak for table-wrapper thumbnails */
@media (max-width: 768px) {
  .table-wrapper .caption {
    gap: 5px;            /* smaller spacing for thumbnails on small screens */
  }
}

.full-width-table .caption {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* responsive cells */
  gap: 5px;
}

/* --- Option A: simpler, no cropping --- */
.full-width-table .caption a img {
  width: 100%;    /* fill the cell width */
  height: auto;   /* scale proportionally, no cropping */
}

/* --- Option B: use object-fit: contain --- */
/* Uncomment this block instead of Option A (and comment Option A) if you prefer contain behaviour */
/*
.full-width-table .caption a img {
  height: 100px;       /* consistent height */
  width: auto;         /* natural width */
  object-fit: contain; /* ensures full image fits inside the box, no cropping */
}

/* Mobile tweak for full-width table thumbnails */
@media (max-width: 768px) {
  .full-width-table .caption a img {
    height: 80px;        /* shrink only on mobile */
  }
}

/* === Utility: hidden slides === */
.hidden-slide {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* For video inside image-box */
.image-box .video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-box .video-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.image-box .video-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile: make video full width and auto height */
@media (max-width: 768px) {
  .image-box {
    height: auto !important;
  }
  .image-box .video-wrapper,
  .image-box .video-inner,
  .image-box .video-inner iframe {
    width: 100vw !important;
    height: auto !important;
    position: static !important;
  }
}