/* =====================================================================
   [wightman_channel_search] — "What's your favourite show?"

   Matches the section the TV packages pages draw with the theme's
   [custom_media_search] and the blocks around it, measured from the live
   page: the same type, sizes, colours, spacing and breakpoints. Every value
   is set here rather than inherited from the theme's Tailwind build, so the
   section looks the same on any page it is dropped into.

   Breakpoints, as the original:
     768px and up — search box and button side by side, 150px logos
     767px down   — stacked, 115px logos
     600px down   — smaller heading and subtitle

   Everything is scoped under .wgm-chs; nothing else on the site is touched.
   ===================================================================== */

.wgm-chs {
    box-sizing: border-box;
    padding: 75px 24px;
    background: #fff;
}

.wgm-chs *,
.wgm-chs *::before,
.wgm-chs *::after {
    box-sizing: border-box;
}

.wgm-chs-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.wgm-chs .wgm-chs-title {
    margin: 0 0 16px;
    padding: 0;
    font-family: Nunito, sans-serif;
    font-size: 48px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    text-align: center;
}

.wgm-chs .wgm-chs-subtitle {
    margin: 0 0 24px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.wgm-chs .wgm-chs-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0;
    background: #fff;
}

.wgm-chs .wgm-chs-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* Visible to screen readers only. */
.wgm-chs .wgm-chs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wgm-chs .wgm-chs-input {
    width: 327px;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 20px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0E0E0E;
    background: #F0F0F0;
    border: 1px solid #E5E7EB;
    border-radius: 15px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

/* The focus ring is the browser's own, as on the original. */

.wgm-chs .wgm-chs-input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.wgm-chs .wgm-chs-button {
    display: inline-block;
    width: 327px;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 20px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    border: 2px solid #D02727;
    border-radius: 20px;
    background: linear-gradient(to bottom, #D02727 50%, #fff 50%);
    background-size: 100% 200%;
    background-position: 0 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-position 0.2s ease-in-out, color 0.25s ease-in-out;
}

.wgm-chs .wgm-chs-button:hover {
    color: #000;
    background-position: 0 100%;
    border-color: #D02727;
}

.wgm-chs .wgm-chs-results {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.wgm-chs .wgm-chs-message {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0E0E0E;
    text-align: center;
}

.wgm-chs .wgm-chs-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    place-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wgm-chs .wgm-chs-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wgm-chs .wgm-chs-item::before,
.wgm-chs .wgm-chs-item::marker {
    content: none;
}

/* A logo, or the initials standing in for a channel without one. */
.wgm-chs .wgm-chs-logo,
.wgm-chs .wgm-chs-tile {
    display: block;
    width: 115px;
    height: 115px;
    max-width: none;
    margin: 0;
    border: 2px solid #9E9E9E;
    border-radius: 25px;
}

/* Contain, not stretch: identical for the square logos the library holds
   today, and a wide one uploaded later keeps its shape. */
.wgm-chs .wgm-chs-logo {
    align-content: center;
    object-fit: contain;
    background: #fff;
}

.wgm-chs .wgm-chs-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-family: Nunito, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    text-align: center;
    user-select: none;
}

@media (min-width: 768px) {
    .wgm-chs .wgm-chs-form { flex-direction: row; }

    .wgm-chs .wgm-chs-input { width: 360px; }

    .wgm-chs .wgm-chs-button { width: 236px; }

    .wgm-chs .wgm-chs-grid { gap: 16px; }

    .wgm-chs .wgm-chs-logo,
    .wgm-chs .wgm-chs-tile {
        width: 150px;
        height: 150px;
    }

    .wgm-chs .wgm-chs-tile { font-size: 40px; }
}

@media (max-width: 767px) {
    .wgm-chs .wgm-chs-input { margin-bottom: 20px; }
}

@media (max-width: 600px) {
    .wgm-chs .wgm-chs-title { font-size: 33px; }

    .wgm-chs .wgm-chs-subtitle { font-size: 18px; }
}