<div class="bg-cream">
	<p class="uk-text-small uk-text-center brown uk-padding-large uk-padding-remove-bottom">THE HINGLEY DIFFERENCE</p>
	<h2 class="uk-text-center navy">Renovations That Transform How You Live</h2>
	<?php
// 1. Get the Services page ID (Replace 'services' with your actual slug)
$services_page = get_page_by_path('services');
$services_id = $services_page->ID;

// 2. Query the subpages of Services
$args = array(
    'post_type'      => 'page',
    'posts_per_page' => 5, // Limits to the 5 you requested
    'post_parent'    => $services_id,
    'orderby'        => 'menu_order',
    'order'          => 'ASC'
);

$parent = new WP_Query($args);

if ($parent->have_posts()) : ?>

<div class="uk-child-width-1-2 uk-child-width-1-5@m uk-grid-collapse" uk-grid>
    
    <?php while ($parent->have_posts()) : $parent->the_post(); ?>
        
        <?php 
            $thumb_id = get_post_thumbnail_id();
            $img_url_data = wp_get_attachment_image_src($thumb_id, 'large');
            $display_img = $img_url_data ? $img_url_data[0] : get_template_directory_uri() . '/images/entrance-of-a-luxury-house-on-a-bright-sunny-day-2026-01-11-09-42-59-utc.jpg';
        ?>
<div class="uk-cover-container uk-display-block uk-transition-toggle" style="min-height: 544px; overflow: hidden;">
    
    <img data-src="<?php echo $display_img; ?>" 
         alt="<?php the_title(); ?>" 
         uk-img 
         uk-cover 
         class="uk-transition-scale-up uk-transition-opaque">
    
    <div class="card-gradient-overlay"></div>

    <div class="uk-position-bottom   ">
        <div class="sliding-content-wrapper">
            
            <h2 class="white inter uk-margin-remove-bottom">
                <?php the_title(); ?>
            </h2>

            <div class="reveal-content">
                <p class="white uk-margin-small-top">
                    <?= get_field('short_description'); ?>
                </p>
                
                <a class="white uk-margin-bottom " href="<?php the_permalink(); ?>" class="orange uk-text-bold uk-link-reset" style="cursor: pointer; position: relative; z-index: 10;">
                    <i class="fa-solid red fa-circle-caret-right"></i> LEARN MORE 
                </a>
            </div>

        </div>
    </div>
</div>

    <?php endwhile; ?>

</div>

<?php endif; wp_reset_postdata(); ?>
</div>