/* Colours 


warwicka off-white		#dcdfd6;
grey-text				#c4c6bd;
dark grey				#333;
red						#e9310e;
pink					pink;
yellow					#ffcc00;
green					#00b44e;

*/

body, html {
  margin: 0;
  padding: 0;
  /* height: 100%; */
  /* overflow-x: hidden; */
}

html {
  scroll-behavior: smooth;
}

main {
  z-index: 2;
  position: relative;
  background: #191919; /* or your content background */
}
		
/* Sticky, visible background-style footer
.global-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #dcdfd6;
  color: #191919;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
  z-index: 1; /* ✅ this is correct */
	/* overflow-y: auto;*/
/*}*/


/* Create space for the footer at the end of content */
.footer-spacer {
  height: 300px; /* same height as footer */
}		


.large-title {
  text-align: center;
  padding: 100px 0;       /* Some horizontal padding for small screens */
}

.large-title h2 {
  	width: 800px;      /* Limit  */
  	margin: 0 auto;        /* Center the heading horizontally */
	line-height: 1.2
}

.section-title {
    width: 100%;
    order: -1; /* optional, ensures it's first */
    flex: 0 0 100%;
    color: #dcdfd6;
    padding: 0.4rem  0 0 0;
	  margin: 0; /* less bottom margin */
}

/* V I D E O */

.video-container {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  position: relative;
  background: black;
  overflow: hidden;
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

@media (max-aspect-ratio: 16/9) {
  .video-wrapper {
    width: 100vw;
    height: 56.25vw; /* 9/16 aspect ratio */
  }
}

.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.video-controls {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.video-controls button {
  background: rgba(25, 25, 25, 0.7);
  border: none;
  padding: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-controls button img {
  height: 20px;
  width: auto;
  display: block;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.video-controls button:hover img {
  transform: scale(0.8);
}

/* Hover background for different states */
button.muted:hover {
  background-color: #00b44e; /* green when currently muted (hover = will unmute) */
}

button.unmuted:hover {
  background-color: #e9310e; /* red when currently unmuted (hover = will mute) */
}

/* Hover state for Play/Pause */
#toggle-play.playing:hover {
  background-color: #e9310e;
}

#toggle-play.paused:hover {
  background-color: #00b44e;
}



.video-loading-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dcdfd6;
	text-align: center;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: pulseFade 2s infinite ease-in-out;
}

@keyframes pulseFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.video-loading-msg h2 { font-size: 1rem; }


.media-header { position: relative; }
.header-image-container { width: 100%; }
.project-header-img {
  display: block;
  width: 100%;
  height: auto;           /* keeps 16:9 if the source is 16:9 */
  /* OR force a band and crop: 
  height: 60vh;
  object-fit: cover; */
}







.related-archive-posts {
  margin: 4rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.archive-post {
  margin-bottom: 3rem;
}

.archive-post-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}

.archive-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px;      /* or whatever your design needs */
  margin-bottom: 1rem;
}

.archive-slider .slides {
  display: flex;
  transition: transform 0.4s ease;
}

.archive-slider .slide {
  flex: 0 0 100%;
  margin-right: 1rem; /* gutter */
  box-sizing: border-box;
}
.archive-slider .slide:last-child {
  margin-right: 0;
}


.archive-slider img {
  display: block;
  width: 100%;
  height: auto;
}


.archive-slider button {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: rgba(25,25,25,0.5);
  border: none;
  color: #fff;
  padding: 0.6rem 1rem;
  cursor: pointer;
  z-index: 10;
}

.prev-slide { left: 0; }
.next-slide { right: 0; }

/* target the buttons in your archive‐slider */
/* Make room around the icon by padding the button */
.archive-slider .prev-slide,
.archive-slider .next-slide {
  padding: 10px;            /* ← 10px space around the icon */
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.8s ease;
}

/* Keep the icon itself at a fixed size */
.archive-slider .prev-slide img,
.archive-slider .next-slide img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* Hover state */
.archive-slider .prev-slide:hover,
.archive-slider .next-slide:hover {
  background-color: #191919;
}



/* VIDEO */

.archive-video-wrapper {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top;
}

.archive-post-video {
  width: 100%;
  max-width: 960px; /* Prevent it from getting too large */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Make iframe fill container */
.archive-post-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}

.video-caption {
  font-size: 0.8rem;
  color: #c4c6bd;
  margin: 20px 0;
  text-align: center;
}

.project-details-header {
  max-width: 1460px;
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0 0 0;
  border-top: 1px solid #333;
}

.details-left p,
.details-right a {
  display: inline-block;
  line-height: 1;         /* optional: tighten vertical alignment */
  vertical-align: middle; /* aligns both to the middle baseline */
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
	color: #dcdfd6;
	text-decoration: none;
}

.details-right a:hover {
	text-decoration: underline;
}

/* Animated Quotes */

.quote-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px;
  margin: 0 0 20px 0;
}

/* Show the quote normally; we'll only animate word opacity */
#client-quote .quote {
  transform: none;
  opacity: 1;
  transition: none;
}

.quote-author {
  width: 50%;
}

