File: /var/www/html/wp-content/themes/thegem-elementor/single-thegem_pf_item.php
<?php
get_header();
$context = function_exists( 'ethnic_case_studies_single_context' ) ? ethnic_case_studies_single_context( get_queried_object_id() ) : array();
if ( empty( $context ) ) :
?>
<div id="main-content" class="main-content">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'content', 'page' );
endwhile;
?>
</div>
<?php
get_footer();
return;
endif;
?>
<div id="main-content" class="main-content">
<div class="ethnic-case-study">
<section class="ethnic-case-study__hero">
<div class="container">
<div class="ethnic-case-study__hero-shell">
<div class="ethnic-case-study__hero-copy">
<a class="ethnic-case-study__back-link" href="<?php echo esc_url( $context['archive_url'] ); ?>"><?php echo esc_html( $context['back_link_label'] ); ?></a>
<span class="ethnic-case-study__eyebrow"><?php echo esc_html( $context['hero_eyebrow'] ); ?></span>
<h1><?php echo esc_html( $context['title'] ); ?></h1>
<p class="ethnic-case-study__subtitle"><?php echo esc_html( $context['subtitle'] ); ?></p>
<div class="ethnic-case-study__meta-grid" aria-label="<?php echo esc_attr( $context['title'] . ' project metadata' ); ?>">
<?php foreach ( $context['metadata'] as $meta ) : ?>
<div class="ethnic-case-study__meta-card">
<span><?php echo esc_html( $meta['label'] ); ?></span>
<strong><?php echo esc_html( $meta['value'] ); ?></strong>
</div>
<?php endforeach; ?>
</div>
<div class="ethnic-case-study__hero-actions">
<a class="ethnic-case-study__button ethnic-case-study__button--primary" href="<?php echo esc_url( $context['contact_project_url'] ); ?>"><?php echo esc_html( $context['hero_primary_label'] ); ?></a>
<a class="ethnic-case-study__button ethnic-case-study__button--ghost" href="<?php echo esc_url( $context['contact_team_url'] ); ?>"><?php echo esc_html( $context['hero_secondary_label'] ); ?></a>
</div>
</div>
<div class="ethnic-case-study__hero-visual">
<div class="ethnic-case-study__hero-media">
<?php if ( isset( $context['hero_media_type'] ) && 'video' === $context['hero_media_type'] ) : ?>
<video src="<?php echo esc_url( $context['hero_media_url'] ); ?>" poster="<?php echo esc_url( $context['hero_image_url'] ); ?>" aria-label="<?php echo esc_attr( $context['hero_media_alt'] ); ?>" autoplay loop muted playsinline preload="metadata"></video>
<?php else : ?>
<img src="<?php echo esc_url( $context['hero_image_url'] ); ?>" alt="<?php echo esc_attr( $context['hero_image_alt'] ); ?>" loading="eager" decoding="async" />
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--overview">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['overview_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['overview_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__overview-grid">
<div class="ethnic-case-study__prose">
<?php foreach ( $context['overview_paragraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<aside class="ethnic-case-study__summary-card">
<span class="ethnic-case-study__card-kicker"><?php echo esc_html( $context['overview_card_kicker'] ); ?></span>
<h3><?php echo esc_html( $context['client_name'] ); ?></h3>
<div class="ethnic-case-study__summary-list">
<?php foreach ( $context['overview_facts'] as $fact ) : ?>
<div class="ethnic-case-study__summary-item">
<span><?php echo esc_html( $fact['label'] ); ?></span>
<strong><?php echo esc_html( $fact['value'] ); ?></strong>
</div>
<?php endforeach; ?>
</div>
</aside>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--challenge">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['challenge_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['challenge_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__challenge-row" role="list">
<?php foreach ( $context['challenges'] as $challenge ) : ?>
<article class="ethnic-case-study__challenge-column" role="listitem">
<h3><?php echo esc_html( $challenge['title'] ); ?></h3>
<p><?php echo esc_html( $challenge['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--goals">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['goals_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['goals_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__goal-board" role="list">
<?php foreach ( $context['goals'] as $index => $goal ) : ?>
<article class="ethnic-case-study__goal-panel" role="listitem">
<span class="ethnic-case-study__goal-chip"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<span class="ethnic-case-study__goal-watermark" aria-hidden="true"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<h3><?php echo esc_html( $goal['title'] ); ?></h3>
<p><?php echo esc_html( $goal['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--solution">
<div class="ethnic-case-study__solution-band">
<div class="container">
<div class="ethnic-case-study__solution-shell">
<div class="ethnic-case-study__solution-header">
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['solution_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['solution_heading'] ); ?></h2>
<div class="ethnic-case-study__solution-story">
<?php foreach ( $context['solution_paragraphs'] as $index => $paragraph ) : ?>
<div class="ethnic-case-study__solution-story-item">
<span class="ethnic-case-study__solution-story-index"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<p><?php echo esc_html( $paragraph ); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="ethnic-case-study__solution-board">
<?php foreach ( $context['solution_pillars'] as $index => $pillar ) : ?>
<article class="ethnic-case-study__solution-pillar">
<span class="ethnic-case-study__solution-pillar-index"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<h3><?php echo esc_html( $pillar['title'] ); ?></h3>
<p><?php echo esc_html( $pillar['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--features">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['features_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['features_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__feature-grid">
<?php foreach ( $context['features'] as $index => $feature ) : ?>
<article class="ethnic-case-study__feature-card">
<span class="ethnic-case-study__feature-badge"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<h3><?php echo esc_html( $feature['title'] ); ?></h3>
<p><?php echo esc_html( $feature['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--stack">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['tech_stack_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['tech_stack_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__stack-strip" aria-label="<?php echo esc_attr( $context['title'] . ' tech stack' ); ?>">
<?php foreach ( $context['tech_stack_items'] as $item ) : ?>
<article
class="ethnic-case-study__stack-item"
aria-label="<?php echo esc_attr( $item['label'] . ( ! empty( $item['group'] ) ? ' - ' . $item['group'] : '' ) ); ?>"
title="<?php echo esc_attr( $item['label'] . ( ! empty( $item['group'] ) ? ' ยท ' . $item['group'] : '' ) ); ?>"
style="<?php echo esc_attr( '--stack-fg:' . $item['fg'] . ';' . ( 'mask' === $item['mode'] && ! empty( $item['src'] ) ? '--stack-icon:url(\'' . esc_url_raw( $item['src'] ) . '\');' : '' ) ); ?>"
>
<span class="ethnic-case-study__stack-brand ethnic-case-study__stack-brand--<?php echo esc_attr( $item['mode'] ); ?>" aria-hidden="true">
<?php if ( 'image' === $item['mode'] && ! empty( $item['src'] ) ) : ?>
<img src="<?php echo esc_url( $item['src'] ); ?>" alt="" loading="lazy" decoding="async" />
<?php elseif ( 'mask' === $item['mode'] && ! empty( $item['src'] ) ) : ?>
<span class="ethnic-case-study__stack-brand-mask"></span>
<?php else : ?>
<span class="ethnic-case-study__stack-brand-mark"><?php echo esc_html( $item['monogram'] ); ?></span>
<?php endif; ?>
</span>
<span class="screen-reader-text"><?php echo esc_html( $item['label'] . ( ! empty( $item['group'] ) ? ' - ' . $item['group'] : '' ) ); ?></span>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--results">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['results_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['results_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__result-grid">
<?php foreach ( $context['result_cards'] as $card ) : ?>
<article class="ethnic-case-study__result-card">
<strong><?php echo esc_html( $card['value'] ); ?></strong>
<h3><?php echo esc_html( $card['label'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
<div class="ethnic-case-study__impact-grid">
<?php foreach ( $context['impact_cards'] as $card ) : ?>
<article class="ethnic-case-study__impact-card">
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-case-study__section ethnic-case-study__section--gallery">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['gallery_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['gallery_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__gallery-grid">
<?php foreach ( $context['gallery'] as $index => $image ) : ?>
<figure class="ethnic-case-study__gallery-card ethnic-case-study__gallery-card--<?php echo esc_attr( $index + 1 ); ?>">
<?php if ( isset( $image['media_type'] ) && 'video' === $image['media_type'] ) : ?>
<video src="<?php echo esc_url( isset( $image['media_url'] ) ? $image['media_url'] : $image['image_url'] ); ?>" poster="<?php echo esc_url( $context['hero_image_url'] ); ?>" aria-label="<?php echo esc_attr( $image['alt'] ); ?>" autoplay loop muted playsinline preload="metadata"></video>
<?php else : ?>
<img src="<?php echo esc_url( $image['image_url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" loading="lazy" decoding="async" />
<?php endif; ?>
<figcaption><?php echo esc_html( $image['caption'] ); ?></figcaption>
</figure>
<?php endforeach; ?>
</div>
</div>
</section>
<?php if ( ! empty( $context['related_services'] ) ) : ?>
<section class="ethnic-case-study__section ethnic-case-study__section--related">
<div class="container">
<div class="ethnic-case-study__section-head">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['related_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['related_heading'] ); ?></h2>
</div>
</div>
<div class="ethnic-case-study__related-grid">
<?php foreach ( $context['related_services'] as $service ) : ?>
<article class="ethnic-case-study__related-card">
<h3><?php echo esc_html( $service['title'] ); ?></h3>
<p><?php echo esc_html( $service['copy'] ); ?></p>
<a class="ethnic-case-study__link" href="<?php echo esc_url( $service['url'] ); ?>"><?php echo esc_html( $context['related_link_label'] ); ?></a>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<?php endif; ?>
<section class="ethnic-case-study__section ethnic-case-study__section--cta">
<div class="container">
<div class="ethnic-case-study__cta">
<div>
<span class="ethnic-case-study__section-kicker"><?php echo esc_html( $context['cta_kicker'] ); ?></span>
<h2><?php echo esc_html( $context['cta_heading'] ); ?></h2>
<p><?php echo esc_html( $context['cta_copy'] ); ?></p>
</div>
<div class="ethnic-case-study__cta-actions">
<a class="ethnic-case-study__button ethnic-case-study__button--primary" href="<?php echo esc_url( $context['contact_project_url'] ); ?>"><?php echo esc_html( $context['cta_primary_label'] ); ?></a>
<a class="ethnic-case-study__button ethnic-case-study__button--ghost" href="<?php echo esc_url( $context['contact_quote_url'] ); ?>"><?php echo esc_html( $context['cta_secondary_label'] ); ?></a>
</div>
</div>
</div>
</section>
</div>
</div>
<?php
get_footer();