/* ==========================================================================
   ARCHIVE & LISTING PAGE STYLES
   ========================================================================== */

/* ==========================================================================
   ARCHIVE HEADERS
   ========================================================================== */

.arci-content {
height: auto;
margin: 20px auto;
/*padding: 20px 40px;*/
border: none;
background: #f5f5f5;
text-align: left;
word-break: break-all;
word-wrap: break-word;
}

.arci-content h1 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.arci-content p {
font-size: 1rem;
margin: 10px auto;
}

/* ==========================================================================
   POST LIST CONTAINER
   ========================================================================== */

#arte-t6-t {
width: 100%;
margin: 0 auto;
text-align: center;
}

/* ==========================================================================
   HORIZONTAL CATEGORY MENU
   ========================================================================== */

/* --- Term Navigation Container --- */
.listing-term-nav {
--listing-term-nav-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.94));
--listing-term-nav-border: rgba(15, 23, 42, 0.08);
--listing-term-nav-text: #172033;
--listing-term-nav-muted: #6b7280;
--listing-term-nav-chip-bg: rgba(255, 255, 255, 0.88);
--listing-term-nav-chip-border: rgba(15, 23, 42, 0.1);
--listing-term-nav-chip-hover: #111827;
--listing-term-nav-accent: #d20243;
position: relative;
margin: 0 0 24px;
overflow: hidden;
background: var(--listing-term-nav-bg);
border: 1px solid var(--listing-term-nav-border);
border-radius: 18px;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
padding: 16px;
}

.listing-term-nav::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 92px;
height: 92px;
background: radial-gradient(circle, rgba(210, 2, 67, 0.13), transparent 68%);
pointer-events: none;
}

.listing-term-nav__header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
color: var(--listing-term-nav-text);
}

.listing-term-nav--no-header {
padding-block: 12px;
}

.listing-term-nav--no-header .listing-term-nav__scroller {
padding-top: 0;
}

.listing-term-nav--no-header::after {
opacity: 0.58;
}

.listing-term-nav__eyebrow {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.04em;
}

.listing-term-nav__hint {
font-size: 0.78rem;
color: var(--listing-term-nav-muted);
white-space: nowrap;
}

.listing-term-nav__scroller {
position: relative;
z-index: 1;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(210, 2, 67, 0.35) transparent;
-webkit-overflow-scrolling: touch;
}

.listing-term-nav__scroller::-webkit-scrollbar {
height: 6px;
}

.listing-term-nav__scroller::-webkit-scrollbar-track {
background: transparent;
}

.listing-term-nav__scroller::-webkit-scrollbar-thumb {
background: rgba(210, 2, 67, 0.3);
border-radius: 999px;
}

.listing-term-nav__list {
display: flex;
align-items: center;
list-style: none;
padding: 0 2px 6px;
margin: 0;
gap: 10px;
flex-wrap: nowrap;
}

.listing-term-nav__list:not(:has(.listing-term-nav__item)) {
display: none;
}

.listing-term-nav__item {
flex: 0 0 auto;
}

.listing-term-nav__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 9px 16px;
border: 1px solid var(--listing-term-nav-chip-border);
border-radius: 999px;
background: var(--listing-term-nav-chip-bg);
color: var(--listing-term-nav-text);
font-weight: 650;
font-size: 0.94rem;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.listing-term-nav__link:hover,
.listing-term-nav__link:focus-visible {
background: var(--listing-term-nav-chip-hover);
border-color: var(--listing-term-nav-chip-hover);
color: #fff;
box-shadow: 0 12px 24px rgba(17, 24, 39, 0.16);
transform: translateY(-1px);
outline: none;
}

.listing-term-nav__link:focus-visible {
box-shadow: 0 0 0 3px rgba(210, 2, 67, 0.22), 0 12px 24px rgba(17, 24, 39, 0.16);
}

.listing-term-nav__link.active,
.listing-term-nav__link[aria-current="page"] {
background: var(--listing-term-nav-accent);
border-color: var(--listing-term-nav-accent);
color: #fff;
}

/* ==========================================================================
   CARDS (POSTCARD)
   ========================================================================== */

