/* CSS to customise the front end joomsport fixtures/results views */
.svpl_groups{
  font-style: normal;
  //font-size: 30px;
  font-size: 1.5 em;
  font-weight: 500;
}

.svpl_jsScoreDiv {
  font-size: 12px;
}
/* end of Joomsport customisation */


/* Title for home page */
.heading-main-title {
  position: static;
  border-style: none;
  border-width: 1px;
  border-color: black;
  border-radius: 0px;
  /* box-shadow: rgba(112, 108, 108, 0.2) 0px 2px 5px 0px; */
  outline: black 3px;
  outline-offset: 0px;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 54px;
  line-height: 52px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: rgba(10, 10, 10, 0.2) 4px 3px 4px;
  word-break: normal;
  mix-blend-mode: normal;
}
/* styling for underline on home page - style-eight */
hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}

hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

/* styling for headers and underlines */
.module-title {
  margin-bottom: 15px;
} 

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Headlines Bullet*/
.headline-bullet h3.module-title::before, .headline-bullet .module-title.h3::before {
  content: "";
  display: inline-block;
  position: relative;
  top: calc(-0.1 * 1em);
  vertical-align: middle;
  height: calc(4px + 0.7em);
  margin-right: calc(5px + 0.2em);
  border-left: calc(5px + 0.1em) solid #e95d3c;
}

.headline-border-primary h3.module-title, .headline-border-primary .module-title.h3 {
  border-bottom: 1px solid #e95d3c !important;
  padding: 6px 0;
}

/* container for aligning text to left of image in desktop view and image
   on the top of text in mobile view.
   Initially set up for the featured articles on the home page
*/

.container-featured-articles {
  display: flex;
  align-items: center; /* Vertically center text with image on desktop */
  gap: 1rem; /* Space between image and text */
}

.container-featured-articles img {
  max-width: 35%;
  height: auto;
}

.container-featured-articles .text {
  flex: 1;
}

/* Mobile view - stack image above text */
@media (max-width: 768px) {
  .container-featured-articles {
    flex-direction: column;
    align-items: flex-start; /* Align text to left under image */
  }

  .container-featured-articles img {
    max-width: 100%;
  }
}

/* custom CSS to display header in both desktop and mobile view */
.svpl-banner {
  width: 100%;
  display: block;
  border-radius: 15px; /* Adjust for more or less rounding */
  object-fit: cover;   /* Ensures the image covers the area without distortion */
}

/* Optional: make sure it’s responsive in height */
.svpl-banner-container {
  width: 100%;
  max-width: 1200px; /* Optional max width for large screens */
  margin: 0 auto;
}

@media (max-width: 768px) {
  .svpl-banner {
    border-radius: 10px; /* Slightly smaller rounding on mobile if desired */
  }
}
.heading-with-icon {
  display: flex;
  flex-direction: row; /* Always icon left, text right */
  align-items: center; /* Vertically center icon and text */
  gap: 0.5rem; /* Space between icon and text */
}

.heading-with-icon img,
.heading-with-icon svg {
  width: 45px;
  height: 45px;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* CHECK code beneath here may not be needed
   if needed move above this comment
   if not needed, delete it
*/

.container_home_banner {
    display: grid;
    --size: 125px; 
    height: calc(var(--size) * 2);
    grid-template-columns: 1fr 0.4fr 1fr 0.4fr;
    grid-template-rows: 300px;
    grid-auto-rows: height;
    gap: 5px;
    justify-items: stretch;
    align-items: stretch;
}

.container_home_banner img {
  height: calc(var(--size) * 2);
  object-fit: cover;
  border-radius: 5px;
}

.home-Title {
  font-size: 60px;
  text-align: center;
  font-family: georgia, palatino;
  text-shadow: #999999 2px 2px 2px; 
  color: #000000;
  font-weight: 500;
}

/* Polariod image layout for home page articles */
div.polaroid-img {
  width:100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}
div.polaroid-container {
  text-align: justify;
  padding: 10px 20px;
}/* End of Polariod image layout for home page articles */

.image-container {
  display:flex;
  width: 100%;
  align-items:center;
}

.image-description {
  padding:10px;
}

/* enlarge image when hovering on it */
.image-container img:hover{
  transform: scale(1.3);
}

/* Start of CSS Grid Layout for Home - Main */
.svpl-home-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(250px, auto);
  grid-gap: 10px;
}

.svpl-home-box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.svpl-home-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
/* End of CSS Grid Layout for Home - Main */

 .grid-container-2cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  justify-items: stretch;
  align-items: center;
  grid-template-areas:
    "2cols-text 2cols-image1";
}

.2cols-image1 {
  grid-area: 2cols-image1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.2cols-text {
  grid-area: 2cols-text;
}