/*************************
All Content Block styles
*************************/
pc-heading :is(h1, h2, h3, h4) {
  line-height: 1.4;
}
pc-block :is(h1, h2) {
  font-size:var(--pc-font-xxxl);
}
pc-block :is(h3, h4) {
  font-size:var(--pc-font-xxl);
}
pc-block .pc-content-wrap a:not([data-button]){
  border-bottom:2px solid currentcolor;
  padding-bottom:2px;
}
pc-block[data-type~="content"],
pc-block[data-type~="hero"],
pc-block[data-type~="content-left-right"],
pc-block[data-type~="recent-posts"] {
  background-image: var(--pc-bg-image, none);
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
}
pc-block .pc-block-overlay {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pc-bg-overlay);
    opacity: var(--pc-bg-overlay-opacity);
    pointer-events: none;
    z-index: 1;
}
pc-block .pc-block-overlay + .pc-content-wrap{
  position: relative;
  z-index: 2;
}

@media (max-width:899.95px) {
  [data-flex~="ccb-order-normal"] {
    flex-direction: column;;
  }

  [data-flex~="ccb-order-reverse"] {
    flex-direction: column-reverse;
  }
  [data-grid~="ccb-order-normal"] {
    order: 1;
  }

  [data-grid~="ccb-order-reverse"] {
    order: 1;
  }
}
@media (min-width: 900px) {
  [data-grid~="ccb-col-span-5"] {
    grid-column: span 5
  }
  
  [data-grid~="ccb-col-span-6"] {
    grid-column: span 6
  }
  
  [data-grid~="ccb-col-span-7"] {
    grid-column: span 7
  }
}
.pc-content-new p {
    margin-bottom: var(--pc-content-space);
}

