/* style.css */
@import url('_variables.css'); /* or @import '_variables.css'; */

.container {
  width: var(--container-w);
}



/* --- CUSTOM BLOCK STYLING ------------------------------------------------------------ */

/* Default Page Title */

section.page-title {
    @apply flex justify-center content-stretch flex-wrap;
    min-height: 320px;
    width:100%;
    background-color:var(--colour-blue-two);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;   
}

section.page-title .container {
    @apply flex justify-center content-center flex-wrap w-full;
    max-width:100%;
}

section.page-title .container {background:linear-gradient(to bottom, rgba(0, 36, 50, 0.33), rgba(39, 199, 184, 0.5));}
section.page-title.overlay1 .container {background:linear-gradient(to bottom, rgba(0, 36, 50, 0.66), rgba(39, 199, 184, 0.5));}
section.page-title.overlay2 .container {background:linear-gradient(to top, rgba(0, 36, 50, 0.80), rgba(39, 199, 184, 0.5));}

section.page-title h1 {
    @apply text-5xl md:text-6xl px-8;
    font-weight: 400;
    color: #FFFFFF;
    text-align:center;
}


/* VIDEO HERO */

.hero-block{
    @apply flex justify-center content-center flex-wrap p-8; 
    background:linear-gradient(to bottom, rgba(0, 36, 50, 0.507), rgba(39, 199, 184, 0.557));
    position: relative;
    min-height:500px;
    height:70vh;
}
.hero-block__bg{
    @apply mix-blend-multiply;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    object-fit: cover;
}
.hero-block__container{
    position: relative;
    z-index: 2;
    max-width:720px;
}

