@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - news.css
   お知らせ一覧・詳細ページ
======================================== */

/* セクション構造を他ページ（recommend.phpの.pick-section・menu.phpの.menu-layout__innerと同じ）と揃え、
   外側（.section--pad）=パディング、内側（.inner）=max-width・中央寄せの役割分担にしている（common.cssの.section--pad参照）。
   ※ 一覧ページ（.page-news）のみ対象。詳細ページ（news-detail.php、.page-news-detail）は
     .inner--narrow（固定880px）を使うので対象外。 */
@media (min-width: 1024px) {
    .page-news .section--pad > .inner {
        max-width: 1200px;
    }
}

/* ========================================
   一覧
======================================== */
.news-count {
    margin-bottom: var(--spacing-md);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.news-count__num {
    font-family: var(--font-en);
    font-size: 1.125rem;
    margin-inline: 0.25rem;
    color: var(--color-gold);
}

.news-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.news-card {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    /* 落ち影は付けない方針（company.phpの.owner-introと同じ）。 */
    transition: transform var(--transition);
}

/* 紙目テクスチャは別要素（::before）に切り出してopacityをかける（.shop-brief::beforeと同じ手法）。
   .news-card自体にopacityをかけると中身（サムネイル画像・テキスト）まで透けてしまうため。 */
.news-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    opacity: 0.5;
    pointer-events: none;
}

.news-card:hover {
    transform: translateY(-4px);
}

.news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .news-card__thumb img {
    transform: scale(1.06);
}

/* 画像未登録時の代替画像（ogp.webp）。
   ※ 登録済み画像と同じくcoverでサムネイル全面に入れ、不透明度をわずかに下げる。
   ※ ホバー拡大はかけない（代替画像なので動かす必要がない）。 */
.news-card__thumb--placeholder img {
    opacity: 0.9;
}

.news-card:hover .news-card__thumb--placeholder img {
    transform: none;
}

.news-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-sm);
}

.news-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.news-card__date {
    font-family: var(--font-en);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.news-card__cat {
    padding: 0.1875rem 0.75rem;
    border: 1px solid var(--color-title-brown);
    border-radius: var(--radius-full);
    background-color: var(--color-title-brown);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-text-white);
}

.news-card__title {
    margin-top: 0.625rem;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

.news-card__excerpt {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

.news-card__more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
}

.news-card__more::after {
    content: '';
    width: 1.5rem;
    height: 1px;
    background-color: currentColor;
    /* ※ 横棒は scaleX で伸ばす（width を変えると要素の幅が変わる）。
       理由は common.css の .link-arrow 参照。 */
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.news-card:hover .news-card__more {
    color: var(--color-gold);
}

.news-card:hover .news-card__more::after {
    transform: scaleX(1.33);
}

@media (min-width: 576px) {
    .news-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .news-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   ページャー
======================================== */
.news-pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--spacing-xl);
}

/* ※ 枠線は他の罫線（--color-border）よりはっきり見せる。地がテクスチャのクリーム色なので
   細い薄い線だと埋もれてクリックできることが伝わりにくいため、
   太さを上げ（1px→2px）、色も --color-title-brown（#584940）にする。
   ※ ホバー・現在ページは同じ色で塗りつぶす。 */
.news-pager__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--color-title-brown);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    font-family: var(--font-en);
    font-size: 0.9375rem;
    font-weight: 600;
    /* bodyから継承される行間（1.9・768px以上は2）を打ち消し、
       丸の中で数字が上下ちょうど中央に来るようにする。 */
    line-height: 1;
    color: var(--color-title-brown);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.news-pager__num:hover,
.news-pager__num.is-active {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}

/* ========================================
   空表示
======================================== */
.news-empty {
    padding: var(--spacing-xl) var(--gutter);
    text-align: center;
}

.news-empty__icon {
    font-size: 2.25rem;
    color: var(--color-primary-light);
}

.news-empty__text {
    margin-top: var(--spacing-sm);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.news-empty__sub {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ========================================
   詳細
======================================== */
.news-detail__header {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.news-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.news-detail__date {
    font-family: var(--font-en);
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.news-detail__cat {
    padding: 0.1875rem 0.875rem;
    border: 1px solid var(--color-title-brown);
    border-radius: var(--radius-full);
    background-color: var(--color-title-brown);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-text-white);
}

.news-detail__title {
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.news-detail__eyecatch {
    margin-top: var(--spacing-md);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.news-detail__eyecatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-detail__content {
    margin-top: var(--spacing-md);
    font-size: 0.9375rem;
}

/* PKOBO-News01の管理画面エディタが本文に持ち込むインラインstyle（font-sizeなど）を
   無効化し、必ずこのCSSで指定したサイズ（.news-detail__contentの値）に揃える。 */
.news-detail__text,
.news-detail__text * {
    font-size: inherit !important;
}

.news-detail__text {
    line-height: 2;
}

.news-detail__text + .news-detail__text {
    margin-top: var(--spacing-sm);
}

.news-detail__text a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.news-detail__file {
    margin-top: var(--spacing-sm);
}

.news-detail__file img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.news-detail__file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    transition: border-color var(--transition), color var(--transition);
}

.news-detail__file-link:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* 一覧に戻るボタンをページャー（.news-pager__num）と同じ配色にする（.btn--outlineは他ページでも使う共通クラスなので、このページ内だけにスコープ）。 */
.page-news-detail .sec-foot .btn--outline {
    color: var(--color-title-brown);
    border-color: var(--color-title-brown);
}

.page-news-detail .sec-foot .btn--outline:hover {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}

@media (min-width: 768px) {
    .news-detail__eyecatch {
        aspect-ratio: 16 / 9;
    }
    .news-detail__title {
        font-size: 1.75rem;
    }
    .news-detail__content {
        font-size: 1rem;
    }
}

/* ========================================
   QRコードポップアップ
   ※ 少しスクロールしたタイミングで一度だけ表示する（news.js参照）。
   ※ オーバーレイ・中央揃え・閉じるボタンの仕組みだけここで持ち、
     中身のカード自体（紙目背景・ゴールドの内枠・アイコンメダリオンなど）は
     includes/sec-links.php と同じ .link-panel.link-panel--insta を使い回しているので、
     スタイルは common.css の既定定義に任せる（ここでは上書きしない）。
======================================== */
.qr-popup {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.qr-popup.is-active {
    opacity: 1;
    visibility: visible;
}

.qr-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(53, 48, 43, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.qr-popup__content {
    position: relative;
    width: 100%;
    max-width: 22rem;
    transform: translateY(1rem);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.qr-popup.is-active .qr-popup__content {
    transform: translateY(0);
}

/* .link-panelは本来並びのカード用の幅制限（max-width: var(--section-width-sm)）を持つが、
   ポップアップ内では.qr-popup__content自体が幅を決めるので打ち消す。
   paddingもポップアップ内だけの上書き（共通の.link-panelには影響しない）。 */
.qr-popup__content .link-panel {
    max-width: none;
    margin-inline: 0;
    padding: 2.5rem 2rem;
}

.qr-popup__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-light);
    font-size: 1rem;
    transition: color var(--transition);
}

.qr-popup__close:hover {
    color: var(--color-gold);
}