/* =========================================================
   GAME-PH HOME.CSS V2.0
   Modular Architecture
   File: /wp-content/themes/astra-child/web/home.css
   Locale: en-PH
========================================================= */

/* =========================================================
   01. ROOT VARIABLES
   Controls colours, width, radius, shadows and spacing.
========================================================= */

:root {
    --gph-brand: #10B45A;
    --gph-brand-dark: #087A41;
    --gph-highlight: #F7C948;

    --gph-title: #17243A;
    --gph-text: #66758C;
    --gph-muted: #8793A5;

    --gph-page-bg: #F5F7FA;
    --gph-card-bg: #FFFFFF;
    --gph-soft-bg: #F8FAFC;
    --gph-line: #E7EDF5;

    --gph-danger: #EF4444;
    --gph-orange: #F97316;
    --gph-purple: #7C3AED;
    --gph-blue: #2563EB;

    --gph-radius: 10px;
    --gph-small-radius: 8px;

    --gph-card-gap: 10px;
    --gph-section-gap: 20px;

    --gph-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    --gph-image-shadow: 0 10px 24px #00000045;

    --gph-container: 1200px;
}

/* =========================================================
   02. PAGE RESET
   Prevents Astra and block styles from changing component size.
========================================================= */

.gph-home,
.gph-home *,
.gph-home *::before,
.gph-home *::after {
    box-sizing: border-box;
}

.gph-home {
    width: 100%;
    margin: 0;
    padding: 0 0 0px;
    background: var(--gph-page-bg);
    color: var(--gph-title);
    font-size: 14px;
    line-height: 1.5;
}

.gph-home img {
    display: block;
    max-width: 100%;
}

.gph-home a {
    color: inherit;
    text-decoration: none;
}

.gph-home button,
.gph-home input {
    font: inherit;
}

.gph-home h1,
.gph-home h2,
.gph-home h3,
.gph-home h4,
.gph-home p,
.gph-home ul {
    margin-top: 0;
}

/* =========================================================
   03. GLOBAL LAYOUT
   Controls page width, section spacing and white panels.
========================================================= */

.gph-container {
    width: min(calc(100% - 30px), var(--gph-container));
    margin-inline: auto;
}

.gph-section {
    margin-top: var(--gph-section-gap);
}

.gph-panel {
    background: var(--gph-card-bg);
    border: 1px solid var(--gph-line);
    border-radius: var(--gph-radius);
    box-shadow: var(--gph-shadow);
}

.gph-panel-padding {
    padding: 12px;
}

.gph-grid-gap {
    gap: var(--gph-card-gap);
}

/* =========================================================
   04. TYPOGRAPHY
   Controls shared title and text hierarchy.
========================================================= */

.gph-clamp-1,
.gph-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gph-clamp-1 {
    -webkit-line-clamp: 1;
}

.gph-clamp-2 {
    -webkit-line-clamp: 2;
}

.gph-small-copy {
    color: var(--gph-text);
    font-size: 12px;
    line-height: 1.45;
}

/* =========================================================
   05. BUTTONS
   Controls all primary and secondary homepage actions.
========================================================= */

.gph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: var(--gph-small-radius);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.gph-btn:hover {
    transform: translateY(-1px);
}

.gph-btn-primary {
    background: var(--gph-brand);
    color: #FFFFFF !important;
}

.gph-btn-primary:hover {
    background: var(--gph-brand-dark);
}

.gph-btn-secondary {
    background: #FFFFFF;
    border-color: var(--gph-line);
    color: var(--gph-title) !important;
}

.gph-btn-secondary:hover {
    background: #F8FAFC;
    border-color: #CFD8E5;
}

/* =========================================================
   06. HERO
   Controls the first screen below the navigation.

   Layers:
   - Background image
   - #00000045 image overlay
   - Content width
   - H1 and highlighted word
   - Search form
   - Popular search tags
========================================================= */

