/* Ideas & Inspiration (board / idea / index). Scoped under .insp-page; index.css untouched. */

.insp-page {
    padding-top: 24px;
    padding-bottom: 48px;
    color: #333;
    overflow-x: hidden;
}
.insp-page img { max-width: 100%; height: auto; display: block; }

/* Visible keyboard focus (index.css resets a:focus outline) */
.insp-page a:focus-visible,
.insp-page button:focus-visible,
.insp-page .btn:focus-visible {
    outline: 3px solid #406354;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Preview bar */
.insp-preview-bar {
    background: #fff4e0;
    border: 1px solid #ffb459;
    color: #5a3b00;
    padding: 10px 16px;
    margin: 0 0 20px;
    font-weight: 600;
    border-radius: 4px;
}

/* Breadcrumb */
.insp-breadcrumb ol {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    color: #595959;
}
/* index.css 的全域 nav li { display: table-cell } / nav a { display: block; padding !important }
   會套到 <nav class="insp-breadcrumb">，造成項目錯位；這裡以較高權重覆蓋。 */
.insp-breadcrumb li { display: inline-flex; align-items: center; vertical-align: baseline; }
.insp-breadcrumb li + li::before { content: "\203A"; padding: 0 8px; color: #8a8a8a; }
.insp-breadcrumb ol a,
.insp-breadcrumb ol a:link { display: inline; padding: 0 !important; font-size: inherit; font-weight: inherit; }
.insp-breadcrumb a { color: #406354; text-decoration: underline; text-underline-offset: 2px; }
.insp-breadcrumb a:hover { color: #2b4539; }

/* Headings & lead */
.insp-page h1 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1a1a1a;
    overflow-wrap: anywhere;
}
.insp-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #4a4a4a;
    max-width: 760px;
    margin: 0 0 24px;
}
.insp-section { margin: 40px 0 0; }
.insp-section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1a1a1a;
}
.insp-page-indicator { font-size: 15px; font-weight: 400; color: #595959; }

/* Card grid (index featured, related) */
.insp-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
@media (min-width: 768px) { .insp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .insp-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .insp-card-grid { grid-template-columns: 1fr; } }

/* Board card grid (index) */
.insp-board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 576px) { .insp-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .insp-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.insp-board-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.insp-board-media { display: block; background: #F6F6F6; aspect-ratio: 4 / 3; overflow: hidden; }
.insp-board-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.insp-board-card:hover .insp-board-media img { transform: scale(1.04); }
.insp-board-body { padding: 16px 18px 18px; }
.insp-board-body h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.insp-board-body h3 a { color: #1a1a1a; text-decoration: none; }
.insp-board-body h3 a:hover { color: #406354; text-decoration: underline; }
.insp-board-body p { font-size: 14px; line-height: 1.55; color: #4a4a4a; margin: 0 0 10px; }
.insp-count {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #406354;
}

/* Masonry (board page): CSS columns keep DOM order = reading order */
.insp-masonry {
    columns: 1;
    column-gap: 20px;
}
@media (min-width: 480px) { .insp-masonry { columns: 2; } }
@media (min-width: 768px) { .insp-masonry { columns: 3; } }
@media (min-width: 1200px) { .insp-masonry { columns: 4; } }
.insp-masonry .insp-card {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 20px;
}

/* Idea card (shared partial) */
.insp-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
}
.insp-card-media { display: block; background: #F6F6F6; }
.insp-card-media img { width: 100%; height: auto; transition: transform .25s; }
.insp-card:hover .insp-card-media img { transform: scale(1.03); }
.insp-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F6F6F6;
}
.insp-card-grid .insp-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.insp-card-grid .insp-card-media img { height: 100%; object-fit: cover; }
.insp-card-body { padding: 14px 16px 16px; }
.insp-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.insp-card-title a { color: #1a1a1a; text-decoration: none; }
.insp-card-title a:hover { color: #406354; text-decoration: underline; }
.insp-card-summary { font-size: 14px; line-height: 1.5; color: #4a4a4a; margin: 0; }

/* Board page header */
.insp-cover { margin: 0 0 24px; }
.insp-cover img { width: 100%; border-radius: 8px; background: #F6F6F6; }
.insp-body { font-size: 16px; line-height: 1.7; max-width: 760px; }
.insp-body p { margin: 0 0 1em; }
.insp-body h2 { font-size: 22px; margin: 1.5em 0 .5em; }
.insp-body h3 { font-size: 18px; margin: 1.25em 0 .5em; }
.insp-body img { border-radius: 6px; }
.insp-body ul, .insp-body ol { padding-left: 1.4em; }

/* Idea page */
.insp-article { max-width: 960px; }
.insp-hero-figure { margin: 0 0 28px; }
.insp-hero-figure img { width: 100%; border-radius: 8px; background: #F6F6F6; }
.insp-gallery { margin-top: 36px; }
.insp-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 576px) { .insp-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.insp-gallery-item { margin: 0; }
.insp-gallery-item img { width: 100%; border-radius: 6px; background: #F6F6F6; }
.insp-gallery-item figcaption { font-size: 13px; color: #595959; margin-top: 8px; line-height: 1.5; }

/* Shop This Look – reuses .product-row card styles from index.css */
.insp-shop { margin-top: 40px; padding: 0; }
.insp-shop .row { margin-left: -10px; margin-right: -10px; }
.insp-shop .insp-product { padding-left: 10px; padding-right: 10px; margin-bottom: 28px; }
.insp-shop .insp-product > a:first-child { display: block; color: inherit; text-decoration: none; }
.insp-shop .product-img { position: relative; }
.insp-shop h3 { min-height: 0; }
.insp-shop .price { margin-bottom: .75rem; }
.insp-product-cta { display: inline-block; padding: 7px 18px; color: #343434; background: #fff; }
.insp-product-cta:hover { color: #fff; }
.insp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
}
.insp-badge-oos { background: #595959; color: #fff; }

/* Byline / dates */
.insp-article-meta {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
    font-size: 13px;
    color: #595959;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.insp-byline { font-weight: 600; color: #333; }

/* Boards list on idea page */
.insp-in-boards { margin-top: 32px; }
.insp-tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.insp-tag-list a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #406354;
    border-radius: 999px;
    color: #406354;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.insp-tag-list a:hover { background: #406354; color: #fff; }

/* Empty state */
.insp-empty {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    margin-top: 24px;
}
.insp-empty h2 { font-size: 20px; margin: 0 0 8px; }
.insp-empty p { margin: 0; color: #4a4a4a; }
.insp-empty a { color: #406354; text-decoration: underline; }

/* Pagination */
.insp-pagination { margin-top: 12px; }
.insp-pagination .pagination { justify-content: center; flex-wrap: wrap; }

@media (max-width: 767px) {
    .insp-page { padding-top: 16px; }
    .insp-page h1 { font-size: 26px; }
    .insp-lead { font-size: 15px; }
    .insp-section-title { font-size: 19px; }
}

/* FAQ (idea page) */
.insp-faq { margin-top: 36px; max-width: 760px; }
.insp-faq-list { border-top: 1px solid #e0e0e0; }
.insp-faq-item { border-bottom: 1px solid #e0e0e0; }
.insp-faq-q {
    display: block;
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 16px 40px 16px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #262626;
    word-break: break-word;
}
.insp-faq-q::-webkit-details-marker { display: none; }
.insp-faq-q::marker { content: ''; }
/* 自訂箭頭 */
.insp-faq-q::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid #406354;
    border-bottom: 2px solid #406354;
    transform: rotate(45deg);
    transition: transform .15s ease-in-out;
}
.insp-faq-item[open] > .insp-faq-q::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}
.insp-faq-q:hover { color: #406354; }
/* index.css 有 a:focus{outline:none}，summary 不受影響，但仍明確指定並提高權重 */
.insp-page .insp-faq-q:focus-visible {
    outline: 3px solid #406354;
    outline-offset: -3px;
    border-radius: 2px;
}
.insp-faq-a {
    padding: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    word-break: break-word;
}
.insp-faq-a p { margin: 0 0 .9em; }
.insp-faq-a p:last-child { margin-bottom: 0; }
.insp-faq-a ul, .insp-faq-a ol { padding-left: 1.4em; margin: 0 0 .9em; }
/* 答案內連結與內文連結同一組樣式 */
.insp-body a, .insp-faq-a a { color: #2f4c40; text-decoration: underline; }
.insp-body a:hover, .insp-faq-a a:hover { color: #406354; }

@media (max-width: 575px) {
    .insp-faq-q { font-size: 15px; padding-right: 32px; }
    .insp-faq-a { font-size: 14px; }
}