/* ========================================
   制作物アーカイブ
   レスポンシブ調整
======================================== */

/*
    読み込み順：
    base.css → archive.css → responsive.css

    このファイルでは、実際のHTMLで使用しているクラス名に合わせて
    画面幅ごとの最終調整のみを行います。

    制作物一覧の列数は archive.css 側の設定をそのまま使用します。
*/


/* ========================================
   ノートPC・小型デスクトップ
   1200px以下
======================================== */

@media screen and (max-width: 1200px) {
    :root {
        --container-width: 1040px;
    }

    .site-header__inner,
    .site-footer__inner,
    .archive-container,
    .notice-section__inner {
        width: min(
            var(--container-width),
            calc(100% - var(--container-padding) * 2)
        );
    }

    .global-navigation__list {
        gap: 16px;
    }

    .global-navigation__item a {
        font-size: 0.78rem;
    }
}


/* ========================================
   タブレット・小型画面
   900px以下
======================================== */

@media screen and (max-width: 900px) {
    :root {
        --container-padding: 20px;
    }

    .archive-main {
        padding-top: 34px;
        padding-bottom: 72px;
    }

    .archive-heading {
        width: 100%;
        max-width: 680px;
        margin-right: auto;
        margin-left: auto;
    }

    .archive-heading__title {
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .archive-toolbar {
        padding: 18px;
    }

    .publication-list {
        gap: 36px 24px;
    }

    /* archive.css側の中央配置・高さ計算を維持し、横幅だけ調整 */
    .filter-modal__panel {
        width: min(100%, 720px);
    }

    .notice-panel {
        max-width: 100%;
    }
}


/* ========================================
   スマートフォン
   700px以下
======================================== */

@media screen and (max-width: 700px) {
    :root {
        --container-padding: 16px;
    }

    body {
        font-size: 0.95rem;
    }

    .archive-main {
        padding-top: 26px;
        padding-bottom: 60px;
    }

    .archive-heading {
        margin-bottom: 36px;
    }

    .archive-heading__title {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        letter-spacing: 0.02em;
    }

    .archive-heading__description {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 0.95rem;
        line-height: 1.9;
    }

    .archive-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .search-area,
    .filter-button,
    .sort-area {
        width: 100%;
        min-width: 0;
    }

    .archive-keyword__input,
    .filter-button,
    .archive-sort__select,
    .filter-text-input {
        min-height: 50px;
        font-size: 16px;
    }

    .filter-button {
        justify-content: center;
    }

    .archive-results-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .publication-list {
        gap: 28px 16px;
    }

    /*
     * プレビューモーダルと同じ中央配置・safe-area対応。
     * 下寄せ表示を発生させる指定は置きません。
     */
    .filter-modal {
        display: grid;
        align-items: center;
        justify-items: center;
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .filter-modal__panel {
        width: min(100%, 700px);
        min-height: 0;
        max-height:
            calc(
                100dvh -
                max(20px, env(safe-area-inset-top)) -
                max(20px, env(safe-area-inset-bottom))
            );
        border: 1px solid rgb(244 122 36 / 22%);
        border-radius: 18px;
    }

    .filter-modal__header {
        flex: 0 0 auto;
        padding: 18px 20px;
    }

    .filter-modal__body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 22px 18px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .filter-options,
    #brandFilterOptions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .filter-option,
    #brandFilterOptions .filter-option {
        min-height: 52px;
        padding: 10px 12px;
    }

    .filter-option__label {
        font-size: 0.78rem;
    }

    .filter-modal__footer {
        position: relative;
        flex: 0 0 auto;
        gap: 10px;
        padding: 14px 16px;
    }

    .filter-modal__reset,
    .filter-modal__apply {
        min-width: 0;
        flex: 1;
        padding-right: 12px;
        padding-left: 12px;
    }

    #emptyResetButton,
    .archive-button {
        min-height: 50px;
    }

    .notice-section {
        padding: 16px 0 14px;
    }

    .notice-panel {
        padding: 20px 18px;
    }

    .notice-panel p {
        font-size: 0.82rem;
        line-height: 1.85;
    }

    .site-footer {
        padding-top: 36px;
        padding-bottom: 26px;
    }

    .footer-navigation__list {
        row-gap: 4px;
    }

    .footer-navigation__list a {
        font-size: 0.78rem;
    }
}


/* ========================================
   小型スマートフォン
   430px以下
======================================== */

@media screen and (max-width: 430px) {
    :root {
        --container-padding: 12px;
    }

    .archive-main {
        padding-top: 22px;
    }

    .archive-heading {
        margin-bottom: 30px;
    }

    .archive-heading__title {
        font-size: clamp(1.65rem, 10vw, 2.15rem);
    }

    .archive-heading__description {
        font-size: 0.86rem;
        line-height: 1.8;
    }

    .archive-toolbar {
        padding: 14px;
        border-radius: 18px;
    }

    .archive-results-header__title {
        font-size: 1.15rem;
    }

    .archive-results-header__summary {
        font-size: 0.82rem;
    }

    .active-filters__header {
        display: block;
    }

    .active-filters__clear {
        margin-top: 8px;
    }

    .filter-options,
    #brandFilterOptions {
        grid-template-columns: 1fr;
    }

    .filter-modal__body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .filter-modal__footer {
        flex-direction: column;
        padding-right: 16px;
        padding-left: 16px;
    }

    .filter-modal__reset,
    .filter-modal__apply {
        width: 100%;
    }

    .archive-message {
        min-height: 240px;
        padding: 28px 16px;
    }

    #emptyResetButton,
    .archive-button {
        width: min(100%, 240px);
        min-width: 0;
    }

    .notice-toggle-button {
        min-height: 40px;
    }

    .notice-panel {
        padding: 18px 14px;
    }

    .page-top-button {
        right: 12px;
        bottom: 12px;
    }
}


