/* Page-level patterns built on top of the shared design system. */

.auth-shell {
  width: min(calc(100% - 2rem), 32rem);
  margin: var(--space-12) auto;
}

.auth-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 2.35rem);
  border-top: 5px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.auth-card::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  right: -5rem;
  top: -5rem;
  border: 1.1rem solid color-mix(in srgb, var(--color-primary) 6%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

.marketplace-mode-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.marketplace-mode-choice {
  min-height: 7rem;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.marketplace-mode-choice:hover,
.marketplace-mode-choice.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.marketplace-mode-choice strong,
.marketplace-mode-choice span {
  display: block;
}

.marketplace-mode-choice span {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.listing-grid,
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
}

.listing-card {
  display: flex;
  min-height: 14rem;
  flex-direction: column;
  gap: var(--space-3);
  border-top-color: var(--color-primary);
}

.listing-card:hover {
  border-top-color: var(--color-accent);
}

.listing-card__actions { margin-top: auto; }

/* Art Scout creative project discovery */

.project-card {
  min-height: 23rem;
  padding: var(--space-5);
  gap: var(--space-4);
  border-top: 0;
  border-left: 4px solid var(--color-primary);
}

.project-card:hover {
  border-top-color: var(--color-border);
  border-left-color: var(--color-accent);
}

.project-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto);
  gap: var(--space-5);
  align-items: start;
}

.project-card__heading {
  min-width: 0;
}

.project-card__heading .eyebrow {
  margin-bottom: var(--space-2);
}

