/**
 * BESTPICK home mobile styles
 *
 * index.php 전용 반응형 오버라이드입니다.
 * 반드시 home.css와 home-basketball-fix.css 다음에 불러옵니다.
 */

@media (max-width: 1024px) {
    .bp-hero-dashboard {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding-bottom: 24px;
    }

    .bp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .bp-sidebar {
        display: none;
    }

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

    .bp-match-row,
    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        grid-template-columns:
            0
            72px
            minmax(0, 1fr)
            92px
            minmax(0, 1fr) !important;
        column-gap: 10px !important;
    }

    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        grid-template-columns:
            34px
            72px
            minmax(0, 1fr)
            92px
            minmax(0, 1fr) !important;
    }

    .bp-match-odds-side,
    .bp-basketball-home-row .bp-match-odds-side,
    .bp-volleyball-home-row .bp-match-odds-side {
        grid-column: 2 / -1 !important;
        width: auto !important;
        min-width: 0 !important;
        align-self: auto !important;
        margin-top: 10px;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-left: 0 !important;
    }

    .bp-match-row.bp-collector-active .bp-match-odds-side {
        grid-column: 2 / -1 !important;
    }
}

@media (max-width: 768px) {
   
    .bp-match-score{margin-left:0;}
    .bp-hero-dashboard {
        padding-bottom: 16px;
    }

    .bp-hero-dashboard .bp-eyebrow {
        margin-bottom: 0;
        font-size: 0.85rem;
        letter-spacing: 0.08em;
    }

    .bp-hero-dashboard p{margin:15px 0 0;}

    .bp-sport-tabs {
        gap: 7px;
        align-items: center;
        margin: 0 -8px 14px;
        padding: 0 8px 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bp-sport-tabs::-webkit-scrollbar,
    .bp-date-tabs::-webkit-scrollbar {
        display: none;
    }

    .bp-sport-tabs a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 35px;
        height: 35px;
        box-sizing: border-box;
        line-height: 1;
        vertical-align: middle;
    }

    .bp-sport-tabs a {
        padding: 10px 15px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .bp-date-tabs {
        display: flex;
        gap: 8px;
        margin: 0 -8px 16px;
        padding: 0 8px 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bp-date-tabs a {
        flex: 0 0 148px;
        min-width: 0;
        gap: 6px;
        padding: 12px 13px;
        border-radius: 14px;
    }

    .bp-date-tabs a {
        display: flex;
        align-items: center;
        flex: 0 0 148px;
        min-width: 0;
        min-height: 45px;
        height: 45px;
        gap: 6px;
        padding: 12px 13px;
        border-radius: 14px;
        box-sizing: border-box;
    }

    .bp-date-tabs strong,
    .bp-date-tabs span,
    .bp-date-tabs em {
        display: inline-flex;
        align-items: center;
        height: 1em;
        margin: 0;
        line-height: 1;
        vertical-align: middle;
    }

    .bp-date-tabs strong,
    .bp-date-tabs span,
    .bp-date-tabs em {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .bp-date-tabs em {
        margin-left: auto;
    }

    .bp-section-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
    }

    .bp-section-head h2 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .bp-section-head p {
        font-size: 0.85rem;
        line-height: 1.5;
        margin:3px 0 0;
    }

    .bp-recommend-section {
        margin-bottom: 22px;
    }

    .bp-recommend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .bp-recommend-card {
        min-width: 0;
        padding: 14px;
        border-radius: 15px;
    }

    .bp-recommend-card span {
        margin-bottom: 3px;
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .bp-recommend-card strong {
        min-height: 2.8em;
        margin-bottom: 8px;
        overflow-wrap: anywhere;
        font-size: 0.85rem;
    }

    .bp-recommend-card em {
        font-size: 0.85rem;
    }

    .bp-recommend-card b {
        margin-top: 9px;
        font-size: 1rem;
    }

    .bp-match-collector {
        width: 100%;
        gap: 7px;
        margin-top: 10px;
    }

    .bp-section-head span{font-size:.85rem;}

    .bp-match-collector button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .bp-sport-group {
        margin-bottom: 22px;
        scroll-margin-top: 74px;
    }

    .bp-sport-group > h3,
    .bp-status-sport-group > h4 {
        margin-bottom: 10px;
        font-size: 1rem;
    }

    .bp-status-league-list {
        gap: 12px;
    }

    .bp-league-box {
        margin-bottom: 12px;
        border-radius: 17px;
    }

    .bp-league-head {
        min-height: 45px;
        height: auto;
        gap: 10px;
        padding: 10px 13px;
    }

    .bp-league-head strong {
        min-width: 0;
        overflow: hidden;
        font-size: 0.85rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-league-head span {
        flex: 0 0 auto;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .bp-match-row,
    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        display: grid !important;
        grid-template-columns:
            0
            minmax(0, 1fr)
            62px
            minmax(0, 1fr) !important;
        grid-template-areas:
            "select time time time"
            "select home score away"
            "select odds odds odds";
        row-gap: 9px !important;
        column-gap: 8px !important;
        min-height: 0;
        padding: 12px 10px !important;
    }

    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            62px
            minmax(0, 1fr) !important;
    }

    .bp-match-select,
    .bp-match-row.bp-collector-active .bp-match-select {
        grid-area: select !important;
        align-self: stretch;
        width: 0;
        min-width: 0;
    }

    .bp-match-row.bp-collector-active .bp-match-select {
        width: 28px;
        min-width: 28px;
    }

    .bp-match-select input {
        width: 17px;
        height: 17px;
    }

    .bp-match-time,
    .bp-basketball-home-row > .bp-match-time {
        grid-area: time !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        min-width: 0;
    }

    .bp-match-time > span,
    .bp-basketball-home-row .bp-match-time > span {
        font-size: 0.85rem;
        line-height: 1;
    }

    .bp-match-time > em,
    .bp-basketball-home-row .bp-match-time > em {
        max-width: none;
        min-height: 21px;
        margin-top: 0;
        padding: 3px 7px;
        font-size: 0.75rem;
        line-height: 1;
    }

    .bp-match-team,
    .bp-basketball-home-row .bp-match-team {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-rows: auto auto;
        gap: 2px 7px;
        min-width: 0;
        text-align: left !important;
    }

    .bp-match-team.home,
    .bp-basketball-home-row > .bp-match-team.home {
        grid-area: home !important;
    }

    .bp-match-team.away,
    .bp-basketball-home-row > .bp-match-team.away {
        grid-area: away !important;
    }

    .bp-team-logo,
    .bp-basketball-home-row .bp-team-logo {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .bp-team-logo img,
    .bp-basketball-home-row .bp-team-logo img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .bp-match-team strong,
    .bp-basketball-home-row .bp-match-team strong {
        grid-column: 2;
        min-width: 0;
        overflow: hidden;
        font-size: 0.78rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-match-team small,
    .bp-basketball-home-row .bp-match-team small {
        grid-column: 2;
        min-width: 0;
        margin-top: 0;
        overflow: hidden;
        font-size: 0.65rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-match-score,
    .bp-basketball-home-row > .bp-match-score,
    .bp-basketball-home-row .bp-match-score {
        grid-area: score !important;
        align-self: center;
        min-width: 0;
        padding: 0;
    }

    .bp-match-score strong,
    .bp-basketball-home-row .bp-match-score strong {
        font-size: 1rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .bp-match-score span,
    .bp-basketball-home-row .bp-match-score span {
        margin-top: 3px;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .bp-match-odds-side,
    .bp-basketball-home-row > .bp-match-odds-side,
    .bp-basketball-home-row .bp-match-odds-side,
    .bp-volleyball-home-row .bp-match-odds-side,
    .bp-match-row.bp-collector-active .bp-match-odds-side {
        grid-area: odds !important;
        width: auto !important;
        min-width: 0 !important;
        margin-top: 0;
        padding: 9px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-left: 0 !important;
    }

    .bp-odds-line,
    .bp-basketball-home-row .bp-odds-line {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .bp-odds-title,
    .bp-basketball-home-row .bp-odds-title {
        width: 34px !important;
        font-size: 0.75rem !important;
    }

    .bp-odds-chip,
    .bp-basketball-home-row .bp-odds-chip {
        min-height: 24px;
        padding: 3px 6px;
        font-size: 0.75rem !important;
    }

    .bp-odds-chip b,
    .bp-basketball-home-row .bp-odds-chip b {
        font-size: 0.75rem;
    }

    .bp-odds-empty,
    .bp-basketball-home-row .bp-odds-empty {
        font-size: 0.75rem;
    }

     .bp-odds-line,
    .bp-basketball-home-row .bp-odds-line {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .bp-odds-title,
    .bp-basketball-home-row .bp-odds-title {
        display: inline-flex;
        align-items: center;
        height: 24px;
        margin: 0;
        line-height: 1;
    }

    .bp-odds-chip,
    .bp-basketball-home-row .bp-odds-chip {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        height: 24px;
        box-sizing: border-box;
        line-height: 1;
        vertical-align: middle;
    }

    .bp-odds-chip b,
    .bp-basketball-home-row .bp-odds-chip b {
        display: inline-flex;
        align-items: center;
        height: 1em;
        margin: 0;
        line-height: 1;
        vertical-align: middle;
    }

    .bp-volleyball-live-score {
        font-size: 0.75rem;
    }

    .bp-empty {
        padding: 26px 14px;
        font-size: 0.88rem;
        text-align: center;
    }

    .bp-global-status-sections {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .bp-recommend-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-recommend-card strong {
        min-height: 0;
    }

    .bp-date-tabs a {
        flex-basis: 138px;
    }

    .bp-match-row,
    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        grid-template-columns:
            0
            minmax(0, 1fr)
            54px
            minmax(0, 1fr) !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .bp-match-row.bp-collector-active,
    .bp-match-row.bp-basketball-home-row.bp-collector-active,
    .bp-match-row.bp-volleyball-home-row.bp-collector-active {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            54px
            minmax(0, 1fr) !important;
    }

    .bp-match-row.bp-collector-active .bp-match-select {
        width: 26px;
        min-width: 26px;
    }

    .bp-match-team,
    .bp-basketball-home-row .bp-match-team {
        grid-template-columns: 29px minmax(0, 1fr) !important;
        column-gap: 5px;
    }

    .bp-team-logo,
    .bp-basketball-home-row .bp-team-logo {
        width: 29px;
        height: 29px;
        border-radius: 8px;
    }

    .bp-team-logo img,
    .bp-basketball-home-row .bp-team-logo img {
        width: 26px;
        height: 26px;
    }

    .bp-match-team strong,
    .bp-basketball-home-row .bp-match-team strong {
        font-size: 0.85rem;
    }

    .bp-match-team small,
    .bp-basketball-home-row .bp-match-team small {
        font-size: 0.75rem;
    }

    .bp-match-score strong,
    .bp-basketball-home-row .bp-match-score strong {
        font-size: 1rem;
    }

    .bp-match-score span,
    .bp-basketball-home-row .bp-match-score span {
        font-size: 0.75rem;
    }
}