/* Hero background and image overlay */
.gph-hero {
    position: relative;
    min-height: 335px;
    overflow: hidden;
    background-image:
        linear-gradient(#00000045, #00000045),
        url('/wp-content/uploads/2026/08/game-ph-home-pc.webp');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    color: #FFFFFF;
}

/* Hero content alignment */
.gph-hero-inner {
    min-height: 350px;
    display: flex;
    align-items: center;
    padding: 24px 0;
}

/* Hero left content width */
.gph-hero-copy {
    width: 48%;
    max-width: 590px;
}

/* Small label above the H1 */
.gph-hero-eyebrow {
    margin: 0 0 8px;
    color: #66F0AC;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Main H1 */
.gph-hero-title {
    max-width: 590px;
    margin: 0 0 10px;
    color: #FFFFFF;
    font-size: 35px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.02em;
}

/* Highlighted H1 word */
.gph-hero-title span {
    color: var(--gph-highlight);
}

/* Hero supporting text */
.gph-hero-description {
    max-width: 560px;
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .94);
    font-size: 17px;
    line-height: 1.3;
}

/* Search form outer layer */
.gph-hero-search {
    width: min(100%, 580px);
    height: 58px;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 3px solid #FFFFFF;
    border-radius: var(--gph-radius);
    background: #FFFFFF;
    box-shadow: var(--gph-image-shadow);
    overflow: hidden;
}

/* Search field */
.gph-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: #FFFFFF;
    color: var(--gph-title);
    font-size: 16px;
    line-height: 1;
}

/* Search button, same height as the field */
.gph-hero-search button {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: var(--gph-brand);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    cursor: pointer;
}

.gph-hero-search button:hover {
    background: var(--gph-brand-dark);
}

/* Popular searches row */
.gph-popular-searches {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    margin-top: 11px;
}

/* Popular searches label */
.gph-popular-searches-label {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .94);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

/* Popular search tag */
.gph-search-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(2, 16, 13, .42);
    color: #FFFFFF !important;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.gph-search-tag:hover {
    border-color: var(--gph-brand);
    background: var(--gph-brand);
}

/* =========================================================
   07. SECTION HEADERS
   Controls titles, status labels and View all links.
========================================================= */

.gph-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.gph-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--gph-title);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 850;
}

.gph-section-link {
    flex: 0 0 auto;
    color: var(--gph-brand-dark) !important;
    font-size: 12px;
    font-weight: 800;
}

.gph-section-link:hover {
    color: var(--gph-brand) !important;
}

.gph-update-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: #E4F7EC;
    color: var(--gph-brand-dark);
    font-size: 11px;
    font-weight: 850;
}

/* =========================================================
   08. TODAY'S HOT GAMES
   Controls the four-column dynamic ranking layout.
========================================================= */

.gph-hot-games-section {
    padding: 12px;
}

.gph-hot-games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gph-card-gap);
}

/* =========================================================
   09. GAME CARD
   Controls each large game card.

   Layers:
   - Card shell
   - Cover image
   - Ranking badge
   - Game title and provider
   - Official data
   - AI data
   - Topics
   - Related games
   - Action buttons
========================================================= */

/* Card shell */
.gph-game-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--gph-line);
    border-radius: var(--gph-radius);
    box-shadow: var(--gph-shadow);
}

/* Cover image wrapper */
.gph-game-cover-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #DFE6EF;
}

/* Cover image */
.gph-game-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--gph-image-shadow);
}

/* Ranking badge */
.gph-game-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    min-height: 24px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--gph-danger);
    color: #FFFFFF;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.gph-game-badge.is-trending {
    background: var(--gph-orange);
}

.gph-game-badge.is-editor {
    background: var(--gph-purple);
}

.gph-game-badge.is-ai {
    background: var(--gph-blue);
}

/* Card content */
.gph-game-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 11px;
}

/* Game title */
.gph-game-title {
    margin: 0;
    color: var(--gph-title);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 850;
}

/* Game provider */
.gph-game-provider {
    margin: 3px 0 3px;
    color: var(--gph-text);
    font-size: 12px;
}

/* Star rating */
.gph-game-rating {
    margin-bottom: 7px;
    color: #F59E0B;
    font-size: 13px;
    letter-spacing: .03em;
}

/* Official game data */
.gph-official-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 7px;
    border: 1px solid var(--gph-line);
    border-radius: var(--gph-small-radius);
    overflow: hidden;
}

