/**
 * 保姆家政频道样式 - /{lang}/nanny 与 /{lang}/nanny/{slug}
 *
 * 设计规范以 /{lang}/jobs 为准（jobs.css）：Hero 区块、筛选栏、空状态、分页、
 * partner 区块、详情页 section 与列表项圆点，全部与招聘频道保持一致；
 * 差异只有一处 —— 卡片左侧多了服务人员头像（见下方注释）。
 *
 * ⚠️ Hero / orb / 筛选栏 / 空状态 / 分页 / partner 区块这些「合作频道公共外壳」
 * 在 property.css 与 jobs.css 里各有一份重复实现，本文件是第三份。
 * 这是沿用既有架构（不改动已上线频道），不是漏抽象。
 *
 * @project  BlazeHibachi - Premium Mobile Hibachi Catering
 * @company  YiShangQi (易商企)
 * @copyright Copyright (c) 2026 YiShangQi. All rights reserved.
 */

/* ===== Base ===== */
.page-partner .site-main {
    flex: 1 0 auto;
}
.page-partner .site-footer {
    flex-shrink: 0;
}

/* ===== Hero (与 jobs.css 完全一致) ===== */
.hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFBF5;
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-bg, url('/assets/images/hero-bg.jpg')) center/cover no-repeat;
    opacity: var(--hero-opacity, 0.1);
    z-index: 0;
}
.hero-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-aurora .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
}
.orb-1 { width:500px; height:500px; background: radial-gradient(circle, rgba(251,146,60,0.5) 0%, transparent 70%); top:-10%; right:10%; animation: nannyOrb1 12s ease-in-out infinite; }
.orb-2 { width:600px; height:600px; background: radial-gradient(circle, rgba(234,88,12,0.35) 0%, transparent 70%); bottom:-15%; left:5%; animation: nannyOrb2 15s ease-in-out infinite; }
.orb-3 { width:400px; height:400px; background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, transparent 70%); top:30%; left:40%; animation: nannyOrb3 10s ease-in-out infinite; }
.orb-4 { width:350px; height:350px; background: radial-gradient(circle, rgba(254,215,170,0.5) 0%, transparent 70%); top:10%; left:15%; animation: nannyOrb4 18s ease-in-out infinite; }

/* 关键帧名加 nanny 前缀：三个频道 CSS 同时可能被同一页加载（例如详情页也引 partner.css），
   同名 @keyframes 会相互覆盖，前缀可避免这种跨频道的隐式耦合 */
@keyframes nannyOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,20px) scale(1.1)} }
@keyframes nannyOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-15px) scale(1.05)} }
@keyframes nannyOrb3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,-25px) scale(1.15)} }
@keyframes nannyOrb4 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(25px,30px) scale(1.12)} 80%{transform:translate(-15px,-20px) scale(0.95)} }

.hero-content {
    position: relative;
    z-index: 1;
    padding: calc(var(--header-height) + var(--space-6)) 0 var(--space-6);
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}
.hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-4);
    line-height: var(--lh-heading);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-primary) 0%, #F59E0B 50%, var(--color-primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    color: var(--gray-600);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    margin-bottom: var(--space-6);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.hero-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Filter Bar ===== */
.filter-bar {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.filter-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
}
.filter-bar .form-select {
    width: auto;
    min-width: 140px;
}

/* ===== Loading / Empty ===== */
.loading-state, .empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--gray-400);
}
.loading-state i, .empty-state i {
    font-size: var(--fs-xxl);
    margin-bottom: var(--space-3);
    display: block;
    opacity: 0.5;
}
.loading-state p, .empty-state p {
    font-size: var(--fs-sm);
    margin: 0;
}

/* ===== 服务人员卡片 =====
   结构对齐 .job-card（横向行卡片：信息在左、徽标与报价在右），
   唯一差异是左侧多一个圆形头像 —— 家政目录需要看人，岗位列表不需要。 */
.nanny-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-3);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
}
.nanny-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
}
.nanny-card-photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: var(--fs-lg);
}
.nanny-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nanny-card-info { flex: 1; min-width: 0; }
.nanny-card-info h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin: 0 0 var(--space-2);
}
.nanny-card-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    flex-wrap: wrap;
}
.nanny-card-meta span { display: flex; align-items: center; gap: var(--space-1); }
.nanny-card-meta i { color: var(--color-primary); font-size: var(--fs-xs); }
.nanny-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}
.nanny-card-type {
    padding: var(--space-1) var(--space-3);
    background: var(--amber-50);
    color: var(--color-primary);
    border-radius: var(--border-radius);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.nanny-card-rate {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--gray-700);
    white-space: nowrap;
}
.nanny-card-rate em {
    font-style: normal;
    font-weight: var(--fw-regular);
    color: var(--color-text-light);
}

