:root
{
    --accent-color: #2899B2;
    --accent-color-rgb: 40, 153, 178;
}

.page_header
{
    width: 100%;
    max-width: 1024px;
    margin: 100px auto 0;
    padding: 1.25rem;
}

h2
{
    font-size: 2.25rem;
    font-weight: bold;
}

h3
{
    font-size: 1.75rem;
    font-weight: bold;
}

h4
{
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

.btn_back
{
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 20px;
    border-radius: 999px;
    background-color: rgba(var(--accent-color-rgb), 0.2);
    font-weight: bold;
    color: var(--accent-color);
    text-decoration: none;
}

.container
{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

img
{
	-webkit-user-drag: none;
}

/* Club Header */
.club_header
{
    display: flex;
    flex-direction: column;
}
.club_header .club_image
{
    width: 100%;
    min-height: 200px;
    margin: 1.25rem 0;
    background: no-repeat center url(../images/no-image-featured.jpg);
    background-size: cover;
}
.club_header .club_image img
{
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.basic_info {
    flex: 1;
}

.basic_info hgroup
{
    margin-bottom: 1.25rem;
}

.club_meta > div
{
    display: flex;
    width: 100%;
    padding: 0.375em 0;
    padding-left: 2em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: no-repeat center left;
}

.club_meta > .school_name
{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMiAyMWgyME04LjUgMTYuOTU1aDdNMTIgMTd2NG0tOSAwdi03YTEgMSAwIDAgMSAxLTFoMm0xMiAwaDJhMSAxIDAgMCAxIDEgMXY3bS02LTR2NG0tNiAwdi00Ii8+PHBhdGggc3Ryb2tlPSJjb2xvcihkaXNwbGF5LXAzIC4xOTYxIC4xOTYxIC4xOTYxKSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTYgMjFWMTAuODU3YTEgMSAwIDAgMSAuNTA0LS44NjhsNS0yLjg1N2ExIDEgMCAwIDEgLjk5MiAwbDUgMi44NTdhMSAxIDAgMCAxIC41MDQuODY4VjIxTTEyIDQuNVY3bTMuNS01aC0zYS41LjUgMCAwIDAtLjUuNXYyYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDAgLjUtLjV2LTJhLjUuNSAwIDAgMC0uNS0uNVoiLz48cGF0aCBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTEuODIzIDExLjA3M2EuMjQ4LjI0OCAwIDAgMSAuMzQ5LjAwNC4yNDYuMjQ2IDAgMSAxLS4zNS0uMDA0WiIvPjwvc3ZnPg==');
}
.club_meta > .club_name
{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik0xMiAxMi42MTFBMy4wNTYgMy4wNTYgMCAxIDAgMTIgNi41YTMuMDU2IDMuMDU2IDAgMCAwIDAgNi4xMTFaIi8+PHBhdGggZD0iTTkuMTAyIDEwLjQ3OUEzLjA1MSAzLjA1MSAwIDEgMCAxMiAxNS41NjQiLz48cGF0aCBkPSJNMTEuMjk2IDEyLjUyMmEzLjAyIDMuMDIgMCAwIDAtLjE1Ny45MjMgMy4wNTYgMy4wNTYgMCAxIDAgMy43Ni0yLjk2NiIvPjxwYXRoIGQ9Ik0xMiAyMS41YTkuNSA5LjUgMCAxIDAgMC0xOSA5LjUgOS41IDAgMCAwIDAgMTlaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgyNHYyNEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');
}
.club_meta > .founding_year
{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik01IDIxVjMuOTNtMTQgMTAuMDlWNE01IDE0cy44NzUtLjcyNyAzLjUtLjcyN1MxMi44NzUgMTUgMTUuNSAxNXMzLjUtLjk3NyAzLjUtLjk3N001IDMuOTMyUzUuODc1IDMgOC41IDNzNC4zNzUgMS43MjcgNyAxLjcyN1MxOSA0IDE5IDQiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0djI0SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+');
}
.club_meta > .member_count
{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik0yMC43OTMgOS41MjNhMi4wMjMgMi4wMjMgMCAxIDEtMi44NjEgMi44NjEgMi4wMjMgMi4wMjMgMCAwIDEgMi44Ni0yLjg2Wm0tNi41OS0zLjYxMWEzLjExNSAzLjExNSAwIDEgMS00LjQwNiA0LjQwNiAzLjExNSAzLjExNSAwIDAgMSA0LjQwNi00LjQwNlpNNi4wNjggOS41MjNhMi4wMjMgMi4wMjMgMCAxIDEtMi44NiAyLjg2MSAyLjAyMyAyLjAyMyAwIDAgMSAyLjg2LTIuODZaTTIzIDE5di0xLjA5NmEyLjUgMi41IDAgMCAwLTIuNS0yLjVoLS44MDFNMSAxOXYtMS4wOTZhMi41IDIuNSAwIDAgMSAyLjUtMi41aC44MDFNMTcuMzM5IDE5di0xLjZhMy41IDMuNSAwIDAgMC0zLjUtMy41aC0zLjY4YTMuNSAzLjUgMCAwIDAtMy41IDMuNVYxOSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');
}
.club_meta > .activity_frequency
{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBzdHJva2U9ImNvbG9yKGRpc3BsYXktcDMgLjE5NjEgLjE5NjEgLjE5NjEpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik0xNSA2SDlhNiA2IDAgMCAwLTYgNmMwIDEuOTEyLjg5NyAzLjYxMSAyLjI5IDQuNzFNOSAxOGg2YTYgNiAwIDAgMCA2LTYgNS45ODUgNS45ODUgMCAwIDAtMi4yOS00LjcxIi8+PHBhdGggZD0iTTExLjUgMTUuNSA5IDE4bDIuNSAyLjVtMS0xMkwxNSA2bC0yLjUtMi41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgyNHYyNEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');
}

.club_meta dt
{
    width: 140px;
}
.club_meta dt
{
    width: 140px;
}

/* Section history */
.history_list
{
    padding-bottom: 2.5rem;
}
.history_list > div
{
    display: flex;
    padding: 0.75em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.history_list dt
{
    width: 100px;
    font-weight: bold;
    color: var(--accent-color);
}

.history_list dd
{
    flex: 1;
}


/* Section teacher message */
.section_teacher_message
{
    padding-bottom: 2.5rem;
}

.teacher_message
{
    margin-bottom: 1.25rem;
}

.teacher_message p,
.teacher_message ul,
.teacher_message ol
{
    margin: 0 0 1em;
}

.teacher_message ul,
.teacher_message ol
{
    padding: 0 1.25rem;
}

.teacher_message ul li
{
    list-style: disc;
}

.profile_card
{
    /* position: sticky;
    top: 100px; */
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
}
.profile_card h5
{
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}
.profile_card .content
{
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.profile_card .content > img
{
    display: block;
    width: 7.5rem;
    height: 8.75rem;
    border-radius: 10px;
    object-fit: cover;
    background: #ccc;
}
.teacher_name
{
    font-size: 1.5rem;
    font-weight: bold;
}
.teacher_position
{
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 0.625rem;
}

/* Section staff message */
.section_staff_message
{
    padding-bottom: 2.5rem;
}


@media (min-width: 768px)
{
}

@media (min-width: 1056px)
{
    .club_header
    {
        flex-direction: row;
        justify-content: space-between;
        gap: 1em;
    }

    .club_header .club_image
    {
        width: 50%;
        max-width: 600px;
        margin: 0;
    }

    .page_header,
    .container
    {
        padding: 1.25rem 0;
    }

    .history_list
    {
        padding: 0;
    }

    .section_teacher_message
    {
        width: 100%;
        display: flex;
        gap: 2.5rem;
    }
    .section_teacher_message > div
    {
        width: 50%;
    }

    .profile_card
    {
        position: sticky;
        top: 100px;
    }
}