.project-card__heading h2 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.project-card__client {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.project-card__budget {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  text-align: right;
}

.project-card__label {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-card__budget strong {
  font-size: 1rem;
}

.project-card__badges {
  min-height: 1.8rem;
}

.project-card__description {
  margin: 0;
  -webkit-line-clamp: 3;
}

.project-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.project-card__facts > div {
  min-width: 0;
}

.project-card__facts dt {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-card__facts dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.project-card__actions {
  padding-top: var(--space-2);
}

@media (max-width: 620px) {
  .project-card__header {
    grid-template-columns: 1fr;
  }

  .project-card__budget {
    text-align: left;
  }

  .project-card__facts {
    grid-template-columns: 1fr;
  }
}

.messages-layout {
  display: grid;
  min-height: 36rem;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.conversations-panel { border-right: 1px solid var(--color-border); }

.conversation-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.conversation-item.is-active {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
}

.message-bubble {
  max-width: min(75%, 42rem);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.message-bubble--sent {
  margin-left: auto;
  background: var(--color-primary);
  color: white;
}

@media (max-width: 760px) {
  .marketplace-mode-chooser,
  .messages-layout {
    grid-template-columns: 1fr;
  }

  .conversations-panel {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}


/* Profile pages */

.profile-page-heading {
  justify-content: space-between;
}

.profile-summary,
.public-profile {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.profile-photo-panel {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

.profile-photo {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-accent);
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-md);
}

.profile-details {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.profile-details > div {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.profile-details dt {
  font-weight: 800;
  color: var(--color-muted);
}

.profile-details dd {
  margin: 0;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 760px) {
  .profile-summary,
  .public-profile,
  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-details > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}


/* Listing pages */

.listing-search-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.listing-search-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.listing-meta {
  display: grid;
  gap: var(--space-2);
  color: var(--color-muted);
}

.listing-meta p {
  margin: 0;
}

.listing-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.listing-heading {
  justify-content: space-between;
  align-items: flex-start;
}

.listing-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.listing-details-grid > div {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.listing-details-grid dt {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.listing-details-grid dd {
  margin: 0;
  font-weight: 700;
}

.listing-description-block {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .listing-search-grid,
  .listing-details-grid {
    grid-template-columns: 1fr;
  }

  .listing-heading {
    flex-direction: column;
  }
}


/* Engagement */

.application-list {
  display: grid;
  gap: var(--space-4);
}

.application-card {
  display: grid;
  gap: var(--space-3);
}

.application-card h3,
.application-card p {
  margin-bottom: 0;
}


/* Messaging */

.messages-panel-header,
.chat-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.messages-panel-header h2,
.chat-header h2,
.chat-header p {
  margin-bottom: 0;
}

.conversations-list {
  display: grid;
}

.conversation-item {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.conversation-item:hover,
.conversation-item.is-active {
  background: var(--color-primary-soft);
}

.conversation-item.is-active {
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.chat-panel {
  min-width: 0;
}

.chat-content {
  display: grid;
  grid-template-rows: auto minmax(20rem, 1fr) auto;
  min-height: 36rem;
}

.messages-thread {
  display: flex;
  min-height: 20rem;
  max-height: 34rem;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: var(--space-4);
}

.message-row {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.message-row--sent {
  justify-items: end;
}

.message-meta {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.message-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.message-compose textarea {
  min-height: var(--control-height);
  max-height: 10rem;
}

@media (max-width: 760px) {
  .message-compose {
    grid-template-columns: 1fr;
  }
}


/* Shared launch-ready page hierarchy */

.section > :first-child > .eyebrow,
.section > .eyebrow {
  margin-bottom: var(--space-2);
}

.section > :first-child > h1,
.section > h1 {
  position: relative;
  padding-top: 0.85rem;
  font-size: clamp(2.15rem, 5vw, 3.55rem);
  font-weight: 900;
}

.section > :first-child > h1::before,
.section > h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.75rem;
  height: 4px;
  background: var(--color-accent);
}

.messages-layout {
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.chat-header,
.messages-panel-header {
  background: var(--color-surface-subtle);
}

.application-card {
  border-left: 4px solid var(--color-primary);
}

.application-card:hover {
  border-left-color: var(--color-accent);
}


/* Art Scout artist discovery */

.artist-card {
  overflow: hidden;
}

.artist-card__cover {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.artist-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-card__heading {
  justify-content: space-between;
  align-items: flex-start;
}

.artist-card__heading h2 {
  margin-bottom: 0;
}

.artist-card__cover-title {
  margin: 0;
  font-weight: 700;
}

/* Art Scout portfolio editor */

.portfolio-editor-card {
  overflow: hidden;
  padding: 0;
}

.portfolio-editor-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-subtle);
}

.portfolio-editor-card__summary,
.portfolio-editor-card__form {
  padding: var(--space-4);
}

.portfolio-editor-card__heading {
  justify-content: space-between;
  align-items: flex-start;
}

.portfolio-editor-card__heading h3,
.portfolio-editor-card__heading p {
  margin-bottom: 0;
}

.portfolio-editor-card__controls {
  margin-top: auto;
}

.portfolio-editor-card__form textarea {
  min-height: 8rem;
}

/* Art Scout portfolio-first public profile */

.art-scout-profile {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.artist-profile-content {
  margin-top: var(--space-6);
}

.artist-profile-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: var(--space-6);
  align-items: start;
}

.artist-featured-work {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.65fr);
  gap: var(--space-5);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.artist-featured-work > img {
  width: 100%;
  height: min(62vw, 36rem);
  min-height: 22rem;
  object-fit: cover;
  background: var(--color-surface-subtle);
}

.artist-featured-work > div {
  padding: var(--space-5);
}

.artist-portfolio-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--space-4);
}

.artist-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
}

.artist-portfolio-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.artist-portfolio-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-subtle);
}

.artist-portfolio-card > :not(img) {
  margin-right: var(--space-4);
  margin-left: var(--space-4);
}

.artist-portfolio-card > :last-child {
  margin-bottom: var(--space-4);
}

.trust-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  .art-scout-profile,
  .artist-profile-intro,
  .artist-featured-work {
    grid-template-columns: 1fr;
  }

  .art-scout-profile > .profile-photo {
    width: 7rem;
    height: 7rem;
  }

  .artist-featured-work > img {
    height: min(80vw, 32rem);
    min-height: 16rem;
  }
}


/* Art Scout home */

.home-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}

.home-path-grid .card {
  min-height: 20rem;
  box-shadow: var(--shadow-md);
}

.home-path-grid .card:first-child {
  border-top-color: var(--color-accent);
}

.home-path-grid .button {
  margin-top: auto;
  align-self: flex-start;
}

.home-local-callout {
  padding-top: 0;
}

.home-local-callout > div {
  max-width: 52rem;
  padding: var(--space-10) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .home-path-grid {
    grid-template-columns: 1fr;
    margin-top: -1rem;
  }
}


/* Art Scout profile dashboard */

.profile-dashboard__tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-background);
}

.profile-dashboard__panel[hidden] {
  display: none;
}

.profile-dashboard__panel {
  display: grid;
  gap: var(--space-5);
}

.profile-account-card {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.profile-account-card__details {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  gap: var(--space-6);
  align-items: start;
}

.profile-current-panel,
.profile-edit-panel {
  min-width: 0;
}

.profile-current-panel h2,
.profile-edit-panel h2 {
  margin-bottom: var(--space-4);
}

.profile-photo-actions {
  justify-content: center;
}

.profile-account-settings {
  display: grid;
  gap: var(--space-5);
}

@media (max-width: 980px) {
  .profile-account-card__details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .profile-account-card {
    grid-template-columns: 1fr;
  }

  .profile-dashboard__tabs {
    position: static;
  }
}