/* 可预约状态：沿用 .job-card-meta 的「图标 + 文字」范式，仅换颜色 */
.nanny-avail-available i { color: #1F7A3D; }
.nanny-avail-busy i      { color: #C77700; }
.nanny-avail-placed i    { color: var(--gray-400); }
.nanny-avail-placed      { color: var(--gray-400); }

/* ===== Pagination =====
   与 jobs.css 视觉一致，但本页是服务端渲染，元素是 <a> 而不是 <button>，
   所以必须把 button 的规则落到 .page-link 上，否则分页会退化成无样式一串链接 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}
.pagination .page-link,
.pagination .page-info {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--white);
    font-size: var(--fs-sm);
    color: var(--gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.pagination .page-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.pagination .page-link.active {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
}
.pagination .page-info {
    border: none;
    background: transparent;
    color: var(--gray-500);
}

/* ===== 详情页（对齐 .job-detail-*） ===== */
.nanny-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
.nanny-detail-photo {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 3rem;
}
.nanny-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nanny-detail-headline { flex: 1; min-width: 0; }
.nanny-detail-headline h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--gray-900);
    margin: 0 0 var(--space-3);
}
.nanny-detail-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    flex-wrap: wrap;
}
.nanny-detail-meta span { display: flex; align-items: center; gap: var(--space-1); }
.nanny-detail-meta i { color: var(--color-primary); }

.nanny-detail-section { margin-bottom: var(--space-5); }
.nanny-detail-section h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--gray-800);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.nanny-detail-section p {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--gray-600);
}
.nanny-detail-section ul {
    list-style: none;
    padding: 0;
}
.nanny-detail-section li {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    line-height: var(--lh-base);
    padding: var(--space-2) 0;
    padding-left: var(--space-4);
    position: relative;
}
.nanny-detail-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translateY(-50%);
}
.nanny-apply-btn { margin-top: var(--space-5); }

/* ===== 家庭需求表单 ===== */
.nanny-inquiry-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
}
.nanny-inquiry-head { margin-bottom: var(--space-5); }
.nanny-inquiry-head h2 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--gray-800);
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.nanny-inquiry-head p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--lh-base);
}
.nanny-inquiry-for { margin-top: var(--space-2) !important; }
.nanny-inquiry-for i { color: var(--color-primary); margin-right: var(--space-1); }

.nanny-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.nanny-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}
.nanny-form-row .nanny-form-group { margin-bottom: 0; }
.nanny-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.nanny-form-msg {
    font-size: var(--fs-sm);
    color: var(--gray-500);
}
.nanny-form-msg.is-success { color: #1F7A3D; }
.nanny-form-msg.is-error { color: #B42318; }

/* ===== Partner Sections (与 jobs.css 一致) ===== */
.partner-intro {
    background: var(--color-bg);
    padding: var(--space-7) 0;
}
.partner-intro-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    text-align: center;
}
.partner-promo-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: linear-gradient(135deg, var(--amber-50), var(--white));
    border: 1px solid var(--amber-200);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
}
.partner-promo-img {
    flex: 0 0 180px;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.partner-promo-img img { width: 100%; display: block; }
.partner-promo-text { flex: 1; }
.partner-promo-text h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}
.partner-promo-text p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
    margin: 0;
}
.partner-promo-action { flex-shrink: 0; }

/* ===== 服务商评价 ===== */
.nanny-rating-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.nanny-rating-avg {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    line-height: 1;
}
.nanny-rating-stars i,
.nanny-review-stars i {
    color: #F59E0B;
    font-size: var(--fs-sm);
}
.nanny-rating-count {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}
.nanny-review-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nanny-review-list li {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
}
.nanny-review-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.nanny-review-author {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-800);
}
.nanny-review-date {
    font-size: var(--fs-xs);
    color: var(--gray-500);
    margin-left: auto;
}
.nanny-review-content {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    line-height: var(--lh-base);
    margin: 0;
}
.nanny-review-hint {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin: 0 0 var(--space-4);
}
.nanny-review-field { margin-bottom: var(--space-4); }
.nanny-review-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}
.nanny-star-picker { display: inline-flex; gap: 2px; }
.nanny-star-option {
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--gray-400);
    line-height: 1;
    transition: color var(--transition-fast);
}
/* 真正的 radio 藏起来但仍可聚焦（键盘可用） */
.nanny-star-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.nanny-star-option.is-on,
.nanny-star-option:hover { color: #F59E0B; }
.nanny-review-ok {
    font-size: var(--fs-sm);
    color: #1F7A3D;
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .nanny-card { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .nanny-card-right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
    .nanny-card-meta { flex-wrap: wrap; }

    .nanny-detail-header { flex-direction: column; align-items: flex-start; }
    .nanny-detail-photo { width: 120px; height: 120px; flex: 0 0 auto; }
    .nanny-detail-meta { gap: var(--space-2); }

    .nanny-form-row { grid-template-columns: 1fr; }
    .nanny-inquiry-card { padding: var(--space-4); }

    .filter-bar { flex-direction: column; }
    .filter-bar .form-select { width: 100%; }
    .filter-item { width: 100%; }

    .partner-promo-card { flex-direction: column; text-align: center; }
    .partner-promo-img { flex: 0 0 auto; max-width: 100%; }
}