.gph-official-data-item {
    min-width: 0;
    padding: 6px 4px;
    text-align: center;
    border-right: 1px solid var(--gph-line);
}

.gph-official-data-item:last-child {
    border-right: 0;
}

.gph-official-data-label {
    display: block;
    margin-bottom: 2px;
    color: var(--gph-muted);
    font-size: 9px;
    line-height: 1.1;
    text-transform: uppercase;
}

.gph-official-data-value {
    display: block;
    overflow: hidden;
    color: var(--gph-title);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AI game metrics */
.gph-ai-data {
    display: grid;
    gap: 2px;
    margin-bottom: 7px;
}

.gph-ai-data-row {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dashed #EDF1F5;
}

.gph-ai-data-row:last-child {
    border-bottom: 0;
}

.gph-ai-data-label {
    min-width: 0;
    color: #374151;
    font-size: 11px;
    font-weight: 750;
}

.gph-ai-data-value {
    flex: 0 0 auto;
    color: var(--gph-brand-dark);
    font-size: 11px;
    font-weight: 900;
    text-align: right;
}

.gph-ai-data-value.is-hot {
    color: var(--gph-danger);
}

/* Small headings inside cards */
.gph-card-subtitle {
    margin: 1px 0 4px;
    color: #111827;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}

/* Topic links */
.gph-topic-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gph-topic-list a {
    display: block;
    color: #536174 !important;
    font-size: 11px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: #C7D0DC;
    text-underline-offset: 2px;
}

.gph-topic-list a:hover {
    color: var(--gph-brand-dark) !important;
}

/* Related game row */
.gph-related-games {
    margin-top: 7px;
}

.gph-related-games-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 39px;
    gap: 4px;
}

.gph-related-game,
.gph-related-more {
    height: 36px;
    overflow: hidden;
    border-radius: 6px;
}

.gph-related-game img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--gph-image-shadow);
}

.gph-related-more {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gph-line);
    background: #FFFFFF;
    color: var(--gph-title);
    font-size: 11px;
    font-weight: 900;
}

/* Card action buttons */
.gph-game-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: auto;
    padding-top: 9px;
}

/* =========================================================
   10. PROMOTIONS
   Controls the four compact offer cards.
========================================================= */

.gph-promo-lucky-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, .9fr);
    gap: var(--gph-card-gap);
}

.gph-promotions-panel {
    padding: 12px;
}

.gph-promotions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gph-card-gap);
}

.gph-promotion-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 11px 9px;
    border-radius: 9px;
    text-align: center;
}

.gph-promotion-card:nth-child(1) {
    background: #E7F7EF;
}

.gph-promotion-card:nth-child(2) {
    background: #FFF0F6;
}

.gph-promotion-card:nth-child(3) {
    background: #FFF6DF;
}

.gph-promotion-card:nth-child(4) {
    background: #F2EDFF;
}

.gph-promotion-icon {
    font-size: 27px;
    line-height: 1;
}

.gph-promotion-title {
    margin: 0;
    color: var(--gph-title);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
}

.gph-promotion-copy {
    margin: 0;
    color: var(--gph-text);
    font-size: 11px;
}

.gph-promotion-card .gph-btn {
    width: 100%;
    min-height: 35px;
}

/* =========================================================
   11. LUCKY PICK
   Controls the daily single-game recommendation.
========================================================= */

.gph-lucky-panel {
    padding: 12px;
}

.gph-lucky-content {
    display: grid;
    grid-template-columns: 102px 1fr;
    gap: 11px;
    align-items: stretch;
}

.gph-lucky-cover {
    width: 102px;
    height: 143px;
    border-radius: var(--gph-small-radius);
    object-fit: cover;
    box-shadow: var(--gph-image-shadow);
}

.gph-lucky-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gph-lucky-title {
    margin: 0;
    color: var(--gph-title);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 850;
}

.gph-lucky-provider {
    margin: 2px 0 7px;
    color: var(--gph-text);
    font-size: 11px;
}

.gph-lucky-score {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 0 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: #FFF1B8;
    color: #7A5200;
    font-size: 11px;
    font-weight: 900;
}