/* Words begin dim and can fade to 1 via JS */
#client-quote .quote .word {
  opacity: .2;
  transition: opacity 120ms linear;  /* small smoothing */
  /* optional: will-change: opacity; */
}

/* Not needed anymore, since we're not toggling a class:
#client-quote .quote h1.is-revealed .word { opacity: 1; }
*/

@media (prefers-reduced-motion: reduce) {
  #client-quote .quote .word { transition: none; }
}


/* Data Table styling */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.data-table thead th {
  text-align: left;
  padding: 10px;
  font-weight: normal;
  color: #c4c6bd;
  border: 1px solid #333;
}

/* Target the first data row and give it a top border */
.data-table tbody tr:first-child td {
  border: 1px solid #333;
	color: #c4c6bd;
}

.data-table tbody tr + tr {
  border: 1px solid #333;
		color: #c4c6bd;
}

.data-table td {
  padding: 10px;
  color: #c4c6bd;
  border: 1px solid #333;
}


.data-table-short {
	width: 100px;
}

/* T A G S */

.tag-container {
  display: flex;
  justify-content: flex-start; /* floats tags to the right */
  flex-wrap: wrap;        /* allows wrapping onto new lines */
  gap: 0.4rem;            /* consistent spacing between tags */
}

.tag-links {
  margin: 0; /* optional, since gap handles spacing */
	font-size: 0.8rem;
}

.tag-links a {
  text-decoration: none;
  color: #c4c6bd;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid #333;
  transition: background-color 1s ease, color 0.4s ease;
  white-space: nowrap;    /* this prevents line breaks within the tag text */
  display: inline-block;  /* ensures padding/margin are respected */
}
.tag-links a:hover {
  background-color: #dcdfd6;
  color: #191919;
  border-color: #dcdfd6;
}

.related-archive-links {
  max-width: 880px;
	margin: 0 auto;
}

.related-archive-links li {
  border-bottom: 1px solid rgba(220, 223, 214, 0.313); /* #dcdfd650 */
}

.related-archive-links li:last-child {
  /* border-bottom: none;  remove from the very last item */
}

/* give the links some horizontal padding so the borders don’t butt right up against the text */
.related-archive-links .list-link {
  padding: 0 10px;
}


.list-link {
  display: block;
  text-decoration: none;
  background-color: transparent;
  color: #dcdfd6;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.list-link-text {
  display: inline-block;
  padding: 10px 0;
  padding-left: 0;
  transition: padding-left 0.4s ease;
}

.list-link:hover {
  background-color: #dcdfd6;
  color: #191919;
}

.list-link:hover .list-link-text {
  padding-left: 10px;
}

.aw-signature {
  color: #dcdfd6;                 /* ← the signature colour */
  margin-top: 1.25rem;
}
.aw-signature svg {
  display: block;
  width: 120px;
  height: auto;
}

/* More portfolio next cards */

.next-up { margin: 3rem 0 2rem; }
.next-up-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}
@media (max-width:760px){ .next-up-grid { grid-template-columns: 1fr; } }


/* overide Wa_Portfolio */

/* --- Case-study view overrides --- */

/* Portfolio.css hides #portfolio-grid by default and locks scroll in wheel mode.
   This page isn't the wheel, so neutralise those bits here. */
html, body { overflow-y: auto !important; }



/* Local variables you were inlining before */
:root { --timeline-gap: 100px; }
body { position: relative; overflow-x: hidden; }



/* in Wa_Portfolio_View.css (end of file) */
.data-table--left th,
.data-table--left td { text-align: left !important; }


/* Make the “More projects” grid visible here and center it like the portfolio page */
.next-up #portfolio-grid{
  display: grid !important;
  gap: 24px;
  max-width: 1200px;        /* same container width as portfolio */
  margin: 0 auto;           /* center the container */
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* desktop: 3-up */
}

/* Tablet: 2-up */
@media (max-width: 1199px){
  .next-up #portfolio-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1-up */
@media (max-width: 760px){
  .next-up #portfolio-grid{
    grid-template-columns: 1fr;
  }
}

/* Ensure link fills the grid track (helps overlay/ratio) */
.next-up #portfolio-grid .grid-item > a { display:block; width:100%; }










@media (max-width: 768px) {

	.details-left { padding-left: 20px;}
	.details-right { padding-right: 20px;}
	.quote h1 { font-size: 2rem; } /*	font-size: 3rem; */
	.related-archive-links { max-width: 100%; margin: 0; }
	.video-loading-msg h2 { font-size: 0.8rem; }
	.video-container,
	.archive-slider {max-width: 100%; }
	.two-box {max-width: 100%; padding-right: 20px; }

  .archive-slider .slide {
    /* less gutter on tiny screens */
  }


	
	.carousel-container-wrapper { max-width: 100%; width: 100%;}
	.project-details-header { max-width: 100%; margin: 0; }
	.archive-description h2 { font-size: 1.6rem;}
	.archive-tags { width:100%; min-width: 0; } 
	.tag-container { justify-content: flex-start; }
}

/* Optional: ensure box-sizing includes padding/border in width */

* {
    /* box-sizing: border-box; */
	/* outline: 1px solid cyan;      */
}