@import url("main.inc.css");

/*
This stylesheet handles styles specific for about.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

.PASSIONIMAGE {
    display: inline-block;
    margin-top: 20px;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease; /* Smooth transition for hover */
    position: relative; /* Ensure the <a> tag inside is positioned correctly */
}

.PASSIONIMAGE a {
    display: block; /* Make the <a> tag take up the full area of the div */
    width: 100%;    /* Ensure it takes the full width of the parent div */
    height: 100%;   /* Ensure it takes the full height of the parent div */
    position: absolute; /* Position the link on top of the image */
    top: 0;
    left: 0;
    text-indent: -9999px; /* Optionally hide the text inside the <a> tag if needed */
}

.PASSIONIMAGE img {
    display: none;  /* Hide the image itself, as we are using background images */
}

/* Default background images (these can be replaced with your actual image paths) */
.PASSIONIMAGE.larchwood {
    background-image: url('../images/ABOUTBUTTONS_LARCHWOOD.jpg');
}

.PASSIONIMAGE.parrotgolf {
    background-image: url('../images/ABOUTBUTTONS_PARROTGOLF.jpg');
}

.PASSIONIMAGE.powerplay {
    background-image: url('../images/ABOUTBUTTONS_11DAY.jpg');
}

/* Hover effects */
.PASSIONIMAGE.larchwood:hover {
    background-image: url('../images/ABOUTBUTTONS_LARCHWOOD_DARK.jpg');  /* Hover image */
}

.PASSIONIMAGE.parrotgolf:hover {
    background-image: url('../images/ABOUTBUTTONS_PARROTGOLF_DARK.jpg');  /* Hover image */
}

.PASSIONIMAGE.powerplay:hover {
    background-image: url('../images/ABOUTBUTTONS_11DAY_DARK.jpg');  /* Hover image */
}


/* Align the text inside PASSIONTEXT */
.PASSIONTEXT {
    width: 100%;
    display: flex;
    flex-direction: column;  /* Stack the text vertically */
    gap: 20px;  /* Add space between each text block */
    align-items: flex-start;  /* Align text to the left */
    height:150px;
    margin-top:20px;
}

/* Adjust the header inside PASSIONTEXT */
.ABOUTheader {
    font-size: 112.5%;
    font-weight: bold;
}

/* Adjust the content inside PASSIONTEXT */
.ABOUTcontent {
    font-size: 100%;
}


aboutbody {
    background-color: #3D3D3D;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align the content to the top */
    padding: 30px; /* Add some padding for spacing */
    width: 100%;
}

.content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Two equal columns */
    gap: 20px;  /* Add space between the columns */
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;  /* Center the grid on the page */
}

.aboutimage-container {
    width: 100%;  /* Image container takes up full width of its column */
    display: flex;
    justify-content: center;  /* Center the image horizontally */
}

.aboutimage-container img {
    width: 100%;
    height: auto;
}

.abouttext-container {
    max-width: 550px;
}