/*
 * aSS WORLD-only styles (a-s-s.world)
 *
 * Generated by splitting the two aSS child.css files by CSS block.
 * Do not hand-merge shared and site-specific rules back together.
 */









/* ── Responsive ─────────────────────────────────────────── */








body.high-contrast .hp-tiles__tile-title,
body.high-contrast .hp-tiles__tile-cta {
	color: #fff !important;
}

/* ============================================================
   AWG POST SINGLE — page wrapper (child theme single.php)
   ============================================================ */





.awg-post-single {
	padding: 2rem 0 3rem;
}



.awg-post-single__title {
	font-size:      clamp( 1.5rem, 3vw, 2.5rem );
	font-weight:    300;
	letter-spacing: -0.02em;
	margin-bottom:  1.5rem;
}



.awg-post-single__meta {
	display:     flex;
	gap:         1rem;
	align-items: center;
	margin-top:  1.5rem;
	font-size:   0.85rem;
	color:       var(--text-muted, #777);
}



.awg-post-single__cat {
	color:           var(--color-primary, #cc3366);
	text-decoration: none;
}



.awg-post-single__cat:hover {
	text-decoration: underline;
}

/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */
/* Archive / gallery index — 5 columns desktop, 2 columns mobile.
   .container prefix raises specificity above parent portfolio.css which loads
   with no dependency declaration and can win the output order coin-flip. */






.container .portfolio-archive-grid {
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
}



@media (max-width: 768px) {
	.container .portfolio-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   AWG ARCHIVE — contributors / models category grid
   (category.php in child theme)
   ============================================================ */





.awg-archive__header {
	padding:       2rem 0 1.5rem;
}



.awg-archive__title {
	font-size:      clamp( 1.5rem, 3vw, 2.5rem );
	font-weight:    300;
	letter-spacing: -0.02em;
	margin:         0 0 0.5rem;
}



.awg-archive__desc {
	color:     var(--text-muted, #777);
	font-size: 0.95rem;
	margin:    0;
}

/* ── Responsive grid ────────────────────────────────────── */




.awg-archive__grid {
	display:               grid;
	grid-template-columns: repeat( 5, 1fr );
	gap:                   1rem;
	margin-bottom:         3rem;
	align-items:           start; /* prevent taller cards from stretching their row-mates */
}



@media (max-width: 1024px) {
	.awg-archive__grid { grid-template-columns: repeat( 3, 1fr ); }
}



@media (max-width: 600px) {
	.awg-archive__grid { grid-template-columns: repeat( 2, 1fr ); gap: 0.6rem; }
}

/* ── Card ───────────────────────────────────────────────── */




.awg-archive__item {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}



.awg-archive__thumb-link {
	position:     relative;
	display:      block;
	aspect-ratio: 4 / 5;
	overflow:     hidden;
	border-radius: var( --radius, 4px );
	background:   var( --bg-alt, #f0f0f0 );
}



.awg-archive__thumb-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.35s ease;
}



.awg-archive__thumb-link:hover .awg-archive__thumb-img {
	transform: scale( 1.04 );
}



.awg-archive__thumb-placeholder {
	width:      100%;
	height:     100%;
	background: var( --bg-alt, #f0f0f0 );
}

/* ── "NEW" badge ────────────────────────────────────────── */




.awg-archive__new-badge {
	position:       absolute;
	top:            10px;
	left:           10px;
	z-index:        5;
	padding:        3px 9px;
	background:     var( --color-primary, #cc3366 );
	color:          #fff;
	font-family:    var( --font-heading );
	font-size:      0.65rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius:  2px;
	pointer-events: none;
	user-select:    none;
}

/* ── Item info ──────────────────────────────────────────── */




.awg-archive__info {
	display:        flex;
	flex-direction: column;
	gap:            0.15rem;
}



.awg-archive__name {
	font-family:     var( --font-heading );
	font-size:       0.9rem;
	font-weight:     400;
	color:           var( --color-primary, #cc3366 );
	text-decoration: none;
	line-height:     1.3;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}



.awg-archive__name:hover {
	text-decoration: underline;
}



.awg-archive__count {
	font-size: 0.8rem;
	color:     var( --text-muted, #888 );
}

/* ── Reduced motion ─────────────────────────────────────── */




@media ( prefers-reduced-motion: reduce ) {
	.awg-archive__thumb-img { transition: none; }
}

/* ── Archive pagination — dot-pill style, arrows pinned left/right ──── */




.navigation.pagination .nav-links {
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
	gap:             6px;
	padding:         0 2.5rem;   /* space for absolutely-positioned arrows */
	min-height:      2rem;
}

/* Base pill — all page numbers and dots inherit this */



.navigation.pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       22px;
	height:          22px;
	padding:         0 7px;
	border-radius:   11px;
	font-size:       0.78rem;
	font-family:     var(--font-heading);
	font-weight:     400;
	line-height:     1;
	text-decoration: none;
	color:           var(--text-muted, #888);
	background:      rgba(0, 0, 0, 0.10);
	transition:      background 0.2s ease, color 0.2s ease, width 0.25s ease;
}



.navigation.pagination .page-numbers:hover {
	background: rgba(0, 0, 0, 0.20);
	color:      var(--text-main, #1a1a1b);
}

/* Current page — wider pill filled with brand colour */



.navigation.pagination .page-numbers.current {
	background:  var(--color-primary, #cc3366);
	color:       #fff;
	font-weight: 500;
	min-width:   34px;
}

/* Ellipsis — strip pill background */



.navigation.pagination .page-numbers.dots {
	background: none;
	cursor:     default;
	min-width:  auto;
	padding:    0 2px;
	font-size:  0.7rem;
	color:      rgba(0, 0, 0, 0.30);
}

/* Prev / next arrows — absolute left / right, no pill */



.navigation.pagination .prev.page-numbers,
.navigation.pagination .next.page-numbers {
	position:   absolute;
	top:        50%;
	transform:  translateY(-50%);
	background: none;
	min-width:  auto;
	padding:    0;
	font-size:  1rem;
	color:      var(--text-main, #1a1a1b);
}



.navigation.pagination .prev.page-numbers:hover,
.navigation.pagination .next.page-numbers:hover {
	background: none;
	color:      var(--color-primary, #cc3366);
}



.navigation.pagination .prev.page-numbers { left:  0; }


.navigation.pagination .next.page-numbers { right: 0; }

/* ── High-contrast overrides ─────────────────────────────────────────── */




body.high-contrast .navigation.pagination .page-numbers {
	background: transparent   !important; /* !important: overrides rgba fallback */
	border:     2px solid #000066 !important;
	color:      #000066       !important;
}



body.high-contrast .navigation.pagination .page-numbers.current {
	background: #000066 !important;
	color:      #fff    !important;
}



body.high-contrast .navigation.pagination .page-numbers.dots {
	border: none !important;
}



body.high-contrast .navigation.pagination .prev.page-numbers,
body.high-contrast .navigation.pagination .next.page-numbers {
	border:     none    !important;
	color:      #000066 !important;
	background: none    !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */




@media (prefers-reduced-motion: reduce) {
	.navigation.pagination .page-numbers {
		transition: none;
	}
}

/* ── Mobile slide-in menu: search field ──────────────────────────────────
   Same searchform.php as the desktop .header-search (parent theme's
   menu.css styles that one), matched here to the slide-in panel's other
   bordered sections. Mirrors the shop theme's .mobile-search treatment. */





.mobile-search {
	display: none;
	border-top: 1px solid var(--border-color, #e0e0e0);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}



.mobile-search input[type="search"] {
	width: 100%;
	padding: 0.5rem 2.25rem 0.5rem 0.75rem;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: var(--radius, 4px);
	font-size: 0.875rem;
}



.mobile-search button {
	position: absolute;
	right: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: var(--text-muted, #666);
}



@media (max-width: 767px) {
	.mobile-search {
		display: block;
	}
}