.pc-content-new h2,
.pc-content-new h3 {
    margin-bottom: calc(var(--pc-content-space) * 0.5);
}
.pc-content-new img {
    display: block;
    margin-top:var(--pc-content-space);
    margin-bottom:var(--pc-content-space);
}
.pc-content-new ul,
.pc-content-new ol{
    padding-bottom:1.5rem;
}
/*************************
All image Block styles
*************************/
pc-block[data-type~="image"] {
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
}
pc-block[data-type~="image"] figure{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
[data-width~="image-small"] {
  max-width: 450px;  
}
[data-width~="image-medium"] {
  max-width: 800px;  
}
[data-width~="image-large"] {
  max-width: 1024px  
}
[data-width~="image-full"] {
  width: 100%;
}

.pc-image-text-block [data-offset='up'] {
    /* If --pc-active-offset isn't set, use 0px */
    transform: translateY(calc(var(--pc-active-offset, 0px) * -1.35));
}

.pc-image-text-block [data-offset='down'] {
    transform: translateY(var(--pc-active-offset, 0px));
}

.pc-image-text-block [data-offset] {
    padding-top: var(--pc-active-offset, 0px);
    padding-bottom: var(--pc-active-offset, 0px);
    
    /* Optional: nice transition */
    transition: transform 0.3s ease, padding 0.3s ease;
}

/* Mobile Reset */
@media screen and (max-width: 899.95px) {
    .pc-image-text-block [data-offset] {
        --pc-active-offset: 0px !important;
    }
}
pc-image-card figcaption,
.pc-image-text-block figcaption {
 font-size: 0.8rem;
  margin: 0 auto;
  padding: 5px;
  font-style: italic;
}

/*************************
hero image Block styles
*************************/
[data-type~="hero"] {
  --pc-hero-auto:auto;
  --pc-hero-small:65vh;
  --pc-hero-medium:75vh;
  --pc-hero-large:95vh;
}
[data-type~="hero-auto"] {
  min-height: var(--pc-hero-auto);
}
[data-type~="hero-small"] {
  min-height: var(--pc-hero-small);
}
[data-type~="hero-medium"] {
  min-height: var(--pc-hero-medium);
}
[data-type~="hero-large"] {
  min-height: var(--pc-hero-large);
}


/*************************
Video Block styles
*************************/
@media screen and (max-width: 767.95px) {
  pc-block[data-type="video"] {
    padding:var(--pc-p05);
  }
}
 pc-block[data-type="video"] {
	 width: 100%;
	 margin-inline: auto;
	 display: block;
	/* Handle the Max Width options from ACF */
}
pc-block[data-type="video"] .pc-content-wrap {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
 pc-video {
	 display: block;
	 position: relative;
	 width: 100%;
	 background: #000;
	/* Clean background before video loads */
	 overflow: hidden;
	/* Magic CSS property: Sets height automatically based on width */
	/* Shorts/TikTok style */
	/* Ensure children fill the box */
}
 pc-video[data-aspect="16-9"] {
	 aspect-ratio: 1.7777777778;
}
 pc-video[data-aspect="4-3"] {
	 aspect-ratio: 1.3333333333;
}
 pc-video[data-aspect="1-1"] {
	 aspect-ratio: 1;
}
 pc-video[data-aspect="9-16"] {
	 aspect-ratio: 0.5625;
}
 pc-video[data-aspect="21-9"] {
	 aspect-ratio: 2.3333333333;
}

 pc-video .pc-video-facade, pc-video video, pc-video iframe {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 object-fit: cover;
}
 .pc-video-facade {
	 cursor: pointer;
	 z-index: 1;
}

 .pc-video-facade img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 transition: opacity 0.3s ease;
}
 .pc-video-facade:hover img {
	 opacity: 0.8;
}
/* Centered Play Button */
 .pc-play-btn {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 68px;
	 height: 48px;
	/* Use your custom play button image or an SVG here */
	 background: url('https://cdn.jsdelivr.net/gh/praveenc78/icons/common/pc-yt.png') no-repeat center center;
	 background-size: contain;
	 pointer-events: none;
	/* Clicks pass through to the div */
	 transition: transform 0.2s ease;
}
.pc-self-hosted-play-btn {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 48px;
	 height: 48px;
	/* Use your custom play button image or an SVG here */
	 background: url('https://cdn.jsdelivr.net/gh/praveenc78/icons/common/pc-play-button.png') no-repeat center center;
	 background-size: contain;
	 pointer-events: none;
	/* Clicks pass through to the div */
	 transition: opacity 0.3s ease;
}
 .pc-video-facade:hover .pc-play-btn {
	 transform: translate(-50%, -50%) scale(1.1);
	/* Slight grow effect */
}

/*************************
Recent Posts styles
*************************/
@media (max-width:767.95px) {
  .pc-feed-item {
    padding-bottom: var(--pc-p05);
  }
}
.pc-feed-item pc-content-card{
  flex-grow: 1;
}
.pc-book-item picture {
  overflow: hidden;
  aspect-ratio: 2/3;
  margin: 0 auto;
 }
@media (min-width: 430px) and (max-width: 767.95px) {
  .pc-book-item picture {
    height:350px;
  }
}
.pc-blog-item picture {
  overflow: hidden;
  aspect-ratio: 1/1;
  margin: 0 auto;
 }
@media (min-width: 430px) and (max-width: 767.95px) {
  .pc-blog-item picture {
    height:350px;
  }
}
.pc-news-item picture {
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: 0 auto;
 }
 .pc-news-item .pc-news-placeholder {
  aspect-ratio: 16/9;
}
.pc-feed-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.3s ease;
}

.pc-feed-item pc-button {
  max-width: 220px;
  margin: auto auto 0;
}
.pc-feed-item pc-button a{
  border: 1px solid #ccc;
  border-bottom:2px solid currentColor;
  padding-bottom: 0.03em;
}
.pc-feed-item pc-button a:hover{
  border-color:var(--pc-seafoam-green);
}
/*************************
CTA Block styles
*************************/
@media (min-width:601px){
  pc-cta-card [data-button]{
   width:auto;
   min-width: 30%;
  }
}
@media (min-width:768px){
  pc-cta-card[data-grid~="banner"] {
    grid-template-columns:75% 1fr;
  }  
}