.hero-block__header{
    @apply text-4xl leading-none;
    color: white;
    text-align: center;
    font-weight:400;
    letter-spacing:0.5px;
}
.hero-block__content{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.hero-block__list{
    @apply flex justify-center flex-col md:flex-row gap-6 md:gap-12;
    color: white;
    order:3;
}

.hero-block__link {
  @apply block border-2 rounded-sm border-white py-4 px-8 text-center transition-all;
  text-transform: uppercase;
  font-weight:400;
  letter-spacing:1px;
}

.hero-block__link:hover {
  background-color:rgba(255, 255, 255, 0.25);  
}


/* Custom Text Full Width Banners */

/* Background colours (HTML unchanged) */
.greenBG, .greenBG_lg { background: var(--colour-green); }
.orangeBG, .orangeBG_lg { background: var(--colour-tangerine); }
.tealBG, .tealBG_lg { background: var(--colour-teal); }
.blueBG, .blueBG_lg { background: var(--colour-blue-one); }
.greyBG, .greyBG_lg { background: var(--colour-cloud); }

/* Shared layout for all banners */
:is(.greenBG, .orangeBG, .tealBG, .blueBG, .greyBG, .greenBG_lg, .orangeBG_lg, .tealBG_lg, .blueBG_lg, .greyBG_lg) .rich-text {
  text-align: center;
  padding: 2em;
}

/* Shared layout for all banners */
:is(.greenBG, .orangeBG, .tealBG, .blueBG, .greyBG, .greenBG_lg, .orangeBG_lg, .tealBG_lg, .blueBG_lg, .greyBG_lg) .block-richText {
  margin-bottom:0;
}

/* Default size (non-_lg variants) */
:is(.greenBG, .orangeBG, .tealBG, .blueBG, .greyBG) .rich-text p {
  @apply text-lg md:text-xl;
  color:#fff;
  letter-spacing: 1px;
}

/* Large size (_lg variants) */
:is(.greenBG_lg, .orangeBG_lg, .tealBG_lg, .blueBG_lg, .greyBG_lg) .rich-text p {
  @apply text-2xl md:text-3xl;
  color: #fff;
  line-height: 1.5em;
}

:is(.greyBG, .greyBG_lg) .rich-text p { color:var(--colour-indigo); }



/* Rich Text Blocks */

.block-richText {
    @apply w-full mb-4;
}

.page-builder > .content-block:last-child { margin-bottom: 0; }

.block-richText .container {
    /* max-width:900px; */
}

.block-richText .block-richText__content {
    
}

.sectionHeader.block-richText__header {
 @apply mt-4 mb-8;   
}

.block-richText .block-richText__content .rich-text {
    
}

.block-richText .block-richText__content .rich-text h1 {
  @apply text-3xl;
    color: #000000;
    font-weight: 500;
    line-height: 1em; 
    margin-bottom:0.75em;   
}

.block-richText .block-richText__content .rich-text h2 {

    font-size:200%;
    color: var(--colour-blue-one);
    font-weight: 400;
    line-height: 1em;
    margin:1em 0 0.75em;     
}

.block-richText .block-richText__content .rich-text h3 {
    font-size:175%;
    color: var(--colour-blue-two);
    font-weight: 400;
    line-height: 1em;
    margin:1em 0 0.75em;    
}

.block-richText .block-richText__content .rich-text h4 {
    font-size:150%;
    color: var(--colour-indigo);
    font-weight: 400;
    line-height: 1em;
    margin:1em 0 0.75em;     
}

h2.block-heading__header {
  text-align: center;
  color: var(--colour-blue-one);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.2em;
  margin:1em 0 0.75em;
}

.block-heading__wrapper {
  
}

.block-heading__wrapper .block-heading__kicker {
  @apply text-sm md:text-base;
  text-align: center;
  color: var(--colour-indigo);
  text-transform:uppercase;
  font-weight: 400;
  line-height: 1em;
  margin:0 0 10px;  
}

.block-heading__wrapper .block-heading__header {
  @apply text-3xl md:text-5xl;
  text-align: center;
  color: var(--colour-blue-one);
  font-weight: 400;
  line-height: 1.2em;
  margin:0;  
}

.sidebar-layout .block-heading__wrapper .block-heading__kicker,
.sidebar-layout .block-heading__wrapper .block-heading__header {
  text-align:left;
}




/* Rich Text with Image */

.richImg .rich-text {
    display:flex;
    flex-direction: row;
    align-items: center;
}

.richImg .rich-text p {
    padding:1em;
}

.richImg .block-image {
    padding:1em;
}

.alignImgLeft .rich-text {
    flex-direction: row;
}

.sizeImgSml .block-image {
    max-width: 20%;
}



/* Pull Quote Block */

.block-pullquote {
    background-color:#fff;
    
}

.content-block.block-pullquote .container {
    width:100%;  
    max-width:900px;
    background-image: url("/uploads/quote-open.webp"),url("/uploads/quote-close.webp");
    background-position: 5% 0%, 95% 95%;
    background-size: 80px 70px, 40px 35px;
    background-repeat:no-repeat, no-repeat; 
}

.block-pullquote  .block-pullquote__wrapper {
    padding:2em 10%;        
}

.block-pullquote  .block-pullquote__wrapper p {
    color:var(--colour-blue-two);
    font-family: var(--font-barlow);
    font-size:1.40em;
    line-height:1.2em;    
}


.subtopic__lvl2-content .block-pullquote {
  @apply m-4 md:m-12;  
}

.subtopic__lvl2-content .block-pullquote .container {
  @apply w-full; 
}

.subtopic__lvl2-content .block-pullquote .block-pullquote__wrapper p {
  @apply text-2xl;
}


/* Hero Slides (big text) */

.heroSlide {
  @apply min-h-[30vh] md:min-h-[70vh] mb-0; 
}

.block-richText.heroSlide .container {
    @apply flex content-center md:justify-start w-[90vw] md:w-[80vw] max-w-[1200px];
}

.heroSlide.block-richText .block-richText__content {
   @apply flex content-center w-full md:w-4xl p-4 md:p-8;
   
}

.heroSlide.block-richText .block-richText__content .rich-text {
    @apply flex content-center flex-wrap;     
}

.heroSlide.block-richText .block-richText__content .rich-text h2 {
    @apply text-4xl md:text-6xl my-6;
    color: var(--colour-cloud);
    font-weight: 500;
    line-height: 1em;
}



.species-list-block {
  @apply flex w-full justify-center mt-3 mb-8 px-4;  
}

.species-list-block .container {
  @apply flex w-full;  
}

.species-list-block .species-list-block__list {
  @apply grid gap-2 grid-cols-5 w-full; 
}

.species-list-block .species-list-block__list .species-list-block__item  {
  @apply px-2 py-4 rounded-2xl shadow-md transition-transform duration-200 ease-out;
  border:1px solid;
  border-color:var(--colour-cloud);  
}

.species-list-block .species-list-block__list .species-list-block__item:hover  {
  border-color:var(--colour-tangerine);  
}

.species-list-block .species-list-block__list .species-list-block__item picture img  {
  @apply transition-transform duration-200 ease-out;
  margin:0 auto;  
}

.species-list-block .species-list-block__list .species-list-block__item:hover picture img  {
  transform: scale(1.1);  
}

.species-list-block .species-list-block__list .species-list-block__item .species-list-block__item-text {
  @apply uppercase text-sm mt-3 text-center transition-transform duration-200 ease-out;
  letter-spacing:-0.5px;
  font-weight:600;  
}

.species-list-block .species-list-block__list .species-list-block__item:hover .species-list-block__item-text {
  color:var(--colour-tangerine);  
}

.species-list-block__text {
  @apply p-4 md:p-6 text-center text-sm;
  color:var(--colour-green);
  font-style:italic;
}


/* Figure Block */

.block-figure {
  @apply flex justify-center;    
}

.content-block.block-figure .container {
  @apply w-full p-0;
}

.block-figure__wrapper {
  @apply flex justify-center content-center flex-col flex-wrap;  
}

.block-figure__image {
  @apply w-full rounded-lg shadow-md;  
}

.block-figure__caption {
  @apply w-9/10 shadow-md rounded-lg overflow-hidden p-6 -mt-6 z-3 mx-auto text-center;
  background-color:#f8fafb; 
}


/* Media Split Layouts */

/* 1/3 */
.media-split--1third .rich-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.media-split--1third .rich-text section, .media-split--1third .rich-text p {
  padding-top:0;
} 

@media (min-width: 768px) {
  .media-split--1third .rich-text {
    grid-template-columns: 1fr 2fr;
    column-gap: 1.5rem; 
    row-gap: 0;
    grid-auto-rows: auto;
    align-items: center;             
  }
  
  .media-split--1third .rich-text > .block-figure {
    grid-column: 1;
    grid-row: 1 / span 999;
    align-self: center;  
  }
  
  .media-split--1third .rich-text > :not(.block-figure) {
    grid-column: 2;                  
    align-self: center;  
  }
}

/* 1/2 */
.media-split--half .rich-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.media-split--half .rich-text section, .media-split--half .rich-text p {
  padding-top:0;
} 

@media (min-width: 768px) {
  .media-split--half .rich-text {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem; 
    row-gap: 0;
    grid-auto-rows: auto;
    align-items: center;             
  }
  
  .media-split--half .rich-text > .block-figure {
    grid-column: 1;
    grid-row: 1 / span 999;
    align-self: center;  
  }
  
  .media-split--half .rich-text > :not(.block-figure) {
    grid-column: 2;                  
    align-self: center;  
  }
}

/* 1/4 */
.media-split--quarter .rich-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.media-split--quarter .rich-text section, .media-split--quarter .rich-text p {
  padding-top:0;
} 

@media (min-width: 768px) {
  .media-split--quarter .rich-text {
    grid-template-columns: 1fr 3fr;
    column-gap: 1.5rem; 
    row-gap: 0;
    grid-auto-rows: auto;
    align-items: center;             
  }
  
  .media-split--quarter .rich-text > .block-figure {
    grid-column: 1;
    grid-row: 1 / span 999;
    align-self: center;  
  }
  
  .media-split--quarter .rich-text > :not(.block-figure) {
    grid-column: 2;                  
    align-self: center;  
  }
  
  :is(.media-split--1third, .media-split--half, .media-split--quarter) :where(.block-figure__image) {
    box-shadow:none;
  }
  
  :is(.media-split--1third, .media-split--half, .media-split--quarter) :where(.block-figure__caption) {
    padding:1em;
    font-size:75%;
    background-color:#efefef;
  }
}

/* ─────────────────────────────────────────────────────────────
   CARDS GRID — STRUCTURE
   ──────────────────────────────────────────────────────────── */

.block-cardsGrid { /* outer section wrapper */
  @apply flex justify-center p-8 md:p-0; 
}

.content-block.block-cardsGrid .container {
  width:var(--container-xl);
  max-width:1200px; 
}


.block-cardsGrid__header { /* optional block heading */
  /* @apply mb-6; */
}

.block-cardsGrid__grid { /* the grid container (cols/gaps/alignment set by Twig maps) */
  @apply flex;
  
}

/* Single card (link or div) */
.block-cardsGrid__card {
  @apply transition-all duration-700 ease-in-out rounded-lg;
  background-color:var(--colour-indigo);
  border:10px solid;
  border-color:var(--colour-indigo);
}
.block-cardsGrid__card:hover {
  @apply transition-all duration-700 ease-in-out shadow-xl;
  background-color:var(--colour-tangerine);
  border-color:var(--colour-tangerine);
  transform: scale(1.02);
  
}


/* MEDIA / IMAGE */

.block-cardsGrid__media {
  @apply overflow-hidden rounded-md;
}

.block-cardsGrid__image {
  /* @apply w-full h-full object-cover transition-transform duration-200; */
}

/* Subtle zoom on hover */
.block-cardsGrid__card:hover .block-cardsGrid__image {
  transform: scale(1.03);
}

/* Optional placeholder when no image */
.block-cardsGrid__image.--placeholder {
  /* @apply bg-slate-100; */
}

/* TEXT */

.block-cardsGrid__title {
  @apply py-3;
  font-size:1.3em;
  text-align:center;
  color:#fff;
  font-weight: 500;
}

/* RESPONSIVE EXTRAS */

/* Reduce gap on small screens */
@media (max-width: 480px) {
  .block-cardsGrid__grid { /* @apply gap-4; */ }
}

/* Make titles slightly larger on desktop */
@media (min-width: 1024px) {
  .block-cardsGrid__title { /* @apply text-lg; */ }
}



/* imageAndTextTiles */

.image-and-text-tiles {
 @apply flex justify-center my-4; 
}

.content-block.image-and-text-tiles .container {
  @apply px-4 md:p-0;
  width:var(--container-xl);  
  max-width:1200px;
}

.image-and-text-tiles__list {
  @apply flex justify-center flex-col md:flex-row gap-6;
}

.image-and-text-tiles__item {
  @apply w-full md:w-1/2 lg:w-1/3 shadow-md rounded-lg overflow-hidden;
  background-color:#f8fafb;  
}

.image-and-text-tiles__item-img {
  @apply w-full aspect-3/2;
}

.image-and-text-tiles__item-text {
  @apply p-4 md:p-6 text-center text-sm; 
}

.image-and-text-tiles__item-text .rich-text h2 {
  @apply text-2xl/4 mb-3;  
}

.image-and-text-tiles__item-text .rich-text h3 {
  @apply text-xl/4 mb-3;  
}

.image-and-text-tiles__item-text .rich-text h4 {
  @apply text-xl/4 mb-3;  
}



/* Slider Gallery */

.block-gallery {
  @apply flex justify-center; 
}

.content-block.block-gallery .container {
  width:var(--container-xl); 
  max-width:1200px; 
}


.block-gallery__item {
    background: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-gallery__item-image {
  @apply w-full rounded-lg shadow-md; 
}

.block-gallery__item-caption{
    @apply w-9/10 shadow-md rounded-lg overflow-hidden p-3 -mt-6 z-10 mx-auto text-center text-sm;
    background-color:#f8fafb;
}

.block-gallery .swiper-pagination-bullets{
        position: static;
        margin-top: 1.5rem;
}
.block-gallery .swiper-pagination-bullet{
        @apply transition-all duration-300 ease-in-out shadow-sm;
        background-color: var(--colour-blue-one);
        width: 1rem;
        height: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
}

.block-gallery .swiper-pagination-bullet-active{
        width:3em;
        border-radius:2em;
        background-color: var(--blue-darker);
}


/* Gallery Walls */

.block-gallery__grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4
}

.block-gallery__grid-item {
  display: flex; /* allows corner “snapping” */
}

.block-gallery__figure {
  @apply shadow-xl;
  overflow: hidden;
  border-radius: 0.25rem;
}

.block-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Top-left cell -> push image to bottom-right */
.block-gallery__grid-item[data-wall-slot="1"] {
  justify-self: end;
  align-self: flex-end;
}
.block-gallery__grid-item[data-wall-slot="1"] .block-gallery__img {
  object-position: 100% 100%;
}

/* Top-right -> bottom-left */
.block-gallery__grid-item[data-wall-slot="2"] {
  justify-self: start;
  align-self: flex-end;
}
.block-gallery__grid-item[data-wall-slot="2"] .block-gallery__img {
  object-position: 0% 100%;
}

/* Bottom-left -> top-right */
.block-gallery__grid-item[data-wall-slot="3"] {
  justify-self: end;
  align-self: flex-start;
}
.block-gallery__grid-item[data-wall-slot="3"] .block-gallery__img {
  object-position: 100% 0%;
}

/* Bottom-right -> top-left */
.block-gallery__grid-item[data-wall-slot="4"] {
  justify-self: start;
  align-self: flex-start;
}
.block-gallery__grid-item[data-wall-slot="4"] .block-gallery__img {
  object-position: 0% 0%;
}

/* wall-v1 */

.block-gallery--wall-v1 .block-gallery__grid-item[data-wall-slot="1"] { 
  width:80%;  
}

.block-gallery--wall-v1 .block-gallery__grid-item[data-wall-slot="2"] { 
  width:100%;   
}

.block-gallery--wall-v1 .block-gallery__grid-item[data-wall-slot="3"] { 
  width:100%;   
}

.block-gallery--wall-v1 .block-gallery__grid-item[data-wall-slot="4"] { 
  width:90%;   
}





/* Make slot 3 the tall one */
.block-gallery--wall-v2 .block-gallery__grid-item[data-wall-slot="3"] {
  grid-column: 2;        /* right column */
  grid-row: 1 / span 2;  /* two rows */
  display: flex;
  align-self: center;   /* vertical centre (optional but usually nice) */
  justify-self: center;
  margin-top:5em;
}

.block-gallery--wall-v2 .block-gallery__grid-item[data-wall-slot="1"] {
  width:80%;  /* optional: horizontal centre */
}

.block-gallery--wall-v2 .block-gallery__grid-item[data-wall-slot="2"] {
  margin-bottom:2em;
}

/* Let the figure fill the taller space (if you're using fixed heights) */
.block-gallery--wall-v2 .block-gallery__grid-item[data-wall-slot="3"] .block-gallery__figure {
  height: 100%;
}

/* Optional: centre the crop focal point for the tall one */
.block-gallery--wall-v2 .block-gallery__grid-item[data-wall-slot="3"] .block-gallery__img {
  object-position: 50% 50%;
}





/* Slot 1 spans two rows */
.block-gallery--wall-v3 .block-gallery__grid-item[data-wall-slot="1"] {
  grid-row: 1 / span 2;
  display: flex;
  align-self: center;      /* vertical centre */
  justify-self: center;
  margin-top:4em;  /* optional: horizontal centre */
}

.block-gallery--wall-v3 .block-gallery__grid-item[data-wall-slot="3"] {
  align-self: start;      /* vertical centre */
  justify-self: start;
  margin-bottom:6em;
  width:90%;  /* optional: horizontal centre */
}

/* Optional: if your figure has a fixed height, let slot 1 breathe */
.block-gallery--wall-v3 .block-gallery__grid-item[data-wall-slot="1"] .block-gallery__figure {
  height: 100%;
}

/* If you want the crop focal point centred for slot 1 */
.block-gallery--wall-v3 .block-gallery__grid-item[data-wall-slot="1"] .block-gallery__img {
  object-position: 50% 50%;
}






/* --- CUSTOM BLOCK STYLING ------------------------------------------------------------ */



.content:not(:last-child){
    margin-bottom: 1.5rem;
}


/*//////////////////////////////////*/


.content li + li {
    margin-top: 0.25em;
}

.content p:not(:last-child),
.content dl:not(:last-child),
.content ol:not(:last-child),
.content ul:not(:last-child),
.content blockquote:not(:last-child),
.content pre:not(:last-child),
.content table:not(:last-child) {
    margin-bottom: 1em;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    /*color: #363636;*/
    font-weight: 600;
    line-height: 1.125;
}

.content h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.content h1:not(:first-child) {
    margin-top: 1em;
}

.content h2 {
    font-size: 1.75em;
    margin-bottom: 0.5714em;
}

.content h2:not(:first-child) {
    margin-top: 1.1428em;
}

.content h3 {
    font-size: 1.5em;
    margin-bottom: 0.6666em;
}

.content h3:not(:first-child) {
    margin-top: 1.3333em;
}

.content h4 {
    font-size: 1.25em;
    margin-bottom: 0.8em;
}

.content h5 {
    font-size: 1.125em;
    margin-bottom: 0.8888em;
}

.content h6 {
    font-size: 1em;
    margin-bottom: 1em;
}

.content blockquote {
    background-color: whitesmoke;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
}

.content ol {
    list-style-position: outside;
    margin-left: 2em;
    margin-top: 1em;
}

.content ol:not([type]) {
    list-style-type: decimal;
}

.content ol:not([type]).is-lower-alpha {
    list-style-type: lower-alpha;
}

.content ol:not([type]).is-lower-roman {
    list-style-type: lower-roman;
}

.content ol:not([type]).is-upper-alpha {
    list-style-type: upper-alpha;
}

.content ol:not([type]).is-upper-roman {
    list-style-type: upper-roman;
}

.content ul {
    list-style: disc outside;
    margin-left: 2em;
    margin-top: 1em;
}

.content ul ul {
    list-style-type: circle;
    margin-top: 0.5em;
}

.content ul ul ul {
    list-style-type: square;
}

.content dd {
    margin-left: 2em;
}

.content figure {
    margin-left: 2em;
    margin-right: 2em;
    text-align: center;
}

.content figure:not(:first-child) {
    margin-top: 2em;
}

.content figure:not(:last-child) {
    margin-bottom: 2em;
}

.content figure img {
    display: inline-block;
}

.content figure figcaption {
    font-style: italic;
}

.content pre {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding: 1.25em 1.5em;
    white-space: pre;
    word-wrap: normal;
}

.content sup,
.content sub {
    font-size: 75%;
}

.content table {
    width: 100%;
}

.content table td,
.content table th {
    border: 1px solid #dbdbdb;
    border-width: 0 0 1px;
    padding: 0.5em 0.75em;
    vertical-align: top;
}

.content table th {
    color: #363636;
}

.content table th:not([align]) {
    text-align: inherit;
}

.content table thead td,
.content table thead th {
    border-width: 0 0 2px;
    color: #363636;
}

.content table tfoot td,
.content table tfoot th {
    border-width: 2px 0 0;
    color: #363636;
}

.content table tbody tr:last-child td,
.content table tbody tr:last-child th {
    border-bottom-width: 0;
}

.content .tabs li + li {
    margin-top: 0;
}