<?php
/**
 *  For Displaying Posts 
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php  get_header(); ?>

<style>
    .simple-intro-section .row {
        width: 100%;
        max-width: 1440px;
        padding: 0 24px;
        margin-left: auto;
        margin-right: auto;
    }
    .simple-intro-section .row:after, .simple-intro-section .row:before {
        content: ' ';
        display: table;
    }
    .column, .columns {
        width: 100%;
        float: left;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
        float: left;
    }


    .simple-intro-section {
        padding: 100px 0 0;
        margin-bottom: 24px;
    }

    .section-subtitle {
        font-weight: 600;
        font-size: 15px;
        line-height: 1.27;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #191919;
        margin-bottom: 24px;
    }

    .small-12 {
        width: 100%;
    }
    .text-center {
        text-align: center;
    }

    .home-intro-title  h1{
        font-weight: 600;
        font-size: 102px;
        line-height: 0.85;
        letter-spacing: -3px;
        color: #191919;
    }
    .mrb-40 {
        margin-bottom: 40px;
    }

    .home-intro-title strong {
        font-weight: 600;
        color: #817C79;
    }

    .words span:not(.word) {
        position: relative;
        overflow: hidden;
        display: initial;
        margin-right: 0.06em;
        padding-bottom: 16px;
    }
    .section-text-18 {
        font-size: 18px;
        line-height: 1.56;
        letter-spacing: -0.54px;
        color: #323232;
    }

    @media screen and (min-width: 40em){
        .column, .columns {
            padding-left: 0.9375rem;
            padding-right: 0.9375rem;
        }
        .medium-offset-1 {
            margin-left: 8.33333%;
        }
        .medium-10 {
            width: 83.33333%;
        }
    }

    @media screen and (min-width: 64em){
        .large-offset-2 {
            margin-left: 16.66667%;
        }
        .large-8 {
            width: 66.66667%;
        }
    }

    @media only screen and (max-width: 1280px){
        .home-intro-title  h1{
            font-size: 88px;
        }
    }


    @media only screen and (max-width: 1023px){
        .simple-intro-section {
            padding: 120px 0 0;
        }
        .home-intro-title h1{
            font-size: 64px;
        }
    }

    @media screen and (max-width: 639px){
        .home-intro-title h1 {
            font-size: 40px;
            line-height: 1.05;
            letter-spacing: -1.2px;
        }
        .mrb-40 {
            margin-bottom: 32px;
        }
        .section-text-18 {
            font-size: 15px;
            line-height: 1.53;
            letter-spacing: -0.46px;
        }
        .section-text-18.mrb-40 {
            margin-bottom: 24px;
        }
    }


</style>
<section class="simple-intro-section">
    <div class="row">
        <div class="small-12 columns nopad section-subtitle animation-element fade-in text-center in-view">
            <?php echo __( 'News & events', 'felicityhealth' );?>
        </div>

        <div class="small-12 columns nopad home-intro-title mrb-40 text-center animation-element words lines splitting in-view" data-splitting="" style="--word-total: 2; --line-total: 1;">
            <h1><span class="word" style="--word-index: 1; --line-index: 0;"><?= single_post_title() ?></span></h1>
        </div>

        <div class="small-12 medium-10 medium-offset-1 large-8 large-offset-2 columns nopad section-text-18 mrb-40 text-center animation-element fade-in delay-06 in-view">
            You’re invited to experience a collective like no other. With carefully curated how-tos, best practices, shortcuts, and industry insights, you can take your practice and knowledge to the next level.
        </div>
    </div>
</section>

<style>
    .community-page-list-section {
        padding: 36px 0 88px;
    }
    .community-page-list-section .row {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 1440px;
        padding: 0 24px;
    }
    .community-page-list-section .row:after,.community-page-list-section .row:before {
        content: ' ';
        display: table;
    }
    .nopad {
        padding: 0px;
    }
    .community-page-list-section .column, .community-page-list-section .columns {
        width: 100%;
        float: left;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
    
    .community-grid {
        width: calc(100% + 12px);
        margin-left: -6px;
    }

    .grid-item {
        width: calc(50% - 12px);
        height: 390px;
        color: #fff;
        font-size: 64px;
        font-weight: 600;
        margin: 0 6px 12px;
        border-radius: 10px;
        overflow: hidden;
        float: left;
    }
    .grid-item:nth-child(2) {
        /* margin-top: 100px; */
    }
    .grid-item.grid-item-taller {
        height: 480px;
    }

    .grid-item.grid-item-md {
        width: calc(30% - 12px);
        height: 330px;
    }
    .grid-item.grid-item-sm {
        width: calc(20% - 12px);
        height: 330px;
    }
    .grid-item .link-dark-warrow, 
    .grid-item .link-dark-warrow:focus, 
    .grid-item .link-dark-warrow:active {
        font-weight: 400;
        letter-spacing: -0.45px;
        text-transform: none;
        z-index: 2;
        width: 100%;
    }
    .grid-item a:hover .link-dark-warrow::after {
        max-width: 20px;
    }
    .grid-item a {
        display: block;
        width: 100%; height: 100%;
    }
    .community-page-list-wshadow .home-community-section-list-box::before,
    .community-page-list-wshadow .home-community-section-list-box::after {
        content: '';
        width: 100%;
        height: 150px;
        position: absolute;
        right: 0; left: 0;
        z-index: 1;
    }
    .community-page-list-wshadow .home-community-section-list-box::before {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        top: 0;
    }
    .community-page-list-wshadow .home-community-section-list-box::after {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(0, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        bottom: 0;
    }
    .community-page-list-wshadow-white .home-community-section-list-box::before,
    .community-page-list-wshadow-white .home-community-section-list-box::after {
        content: '';
        width: 100%;
        height: 150px;
        position: absolute;
        right: 0; left: 0;
        z-index: 1;
    }
    .community-page-list-wshadow-white .home-community-section-list-box::before {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        top: 0;
    }
    .community-page-list-wshadow-white .home-community-section-list-box::after {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(0, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        bottom: 0;
    }
   
    .object-fit {
        position: relative;
    }
    .object-fit > img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .home-community-section-list-box img {
        transition: transform 0.8s cubic-bezier(0.40, 0.80, 0.74, 1.00);
    }
    .home-community-section-list > ul > li > a:hover .home-community-section-list-box img,
    .global-community-section-list > ul > li > a:hover .home-community-section-list-box img,
    .grid-item a:hover .home-community-section-list-box img {
        transform: scale(1.05);
    }

    .home-community-section-list-box {
        border-radius: 10px;
        background-size: cover !important;
        overflow: hidden;
        padding: 32px 32px 24px;
        width: 100%; height: 100%;
        position: relative;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -ms-flex-line-pack: justify;
        align-content: space-between;
    }


    .home-community-section-list-box-title h4{
        font-weight: 600;
        font-size: 26px;
        line-height: 1.14;
        letter-spacing: -0.33px;
        color: #fff;
        margin-bottom: 24px;
        max-width: 420px;
        position: relative;
        z-index: 2;
    }
    .text-color-white.home-community-section-list-box-title, .text-color-white.section-title-64, .text-color-white.section-text-18, .text-color-white.section-title-47, .text-color-white.section-subtitle {
        color: #fff;
    }
    .link-dark-warrow, .link-dark-warrow:focus, .link-dark-warrow:active {
        display: inline-block;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.27;
        letter-spacing: 1.67px;
        text-transform: uppercase;
        color: #323232;
        padding-right: 38px;
        position: relative;
        transition: 0.2s ease-in-out;
        min-height: 19px;
    }
    .link-dark-warrow.link-white-warrow, .link-dark-warrow.link-white-warrow:focus, .link-dark-warrow.link-white-warrow:active {
        color: #fff;
    }

    .link-dark-warrow::before {
        content: '';
        width: 24px;
        height: 14px;
        background: url(<?= site_url('/wp-content/themes/felicity/assets/img/icons/icon-link-dark-arrow.svg') ?>) no-repeat center center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background-size: contain !important;
    }
    .link-dark-warrow.link-white-warrow::before {
        background: url(<?= site_url('/wp-content/themes/felicity/assets/img/icons/icon-link-white-arrow.svg') ?>) no-repeat center center;
    }

    .link-dark-warrow::after {
        content: '';
        max-width: 9px;
        width: 100%;
        height: 2px;
        background: #7e57c3;
        position: absolute;
        top: 50%;
        left: calc(100% - 24px);
        transform: translateY(-50%);
        transition: 0.2s ease-in-out;
    }

    .home-community-section-list-box-link {
        position: relative;
        z-index: 2;
    }
    .home-community-section-list-box-link > span {
        width: 100%;
    }
    @media screen and (min-width: 40em){
        .community-page-list-section .column, .community-page-list-section .columns {
            padding-left: 0.9375rem;
            padding-right: 0.9375rem;
        }
    }

    @media only screen and (max-width: 1140px){
        .home-community-section-list-box-title {
            font-size: 24px;
        }
    }

    @media only screen and (max-width: 1023px){
        .home-community-section-list-box-title {
            font-size: 20px;
        }
    }


    @media only screen and (max-width: 940px){
        .grid-item {
            width: calc(50% - 12px) !important;
            height: 300px !important;
        }
        .grid-item:nth-child(2) {
            margin-top: 60px;
        }
    }

    @media screen and (max-width: 639px){
        .community-grid {
            width: 100%;
            margin-left: 0;
        }
        .grid-item {
            width: 100% !important;
            height: 300px !important;
            margin: 0 0 20px !important;
        }
        .community-grid :last-child {
            margin-bottom: 0 !important;
        }
        .home-community-section-list-box {
            min-height: 240px;
            padding: 32px 24px !important;
        }
        .home-community-section-list-box-title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }
        .community-grid :last-child {
            margin-bottom: 0 !important;
        }
    }


/* Animations */
    .fade-up-top {
        position: relative;
        top: 50px;
        opacity: 0;
    }
    .fade-up-top.in-view {
        -webkit-animation: fade-up-top 800ms forwards;
        animation: fade-up-top 800ms forwards;
    }
    @-webkit-keyframes fade-up-top {
        to {
            opacity: 1;
            top: 0;
        }
    }
    @keyframes fade-up-top {
        to {
            opacity: 1;
            top: 0;
        }
    }
    .fade-in-up {
        opacity: 0;
        transform: translateY(50px);
    }
    .fade-in-up.in-view {
        -webkit-animation: fade-in-up 1s forwards;
        animation: fade-in-up 1s forwards;
    }
    .fade-in-up.fade-in-up-later {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    @-webkit-keyframes fade-in-up {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes fade-in-up {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up-transition {
        opacity: 0;
        transform: translateY(50px);
        transition: 0.8s cubic-bezier(0.26, 1.00, 0.48, 1.00);
    }
    .fade-in-up-transition.in-view {
        opacity: 1;
        transform: translateY(0);
    }

    .fade-up {
        transform: translateY(50px);
    }
    .fade-up.in-view {
        -webkit-animation: fade-up 1s forwards;
        animation: fade-up 1s forwards;
    }
    .fade-up.fade-up-later {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    @-webkit-keyframes fade-up {
        to {
            transform: translateY(0);
        }
    }
    @keyframes fade-up {
        to {
            transform: translateY(0);
        }
    }

    .fade-in {
        opacity: 0;
    }
    .fade-in.in-view {
        -webkit-animation: fade-in 1s forwards;
        animation: fade-in 1s forwards;
    }
    .fade-in.fade-in-later {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    @-webkit-keyframes fade-in {
        to {
            opacity: 1;
        }
    }
    @keyframes fade-in {
        to {
            opacity: 1;
        }
    }

    .fade-out.in-view {
        -webkit-animation: fade-out 1s forwards;
        animation: fade-out 1s forwards;
    }
    @-webkit-keyframes fade-out {
        to {
            opacity: 0;
        }
    }
    @keyframes fade-out {
        to {
            opacity: 0;
        }
    }

    .delay-01 {
        -webkit-animation-delay: 0.1s !important;
        animation-delay: 0.2s !important;
    }
    .delay-02 {
        -webkit-animation-delay: 0.2s !important;
        animation-delay: 0.2s !important;
    }
    .delay-03 {
        -webkit-animation-delay: 0.3s !important;
        animation-delay: 0.3s !important;
    }
    .delay-04 {
        -webkit-animation-delay: 0.4s !important;
        animation-delay: 0.4s !important;
    }
    .delay-05 {
        -webkit-animation-delay: 0.5s !important;
        animation-delay: 0.5s !important;
    }
    .delay-06 {
        -webkit-animation-delay: 0.6s !important;
        animation-delay: 0.6s !important;
    }
    .delay-09 {
        -webkit-animation-delay: 0.9s !important;
        animation-delay: 0.9s !important;
    }
    .delay-1-2 {
        -webkit-animation-delay: 1.2s !important;
        animation-delay: 1.2s !important;
    }
</style>

<?php
$query = new WP_Query([
    'post_type' => 'post',
    'posts_per_page' => -1,
 ]);
 
  // Get the first post
 $firstPost= array_shift($query->posts);
  // Get the other posts exect first element
 $otherPosts = $query->posts;
// print_r($firstPost);
?>
 

<section class="community-page-list-section">
    <div class="row">
        <div class="small-12 columns nopad community-page-list">
            <div class="small-12 columns nopad community-grid">
            <?php  if ( $otherPosts ) : ?>
                    <?php foreach ( $otherPosts as $key => $post ): ?>
                        <?php if (has_post_thumbnail($post->ID )): ?>
                            <div class="grid-item animation-element fade-in-up community-page-list-wshadow">
                                <a href="<?= esc_url( get_permalink($post->ID) )?>">
                                    <div class="home-community-section-list-box object-fit">
                                        <img src="<?php if ( has_post_thumbnail($post->ID ) ) {the_post_thumbnail_url($post->ID); }?>" alt="" />
                                        <div class="small-12 columns nopad home-community-section-list-box-title text-color-white">
                                            <h4>
                                                <?= $post->post_title ?>
                                            </h4>
                                        </div>
                                        <div class="link-dark-warrow link-white-warrow"> 
                                            <?= __( 'Featured in', 'felicityhealth' );?>,
                                            <?php
                                                $categories = get_the_category($post->ID);
                                                if ($categories) {
                                                    $output = array();
                                                    foreach ($categories as $cat) {
                                                        $output[] = '<span>' .$cat->name .'</span>';
                                                    }
                                                    echo $match_classes =  join( ', ', $output );
                                                }
                                             ?>  
                                        </div>  
                                    </div>
                                </a>
                               
                            </div>
                        <?php else: ?>  
                            <?php
                                $colors = ['#1a7b71', '#7e57c2', '#2ca6ae', '#4eae51', '#682985', '#3b84ce', '#fff'];
                            ?>
                            <div class="grid-item animation-element fade-in-up community-page-list-wshadow">
                                <a href="<?= esc_url( get_permalink($post->ID) )?>">
                                    <div class="home-community-section-list-box object-fit" style="background: <?= $colors[array_rand($colors)] ?>;">
                                        <div class="small-12 columns nopad home-community-section-list-box-title text-color-white">
                                            <h4><?= $post->post_title ?></h4>
                                        </div>
                                        <span class="link-dark-warrow link-white-warrow">
                                            <?= __( 'Featured in', 'felicityhealth' );?>,
                                            <?php
                                                $categories = get_the_category($post->ID);
                                                if ($categories) {
                                                    $output = array();
                                                    foreach ($categories as $cat) {
                                                        $output[] = '<span>' .$cat->name .'</span>';
                                                    }
                                                    echo $match_classes =  join( ', ', $output );
                                                }
                                            ?>
                                        </span>
                                    </div>
                                </a>
                            </div>
                        <?php endif ?>  
                    <?php endforeach; ?>
            <?php endif; ?> 
            </div>
        </div>
    </div>
</section>

<?php get_template_part( 'template-parts/snippets/support' ); ?>
 
<?php get_footer(); ?>
