/* PCB101 shared responsive layer: mobile 0-767, tablet 768-1024, desktop 1025+. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }

@media (max-width: 1024px) {
  body { min-width: 0 !important; }
  body.pcb-site-header-mounted { padding-top: 76px; }
  .pcb-site-header { min-width: 0 !important; }
  .pcb-modal, [role="dialog"] { max-width: min(90vw, 760px); }

  .publish-layout,
  .job-management-layout,
  .confirm-layout,
  .headhunt-layout,
  .resume-card,
  .cc-shell { min-width: 0 !important; }

  .publish-layout,
  .job-management-layout,
  .confirm-layout,
  .headhunt-layout {
    height: auto !important;
    min-height: calc(100vh - 76px);
    overflow: visible !important;
  }

  .publish-layout { grid-template-columns: minmax(240px, 34%) minmax(0, 1fr) !important; }
  .publish-layout > .right-column { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .job-management-layout { grid-template-columns: minmax(0, 1fr) 280px !important; }
  .resume-management-container { width: calc(100% - 32px) !important; min-width: 0 !important; }
  .admin-shell { width: calc(100% - 32px) !important; }
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .import-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pcb-site-header .site-header__inner { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; min-width:0; height:100%; margin:0; }
  .pcb-site-header__nav, .site-header__nav, .pcb-site-header__account, .site-header__actions { display:none !important; }
  .pcb-mobile-nav-toggle { display:inline-grid !important; place-items:center; width:44px; height:44px; padding:0; border:1px solid #dce8e4; border-radius:10px; background:#fff; color:#153d38; gap:5px; }
  .pcb-mobile-nav-toggle span, .pcb-mobile-nav-toggle::before, .pcb-mobile-nav-toggle::after { width:21px; height:2px; border-radius:2px; background:currentColor; content:""; }
  .pcb-mobile-nav-toggle[aria-expanded="true"] span { opacity:0; }
  .pcb-mobile-nav-toggle[aria-expanded="true"]::before { transform:translateY(7px) rotate(45deg); }
  .pcb-mobile-nav-toggle[aria-expanded="true"]::after { transform:translateY(-7px) rotate(-45deg); }
  .pcb-mobile-nav { position:fixed; z-index:1099; top:76px; right:0; left:0; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); padding:14px 24px; border-top:1px solid #edf2f0; border-bottom:1px solid #dce8e4; background:#fff; box-shadow:0 12px 24px rgba(21,61,56,.1); }
  .pcb-mobile-nav[hidden] { display:none !important; }
  .pcb-mobile-nav a { display:flex; align-items:center; min-height:48px; padding:0 12px; border-radius:8px; color:#263d38; font-size:16px; text-decoration:none; }
  .pcb-mobile-nav a:hover, .pcb-mobile-nav a[aria-current="page"] { background:#f0f8f5; color:#078066; }
  .pcb-mobile-nav__account { justify-content:center; margin-top:8px; border-radius:10px!important; background:#078066; color:#fff!important; }
  .pcb-mobile-nav__account:hover { background:#075f4d!important; color:#fff!important; }
}

@media (max-width: 767px) {
  :root { --pcb-site-header-height: 68px; }
  body.pcb-site-header-mounted { padding-top: 68px; }
  main, section, article, aside, form, fieldset { min-width: 0; }
  input, select, textarea, button { max-width: 100%; }
  button, .pcb-button, input, select { min-height: 44px; }

  .pcb-site-header {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 10px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }
  .pcb-site-header .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
  }
  .pcb-site-header__brand { min-width: 0; gap: 10px; }
  .pcb-site-header__brand img, .site-header__logo { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .pcb-site-header__brand strong, .site-header__brand-title { overflow: hidden; font-size: 18px !important; text-overflow: ellipsis; white-space: nowrap; }
  .pcb-site-header__brand small, .site-header__brand-subtitle { display: none; }
  .pcb-site-header__nav, .site-header__nav, .pcb-site-header__account, .site-header__actions { display: none !important; }
  .pcb-mobile-nav-toggle { display: inline-grid !important; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dce8e4; border-radius: 10px; background: #fff; color: #153d38; }
  .pcb-mobile-nav-toggle span, .pcb-mobile-nav-toggle::before, .pcb-mobile-nav-toggle::after { width: 21px; height: 2px; border-radius: 2px; background: currentColor; content: ""; transition: transform .16s ease, opacity .16s ease; }
  .pcb-mobile-nav-toggle { gap: 5px; }
  .pcb-mobile-nav-toggle[aria-expanded="true"] span { opacity: 0; }
  .pcb-mobile-nav-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
  .pcb-mobile-nav-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
  .pcb-mobile-nav {
    position: fixed;
    z-index: 1099;
    top: 68px;
    right: 0;
    left: 0;
    display: grid !important;
    padding: 10px 16px 18px;
    border-top: 1px solid #edf2f0;
    border-bottom: 1px solid #dce8e4;
    background: #fff;
    box-shadow: 0 12px 24px rgba(21,61,56,.1);
  }
  .pcb-mobile-nav[hidden] { display: none !important; }
  .pcb-mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 8px; color: #263d38; font-size: 16px; text-decoration: none; }
  .pcb-mobile-nav a:hover, .pcb-mobile-nav a[aria-current="page"] { background: #f0f8f5; color: #078066; }
  .pcb-mobile-nav__account { justify-content: center; margin-top: 8px; border-radius: 10px !important; background: #078066; color: #fff !important; }
  .pcb-mobile-nav__account:hover { background: #075f4d !important; color: #fff !important; }
  .pcb-mobile-nav__priority { box-shadow:0 2px 8px rgba(7,128,102,.12); }
  .pcb-mobile-nav__logout { margin-top: 4px; color: #b94b4b !important; }
  .pcb-mobile-nav__logout:hover { background: #fff2f2 !important; color: #a63d3d !important; }

  /* Home */
  .hero, .hero-content { min-height: auto !important; }
  .hero-content { width: 100% !important; padding: 24px 16px 16px !important; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { max-width: 12em; font-size: clamp(27px, 7.2vw, 31px) !important; line-height: 1.2; white-space: normal !important; overflow-wrap: normal; text-wrap: balance; }
  .hero-points { font-size: 14px !important; line-height: 1.7; }
  .hero-metrics { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-top: 14px; }
  .hero-metrics span { grid-template-columns: 24px minmax(0, 1fr); column-gap: 5px; min-height: 32px; }
  .hero-metrics span:nth-child(4) { grid-column: 1 / -1; width: max-content; max-width: 100%; }
  .hero-metrics span:nth-child(4) strong { display: flex; gap: 8px; }
  .hero-metrics span:nth-child(4) em { font-size: 14px; white-space: nowrap; }
  .hero-metrics b { width: 24px; height: 24px; font-size: 11px; }
  .hero-metrics strong { display: grid; gap: 1px; align-items: center; }
  .hero-metrics em { font-size: 17px; line-height: 1.1; }
  .hero-metrics i { overflow: hidden; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .hero-portals { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 16px; transform: none; }
  .service-button-card { grid-template-columns: 36px minmax(0, 1fr); min-height: 62px; padding: 8px 10px !important; }
  .service-button-card .portal-icon { width: 32px; height: 32px; font-size: 14px; }
  .service-button-card strong { font-size: 18px !important; line-height: 1.15; white-space: nowrap; }
  .service-button-card small { margin-top: 2px; font-size: 12px !important; line-height: 1.15; white-space: nowrap; }
  .service-button-card .portal-arrow { display: none; }
  .home-job-search { min-height: 0; padding: 14px 16px 18px !important; }
  .home-job-search-form { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100%; margin: 0; padding: 14px !important; border-radius: 14px; }
  .home-job-search-field, .home-job-search-region, .home-job-search-submit { min-height: 46px !important; height: 46px; }
  .home-job-search-field { grid-template-columns: 28px minmax(0, 1fr); padding: 0 14px; }
  .home-job-search-region .region-picker, .home-job-search-region .region-trigger { height: 100%; }
  .home-hot-searches { gap: 8px 12px; font-size: 12px; }

  /* Experts */
  .expert-page { width: calc(100% - 24px) !important; padding-bottom: 24px; }
  .expert-search { padding: 14px !important; }
  .expert-search__main { grid-template-columns: 1fr !important; }
  .expert-search__filters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; overflow: visible !important; }
  .expert-search__filters[hidden] { display: none !important; }
  .expert-search__filters > [data-filter] { width: 100% !important; min-width: 0 !important; padding: 0 12px !important; }
  .expert-filter-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 240px; overflow-y: auto; }
  .expert-search__main > *, .expert-search__advanced, .expert-apply-trigger { width: 100% !important; grid-column: auto !important; }
  .expert-list, .expert-grid { grid-template-columns: 1fr !important; }
  .expert-page .expert-card { width: 100%; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 12px !important; padding: 16px !important; }
  .expert-page .expert-card__portrait { width: 72px !important; height: 72px !important; }
  .expert-page .expert-card__details, .expert-page .expert-card__action { grid-column: 1 / -1 !important; }
  .expert-page .expert-card__action { width: 100% !important; }

  /* Homepage expert marquee uses a different card structure. */
  #experts { padding: 44px 16px !important; }
  #experts .expert-marquee { width: 100%; margin-top: 20px; padding-bottom: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #experts .expert-marquee::-webkit-scrollbar { display: none; }
  #experts .expert-marquee::before, #experts .expert-marquee::after { display: none; }
  #experts .expert-marquee-track { gap: 12px; animation: none !important; transform: none !important; }
  #experts .expert-marquee-track > * { flex: 0 0 calc(100vw - 48px); width: calc(100vw - 48px); max-width: 382px; scroll-snap-align: start; }
  #experts .expert-profile-card { display: grid; grid-template-columns: 1fr !important; gap: 14px !important; min-height: 0; padding: 0 !important; }
  #experts .expert-top { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 18px 18px 0; }
  #experts .expert-photo { width: 64px; height: 64px; }
  #experts .expert-profile-card h3 { margin: 4px 0; font-size: 20px; }
  #experts .expert-meta { font-size: 13px; line-height: 1.45; }
  #experts .expert-summary { margin: 0 18px; font-size: 14px; line-height: 1.65; }
  #experts .expert-tags { gap: 6px; padding: 0 18px; }
  #experts .expert-tags span { padding: 6px 9px; font-size: 12px; }
  #experts .expert-foot { margin-top: 0; padding: 14px 18px; }

  /* Jobs: list-first mobile experience, no horizontal table. */
  .jobs-page { width: 100% !important; height: auto !important; min-height: 0; padding: 12px !important; overflow: visible !important; }
  .job-search { grid-template-columns: 1fr !important; gap: 10px !important; }
  .job-search > *, .sort-select { width: 100% !important; }
  .job-content { display: block !important; min-height: 0 !important; }
  .job-list-panel { padding: 14px 8px !important; }
  .list-title-row { align-items: stretch !important; flex-direction: column !important; gap: 10px; }
  .list-title { white-space: nowrap; }
  .job-list { max-height: none !important; overflow: visible !important; padding: 6px !important; }
  .job-card { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .job-card .job-side { grid-column: 2; min-width: 0; text-align: left; }
  .job-detail { margin-top: 12px; padding: 16px !important; }
  .detail-heading { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 12px !important; }
  .detail-heading > :last-child { grid-column: 1 / -1; text-align: left; }
  .detail-heading h1, .detail-salary { font-size: 24px !important; }
  .detail-actions { display: grid !important; grid-template-columns: 1fr !important; }

  /* Reports and reading */
  .report-shell { width: 100% !important; padding-right: 16px !important; padding-left: 16px !important; }
  .report-main { grid-template-columns: 1fr !important; margin-top: 14px !important; }
  .report-hero { padding: 20px 16px !important; }
  .report-search-area, .filter-search { width: 100% !important; }
  .filter-panel #filterPanel { width: calc(100% - 24px) !important; padding: 14px !important; }
  .filter-panel .filter-row { display: block !important; }
  .filter-panel .filter-label { width: auto !important; margin-bottom: 8px; padding: 0 !important; }
  .news-item { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 12px !important; }
  .date-card { width: 64px !important; height: 72px !important; }
  .news-title { font-size: 17px !important; }
  .news-summary { font-size: 14px !important; line-height: 1.7; }
  .report-card { grid-template-columns: 76px minmax(0, 1fr) !important; }
  .report-cover { width: 76px !important; height: 92px !important; }

  /* Candidate centre and enterprise workbenches */
  .cc-body { overflow: auto !important; }
  .cc-body .cc-shell { display: block !important; width: 100% !important; height: auto !important; padding: 12px !important; overflow: visible !important; }
  .cc-left, .cc-main, .cc-right { width: 100% !important; max-height: none !important; margin-bottom: 12px; overflow: visible !important; }
  .publish-layout, .job-management-layout, .confirm-layout, .headhunt-layout, .resume-card { display: block !important; width: 100% !important; }
  .publish-layout { padding: 12px !important; }
  .publish-layout > *, .job-management-layout > *, .confirm-layout > *, .headhunt-layout > * { width: 100% !important; margin: 0 0 12px !important; }
  .publish-layout > .right-column { display: block; }
  .panel { padding: 16px !important; }
  .resume-management-container { width: calc(100% - 24px) !important; margin: 12px auto 24px !important; }
  .resume-search-row, .resume-filter-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .resume-card { overflow: visible !important; }
  .candidate-panel { padding: 18px 16px !important; }
  .candidate-avatar { position: static !important; width: 72px !important; height: 72px !important; float: left; margin: 0 12px 10px 0; }
  .candidate-details { margin: 0 !important; }
  .candidate-details h2 { display: block !important; font-size: 18px !important; }
  .candidate-details p { clear: both; padding-left: 0 !important; font-size: 14px !important; line-height: 1.7 !important; }
  .candidate-details p span { width: auto !important; }
  .candidate-footer, .candidate-profile-tags { position: static !important; margin-top: 12px; padding: 0 !important; }
  .followup-panel { min-height: 0 !important; padding: 16px !important; }
  .resume-actions { position: static !important; display: grid !important; grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .resume-actions button { width: 100% !important; height: 52px !important; display: flex !important; gap: 8px; }
  .find-resume-page { width: calc(100% - 24px) !important; margin: 12px auto 24px !important; }
  .find-resume-card { grid-template-columns: 32px minmax(0, 1fr) !important; height: auto !important; min-height: 0 !important; padding: 14px 0; }
  .find-resume-person { padding-right: 12px !important; }
  .find-resume-avatar { flex-basis: 52px; width: 52px; height: 52px; }
  .find-resume-avatar img { width: 52px; height: 52px; }
  .find-resume-action { grid-column: 2; justify-content: flex-start; padding: 10px 12px 0 0 !important; }
  .find-resume-action button { width: 100% !important; }
  .find-resume-meta, .find-resume-target { white-space: normal !important; }
  .admin-shell { width: calc(100% - 24px) !important; padding: 14px 0 24px !important; }
  .flow-steps { grid-template-columns: 1fr !important; gap: 10px !important; }
  .flow-step { min-height: 0 !important; padding: 16px !important; }
  .import-grid, .preview-grid, .confirm-grid { grid-template-columns: 1fr !important; }
  .upload-panel, .company-panel, .preview-panel { padding: 16px !important; }

  /* Tables become readable cards/scroll regions without page overflow. */
  .table-wrap, .job-management-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .job-management-table { min-width: 720px; }
  .job-management-filters { display: grid !important; grid-template-columns: 1fr !important; }
  .job-management-filters > * { width: 100% !important; }
  .job-management-footer { align-items: stretch !important; flex-direction: column !important; }

  /* All dialogs and drawers. */
  .pcb-modal-overlay, .auth-modal, .service-modal, .modal-backdrop, [class*="backdrop"] { padding: 12px !important; }
  .pcb-modal, .auth-card, .executive-card, .enterprise-service-dialog, .lead-preview-dialog,
  .booking-dialog, .resume-modal, .resume-invite-modal, .invite-preview-modal,
  .company-modal, .company-edit-modal, .job-edit-modal, .job-create-modal,
  .ai-config-modal, .report-dialog, .favorites-dialog, .message-detail__dialog,
  .header-notifications__dialog, .confirm-modal {
    box-sizing: border-box !important;
    left: auto !important;
    width: min(90vw, 680px) !important;
    max-width: 90vw !important;
    max-height: 88vh !important;
    margin: auto !important;
    padding: 20px 16px !important;
    transform: none !important;
    overflow-y: auto !important;
  }
  .auth-card form, .enterprise-service-modal-grid, .company-form-top, .company-inline-fields,
  .company-two-fields, .modal-field-grid, .booking-methods__grid, .booking-fields__grid,
  .invite-form__row, .invite-time-fields { grid-template-columns: 1fr !important; }
  .modal-actions, .auth-actions, .company-edit-actions, .job-edit-actions, .confirm-actions,
  .booking-dialog__footer, .invite-actions > div { display: grid !important; grid-template-columns: 1fr !important; }
  .modal-actions button, .auth-actions button, .company-edit-actions button, .job-edit-actions button,
  .confirm-actions button, .booking-dialog__footer button, .invite-actions button { width: 100% !important; min-height: 46px !important; }
}