/*
 * MOA CAST desktop layout
 * Mobile remains the source design. Every rule is desktop-only so existing
 * mobile interactions, Supabase data bindings, and touch behaviour stay intact.
 */
@media (min-width: 1024px) {
  html {
    scroll-padding-top: 94px;
  }

  body {
    background: #deded9;
  }

  .app {
    width: min(calc(100% - 48px), 1440px);
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 48px;
    overflow: visible;
    background: var(--paper);
    border-left: 1px solid rgba(16, 17, 20, .05);
    border-right: 1px solid rgba(16, 17, 20, .05);
    box-shadow: 0 24px 80px rgba(20, 21, 24, .08);
  }

  .header {
    height: 82px;
    padding: 0 52px;
  }

  .header .brand {
    position: relative;
    z-index: 44;
  }

  .header .brand b {
    font-size: 24px;
  }

  .header .brand span {
    font-size: 9px;
    letter-spacing: 2.3px;
  }

  .header-actions {
    position: relative;
    z-index: 44;
  }

  .app > main {
    padding: 0 52px 64px;
  }

  /* The mobile bottom navigation becomes the desktop global navigation. */
  .bottom {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 50%;
    width: min(48vw, 610px);
    height: 82px;
    padding: 0;
    transform: translateX(-50%);
    background: transparent;
    border: 0;
    backdrop-filter: none;
    z-index: 43;
  }

  .bottom .nav,
  .bottom > a {
    min-width: 0;
    height: 82px;
    padding: 0 12px;
    flex-direction: row;
    gap: 8px;
    border-radius: 0;
    font-size: 12px;
    color: #666862;
  }

  .bottom .nav:hover,
  .bottom > a:hover {
    color: #111318;
    background: rgba(54, 89, 232, .05);
  }

  .bottom .nav.active,
  .bottom > a.active {
    color: #111318;
    box-shadow: inset 0 -3px 0 var(--blue);
  }

  .bottom .nav svg,
  .bottom > a svg {
    width: 19px;
    height: 19px;
  }

  .bottom .plus {
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(54, 89, 232, .20);
  }

  .bottom .plus svg {
    width: 19px;
    height: 19px;
  }

  .section {
    margin: 46px 0;
  }

  .title {
    font-size: 27px;
  }

  .sub {
    font-size: 12px;
  }

  /* Home */
  #homeView .hero {
    margin: 26px 0 22px;
    border-radius: 30px;
  }

  .app > main > .hero {
    height: 480px;
    border-radius: 28px;
  }

  .app > main > .hero .hero-content {
    left: 44px;
    right: 44px;
    bottom: 40px;
    max-width: 640px;
  }

  .app > main > .hero h1 {
    font-size: 42px;
  }

  .app > main > .role-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
  }

  .app > main > .talent-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .app > main > .talent-list .pro-cover {
    height: 275px;
  }

  #homeView .slide {
    height: 560px;
  }

  #homeView .slide-content {
    left: 58px;
    right: 58px;
    bottom: 54px;
    max-width: 660px;
  }

  #homeView .slide h1,
  #homeView .slide h2[data-seo-heading] {
    font-size: 50px;
    line-height: 1.08;
    letter-spacing: -2.2px;
  }

  #homeView .slide p {
    max-width: 540px;
    font-size: 15px;
    line-height: 1.7;
  }

  #homeView .slide-count {
    top: 27px;
    right: 30px;
  }

  #homeView .arrows {
    right: 28px;
    bottom: 28px;
  }

  #homeView .trust > div {
    padding: 20px 14px;
  }

  #homeView .trust strong {
    font-size: 15px;
  }

  #homeView .trust span {
    font-size: 11px;
  }

  .search {
    min-height: 58px;
    padding: 16px 18px;
  }

  .grid,
  .project-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .category {
    height: 188px;
    border-radius: 22px;
  }

  .category div {
    left: 20px;
    bottom: 19px;
  }

  .category strong {
    font-size: 21px;
  }

  .category span {
    margin-top: 7px;
    font-size: 11px;
  }

  .project {
    padding: 26px;
    border-radius: 24px;
  }

  .project h3 {
    max-width: 720px;
    font-size: 27px;
  }

  .experts,
  .reco-rail,
  .format-row {
    gap: 14px;
  }

  .expert,
  .creator-card,
  .talent-card,
  .fashion-pro-card {
    min-width: 250px;
  }

  .expert-img,
  .creator-photo {
    height: 275px;
  }

  .how {
    gap: 12px;
  }

  .step {
    min-height: 170px;
    padding: 22px 18px;
  }

  .step b {
    font-size: 15px;
  }

  .step p {
    font-size: 11px;
  }

  .type-grid,
  .content-type-grid,
  .event-type-grid,
  .wedding-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .type-card,
  .content-type,
  .event-type,
  .wedding-type {
    height: 220px;
    border-radius: 23px;
  }

  .bundle-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Shared list and directory pages */
  .intro {
    padding: 48px 2px 25px;
  }

  .intro h1,
  .talent-list-head h1,
  .talent-list-head h2[data-seo-heading] {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  .intro p,
  .talent-list-head p {
    max-width: 620px;
    font-size: 14px;
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #expertLanding .field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .field-card {
    height: 195px;
    border-radius: 22px;
  }

  .popular-role-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .role-group-body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .talent-list {
    gap: 14px;
  }

  .talent-list.model-grid,
  .talent-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .talent-list.model-grid .talent-card,
  .talent-grid .talent-card {
    min-width: 0;
  }

  .talent-list:not(.model-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-purpose-grid,
  .model-filter-options.model-purpose-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .model-purpose,
  .model-purpose-option {
    height: 125px;
  }

  .model-register-banner {
    min-height: 280px;
  }

  .model-register-copy {
    padding: 42px;
    max-width: 52%;
  }

  .model-register-copy h3 {
    font-size: 32px;
  }

  /* Model profile remains directly below the selected row on desktop. */
  .model-profile-view {
    grid-column: 1 / -1;
    margin: 18px 0 28px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 26px;
  }

  .model-profile-view.show {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    gap: 28px;
    align-items: start;
  }

  .model-profile-hero {
    height: 660px;
    margin: 0;
    border-radius: 22px;
    position: sticky;
    top: 104px;
  }

  .model-profile-panel,
  .model-profile-section,
  .model-profile-actions,
  .other-models {
    grid-column: 2;
  }

  .model-profile-portfolio {
    grid-template-columns: 1fr;
  }

  .model-profile-shot {
    height: auto;
    min-height: 520px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ecebe6;
  }

  .profile-view {
    max-width: 1120px;
    margin: 0 auto;
  }

  .profile-hero {
    height: 650px;
    margin: 22px 0 0;
    border-radius: 28px;
  }

  .profile-panel,
  .profile-section,
  .profile-reco,
  .project-start {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-shot {
    height: auto;
    min-height: 620px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ecebe6;
  }

  .profile-actions {
    bottom: 24px;
    max-width: 680px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  /* Project lists, project details and registration */
  .project-list-view {
    padding-bottom: 64px;
  }

  .project-list-hero {
    min-height: 138px;
    height: auto;
    margin: 26px 0 20px;
    border-radius: 22px;
    padding: 28px 34px 26px 92px;
  }

  .project-list-copy {
    left: auto;
    bottom: auto;
    max-width: 620px;
  }

  .project-list-copy h1,
  .project-list-copy h2[data-seo-heading] {
    font-size: 36px;
  }

  .project-feature-wrap,
  .project-category-tabs,
  .occasion-sub-tabs,
  .project-board,
  .project-preview {
    margin-left: 0;
    margin-right: 0;
  }

  .project-feature-wrap {
    margin-top: -70px;
    padding: 0 26px;
  }

  .project-feature-card {
    flex-basis: calc((100% - 20px) / 3);
    height: 250px;
  }

  .project-board {
    border-radius: 24px;
  }

  .project-board-item {
    padding: 22px 24px;
  }

  .project-board-item h3 {
    font-size: 18px;
  }

  .project-preview {
    padding: 28px;
  }

  .project-detail-view {
    padding-bottom: 110px;
  }

  .project-cover {
    height: 500px;
    margin: 24px 0 0;
    border-radius: 28px;
    overflow: hidden;
  }

  .project-cover-copy {
    left: 48px;
    right: 48px;
    bottom: 42px;
  }

  .project-cover h1,
  .project-cover h2[data-seo-heading] {
    max-width: 820px;
    font-size: 44px;
  }

  .project-detail-body {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
  }

  .project-summary-card {
    padding: 24px;
  }

  .schedule-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .role-apply-list,
  .related-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-open-list-section {
    margin-top: 42px;
    padding: 38px;
    border-radius: 26px;
  }

  .project-fixed-actions {
    left: 50%;
    bottom: 24px;
    width: min(680px, calc(100% - 64px));
    padding: 10px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 19px;
    box-shadow: 0 18px 45px rgba(20, 21, 24, .15);
  }

  .apply-sheet {
    align-items: center;
    padding: 28px;
  }

  .apply-panel {
    width: min(100%, 620px);
    max-height: 86vh;
    padding: 24px 26px 28px;
    border-radius: 26px;
  }

  .project-register-view {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 0 70px;
  }

  .register-hero {
    padding: 40px 38px;
  }

  .register-hero h1,
  .register-hero h2[data-seo-heading] {
    font-size: 38px;
  }

  .project-form .form-section {
    padding: 28px 30px;
  }

  .project-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .register-team-card {
    flex-basis: calc((100% - 22px) / 3);
    height: 240px;
  }

  .partner-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* My page */
  .my-page {
    max-width: 1120px;
    min-height: auto;
    margin: 0 auto;
    padding: 36px 0 72px;
  }

  .my-top h1,
  .my-top h2[data-seo-heading] {
    font-size: 34px;
  }

  .my-identity {
    padding: 28px;
  }

  .my-avatar {
    width: 72px;
    height: 72px;
  }

  .my-identity h2 {
    font-size: 24px;
  }

  .my-activity-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .my-activity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-form-section {
    padding: 28px;
  }

  .my-form-section h3 {
    font-size: 20px;
  }

  .my-field input,
  .my-field select,
  .my-field textarea {
    padding: 14px;
    font-size: 12px;
  }

  .multi-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Campaign detail embedded in the main application */
  .campaign-cover {
    height: 500px;
    margin: 24px 0 0;
    border-radius: 28px;
    overflow: hidden;
  }

  .campaign-cover-copy {
    left: 48px;
    right: 48px;
    bottom: 42px;
  }

  .campaign-cover-copy h1,
  .campaign-cover-copy h2[data-seo-heading] {
    font-size: 44px;
  }

  .campaign-body {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
  }

  .campaign-summary {
    padding: 24px;
  }

  .campaign-specs,
  .other-campaign-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .other-campaign {
    grid-template-columns: 130px 1fr;
  }

  /* Production */
  .production-page {
    padding: 20px 0 40px;
  }

  .production-inline-hero,
  .content-hero,
  .event-hero,
  .wedding-hero {
    height: 480px;
    border-radius: 28px;
  }

  .production-inline-hero {
    padding: 46px;
  }

  .production-inline-hero h1,
  .production-inline-hero h2[data-seo-heading] {
    font-size: 42px;
  }

  .production-role-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
  }

  .production-role {
    min-height: 125px;
    padding: 17px 14px;
  }

  .production-pro-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .production-pro-photo {
    height: 270px;
  }

  .production-team-box {
    padding: 34px 32px;
  }

  /* Modals and drawers */
  .account-drawer {
    width: 420px;
  }

  .auth-modal {
    width: min(100%, 540px);
  }

  .registration-modal {
    width: min(100%, 760px);
    max-height: 90vh;
    border-radius: 26px;
  }

  .registration-hero {
    padding: 32px 34px;
  }

  .registration-modal .form-wrap {
    padding: 0 10px 28px;
  }

  .registration-modal .form-section {
    padding: 26px 24px;
  }

  .sheet {
    width: min(100%, 650px);
    border-radius: 25px;
  }

  .toast {
    bottom: 32px;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .header {
    padding-left: 30px;
    padding-right: 30px;
  }

  .header .brand span {
    display: none;
  }

  .bottom {
    width: 540px;
  }

  .bottom .nav,
  .bottom > a {
    padding: 0 8px;
    font-size: 11px;
  }

  .app > main {
    padding-left: 30px;
    padding-right: 30px;
  }
}