/* Extend CLF4 style with class apply to components - v0.0.1 */
/* General Style */
:root { --com-padding: 40px; }

/*** Browser Anchor link smooth scrolling and padding space ***/
*[id] {	scroll-margin-top: 80px; } html  { scroll-behavior: smooth; }


/*** Column control component - Vertical align cewtner ***/
.col-1-valign-center .c1, .col-2-valign-center .c2,
.col-3-valign-center .c3, .col-4-valign-center .c4,
  .all-valign-center :is(.c1, .c2, .c3, .c4) { 
      display: grid; align-items: center;
}
.col-1-valign-bottom .c1, .col-2-valign-bottom .c2,
.col-3-valign-bottom .c3, .col-4-valign-bottom .c4,
  .all-valign-bottom :is(.c1, .c2, .c3, .c4) {
      display: grid; align-items: end;
}


/*** Images component - Responsive fill the column and content vertical align ***/
.image.parbase:has(div[class*="fill-col"]), .textimage:has(div[class*="fill-col"]), 
[class*="fill-col"]:is(.image-container, .overlay-banner, .overlay-banner-white), [class*="fill-col"] > div:not(.clear):not(.text) { height: 100%; }
[class*="fill-col"] img { height: 100%; object-fit: cover; } 
[class*="fill-col"] > div.clear { display: none; }
/*** Text & Image component (overlay-banner style) - Vertical align at dekstop (980px above) ***/
@media (min-width: 980px) {
    .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white) > div.text,
    .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white) > div.text
    { padding-top: calc( 0.45em + var(--com-padding) ); padding-bottom: var(--com-padding); width: 50%;  
        & p {
            position: unset; /* unset white test box position:absolute; in AEM */
        }
    }
    
    :where(.main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white),
           .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white) )
    { display: grid; align-items: center; } /* follow existing align center as default */
    
    .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text p,
    .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text p
    { text-align: right;  margin-right: 3rem;  margin-left: auto; }
    
    .main__content div.textimage .valign-top:is(.overlay-banner, .overlay-banner-white)    { align-items: start; }
    .main__content div.textimage .valign-center:is(.overlay-banner, .overlay-banner-white) { align-items: center; }
    .main__content div.textimage .valign-bottom:is(.overlay-banner, .overlay-banner-white) { align-items: end; }
}
@media (max-width: 979px) {
    .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white) > div.text 
    { /* grid-row: 1; */ align-content: end; }
    .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text { justify-items:normal; }
}

/* Position the focus point of the photo */
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-0-0    img{ object-position:  0% 0%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-25-0   img{ object-position: 25% 0%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-50-0   img{ object-position: 50% 0%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-75-0   img{ object-position: 75% 0%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-100-0  img{ object-position:100% 0%; }

:is(.image-container, .overlay-banner, .overlay-banner-white).focus-0-25   img{ object-position:  0% 25%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-25-25  img{ object-position: 25% 25%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-50-25  img{ object-position: 50% 25%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-75-25  img{ object-position: 75% 25%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-100-25 img{ object-position:100% 25%; }

:is(.image-container, .overlay-banner, .overlay-banner-white).focus-0-50   img{ object-position:  0% 50%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-25-50  img{ object-position: 25% 50%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-50-50  img{ object-position: 50% 50%; } /* Default center */
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-75-50  img{ object-position: 75% 50%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-100-50 img{ object-position:100% 50%; }

:is(.image-container, .overlay-banner, .overlay-banner-white).focus-0-75   img{ object-position:  0% 75%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-25-75  img{ object-position: 25% 75%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-50-75  img{ object-position: 50% 75%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-75-75  img{ object-position: 75% 75%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-100-75 img{ object-position:100% 75%; }

:is(.image-container, .overlay-banner, .overlay-banner-white).focus-0-100   img{ object-position:  0% 100%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-25-100  img{ object-position: 25% 100%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-50-100  img{ object-position: 50% 100%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-75-100  img{ object-position: 75% 100%; }
:is(.image-container, .overlay-banner, .overlay-banner-white).focus-100-100 img{ object-position:100% 100%; }


/*** Images component (with fill-col fit) - Aspect ratio and min height ***/
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect1-1 img  { aspect-ratio: 1/1; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect4-3 img  { aspect-ratio: 4/3; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect3-2 img  { aspect-ratio: 3/2; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect16-9 img { aspect-ratio: 16/9;}
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect5-2 img  { aspect-ratio: 5/2; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect3-1 img  { aspect-ratio: 3/1; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect4-1 img  { aspect-ratio: 4/1; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect5-1 img  { aspect-ratio: 5/1; }
:is(.image-container, .overlay-banner, .overlay-banner-white).aspect6-1 img  { aspect-ratio: 6/1; }
/* make aspect ratio able to use without fill-col fill column class */
:is(.image-container, .overlay-banner, .overlay-banner-white)[class*="aspect"]:not(.fill-col) img { object-fit: cover; }
/* minimum height for help mobile image height not too small */
.image-container.min-h-150 img { min-height: 150px; }
.image-container.min-h-175 img { min-height: 175px; }
.image-container.min-h-200 img { min-height: 200px; }
.image-container.min-h-225 img { min-height: 225px; }
.image-container.min-h-250 img { min-height: 250px; }
.image-container.min-h-275 img { min-height: 275px; }
.image-container.min-h-300 img { min-height: 300px; }


/*** Images component - Parallax scroll effect ***/ 
.image-container.parallax:not(.fill-col):not([class*="aspect"]) img {    
    aspect-ratio: 5 / 1;    object-fit: cover;    /* object-position: 50% 50%;  */
}
.sfu-columns > .parallax,   /* this make it also work with content teaser add Parallax effect */
.image-container.parallax img {    
	animation: parallax linear;
	animation-timeline: view(); /* Not totally support in Fireforx yet */
}
@keyframes parallax {
	from { background-position-y: 75%; object-position: 50% 75%; }
	to   { background-position-y: 25%; object-position: 50% 25%; }
}



/*** Text component - Bg Gradient (For overlay use) ***/
/* Black with white text */
.parbase.section > .gradientbg-black {
    background: #000000; /* fall back */    color: #fff;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);
}
/* Dark Red with white text */
.parbase.section > .gradientbg-red {
    background: #A6192E; /* fall back */    color: #fff;
    background: linear-gradient(90deg,rgba(166, 25, 46, 0.5) 0%, rgba(166, 25, 46, 0.4) 100%);
}
/* while Bg with normal text */
.parbase.section > .block.white { background: #fff; color: var(--sfu-colour-s1);}
.main__content div.block.red div[class*=graphics] p, 
.main__content div.block.light-red div[class*=graphics] p { color: unset; }
/* Thin outline */
.parbase.section > .outline.thin { border-width: thin; }



/*** Text color ****/
/* Title components (whole title)*/
.title.section > .light-red > h1 { color: var(--sfu-colour-p1); }
.title.section > .red > h1 { color: var(--sfu-colour-p2); }
/* Text components (selective area or whole component) */
.parbase.section .light-red, .parbase.section .light-red a, .parbase.section .light-red :is(h1, h2, h3, h4, h5, h6)  { color: var(--sfu-colour-p1); }
.parbase.section .light-red a:hover { color: var(--sfu-colour-s5); }
.parbase.section .red, .parbase.section .red a, .parbase.section .red :is(h1, h2, h3, h4, h5, h6) { color: var(--sfu-colour-p2); }
.parbase.section .red a:hover { color: var(--sfu-colour-s5); }


/*** <hr> tag line - thin style ***/
hr.thin { border-width: 0.5px; }