.postcard {
position: relative;
margin: 0 0 1em;
padding: 0;
border-radius: 8px;
background-size: calc(10 * 1px) calc(10 * 1px);
color: #eee;
}

.postcard a {
display: flex !important;
gap: 3% !important;
flex-wrap: wrap;
justify-content: flex-start;
align-content: center;
padding: 10px;
border: 1px solid #eee;
border-radius: 2px;
background: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-sizing: border-box;
}

.postcard a:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

.postcard_thumbnail {
width: 38% !important;
height: auto;
min-width: 20px;
min-height: 10px;
max-height: 276px;
display: flex;
flex-shrink: 0;
aspect-ratio: 16 / 9 !important;
min-height: auto !important; /* Fix vertical distortion from CLS min-height */
overflow: hidden;
background: #f5f5f5;
}

.postcard_thumbnail picture {
width: 100%;
height: 100%;
display: block;
}

.postcard_thumbnail img {
width: 100%;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover;
display: block;
}

.postcard_content {
display: flex;
flex-direction: column;
justify-content: start;
width: 56%;
}

.postcard_title h3 {
display: -webkit-box;
opacity: 0.9;
padding-top: 0;
padding-bottom: 7px;
overflow: hidden;
color: #1f1d1d;
font-weight: 900;
font-size: 1.2rem;
line-height: 1.5;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}

.tm-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 6px 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
color: #333;
font-weight: 700;
font-size: 14px;
}

.tm-back-link:hover {
background: #f7f7f7;
}

.postcard_description, .postcard_description p {
display: -webkit-box;
margin: 0 auto;
padding-bottom: 0;
border-bottom: 5px solid transparent;
overflow: hidden;
color: #565656;
font-size: 90%;
letter-spacing: 2px;
text-decoration: none;
text-align: justify;
word-break: break-all;
word-wrap: break-word;
-webkit-line-clamp: 3;
line-clamp: 3;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
line-height: 1.5;
max-height: calc(3 * 1.5em);
text-overflow: ellipsis;
}

.postcard_meta {
opacity: 0.8;
padding: 5px;
color: #333;
font-size: 12px;
text-align: right;
}

/* ==========================================================================
   RESPONSIVE DESIGN - ARCHIVE
   ========================================================================== */

/* --- Tablet (768px and below) --- */
@media (max-width: 768px) {
.listing-term-nav {
padding: 14px;
border-radius: 16px;
}

.listing-term-nav--no-header {
padding: 12px 14px;
}

.listing-term-nav__header {
align-items: flex-start;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}

.postcard a {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important; /* Align text to image top */
gap: 15px !important; /* Fixed gap for mobile */
}

.postcard_thumbnail {
width: 160px ;
flex: 0 0 160px;
min-height: auto;
}

.postcard_content {
width: auto !important;
flex: 1 !important;
padding: 2px 0; /* Reduced from 4px for tighter look */
}

.postcard_title h3 {
padding-left: 0;
padding-right: 0;
padding-top: 2px !important;
padding-bottom: 0;
height: auto;
text-decoration: none;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 1rem;
line-height: 1.4 !important; /* Better line height for mobile */
font-weight: 400;
}

.postcard_description, .postcard_description p,
.postcard_meta {
display: none;
}
}

/* --- Mobile (479px and below) --- */
@media (max-width: 479px) {
.arci-content h1 {
font-size: 1.4rem;
}

.arci-content {
padding: 15px 20px;
}

.listing-term-nav {
padding: 12px;
}

.listing-term-nav--no-header {
padding: 10px 12px;
}

.listing-term-nav__list {
gap: 8px;
padding-bottom: 4px;
}

.listing-term-nav__link {
min-height: 34px;
padding: 7px 12px;
margin: 0px 0px 10px 0px;
font-size: 0.9rem;
}
}

/* ==========================================================================
   PAGINATION OVERRIDES (Archive/Category)
   Match homepage pagination layout
   ========================================================================== */

body.archive .pagination-container,
body.category .pagination-container,
body.tag .pagination-container {
text-align: center;
margin: 20px 0;
padding: 20px 0;
background: #f5f5f5;
}

body.archive .pagination,
body.category .pagination,
body.tag .pagination {
margin: 0;
}