/* ARAYA public profile page (/user/<username>/) — founder 2026-07-17 rewrite ("กล่องตารางต่างๆถูกบีบ").
   Was rendering inside .an-auth-card (max-width:460px, built for a login form) — that's exactly
   what squeezed the wide UM field grid + authored course-recommendation grid. This file only
   widens the container and fixes the internal grids at breakpoints; it does not restyle UM's own
   markup beyond spacing (CONVENTIONS.md: reskin, don't fork). Mobile-first, ≤150 lines. */

/* dark hero band, compact (no big login-style copy — just identity), CONVENTIONS.md #1.3 */
.an-profile-hero {
  background-color: var(--an-maroon);
  background-image: linear-gradient(135deg, var(--an-maroon) 0%, var(--an-maroon-deep) 100%);
  color: var(--an-cream);
  text-align: center;
  padding: clamp(30px, 5vw, 46px) 20px clamp(26px, 4vw, 36px);
}
.an-profile-hero-in { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.an-profile-hero-in .an-avatar-chip {
  width: 88px; height: 88px; font-size: 34px; margin-bottom: 8px;
  border: 3px solid rgba(250, 246, 241, .35);
}
.an-profile-name {
  font-family: var(--an-font-display); font-size: var(--an-h4); color: var(--an-cream); margin: 0;
}
.an-profile-since { color: var(--an-sand); font-size: 13.5px; margin: 0 0 6px; }
.an-profile-cta {
  display: inline-block; margin-top: 10px; background: var(--an-gold); color: var(--an-maroon-ink);
  border-radius: var(--an-radius-pill); padding: var(--an-btn-pad); font-weight: 600; font-size: var(--an-btn-font);
  text-decoration: none;
}
.an-profile-cta:hover { background: var(--an-gold-strong); }

/* the wide card — was .an-auth-card (460px); this page gets real room, matching UM's OWN admin-
   configured profile_max_width (1000px, checked on preview 2026-07-17), not our login-form width. */
.an-profile-wrap { max-width: var(--an-maxw); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 20px clamp(48px, 7vw, 88px); }
.an-profile-card {
  width: 100%; max-width: 1000px; margin: 0 auto; background: var(--an-cream-card);
  border: 1px solid rgba(94, 27, 38, .14); border-radius: var(--an-radius-card);
  padding: clamp(20px, 3.5vw, 40px); box-shadow: 0 18px 44px rgba(94, 27, 38, .10);
  overflow-x: hidden; /* legacy authored blocks sometimes carry fixed widths — never widen the page */
}
.an-profile-card .um { max-width: 100% !important; margin: 0 !important; }

/* UM's own two-column field grid (.um-row > .um-col-121/.um-col-122, float-based, 48%-ish each) —
   the exact "squeezed boxes" the founder flagged: give it a real grid instead of narrow floats. */
.an-profile-card .um-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; float: none !important; width: 100% !important; margin: 0 0 20px !important; }
.an-profile-card .um-col-121, .an-profile-card .um-col-122 { float: none !important; width: 100% !important; margin: 0 !important; }
.an-profile-card .um-field-label label { font-family: var(--an-font-body); color: var(--an-ink-soft); font-weight: 600; font-size: 13px; }
.an-profile-card .um-field-value { color: var(--an-ink); }
.an-profile-card .um-field-value a { color: var(--an-gold-strong); }

/* profile tab nav (About / Posts / Comments…) — UM ships this as a dark #444 bar (um-profile.css);
   flex + wrap + token colors instead so it reads as part of the card, not a stray black stripe. */
.an-profile-card .um-profile-nav { display: flex; flex-wrap: wrap; gap: 4px; background: transparent; border-bottom: 1px solid rgba(94, 27, 38, .12); margin: 0 0 20px; padding: 0; text-align: left; }
.an-profile-card .um-profile-nav-item { background: transparent; }
.an-profile-card .um-profile-nav-item a { color: var(--an-ink-muted); text-decoration: none; padding: 8px 10px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.an-profile-card .um-profile-nav-item.active a { color: var(--an-maroon); font-weight: 600; }
.an-profile-card .um-profile-nav-item a:hover { color: var(--an-gold-strong); }

/* authored edit/account/logout toolbar (page-content Gutenberg group, Tailwind-style utility
   buttons authored directly on this WP page) — stack->wrap so 3 buttons never overflow narrow */
.an-profile-card .wp-block-group.is-layout-flex { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 22px; }
.an-profile-card .wp-block-group.is-layout-flex .text-center { flex: 1 1 160px; }
.an-profile-card .wp-block-group.is-layout-flex a { display: block; text-align: center; white-space: nowrap; }

/* authored course search box */
.an-profile-card .custom-search-container { max-width: 100%; }
.an-profile-card .custom-search-form { display: flex; flex-wrap: wrap; gap: 8px; }
.an-profile-card .custom-search-input { flex: 1 1 200px; min-width: 0; }

/* authored "recommended courses" grid — inline style pins repeat(2,1fr) even on a phone; this is
   the OTHER half of "squeezed boxes". Override with !important (inline style specificity). */
.an-profile-card .custom-courses-container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 16px !important; }
.an-profile-card .custom-course-card { border-radius: 12px; overflow: hidden; border: 1px solid rgba(94, 27, 38, .1); }

@media (max-width: 639.98px) {
  .an-profile-card .um-row { grid-template-columns: 1fr; }
  .an-profile-card .custom-courses-container { grid-template-columns: 1fr !important; }
  .an-profile-card .wp-block-group.is-layout-flex .text-center { flex-basis: 100%; }
}