/* Cosmo Category Redesign v3 — AW 1.3.52. Extends cosmo-home-v3.css */

.cch3-cat-hero { position: relative; overflow: hidden; color: #fff; min-height: 420px; background: #181410; }
.cch3-cat-hero__media { position: absolute; inset: 0; }
.cch3-cat-hero__media img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 40%; }
.cch3-cat-hero__shade { position: absolute; inset: 0; background:
	linear-gradient(90deg, rgba(10,8,6,.72) 0%, rgba(10,8,6,.5) 38%, rgba(10,8,6,.18) 62%, rgba(10,8,6,0) 78%),
	linear-gradient(0deg, rgba(10,8,6,.35) 0%, rgba(10,8,6,0) 42%); }
.cch3-cat-hero__copy { position: relative; z-index: 1; padding: 72px 18px 56px; max-width: 34em; }
.cch3-cat-hero__title { font-family: var(--cch3-serif); font-weight: 370; font-variation-settings: "opsz" 48; font-size: 42px; line-height: 1.05; letter-spacing: -.01em; margin-top: 18px !important; color: #fff; }
.cch3-cat-hero__dek { font-family: var(--cch3-serif); font-variation-settings: "opsz" 14; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.9); margin-top: 16px !important; max-width: 28em; }

.cch3-filters { border-bottom: 1px solid rgba(24,20,16,.12); background: #f7f3ec; }
.cch3-filters__list { list-style: none; margin: 0; padding: 0 18px; display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cch3-filters__link { display: block; padding: 16px 14px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cch3-muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.cch3-filters__link.is-active, .cch3-filters__link:hover { color: var(--cch3-ink); border-bottom-color: var(--cch3-ink); }

.cch3-featured { display: grid; gap: 22px; margin-bottom: 40px; }
.cch3-featured__media { display: block; overflow: hidden; background: #e9e4dc; aspect-ratio: 16 / 10; }
.cch3-featured__media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .7s ease; }
.cch3-featured:hover .cch3-featured__media img { transform: scale(1.03); }
.cch3-featured__title { font-family: var(--cch3-serif); font-weight: 400; font-variation-settings: "opsz" 40; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin-top: 10px !important; }
.cch3-featured__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; }
.cch3-featured__title a:hover { background-size: 100% 1px; }
.cch3-featured__dek { font-family: var(--cch3-serif); font-variation-settings: "opsz" 14; font-size: 17px; line-height: 1.45; color: var(--cch3-muted); margin-top: 10px !important; max-width: 36em; }
.cch3-btn--text { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

.cch3-feed { margin: 36px 18px 0; }
.cch3-feed__layout { display: grid; gap: 36px; }
.cch3-feed__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px; }
.cch3-feed__grid--3 { margin-top: 8px; }
.cch3-feed__item--ad { display: flex; justify-content: center; padding: 8px 0; }
.cch3-ad--250 .cch3-ad__unit img, .cch3-ad--600 .cch3-ad__unit img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.cch3-feed__rail { display: none; }
.cch3-sec { margin: 48px 18px 0; }
/* 1.3.60: width 100% + height auto so the 4:3 box spans the column. cosmo-home-v3.css sets a fixed height at >=1100px, which with aspect-ratio 4/3 shrank the box to ~2/3 of the column (beige band, image narrower than the title). */
.cch3-card__media { display: block; overflow: hidden; background: #e9e4dc; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; }
.cch3-card__media img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .7s ease; }
.cch3-card:hover .cch3-card__media img { transform: scale(1.03); }
.cch3-card__title { font-family: var(--cch3-serif); font-weight: 400; font-size: 20px; line-height: 1.25; margin-top: 8px !important; }

.cch3-resort { margin: 36px 18px 0; }
.cch3-resort .cch3-band { margin-left: 0; margin-right: 0; }
.cch3-resort__grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px; }
.cch3-eyebrow--on-dark { color: rgba(255,255,255,.75); }

@media (min-width: 700px) {
	.cch3-cat-hero { min-height: 460px; }
	.cch3-cat-hero__copy { padding: 80px 34px 64px; }
	.cch3-cat-hero__title { font-size: 48px; }
	.cch3-filters__list { padding-left: 34px; padding-right: 34px; }
	.cch3-feed, .cch3-sec, .cch3-resort { margin-left: 34px; margin-right: 34px; }
	.cch3-featured { grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; }
	.cch3-feed__grid--3 { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
	.cch3-feed__item--ad { grid-column: 1 / -1; }
	.cch3-resort__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.cch3-cat-hero { height: calc(260 * var(--u)); min-height: 0; }
	.cch3-cat-hero__copy { left: 0; padding: calc(40 * var(--u)) 0 calc(36 * var(--u)) calc(41 * var(--u)); width: calc(340 * var(--u)); max-width: none; }
	.cch3-cat-hero__title { font-size: calc(36 * var(--u)); line-height: calc(34 * var(--u)); margin-top: calc(14 * var(--u)) !important; }
	.cch3-cat-hero__dek { font-size: calc(12.5 * var(--u)); line-height: calc(17 * var(--u)); margin-top: calc(12 * var(--u)) !important; width: calc(280 * var(--u)); max-width: none; }
	.cch3-filters__list { width: calc(702 * var(--u)); margin: 0 auto; padding-left: 0; padding-right: 0; }
	.cch3-feed, .cch3-sec, .cch3-resort { width: calc(702 * var(--u)); margin-left: auto; margin-right: auto; }
	.cch3-feed__layout { grid-template-columns: 1fr calc(150 * var(--u)); gap: calc(22 * var(--u)); align-items: start; }
	.cch3-feed__layout--solo { grid-template-columns: 1fr; }
	.cch3-feed__rail { display: block; position: sticky; top: calc(70 * var(--u)); }
	.cch3-featured__media { aspect-ratio: auto; height: calc(210 * var(--u)); }
	.cch3-featured__title { font-size: calc(24 * var(--u)); line-height: calc(26 * var(--u)); }
	.cch3-featured__dek { font-size: calc(12 * var(--u)); line-height: calc(16.5 * var(--u)); }
	.cch3-feed__grid--3 { grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)) calc(14 * var(--u)); }
	.cch3-feed__item--ad { grid-column: 1 / -1; }
	.cch3-resort .cch3-band { width: 100%; }
	.cch3-resort__grid { grid-template-columns: repeat(4, 1fr); gap: calc(18 * var(--u)) calc(14 * var(--u)); }
	.cch3-resort .cch3-mini__media { height: calc(88 * var(--u)); aspect-ratio: auto; }
}
.cch3-nav a[aria-current="page"] { color: var(--cch3-ink); }
.cch3-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* 1.3.70 — phones: long section titles ("Business & Entrepreneurship") wrap between words, never mid-word.
   Home's nowrap rule made the H2 469px wide and the page 487px at 390. Category landings only (.cch3-catpage). */
@media (max-width: 699px) {
	.cch3-catpage .cch3-sechead__titles { min-width: 0; flex: 1 1 auto; max-width: 100%; }
	.cch3-catpage .cch3-sechead__title { white-space: normal; overflow-wrap: normal; word-wrap: normal; word-break: normal; -webkit-hyphens: none; hyphens: none; text-wrap: balance; line-height: 1.06; }
}
@media (max-width: 359px) {
	.cch3-catpage .cch3-sechead__title { font-size: 32px; } /* keep the longest word ("Entrepreneurship") inside a 320px screen */
}