.gph-lucky-meta {
    display: grid;
    gap: 3px;
    margin-bottom: 7px;
}

.gph-lucky-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}

.gph-lucky-meta-row strong {
    color: var(--gph-brand-dark);
}

.gph-lucky-info .gph-btn {
    margin-top: auto;
}

/* =========================================================
   12. RECOMMENDED CASINOS
   Controls platform cards and their bottom-aligned buttons.
========================================================= */

.gph-casinos-panel {
    padding: 12px;
}

.gph-casino-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gph-card-gap);
}

.gph-casino-card {
    min-height: 184px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--gph-line);
    border-radius: 9px;
    background: #FFFFFF;
    text-align: center;
}

.gph-casino-logo {
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px #00000045);
}

.gph-casino-rating {
    color: #F59E0B;
    font-size: 13px;
}

.gph-casino-offer {
    margin: 6px 0 2px;
    color: var(--gph-title);
    font-size: 13px;
    font-weight: 850;
}

.gph-casino-games {
    margin: 0 0 9px;
    color: var(--gph-text);
    font-size: 11px;
}

.gph-casino-card .gph-btn {
    width: 100%;
    margin-top: auto;
}

/* =========================================================
   13. MORE SLOT GAMES
   Controls category tabs and the six-column compact game row.
========================================================= */

.gph-more-games-panel {
    padding: 12px;
}

.gph-game-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.gph-game-tab {
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid var(--gph-line);
    border-radius: 999px;
    background: #F7F9FB;
    color: #4F5C6E;
    font-size: 10px;
    font-weight: 800;
}

.gph-game-tab.is-active,
.gph-game-tab:hover {
    border-color: var(--gph-brand);
    background: var(--gph-brand);
    color: #FFFFFF;
}

.gph-more-games-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gph-card-gap);
}

.gph-mini-game {
    min-width: 0;
}

.gph-mini-game-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--gph-small-radius);
    object-fit: cover;
    background: #DFE6EF;
    box-shadow: var(--gph-image-shadow);
}

.gph-mini-game-title {
    margin: 5px 0 1px;
    color: var(--gph-title);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
}

.gph-mini-game-provider {
    margin: 0;
    color: var(--gph-text);
    font-size: 10px;
}

/* =========================================================
   14. WINNING TIPS
   Controls the guide list in the left editorial column.
========================================================= */

.gph-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: var(--gph-card-gap);
}

.gph-editorial-panel {
    padding: 12px;
}

.gph-editorial-list {
    display: grid;
    gap: 7px;
}

.gph-editorial-item {
    min-height: 62px;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 9px;
    align-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid #EDF0F4;
}

.gph-editorial-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gph-editorial-thumb {
    width: 62px;
    height: 50px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: var(--gph-image-shadow);
}

.gph-editorial-title {
    margin: 0 0 2px;
    color: var(--gph-title);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 850;
}

.gph-editorial-excerpt {
    margin: 0;
    color: var(--gph-text);
    font-size: 10px;
    line-height: 1.3;
}

/* =========================================================
   15. LATEST NEWS
   Uses the same item layout as Winning Tips.
========================================================= */

.gph-news-date {
    margin: 0;
    color: var(--gph-text);
    font-size: 10px;
    line-height: 1.3;
}

/* =========================================================
   16. FAQ
   Controls the two-column native accordion.
========================================================= */

.gph-faq-panel {
    padding: 12px;
}

.gph-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 9px;
}

.gph-faq-item {
    overflow: hidden;
    border: 1px solid var(--gph-line);
    border-radius: var(--gph-small-radius);
    background: #FFFFFF;
}

.gph-faq-item summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    color: var(--gph-title);
    font-size: 12px;
    font-weight: 800;
}

.gph-faq-item summary::-webkit-details-marker {
    display: none;
}

.gph-faq-item summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
    font-weight: 600;
}

.gph-faq-item[open] summary::after {
    content: '−';
}

