/*
  overrides.css
  - 既存の大きいCSSを触らずに、気になる挙動だけを上書きする小さなパッチ。
  - 読み込み順は style.css / (page css) / mobile.css / pc.css の後を想定。
*/

/* PC: 「います」などの不自然な改行を避けたい箇所で使う */
@media (min-width: 761px) {
    .nowrap {
        white-space: nowrap;
    }
}

/* PC: layout-sidebar の .container が左に寄る都合で、左端が詰まりすぎるのを緩和 */
@media (min-width: 761px) {
    body.layout-sidebar .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* PC home: widen the content rail so the right side doesn't look empty */
@media (min-width: 1280px) {
    body.page-home.layout-sidebar > main.container {
        width: min(calc(var(--max) + var(--home-aside-width) + var(--home-grid-gap)), calc(100% - 32px));
    }

    body.page-home.layout-sidebar > .site-footer .container {
        width: min(calc(var(--max) + var(--home-aside-width) + var(--home-grid-gap)), calc(100% - 32px));
    }
}

/* PC wide pages: keep non-home/blog sidebar pages on the same desktop content rail */
@media (min-width: 1280px) {
    body.layout-sidebar:not(.page-home):not(.page-blog) {
        --layout-wide-extra: 332px;
    }

    body.layout-sidebar:not(.page-home):not(.page-blog) > main.container,
    body.layout-sidebar:not(.page-home):not(.page-blog) > .site-footer .container {
        width: min(calc(var(--max) + var(--layout-wide-extra)), calc(100% - 32px));
    }
}

/*
  タッチ端末（スマホ/タブレット）対策
  - 画面幅が広くても「2列カード」になりやすい（横持ち等）。
*/
@media (hover: none) and (pointer: coarse) {
    .page-teacher .grid,
    .page-music .grid,
    .page-diary .grid,
    .page-dia .grid,
    .page-home .grid {
        grid-template-columns: 1fr !important;
    }
}

/* diary index: keep entry cards left-aligned even if older cached button rules are present */
.page-diary .diary-entry-list {
    display: grid;
    gap: 10px;
}

.page-diary .diary-entry-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    text-align: left;
}

.page-diary .diary-entry-link > * {
    width: 100%;
    text-align: left;
}

.page-diary .diary-index-pager {
    justify-content: flex-start;
}

/* project/status: use the shared 12-column grid directly instead of nested single-card layouts */
.page-project .project-page-grid,
.page-status .status-page-grid {
    align-items: stretch;
}

.page-project .project-page-card,
.page-status .status-page-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.page-project .project-page-card:hover,
.page-status .status-page-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.32);
    background: rgba(96, 165, 250, 0.08);
    text-decoration: none;
}

.page-project .project-page-intro p,
.page-project .project-page-card .pc-desc,
.page-status .status-page-intro p,
.page-status .status-page-note p {
    margin-bottom: 0;
    max-width: none;
}

.page-project .project-page-card .pc-top {
    margin-bottom: 2px;
}

.page-status .status-page-card {
    gap: 14px;
}

.page-status .status-page-card .status-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 20px;
}

.page-status .status-page-card .status-icon {
    width: 48px;
    height: 48px;
}

.page-status .status-page-card .status-cell {
    gap: 8px;
}

.page-status .status-page-card .status-detail {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.page-status .status-page-link {
    font-size: 0.92rem;
    font-weight: 700;
}

/* Desktop footer stop:
   keep short pages tall enough so sticky side rails do not sink into the footer */
@media (min-width: 761px) {
    body.layout-sidebar {
        --layout-shell-floor: calc(100vh - var(--layout-rail-bottom, 18px));
        --layout-footer-stop-gap: 80px;
    }

    body.page-home.layout-sidebar > main.home.container {
        min-height: var(--layout-shell-floor);
    }

    body.layout-sidebar.layout-shell-ready > .layout-shell {
        min-height: var(--layout-shell-floor);
    }

    body.layout-sidebar.layout-shell-ready > .layout-shell > main {
        min-height: var(--layout-shell-floor);
    }

    body.layout-sidebar:not(.page-home) .layout-main-shell {
        min-height: var(--layout-shell-floor);
    }

    body.page-home.layout-sidebar > .site-footer {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
    }
}

@media (min-width: 1280px) {
    body.page-home.layout-sidebar > .site-footer .container {
        width: min(calc(var(--max) + var(--home-aside-width) + var(--home-grid-gap)), calc(100% - 32px));
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Non-home desktop rail: match the home aside behavior instead of pinning it to viewport height */
@media (min-width: 1440px) {
    body.layout-sidebar:not(.page-home) .layout-page-aside {
        position: sticky;
        top: var(--sidebar-safe, 16px);
        margin-top: var(--sidebar-safe, 16px);
        height: auto;
        max-height: none;
        overflow: visible;
        align-self: start;
    }

    body.layout-sidebar:not(.page-home) .layout-page-aside .site-right-rail {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.layout-sidebar:not(.page-home) .layout-page-aside .site-right-rail-scroll {
        display: grid;
        gap: 14px;
        align-content: start;
        height: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        padding-bottom: 0;
        margin-right: 0;
    }
}