/* honor.css — Honor MyOga (/honor, /h/browse) on top of polls-hub.css (.ph): the hero's carousel (an occasion's
   picture with the play button and its caption), the talent cards, the occasions, the categories' chips. Scoped .hh. */

/* ---- the hero's carousel ---- */
.hh-car { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.hh-screen { position: relative; aspect-ratio: 4 / 3.3; border-radius: 22px; overflow: hidden; background: var(--navy); box-shadow: 0 24px 50px rgba(11,44,87,.22); }
.hh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hh-slide.on { opacity: 1; pointer-events: auto; }
.hh-play { position: absolute; top: 18px; right: 18px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 18px; box-shadow: 0 8px 20px rgba(230,51,41,.45); padding-left: 3px; }
.hh-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; }
.hh-cap h2 { margin: 0 0 6px; font: 800 22px/1.25 'Poppins', system-ui, sans-serif; color: #fff; }
.hh-cap p { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: rgba(255,255,255,.88); }
@media (prefers-reduced-motion: reduce) { .hh-slide { transition: none; } .hh-obj, .hh-occ-obj { animation: none !important; } }

/* the 3 steps under the hero's title */
.hh-how { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.hh-how span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--section2); border: 1.5px solid var(--border); font-weight: 800; font-size: 14px; color: var(--navy); }
.hh-how b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font: 800 13px 'Poppins', sans-serif; }

/* ---- a talent card ---- */
.hh-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--border); border-radius: 18px; overflow: hidden; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.hh-card:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,44,87,.1); }
.hh-card[hidden] { display: none; }
.hh-card-photo { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--section); }
.hh-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-card-price { position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; background: #E7F7EE; border: 1.5px solid #BFE8CF; color: #1E7A45; font: 800 13px 'Poppins', sans-serif; box-shadow: 0 4px 12px rgba(11,44,87,.18); }
.hh-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.hh-card-name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 800 15.5px 'Poppins', system-ui, sans-serif; color: var(--navy) !important; }
.hh-card-name > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-card-cert { flex: none; width: 15px; height: 15px; }
.hh-card-role { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hh-card-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--navy); }
.hh-star { width: 18px; height: 18px; padding: 2px; border-radius: 2px; background: #00B67A; }  /* the profile header's green star: a white star on #00B67A */
.hh-card-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.hh-card-rate em { font-style: normal; color: var(--muted); font-weight: 700; }
.hh-card-book { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 11px; background: var(--red); color: #fff !important; font: 700 14px 'Poppins', system-ui, sans-serif; box-shadow: 0 6px 14px rgba(230,51,41,.25); }
.hh-card-book:hover { background: var(--redD); }
.hh-card-body .hh-card-book { margin-top: 8px; }

/* Popular Talents: 5 per view in the carousel */
.hh-rail .hh-card { flex: 0 0 calc((100% - 4 * 18px) / 5); min-width: 210px; scroll-snap-align: start; }

/* ---- the occasions ---- */
.hh-occ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ---- /h/browse ---- */
.hb-title { margin: 10px 0 0; font: 800 30px 'Poppins', system-ui, sans-serif; color: var(--navy); }
.hb-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hb-chips-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.hb-chips-wrap > .mo-arr { flex: none; width: 34px; height: 34px; display: none; }
.hb-chips-wrap.more-l > .mo-arr.prev, .hb-chips-wrap.more-r > .mo-arr.next { display: inline-flex; }
.hb-chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px; }
.hb-chips::-webkit-scrollbar { display: none; }
.hb-chip { flex: none; text-decoration: none !important; border: 1.5px solid var(--border); background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 16px; font: 800 13.5px 'Nunito', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.hb-chip:hover { border-color: var(--cyan); }
.hb-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.hb-sortbox { position: relative; flex: none; }
.hb-sortbtn { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; color: var(--navy); display: grid; place-items: center; font-size: 16px; cursor: pointer; }
.hb-sortbtn:hover, .hb-sortbtn[aria-expanded="true"] { border-color: var(--cyan); background: var(--section2); }
.hb-sortmenu { position: absolute; right: 0; top: 50px; z-index: 30; min-width: 220px; padding: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; box-shadow: 0 16px 36px rgba(11,44,87,.16); }
.hb-sortmenu[hidden] { display: none; }
.hb-sorttitle { padding: 6px 10px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hb-sortmenu a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 9px; font-weight: 800; font-size: 14px; color: var(--navy) !important; text-decoration: none !important; }
.hb-sortmenu a:hover { background: var(--section2); }
.hb-sortmenu a.on { color: var(--red) !important; }
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hb-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }


@media (max-width: 991px) { .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hh-occ { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hb-title { font-size: 24px; }
    .hh-cap h2 { font-size: 18px; }
    .hh-rail .hh-card { flex-basis: 62%; }
    .hh-card-book { height: 36px; font-size: 13px; }
}

/* the carousel's ‹ • • • › (as on /super-chat) */
.hh .sc-car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hh .sc-car-nav .mo-arr { width: 38px; height: 38px; display: inline-flex; }
.hh .sc-dots { display: flex; gap: 7px; }
.hh .sc-dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; background: var(--border); cursor: pointer; transition: width .2s ease, background .2s ease; }
.hh .sc-dots button.on { width: 26px; background: var(--red); }

/* "No talent found" spans the whole grid */
.hb-grid > :not(.hh-card) { grid-column: 1 / -1; }

/* the occasions' colours (as cameo.com: a gradient card and one big object — crisp at any size, no picture) */
.g-bday { background: linear-gradient(135deg, #FF5E7E 0%, #E63329 100%); }
.g-wed  { background: linear-gradient(135deg, #8E5BFF 0%, #5B2BB5 100%); }
.g-grad { background: linear-gradient(135deg, #2BB3E3 0%, #1F5FA0 100%); }
.g-love { background: linear-gradient(135deg, #FF7AA8 0%, #C2185B 100%); }
.g-pep  { background: linear-gradient(135deg, #FFB547 0%, #E0731B 100%); }
.g-biz  { background: linear-gradient(135deg, #123B70 0%, #0B2C57 100%); }
.hh-slide::before { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.12); }
.hh-obj { position: absolute; right: 26px; top: 50px; font-size: 128px; line-height: 1; transform: rotate(-8deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); animation: hhFloat 4s ease-in-out infinite; }
@keyframes hhFloat { 50% { transform: rotate(-4deg) translateY(-10px); } }

.hh-occ-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 190px; padding: 22px 22px 18px; border-radius: 20px; overflow: hidden; color: #fff !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.hh-occ-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(11,44,87,.2); }
.hh-occ-card::before { content: ''; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.14); }
.hh-occ-k { position: relative; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.88); }
.hh-occ-t { position: relative; max-width: 62%; font: 800 22px/1.2 'Poppins', system-ui, sans-serif; color: #fff; }
.hh-occ-obj { position: absolute; right: 16px; bottom: 6px; font-size: 84px; line-height: 1; transform: rotate(-10deg); filter: drop-shadow(0 12px 16px rgba(0,0,0,.28)); transition: transform .3s ease; }
.hh-occ-card:hover .hh-occ-obj { transform: rotate(0) scale(1.08); }
@media (max-width: 991px) { .hh-occ { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hh-occ { grid-template-columns: 1fr; } .hh-obj { font-size: 96px; top: 40px; } .hh-occ-card { min-height: 150px; } .hh-occ-obj { font-size: 70px; } }