.gph-faq-answer {
    padding: 0 12px 11px;
    color: var(--gph-text);
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
   17. CTA
   Controls the compact final action banner.
========================================================= */

.gph-cta {
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    overflow: hidden;
    border-radius: var(--gph-radius);
    background-image:
        linear-gradient(#00000045, #00000045),
        url('/wp-content/uploads/2026/08/game-ph-home-pc.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: var(--gph-image-shadow);
    color: #FFFFFF;
    text-align: center;
}

.gph-cta-inner {
    max-width: 610px;
}

.gph-cta-title {
    margin: 0 0 5px;
    color: #FFFFFF;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 900;
}

.gph-cta-copy {
    margin: 0 0 13px;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
}

.gph-cta .gph-btn {
    min-height: 44px;
    padding: 0 21px;
    background: var(--gph-highlight);
    color: #1D2633 !important;
}

.gph-cta .gph-btn:hover {
    background: #FFD866;
}

/* =========================================================
   18. TABLET
   Controls layouts between 768px and 1024px.
========================================================= */

@media (max-width: 1024px) {
    .gph-hero {
        min-height: 320px;
        background-image:
            linear-gradient(#00000045, #00000045),
            url('/wp-content/uploads/2026/08/game-ph-home-tablet.webp');
    }

    .gph-hero-inner {
        min-height: 320px;
    }

    .gph-hero-copy {
        width: 55%;
    }

    .gph-hero-title {
        font-size: 36px;
    }

    .gph-hero-description {
        font-size: 15px;
    }

    .gph-hero-search {
        height: 54px;
    }

    .gph-hero-search button {
        flex-basis: 125px;
        width: 125px;
        min-width: 125px;
        max-width: 125px;
    }

    .gph-search-tag {
        padding: 0 9px;
        font-size: 10px;
    }

    .gph-hot-games-grid,
    .gph-casino-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gph-more-games-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================
   19. MOBILE
   Controls layouts below 768px.
========================================================= */

@media (max-width: 767px) {
    .gph-container {
        width: min(calc(100% - 20px), var(--gph-container));
    }

    .gph-section {
        margin-top: 14px;
    }

    .gph-section-title {
        font-size: 18px;
    }

    .gph-hero {
        min-height: 280px;
        background-image:
            linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .18)),
            url('/wp-content/uploads/2026/08/game-ph-home-mobile.webp');
        background-position: center;
    }

    .gph-hero-inner {
        min-height: 280px;
        padding: 17px 0;
    }

    .gph-hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .gph-hero-eyebrow {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .gph-hero-title {
        max-width: 88%;
        margin-bottom: 7px;
        font-size: 28px;
        line-height: 1.1;
    }

    .gph-hero-description {
        max-width: 90%;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.4;
    }

    .gph-hero-search {
        width: 100%;
        height: 50px;
    }

    .gph-hero-search input {
        padding: 0 12px;
        font-size: 13px;
    }

    .gph-hero-search button {
        flex-basis: 88px;
        width: 88px;
        min-width: 88px;
        max-width: 88px;
        padding: 0 8px;
        font-size: 13px;
    }

    .gph-popular-searches {
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 8px;
    }

    .gph-popular-searches-label {
        width: 100%;
        font-size: 10px;
    }

    .gph-search-tag {
        min-height: 26px;
        padding: 0 8px;
        font-size: 9px;
    }

    .gph-hot-games-section,
    .gph-promotions-panel,
    .gph-lucky-panel,
    .gph-casinos-panel,
    .gph-more-games-panel,
    .gph-editorial-panel,
    .gph-faq-panel {
        padding: 10px;
    }

    .gph-hot-games-grid,
    .gph-promo-lucky-grid,
    .gph-casino-grid,
    .gph-editorial-grid,
    .gph-faq-grid {
        grid-template-columns: 1fr;
    }

    .gph-promotions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gph-more-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gph-lucky-content {
        grid-template-columns: 90px 1fr;
    }

    .gph-lucky-cover {
        width: 90px;
        height: 128px;
    }

    .gph-editorial-item {
        grid-template-columns: 56px 1fr;
    }

    .gph-editorial-thumb {
        width: 56px;
        height: 48px;
    }

    .gph-cta {
        min-height: 145px;
        padding: 18px 13px;
    }

    .gph-cta-title {
        font-size: 26px;
    }

    .gph-cta-copy {
        font-size: 12px;
    }
}