/* Full-photo category entrances. Shared only by the seven premium directories;
   Research has no category entrance, and frozen previews keep their own CSS.
   The gradient belongs to the growing copy wrapper, never a fixed image stop. */
@media screen {
 html[data-map-product] body.premium-production #main .intro.compact-browse-intro{padding:24px 0 12px}
 html[data-map-product] body.premium-production #main .intro.compact-browse-intro h1{margin-bottom:10px}
 html[data-map-product] body.premium-production #main .intro-purpose{font-size:17px;line-height:1.5;margin:0 0 16px}
 html[data-map-product] body.premium-production #main .browse{padding-top:6px}
 html[data-map-product] body:is(.premium-editorial,.motivation-premium) #main .discovery-intro.compact-browse-intro{margin:12px 0 14px}
 html[data-map-product] body:is(.premium-editorial,.motivation-premium) #main .discovery-intro.compact-browse-intro h2{margin-bottom:0}
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .browse-context{font-size:15px;line-height:1.65;color:var(--premium-muted);margin:20px 0 24px;max-width:760px}
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .browse-context>p{margin:8px 0}
 html[data-map-product] body {
  --photo-tile-accent:#b9afff;
 }
 html[data-map-product="self"] body { --photo-tile-accent:#a7a3ff; }
 html[data-map-product="fit"] body { --photo-tile-accent:#ff9588; }
 html[data-map-product="money"] body { --photo-tile-accent:#83d9aa; }
 html[data-map-product="learn"] body { --photo-tile-accent:#f4ce72; }
 html[data-map-product="skill"] body { --photo-tile-accent:#9ac1ff; }
 html[data-map-product="adventure"] body { --photo-tile-accent:#b4d8a4; }
 html[data-map-product="motivation"] body { --photo-tile-accent:#ffc18b; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category,.discovery-card) {
  position:relative; isolation:isolate; display:flex; flex-direction:column;
  justify-content:flex-end; min-width:0; min-height:330px; height:auto;
  padding:0; overflow:hidden; border:1px solid #6b7481;
  border-top:3px solid var(--photo-tile-accent); border-radius:18px;
  background:#07111e; color:#fff; text-align:left; text-decoration:none;
  box-shadow:0 4px 16px #1521360d; transition:border-color .15s,box-shadow .15s;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category>.category-media,.discovery-card>.discovery-image) {
  position:absolute; z-index:0; inset:0; display:block; align-self:stretch;
  width:100%; height:100%; max-width:none; margin:0; padding:0;
  aspect-ratio:auto; border-radius:0; overflow:hidden; background:#07111e;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-media,.discovery-image) img {
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--photo-tile-focal,50% 35%);
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .discovery-image::after { display:none; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body,.discovery-body) {
  position:relative; z-index:1; display:flex; flex:none; flex-direction:column;
  align-items:stretch; gap:0; width:100%; max-width:none; min-width:0;
  margin:64px 0 0; padding:48px 22px 20px; color:#fff;
  background:linear-gradient(180deg,#07111e00 0,#07111ed6 36px,#07111ef5 100%);
  overflow-wrap:anywhere;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body,.discovery-body)>strong {
  display:block; max-width:100%; margin:0 0 10px; color:#fff;
  font-size:22px; font-weight:750; line-height:1.25; letter-spacing:-.025em;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .category-number {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px;
  width:100%; margin:0 0 14px; color:#f2f6fb; font-size:12px;
  line-height:1.5; letter-spacing:.08em;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .category-number>span { letter-spacing:0; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body>span:not(.category-number):not(.category-arrow),.discovery-description) {
  max-width:none; margin:0; color:#f2f6fb; font-size:14px; line-height:1.6;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .discovery-examples {
  margin:14px 0 0; color:#f2f6fb; font-size:12px; line-height:1.5;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-arrow,.discovery-action) {
  position:static; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:14px 0 0; padding:0; color:var(--photo-tile-accent);
  font-size:13px; line-height:1.5;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .category-arrow {
  align-self:flex-end; font-size:24px; line-height:1;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category,.discovery-card):hover {
  background:#07111e; border-color:var(--photo-tile-accent); transform:none;
  box-shadow:0 5px 18px #15213621;
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main .category[aria-pressed="true"] {
  background:#07111e; border-color:var(--photo-tile-accent);
  box-shadow:0 0 0 3px var(--premium-accent);
 }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category,.discovery-card):focus-visible {
  outline:3px solid var(--premium-accent); outline-offset:4px;
 }
 /* Focal points retain the existing subjects as cover changes with card height. */
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-sleep-"] { --photo-tile-focal:43% 40%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-nutrition-"] { --photo-tile-focal:47% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="walking.jpg"] { --photo-tile-focal:42% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-habits-"] { --photo-tile-focal:40% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-friendship-"] { --photo-tile-focal:48% 32%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="health-tracking.jpg"] { --photo-tile-focal:35% 22%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="fitness-equipment.jpg"] { --photo-tile-focal:46% 45%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-fitness-"] { --photo-tile-focal:58% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="mobility.jpg"] { --photo-tile-focal:51% 29%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="money-debt.jpg"] { --photo-tile-focal:50% 35%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="money-cash.jpg"] { --photo-tile-focal:50% 40%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="money-accounts.jpg"] { --photo-tile-focal:55% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="money-house.jpg"] { --photo-tile-focal:50% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-learning-"] { --photo-tile-focal:46% 28%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-career-"] { --photo-tile-focal:50% 28%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-finance-"] { --photo-tile-focal:50% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-information-"] { --photo-tile-focal:38% 30%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-attention-"] { --photo-tile-focal:48% 26%; }
 html[data-map-product] #main :is(.category-media,.discovery-image) img[src*="learn-meaning-"] { --photo-tile-focal:50% 30%; }
 html[data-map-product] #main .discovery-image img[src*="roadtrip-overlook"] { --photo-tile-focal:50% 25%; }
 html[data-map-product] #main .discovery-image img[src*="pottery-table"] { --photo-tile-focal:50% 40%; }
 html[data-map-product] #main .discovery-image img[src*="karaoke_music_board"] { --photo-tile-focal:50% 30%; }
 html[data-map-product] #main .discovery-image img[src*="sewing-basket"] { --photo-tile-focal:48% 38%; }
 html[data-map-product] #main .discovery-image img[src*="cooking_challenge_board"] { --photo-tile-focal:50% 30%; }
}
@media screen and (max-width:520px) {
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-grid,.discovery-grid) { grid-template-columns:minmax(0,1fr); gap:14px; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category,.discovery-card) { min-height:310px; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body,.discovery-body) { padding-inline:20px; }
}
@media screen and (forced-colors:active) {
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category,.discovery-card,.category-body,.discovery-body) { background:Canvas; color:CanvasText; border-color:ButtonText; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-media,.discovery-image) { display:none; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body,.discovery-body) { margin-top:0; padding-top:22px; }
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-body,.discovery-body)>*,
 html[data-map-product] body:is(.premium-production,.premium-editorial,.motivation-premium) #main :is(.category-number,.category-arrow,.discovery-description,.discovery-examples,.discovery-action) { color:CanvasText; }
}