/* ========================================
   極小画面
   360px以下
======================================== */

@media screen and (max-width: 360px) {
    :root {
        --container-padding: 10px;
    }

    .archive-heading__title {
        font-size: 1.6rem;
    }

    .archive-toolbar {
        padding: 12px;
    }

    .archive-button,
    .archive-sort__select,
    .filter-button {
        font-size: 0.84rem;
    }

    .filter-modal__title {
        font-size: 1rem;
    }

    .filter-modal__close {
        width: 40px;
        height: 40px;
    }

    .footer-navigation__list {
        justify-content: center;
    }

    .footer-navigation__list li:not(:last-child)::after {
        margin-right: 4px;
        margin-left: 4px;
    }
}


/* ========================================
   横向きスマートフォン
======================================== */

@media screen and (max-height: 520px) and (orientation: landscape) {
    /*
     * stretch・全画面化・角丸解除は中央配置を壊すため使用しません。
     */
    .filter-modal {
        display: grid;
        align-items: center;
        justify-items: center;
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .filter-modal__panel {
        width: min(760px, 100%);
        min-height: 0;
        max-height:
            calc(
                100dvh -
                max(16px, env(safe-area-inset-top)) -
                max(16px, env(safe-area-inset-bottom))
            );
        margin: auto;
        border: 1px solid rgb(244 122 36 / 22%);
        border-radius: 16px;
    }

    .filter-modal__header {
        min-height: 58px;
    }

    .filter-modal__body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        padding-bottom: 18px;
    }

    .filter-group {
        padding: 18px 0;
    }
}


/* ========================================
   タッチ端末
======================================== */

@media (hover: none) and (pointer: coarse) {
    .publication-card__link:hover .publication-card__image-area,
    .publication-card__link:hover .publication-card__image {
        transform: none;
    }

    .archive-button,
    .filter-button,
    .filter-modal__close,
    .filter-modal__reset,
    .filter-modal__apply,
    .notice-toggle-button,
    .page-top-button,
    .site-header__menu-button {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ========================================
   印刷
======================================== */

@media print {
    .site-header,
    .site-footer,
    .archive-toolbar,
    .active-filters,
    .filter-modal,
    .notice-section,
    .page-top-button {
        display: none !important;
    }

    .archive-main {
        width: 100%;
        padding: 0;
    }

    .archive-container {
        width: 100%;
    }

    .publication-list {
        gap: 24px;
    }

    .publication-card {
        break-inside: avoid;
    }

    .publication-card__image-area {
        box-shadow: none;
    }

    a {
        text-decoration: none;
    }
}