/**
 * Resource Center Styles - Properly Namespaced
 * ============================================
 * All selectors scoped under .resource-center to prevent CSS collisions
 * with Help Center and other pages.
 */

/* ==========================================================================
   ROOT: CSS Variables & Base Styles
   ========================================================================== */

.resource-center {
  /* Container & Layout - Airbnb-style generous spacing */
  --rc-container-max-width: 1440px;
  --rc-container-padding: 80px;
  --rc-hero-font-size: 40px;
  --rc-hero-line-height: 44px;

  /* Search - Pill-shaped like Airbnb */
  --rc-search-height: 64px;  /* 64px + 2px border = 66px rendered (Airbnb match) */
  --rc-search-radius: 100px;

  /* Spacing - Match Airbnb EXACTLY */
  --rc-card-gap: 16px;     /* Measured from Airbnb (column gap) */
  --rc-section-heading-size: 32px;  /* Airbnb: 32px (was 28px) */
  --rc-section-heading-line-height: 36px;  /* Airbnb: 36px (was 34px) */
  --rc-section-header-gap: 32px;  /* Airbnb measured: 32px heading-to-card gap */

  /* Filter Pills - Airbnb measurements */
  --rc-pill-gap: 12px;  /* Standard gap for pills */
  --rc-pill-height: 42px;
  --rc-pill-padding-x: 16px;
  --rc-pill-radius: 32px;
  --rc-pill-border: 1px solid var(--hc-border-base);
  --rc-pill-font-weight: 500;

  /* Cards - Match Airbnb flexible sizing */
  --rc-card-image-ratio: 16 / 9;  /* Airbnb: 308×173 aspect = 1.78 */
  --rc-card-image-radius: 16px;

  font-family: var(--hc-font-family);
  color: var(--hc-color-primary);
  transition: opacity 0.2s ease-out;
}

.resource-center.is-transitioning {
  opacity: 0.65;
}

/* ==========================================================================
   NAVBAR: Shared Help Page Navigation (body#help scope)
   These apply to ALL help pages, not just Resource Center
   ========================================================================== */

body#help {
  --rc-nav-max-width: 1440px;
  --rc-nav-padding: 80px;
}

body#help .navbar.fixed-top .container-fluid {
  max-width: var(--rc-nav-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rc-nav-padding);
  padding-right: var(--rc-nav-padding);
  width: 100%;
}

body#help .navbar.fixed-top .navbar-brand {
  margin-left: 0 !important;
}

body#help .navbar.fixed-top .navbar-toggler {
  margin-right: 0 !important;
}

/* Airbnb pattern: Non-sticky navbar - scrolls with page content
   Resource center pages don't need persistent nav because hero has search */
body#help.resource-page .navbar.fixed-top {
  position: static !important;
}

/* Resource pages only: increase navbar visual height by 2px */
body#help.resource-page .navbar.fixed-top,
body#help.resource-page .navbar.fixed-top .container-fluid {
  height: 96px !important;
  max-height: 96px !important;
}

/* Remove body padding compensation since navbar is no longer fixed */
body#help.resource-page {
  padding-top: 0 !important;
}

/* Adjust container margin - navbar is now in document flow, no clearing needed */
body#help.resource-page .resource-center.resource-center-container {
  margin-top: 0;
}

/* Disable navbar scroll-state styles - navbar scrolls with content, not fixed
   Prevents dark background flash when scrolling back to top */
body#help.resource-page .navbar.navbar-scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   CONTAINER: Resource Center Container
   ========================================================================== */

.resource-center.resource-center-container {
  max-width: var(--rc-container-max-width);
  margin: 92px auto 0;
  padding-left: var(--rc-container-padding);
  padding-right: var(--rc-container-padding);
  padding-bottom: 0;  /* No extra space before footer */
}

/* Ensure last row doesn't add extra margin before footer */
.resource-center.resource-center-container > .row:last-child {
  margin-bottom: 0;
}

.resource-center.resource-center-container > .row:last-child > .col-12 {
  padding-bottom: 0;
}

/* Main element spacing control */
body#help.resource-page main#main-content {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   HERO: Title & Heading Section (Scoped under .resource-center)
   ========================================================================== */

.resource-center .resource-hero {
  text-align: center;
  margin-bottom: 0;
  padding-top: 80px;  /* Airbnb measured: 80px gap from nav to hero */
}

.resource-center .resource-title {
  font-family: var(--hc-font-family-cereal);
  font-size: var(--rc-hero-font-size);  /* 40px - matches Airbnb */
  font-weight: 600;  /* Airbnb uses 600 exactly */
  line-height: var(--rc-hero-line-height);  /* 44px - matches Airbnb */
  color: rgb(34, 34, 34);  /* Airbnb's exact text color */
  margin: 0 0 0 0;
  letter-spacing: -0.8px;  /* Airbnb exact value */
}

.resource-center .resource-subhead {
  font-family: var(--hc-font-family);
  font-size: var(--hc-font-size-base);
  line-height: 24px;
  color: var(--hc-color-secondary);
  margin: 0;
  display: none !important;  /* Hidden - Airbnb design has no subhead */
}

/* ==========================================================================
   SEARCH: Search Bar & Input (Scoped under .resource-center)
   ========================================================================== */

.resource-center .rc-search {
  max-width: 438px;  /* Original Airbnb-measured width */
  margin: 40px auto 24px;
  position: relative;
}

/* BUG-153 FIX: Form needs explicit sizing and positioning context */
.resource-center .rc-search-form {
  position: relative;  /* Positioning context for absolutely-positioned button */
  width: 100%;         /* Fill the .rc-search container */
  margin: 0;
  padding: 0;
}

.resource-center .rc-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;  /* BUG-153 FIX: Explicitly fill the form container */
  /* Airbnb-style pill search bar - Transparent container with subtle border */
  background: rgb(247, 247, 247);  /* Light gray like Airbnb */
  border: 1px solid rgb(221, 221, 221);  /* Subtle border */
  border-radius: var(--rc-search-radius);
  box-shadow: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.resource-center .rc-search-input-wrapper:hover {
  border-color: rgb(176, 176, 176);  /* Darker border on hover */
  box-shadow: none;
}

.resource-center .rc-search-input-wrapper:focus-within {
  border-color: var(--hc-color-primary);
  box-shadow: 0 0 0 1px var(--hc-color-primary);  /* Airbnb-style focus ring */
}

.resource-center .rc-search-input {
  /* BUG-153 FIX: Ensure input fills wrapper and has room for button */
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;  /* Critical: allows flex item to shrink below content size */
  max-width: 100% !important;  /* Prevent overflow */
  height: var(--rc-search-height);
  border: none;
  border-radius: 0px;  /* Sharp corners inside pill-shaped container */
  background: transparent;
  font-size: 16px;
  font-weight: 500;  /* Match Airbnb font weight */
  padding: 14px 70px 14px 24px !important;  /* 70px right padding > 57px button area */
  color: #222222;  /* Airbnb black text */
  transition: none;
  box-sizing: border-box !important;  /* Ensure padding is included in width calculation */
  text-overflow: clip !important;  /* Never truncate with ellipsis */
  overflow: visible !important;  /* Never hide overflow */
  position: relative;  /* Create stacking context */
  z-index: 1;  /* Below button (z-index: 3) but ensures text is visible */
}

.resource-center .rc-search-input::placeholder {
  color: #222222;  /* Airbnb black placeholder */
  font-weight: 500;
  opacity: 1;  /* Match Airbnb: full contrast placeholder */
}

.resource-center .rc-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.resource-center .rc-search-icon {
  position: absolute;
  left: 20px;
  width: 18px;
  height: 18px;
  color: var(--hc-color-primary);
  pointer-events: none;
  display: none !important;  /* Hidden - Airbnb design has no icon inside input, only button on right */
}

.resource-center .rc-search-clear {
  /* Hidden - only search button (magnifying glass) shown for Airbnb parity */
  display: none !important;
}

.resource-center .rc-search-clear:hover {
  background: rgb(0, 176, 181);
  color: rgb(255, 255, 255);
}

.resource-center .rc-search-clear.is-visible {
  display: inline-flex;
}

.resource-center .rc-search-button {
  /* Airbnb-style search submit button with circular background */
  position: absolute;
  right: 9px;  /* Slightly more padding for larger button */
  top: 50%;
  transform: translateY(-50%);

  width: 48px;  /* Airbnb measured: 48px */
  height: 48px;
  border: none;
  border-radius: 50%;  /* Fully circular button like Airbnb */
  background: rgb(0, 166, 172);  /* Brighter teal for more visual impact */
  color: rgb(255, 255, 255);  /* White icon */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  cursor: pointer;
  transition: background-color 0.2s ease-out;
  z-index: 3;  /* Above clear button */
}

.resource-center .rc-search-button:hover {
  background: rgb(0, 176, 181);  /* Lighter teal on hover */
}

.resource-center .rc-search-button svg {
  width: 22px;  /* Proportional to 48px button */
  height: 22px;
  color: rgb(255, 255, 255);  /* White icon */
  stroke: rgb(255, 255, 255);
  stroke-width: 2.5;
}

.resource-center .rc-search-button span {
  display: none !important;  /* Hide text, show only icon */
}

.resource-center .rc-search-clear svg {
  width: 18px;
  height: 18px;
  color: rgb(255, 255, 255);
  stroke: rgb(255, 255, 255);
}

/* ==========================================================================
   TOPIC RAIL: Filter Pills (Scoped under .resource-center)
   Airbnb pattern: Full-width flex container with centered content
   ========================================================================== */

.resource-center .rc-topic-rail {
  /* Airbnb pattern: Full-width flex container with centered content
   * This ensures pills stay centered when viewport changes (e.g., DevTools opens) */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 84px 0;  /* 84px to match Airbnb spacing to section heading */
  padding: 0;  /* No padding - flexbox handles centering */
  width: 100%;
  box-sizing: border-box;
}

.resource-center .rc-topic-pill {
  border: 1px solid var(--hc-border-base);
  border-radius: 9999px;
  height: 40px;
  padding: 10px 19px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  background: var(--hc-bg-primary);
  color: var(--hc-color-primary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.resource-center .rc-topic-pill:hover {
  background: var(--hc-bg-secondary);
  border-color: var(--hc-border-dark);
}

.resource-center .rc-topic-pill.is-active {
  background: var(--hc-color-primary);
  border-color: var(--hc-color-primary);
  color: var(--hc-bg-primary);
}

.resource-center .rc-topic-pill.is-active:hover {
  background: var(--hc-color-primary-hover);
  border-color: var(--hc-color-primary-hover);
}

.resource-center .rc-topic-pill:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--hc-bg-primary), 0 0 0 4px var(--hc-color-primary);
}

/* ==========================================================================
   SECTIONS: Content Sections (Scoped under .resource-center)
   ========================================================================== */

.resource-center .rc-section {
  margin-bottom: 0;
  padding: 0;  /* Override main.css section { padding: 60px 0 } */
}

.resource-center .rc-section:not(:first-of-type) {
  margin-top: 80px;  /* Airbnb measured: 80px gap from card text to next heading */
}

.resource-center .rc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--rc-section-header-gap);
}

.resource-center .rc-section-title {
  font-family: var(--hc-font-family-cereal);
  font-size: var(--rc-section-heading-size);
  line-height: var(--rc-section-heading-line-height);
  font-weight: var(--hc-font-weight-semibold);
  color: var(--hc-color-primary);
  margin: 0;
}

/* TrueScore 💯 icon styling - Twemoji with brand color */
.resource-center .rc-section-title .truescore-hundred {
  color: #2AC8C8;  /* Buggy brand turquoise */
  display: inline-flex;
  vertical-align: -0.15em;
  margin: 0 0.1em;
}

.resource-center .rc-section-title .truescore-hundred svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
}

/* Responsive text: Show "experience" on desktop, "X" on mobile */
.resource-center .rc-desktop-only {
  display: inline;
}
.resource-center .rc-mobile-only {
  display: none;
}

/* Responsive text for callouts heading: "other" shown on iPad Mini+ */
.resource-center .rc-desktop-text {
  display: inline;
}
.resource-center .rc-mobile-text {
  display: none;
}

.resource-center .rc-section-link {
  font-size: 14px;
  font-weight: var(--hc-font-weight-medium);
  color: var(--hc-color-primary);
  text-decoration: none;
  transition: text-decoration 0.15s ease-out;
}

.resource-center .rc-section-link:hover {
  text-decoration: underline;
}

/* Chevron icon - hidden on desktop, shown on mobile */
.resource-center .rc-section-link-chevron {
  display: none;
  width: 16px;
  height: 16px;
  stroke: var(--hc-color-primary);
  flex-shrink: 0;
}

/* ==========================================================================
   CARDS GRID: Resource Cards Layout (Scoped under .resource-center)
   ========================================================================== */

.resource-center .rc-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* Flexible columns like Airbnb */
  column-gap: var(--rc-card-gap, 24px);
  row-gap: 16px;
}

/* Show all card - hidden on desktop/tablet, visible on mobile carousel */
.resource-center .rc-show-all-card {
  display: none;
}

.resource-center .rc-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--rc-card-image-radius);
  transition: color 0.2s ease-out;
}

.resource-center .rc-card:hover {
  color: inherit;
}

.resource-center .rc-card-image {
  border-radius: var(--rc-card-image-radius);
  overflow: hidden;
  background: var(--hc-bg-tertiary);
  position: relative;
  box-shadow: none;
}

.resource-center .rc-card:hover .rc-card-image {
  box-shadow: none;
}

.resource-center .rc-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--rc-card-image-ratio);
  display: block;
}

.resource-center .rc-card:hover .rc-card-image img {
  transform: none;
}

.resource-center .rc-card-body {
  padding: 0;
}

.resource-center .rc-card-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--hc-font-weight-semibold);
  color: var(--hc-color-primary);
  margin: 0;  /* Removed 6px bottom margin - Airbnb has no spacing */
  letter-spacing: -0.2px;
}

.resource-center .rc-card-description {
  /* Hidden - Airbnb design has title only, no description */
  display: none !important;
}

/* ==========================================================================
   CALLOUTS: Bottom CTA Cards (Scoped under .resource-center)
   Airbnb pattern: "Learn from other hosts" section with callout cards
   ========================================================================== */

.resource-center .rc-callouts {
  margin-top: 64px;   /* Airbnb: space from last section cards to heading */
  margin-bottom: 80px; /* More space before footer */
  padding: 0 !important;  /* Force override main.css section { padding: 60px 0 } */
}

.resource-center .rc-callouts-heading {
  font-family: var(--hc-font-family-cereal);
  font-size: var(--rc-section-heading-size);  /* 32px like other section headings */
  line-height: var(--rc-section-heading-line-height);
  font-weight: var(--hc-font-weight-semibold);
  color: var(--hc-color-primary);
  margin: 0 0 32px 0;  /* Airbnb measured: 32px gap to callout cards */
}

.resource-center .rc-callouts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.resource-center .rc-callout-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;      /* Airbnb: compact ~80px total height */
  border-radius: 16px;     /* Airbnb: 16px */
  background: #edeff4;     /* Matches animated icon background */
  border: none;            /* Airbnb: no border */
  text-decoration: none;
  color: var(--hc-color-primary);
  transition: background 0.2s ease-out;
}

.resource-center .rc-callout-card:hover {
  background: #e0e2e7;     /* Slightly darker on hover */
}

.resource-center .rc-callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hc-bg-primary);
  border: 1px solid var(--hc-border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hc-color-primary);
}

/* Animated community high-five icon */
.resource-center .rc-callout-icon--community {
  width: 72px;
  height: 72px;  /* Airbnb: larger icons */
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-center .rc-community-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Animated help bubble icon */
.resource-center .rc-callout-icon--help {
  width: 72px;
  height: 72px;  /* Airbnb: larger icons */
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-center .rc-help-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.resource-center .rc-callout-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resource-center .rc-callout-title {
  font-size: 18px;        /* Airbnb: 18px */
  line-height: 24px;      /* Airbnb: 24px */
  font-weight: 500;       /* Airbnb: 500 (medium, not semibold) */
  margin: 0;
}

.resource-center .rc-callout-text {
  font-size: 16px;        /* Airbnb: 16px */
  line-height: 22px;      /* Airbnb: 22px */
  color: rgb(108, 108, 108);  /* Airbnb: rgb(108, 108, 108) */
  margin: 0;
}

/* ==========================================================================
   UTILITY STATES: Visibility & Loading (Scoped under .resource-center)
   ========================================================================== */

.resource-center .rc-card.is-hidden,
.resource-center .rc-section.is-hidden,
.resource-center .rc-search-result-group.is-hidden,
.resource-center.resource-center--search .rc-search-result.is-hidden {
  display: none !important;
}

.resource-center .rc-empty-state {
  text-align: center;
  padding: 40px 0;
  color: var(--hc-color-secondary);
}

.resource-center .rc-loading,
.resource-center .rc-error {
  text-align: center;
  color: var(--hc-color-secondary);
  padding: 24px 0;
}

/* ==========================================================================
   SEARCH PAGE VARIANT: resource-center--search modifier
   ========================================================================== */

.resource-center.resource-center--search {
  --rc-container-padding: 80px;
}

.resource-center.resource-center--search.resource-center-container {
  margin-top: 40px;
}

.resource-center.resource-center--search .resource-hero {
  text-align: left;
  padding-top: 24px;
}

.resource-center.resource-center--search .resource-title {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.4px;
}

.resource-center.resource-center--search .rc-search {
  margin: 0 0 174px 0;
  max-width: 520px;
}

.resource-center.resource-center--search .rc-topic-rail {
  justify-content: flex-start;
  max-width: 728px;
  margin-bottom: 72px;
}

.resource-center.resource-center--search .rc-section-breadcrumb-row {
  margin-bottom: 0;
}

.resource-center.resource-center--search .rc-section-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 30px 0 52px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--hc-color-secondary);
  text-decoration: none;
}

.resource-center.resource-center--search .rc-section-breadcrumb:hover {
  text-decoration: underline;
}

.resource-center.resource-center--search .rc-section-breadcrumb-chevron {
  font-size: 14px;
  line-height: 14px;
}

.resource-center.resource-center--search .rc-results-header {
  margin: 0 0 106px;
}

.resource-center.resource-center--search .rc-search-initial {
  max-width: 728px;
  margin: 64px 0 0;
}

.resource-center.resource-center--search .rc-search-initial-title {
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #222222;
}

.resource-center.resource-center--search .rc-search-initial-hint {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: #6a6a6a;
}

.resource-center.resource-center--search .rc-results-title {
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--hc-font-weight-semibold);
  margin: 0 0 8px;
  color: var(--hc-color-primary);
}

.resource-center.resource-center--search .rc-results-meta {
  font-size: 14px;
  color: var(--hc-color-secondary);
  margin: 0;
}

.resource-center.resource-center--search .rc-search-results {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}

.resource-center.resource-center--search .rc-search-result {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid #dddddd;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease-out;
}

.resource-center.resource-center--search .rc-search-result:first-of-type {
  border-top: none;
}

.resource-center.resource-center--search .rc-search-result:hover {
  background: transparent;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.resource-center.resource-center--search .rc-card {
  transform: none;
}

.resource-center.resource-center--search .rc-card:hover {
  transform: none;
}

.resource-center.resource-center--search .rc-search-result.rc-card {
  border-radius: 0;
  gap: 0;
}

.resource-center.resource-center--search .rc-card-image {
  display: none;
}

.resource-center.resource-center--search .rc-card-body {
  padding: 0;
}

.resource-center.resource-center--search .rc-result-meta {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--hc-color-secondary);
  margin-bottom: 8px;
}

.resource-center.resource-center--search .rc-card-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: underline;
  margin: 0 0 8px;
}

.resource-center.resource-center--search .rc-card-description {
  display: block !important;
  font-size: 16px;
  line-height: 24px;
  color: var(--hc-color-secondary);
  margin: 0;
}

/* Section route parity: /resources/:portal/section/:section should render as card grid */
.resource-center.resource-center--search.is-section-route.resource-center-container {
  margin-top: 12px;
}

.resource-center.resource-center--search.is-section-route .resource-hero,
.resource-center.resource-center--search.is-section-route .rc-topic-rail {
  display: none !important;
}

.resource-center.resource-center--search.is-search-query-route .resource-hero,
.resource-center.resource-center--search.is-search-query-route .rc-topic-rail {
  display: none !important;
}

/* Search-results parity: /resources/:portal/s?q=* should hide landing hero + quick topics */
.resource-center.resource-center--search.is-search-results-route.resource-center-container {
  margin-top: 24px;
}

.resource-center.resource-center--search.is-search-results-route .resource-hero,
.resource-center.resource-center--search.is-search-results-route .rc-topic-rail {
  display: none !important;
}

.resource-center.resource-center--search.is-search-results-route .rc-results-header {
  margin: 64px 0 16px;
  max-width: 728px;
}

.resource-center.resource-center--search.is-search-results-route .rc-results-title {
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.resource-center.resource-center--search.is-search-results-route .rc-results-meta {
  font-size: 18px;
  line-height: 24px;
  color: #6a6a6a;
  margin: 0;
}

.resource-center.resource-center--search.is-search-results-route .rc-search-results {
  max-width: 728px;
  margin-bottom: 36px;
}

.resource-center.resource-center--search.is-search-results-route .rc-search-result {
  padding: 24px 0;
}

.resource-center.resource-center--search.is-search-results-route .rc-result-meta {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #6a6a6a;
  margin: 0 0 6px;
}

.resource-center.resource-center--search.is-search-results-route .rc-card-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  margin: 0 0 8px;
}

.resource-center.resource-center--search.is-search-results-route .rc-card-description {
  font-size: 16px;
  line-height: 24px;
  color: #6a6a6a;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-center.resource-center--search .rc-results-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 32px 0;
}

.resource-center.resource-center--search.is-search-results-route .rc-results-pagination {
  max-width: 728px;
}

.resource-center.resource-center--search .rc-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.resource-center.resource-center--search .rc-pagination-button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--hc-color-primary);
  min-width: 28px;
  height: 28px;
  border-radius: 9999px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.resource-center.resource-center--search .rc-pagination-button:hover {
  background: var(--hc-bg-secondary);
}

.resource-center.resource-center--search .rc-pagination-button.is-current {
  background: var(--hc-color-primary);
  color: var(--hc-bg-primary);
  cursor: default;
}

.resource-center.resource-center--search .rc-pagination-button.is-disabled,
.resource-center.resource-center--search .rc-pagination-button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  background: transparent;
}

.resource-center.resource-center--search .rc-pagination-ellipsis {
  color: var(--hc-color-secondary);
  font-size: 14px;
  line-height: 20px;
  padding: 0 2px;
}

.resource-center.resource-center--search .rc-pagination-summary {
  margin: 0;
  color: var(--hc-color-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.resource-center.resource-center--search.is-section-view .rc-results-header {
  margin: 34px 0 34px;
}

.resource-center.resource-center--search.is-section-view .rc-results-title {
  font-size: 40px;
  line-height: 44px;
  margin: 0;
}

.resource-center.resource-center--search.is-section-view .rc-results-meta {
  display: none !important;
}

.resource-center.resource-center--search.is-section-view .rc-search-results {
  margin-bottom: 0;
}

.resource-center.resource-center--search.is-section-view .rc-search-result-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--rc-card-gap, 24px);
  row-gap: 56px;
}

.resource-center.resource-center--search.is-section-view .rc-search-result {
  border: none;
  padding: 0;
}

.resource-center.resource-center--search.is-section-view .rc-search-result:first-of-type {
  border-top: none;
}

.resource-center.resource-center--search.is-section-view .rc-search-result:hover {
  background: none;
  margin: 0;
  padding: 0;
}

.resource-center.resource-center--search.is-section-view .rc-card-image {
  display: block;
}

.resource-center.resource-center--search.is-section-view .rc-result-meta {
  display: none;
}

.resource-center.resource-center--search.is-section-view .rc-card-description {
  display: none !important;
}

.resource-center.resource-center--search.is-section-view .rc-card-title {
  font-size: 15px;
  line-height: 20px;
  margin: 12px 0 0;
}

/* ==========================================================================
   SKELETON LOADING: Placeholder States (Scoped under .resource-center)
   ========================================================================== */

.resource-center .rc-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* Match cards grid */
  column-gap: var(--rc-card-gap, 24px);
  row-gap: 16px;
}

.resource-center .rc-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resource-center .rc-skeleton-image {
  width: 100%;
  aspect-ratio: var(--rc-card-image-ratio);
  background: linear-gradient(
    90deg,
    var(--hc-bg-tertiary) 0%,
    var(--hc-bg-secondary) 50%,
    var(--hc-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--rc-card-image-radius);
  animation: rc-skeleton-shimmer 2s ease-in-out infinite;
}

.resource-center .rc-skeleton-title {
  width: 80%;
  height: 16px;
  background: var(--hc-bg-tertiary);
  border-radius: 4px;
  animation: rc-skeleton-pulse 1.5s ease-in-out infinite;
}

.resource-center .rc-skeleton-description {
  width: 100%;
  height: 12px;
  background: var(--hc-bg-tertiary);
  border-radius: 4px;
  margin-top: 4px;
  animation: rc-skeleton-pulse 1.5s ease-in-out infinite;
}

/* Keyframe animations are global (not scoped) */
@keyframes rc-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes rc-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   RESPONSIVE: Tablet Breakpoint (max-width: 1127.98px)
   ========================================================================== */

@media (max-width: 1127.98px) {
  .resource-center {
    --rc-container-padding: 40px;
    --rc-hero-font-size: 34px;
    --rc-hero-line-height: 40px;
    --rc-search-height: 52px;
    --rc-card-image-ratio: 4 / 3;  /* More square at tablet like Airbnb */
  }

  body#help {
    --rc-nav-padding: 40px;
  }

  .resource-center .rc-section-header {
    flex-wrap: wrap;
  }

  .resource-center .rc-topic-rail {
    justify-content: center;  /* Keep centered like Airbnb - only left-align on mobile */
    overflow-x: auto;
    padding: 0 var(--rc-container-padding) 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .resource-center .rc-topic-rail::-webkit-scrollbar {
    display: none;
  }

  .resource-center .rc-cards-grid {
    grid-template-columns: repeat(4, 1fr);  /* Keep 4 columns like Airbnb */
  }

  .resource-center .rc-skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .resource-center.resource-center--search .rc-search {
    margin-bottom: 120px;
  }

  .resource-center.resource-center--search .rc-results-header {
    margin-bottom: 72px;
  }

  .resource-center.resource-center--search.is-section-view .rc-search-result-group {
    grid-template-columns: repeat(4, 1fr);
  }

  .resource-center .rc-section:not(:first-of-type) {
    margin-top: 56px;  /* Proportionally tighter on tablet */
  }

  .resource-center .rc-callouts {
    margin-top: 48px;   /* Proportionally tighter on tablet */
    margin-bottom: 12px; /* Tight spacing to footer */
  }
}

/* ==========================================================================
   RESPONSIVE: iPad Mini/Air Breakpoint (744px - 820px)
   Fixes: Tabs spacing, search text, card sizes, callout proportions
   Target: iPad Mini (768px), iPad Air (820px)
   ========================================================================== */

@media (min-width: 744px) and (max-width: 820px) {
  /* Variables for iPad Mini/Air */
  .resource-center {
    --rc-container-padding: 40px;
    --rc-hero-font-size: 32px;
    --rc-hero-line-height: 36px;
    --rc-section-heading-size: 32px;  /* Larger to match Airbnb */
    --rc-section-heading-line-height: 36px;
    --rc-card-image-ratio: 1 / 1;  /* Square cards - taller to match Airbnb */
  }

  body#help {
    --rc-nav-padding: 40px;
  }

  /* Hero title - tighter for smaller iPads */
  .resource-center .resource-title {
    font-size: var(--rc-hero-font-size);
    line-height: var(--rc-hero-line-height);
    letter-spacing: -0.6px;
  }

  /* Search bar - Airbnb iPad Mini sizing (bigger & bolder) */
  .resource-center .rc-search {
    max-width: 420px;  /* Original width */
    margin: 36px auto 24px;
  }

  .resource-center .rc-search-input-wrapper {
    height: 56px;  /* Taller to match Airbnb */
    border-radius: 56px;
  }

  .resource-center .rc-search-input {
    height: 56px;
    font-size: 16px;  /* Larger font */
    font-weight: 500;  /* Bolder text */
    padding: 14px 60px 14px 24px !important;  /* Room for 44px button + 6px offset = 50px */
  }

  .resource-center .rc-search-input::placeholder {
    font-size: 16px;
    font-weight: 500;  /* Bolder placeholder */
  }

  .resource-center .rc-search-button {
    width: 44px;  /* Larger button */
    height: 44px;
    right: 6px;
  }

  .resource-center .rc-search-button svg {
    width: 20px;
    height: 20px;
  }

  /* Topic pills - slightly smaller */
  .resource-center .rc-topic-pill {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .resource-center .rc-topic-rail {
    margin-bottom: 64px;  /* Tighter spacing */
    gap: 10px;
  }

  /* Cards grid - 4 columns like Airbnb with tighter gap */
  .resource-center .rc-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;  /* Tighter gap to fit 4 cards */
  }

  .resource-center .rc-skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .resource-center .rc-card-title {
    font-size: 15px;  /* Match Airbnb card title size */
    line-height: 20px;
    font-weight: 600;  /* Bolder like Airbnb */
  }

  /* Section headers - tighter */
  .resource-center .rc-section-header {
    margin-bottom: 24px;
  }

  .resource-center .rc-section:not(:first-of-type) {
    margin-top: 48px;
  }

  /* Callouts section - Airbnb pattern: shorter cards, bigger icons, smaller text */
  .resource-center .rc-callouts {
    margin-top: 40px;
    margin-bottom: 12px;
  }

  .resource-center .rc-callouts-heading {
    font-size: 32px;  /* Match section headings - same as Airbnb */
    line-height: 36px;
    margin-bottom: 24px;
  }

  .resource-center .rc-callout-card {
    padding: 12px 16px;  /* More compact padding */
    gap: 12px;
  }

  /* Larger icons - Airbnb pattern */
  .resource-center .rc-callout-icon--community,
  .resource-center .rc-callout-icon--help {
    width: 56px;  /* Larger icons */
    height: 56px;
  }

  /* Smaller text - Airbnb pattern */
  .resource-center .rc-callout-title {
    font-size: 16px;
    line-height: 20px;
  }

  .resource-center .rc-callout-text {
    font-size: 14px;
    line-height: 18px;
  }
}

/* ==========================================================================
   RESPONSIVE: iPad Pro Breakpoint (821px - 1024px)
   Fixes: Search bar disfigured, too much hero spacing, cards too short
   Target: iPad Pro 11" (834px), iPad Pro 12.9" (1024px)
   ========================================================================== */

@media (min-width: 821px) and (max-width: 1024px) {
  /* Variables for iPad Pro */
  .resource-center {
    --rc-container-padding: 48px;
    --rc-hero-font-size: 36px;
    --rc-hero-line-height: 40px;
    --rc-section-heading-size: 32px;
    --rc-section-heading-line-height: 36px;
    --rc-card-image-ratio: 1 / 1;  /* Square cards - taller to match Airbnb */
  }

  body#help {
    --rc-nav-padding: 48px;
  }

  /* Hero - reduced spacing above search bar */
  .resource-center .resource-hero {
    padding-top: 60px;  /* Reduced from default 80px */
  }

  .resource-center .resource-title {
    font-size: var(--rc-hero-font-size);
    line-height: var(--rc-hero-line-height);
    letter-spacing: -0.8px;
  }

  /* Search bar - fixed height and proper sizing to match Airbnb */
  .resource-center .rc-search {
    max-width: 440px;  /* Original width */
    margin: 32px auto 20px;  /* Tighter margins */
  }

  .resource-center .rc-search-input-wrapper {
    height: 60px;  /* Taller to match Airbnb */
    border-radius: 60px;
  }

  .resource-center .rc-search-input {
    height: 60px;
    font-size: 16px;
    font-weight: 500;
    padding: 16px 65px 16px 24px !important;  /* Room for 46px button + 7px offset = 53px */
  }

  .resource-center .rc-search-input::placeholder {
    font-size: 16px;
    font-weight: 500;
  }

  .resource-center .rc-search-button {
    width: 46px;
    height: 46px;
    right: 7px;
  }

  .resource-center .rc-search-button svg {
    width: 20px;
    height: 20px;
  }

  /* Topic pills */
  .resource-center .rc-topic-pill {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  .resource-center .rc-topic-rail {
    margin-bottom: 64px;
    gap: 12px;
  }

  /* Cards grid - 4 columns with appropriate gap */
  .resource-center .rc-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .resource-center .rc-skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .resource-center .rc-card-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
  }

  /* Section headers */
  .resource-center .rc-section-header {
    margin-bottom: 24px;
  }

  .resource-center .rc-section:not(:first-of-type) {
    margin-top: 56px;
  }

  /* Callouts section - Airbnb pattern: compact, minimal */
  .resource-center .rc-callouts {
    margin-top: 40px;
    margin-bottom: 12px;
  }

  .resource-center .rc-callouts-heading {
    font-size: 32px;  /* Match section headings */
    line-height: 36px;
    margin-bottom: 24px;  /* More space under heading */
  }

  .resource-center .rc-callout-card {
    padding: 16px 18px;  /* Bigger cards */
    gap: 12px;
    min-height: auto;  /* Remove minimum height constraint */
  }

  .resource-center .rc-callout-icon--community,
  .resource-center .rc-callout-icon--help {
    width: 40px;  /* Smaller icons like Airbnb */
    height: 40px;
  }

  .resource-center .rc-callout-title {
    font-size: 14px;  /* Smaller text */
    line-height: 18px;
  }

  .resource-center .rc-callout-text {
    font-size: 12px;  /* Smaller description */
    line-height: 16px;
  }
}

/* ==========================================================================
   RESPONSIVE: Mobile Breakpoint (max-width: 743.98px)
   ========================================================================== */

@media (max-width: 743.98px) {
  .resource-center {
    --rc-container-padding: 24px;
    --rc-section-heading-size: 24px;
    --rc-section-heading-line-height: 28px;
    --rc-search-height: 56px;  /* Airbnb mobile: 56px */
    --rc-search-radius: 42px;  /* Airbnb mobile: 42px - more pill-like shape */
    --rc-card-image-radius: 12px;
  }

  .resource-center.resource-center--search {
    --rc-container-padding: 24px;
  }

  body#help {
    --rc-nav-padding: 24px;
  }

  /* Responsive text swap: "X" on mobile instead of "experience" */
  .resource-center .rc-desktop-only {
    display: none;
  }
  .resource-center .rc-mobile-only {
    display: inline;
  }

  /* Responsive text swap for callouts heading */
  .resource-center .rc-desktop-text {
    display: none;
  }
  .resource-center .rc-mobile-text {
    display: inline;
  }

  /* Hero title - keep on one line like Airbnb */
  .resource-center .resource-hero {
    padding-top: 80px;  /* Match Airbnb: more space between tabs and hero */
  }

  .resource-center .resource-title {
    font-size: 32px;  /* Airbnb mobile: 32px */
    line-height: 36px;  /* Airbnb mobile: 36px */
    letter-spacing: -0.96px;  /* Airbnb mobile: -0.96px */
    font-weight: 600;  /* Airbnb: 600 */
  }

  /* Airbnb mobile pattern: Inline header with chevron */
  .resource-center .rc-section-header {
    flex-wrap: nowrap;  /* Override tablet wrap - keep inline on mobile */
    align-items: center;
  }

  .resource-center .rc-section-title {
    font-size: 26px;  /* Airbnb mobile: 26px */
    line-height: 30px;
    flex: 1;
    min-width: 0;  /* Allow text truncation if needed */
    white-space: nowrap;  /* Force single line like Airbnb */
  }

  /* Hide "Show all" text, show chevron on mobile */
  .resource-center .rc-section-link {
    display: flex;
    align-items: center;
    padding: 8px;  /* Larger tap target */
    margin: -8px;
  }

  .resource-center .rc-section-link-text {
    display: none;
  }

  .resource-center .rc-section-link-chevron {
    display: block;
    width: 20px;
    height: 20px;
  }

  .resource-center .rc-section-link:hover {
    text-decoration: none;  /* No underline on chevron */
  }

  /* Fix Bootstrap row/col alignment - neutralize negative margins */
  .resource-center .row {
    margin-left: 0;
    margin-right: 0;
  }

  .resource-center .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .resource-center .rc-search {
    margin: 32px auto 18px;  /* Tight spacing: 18px gap to pills */
    max-width: 100%;
  }

  .resource-center .rc-search-input-wrapper {
    display: flex;
    align-items: center;
  }

  .resource-center .rc-search-input {
    flex: 1 1 auto !important;  /* Allow input to grow and fill available space */
    width: auto !important;
    min-width: 0;
    height: var(--rc-search-height);  /* Use variable: 56px on mobile */
    font-size: 16px;  /* Airbnb mobile: 16px */
    font-weight: 500;  /* Airbnb mobile: 500 weight */
    padding: 14px 60px 14px 24px !important;  /* Right padding for 48px button + spacing */
  }

  .resource-center .rc-search-input::placeholder {
    font-weight: 500;  /* Airbnb mobile: bolder placeholder */
  }

  /* Airbnb mobile: Show search button (prominent size like Airbnb) */
  .resource-center .rc-search-button {
    display: inline-flex !important;
    position: absolute;
    right: 5px;
    width: 48px;  /* Airbnb mobile: prominent 48px button */
    height: 48px;
  }

  .resource-center .rc-search-button svg {
    width: 22px;  /* Proportionally larger icon */
    height: 22px;
  }

  /* Allow topic rail to scroll outside its parent column */
  .resource-center .row:has(.rc-topic-rail) {
    overflow: visible;
  }

  .resource-center .col-12:has(.rc-topic-rail) {
    overflow: visible;
  }

  /* Airbnb mobile pattern: horizontal scroll carousel for pills */
  .resource-center .rc-topic-rail {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;  /* Airbnb: 8px gap between pills */
    margin-bottom: 68px;  /* 68px + 8px padding = 76px total */
    margin-left: calc(-1 * var(--rc-container-padding));
    margin-right: calc(-1 * var(--rc-container-padding));
    padding: 0 var(--rc-container-padding) 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Ensure scroll container works */
    width: calc(100% + (2 * var(--rc-container-padding)));
    max-width: none;
  }

  .resource-center .rc-topic-rail::-webkit-scrollbar {
    display: none;
  }

  /* Airbnb pattern: No gradient overlay on pills - clean edge-to-edge scroll */
  .resource-center .col-12:has(.rc-topic-rail) {
    position: relative;
    overflow: visible;
  }

  /* Removed: White gradient overlay was hiding pill content
   * Airbnb doesn't use scroll affordance gradients on mobile pills
   */

  /* Airbnb mobile pattern: Rounded pills with white background */
  .resource-center .rc-topic-pill {
    height: 42px;  /* Airbnb measured: 42px */
    padding: 11px 16px;  /* Airbnb measured: 11px 16px */
    font-size: 14px;  /* Airbnb measured: 14px */
    font-weight: 400;  /* Airbnb measured: 400 (normal) */
    color: rgb(34, 34, 34);  /* Airbnb: #222222 */
    background: rgb(255, 255, 255);  /* Airbnb: white background */
    border: 1px solid rgb(221, 221, 221);  /* Airbnb: light gray border */
    border-radius: 32px;  /* Rounded pill shape */
    flex-shrink: 0;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  }

  .resource-center .rc-topic-pill:hover {
    border-color: rgb(34, 34, 34);  /* Airbnb: dark border on hover */
    background: rgb(255, 255, 255);
  }

  /* Active pill state on mobile */
  .resource-center .rc-topic-pill.is-active {
    background: var(--hc-color-primary);
    border-color: var(--hc-color-primary);
    color: #fff;
  }

  .resource-center .rc-topic-pill.is-active::after {
    display: none;  /* No underline on mobile pills */
  }

  .resource-center .rc-topic-pill.is-active:hover {
    background: var(--hc-color-primary);
    border-color: var(--hc-color-primary);
  }

  .resource-center .rc-callouts {
    margin-top: 40px;   /* Proportionally compact on mobile */
    margin-bottom: 8px; /* Tight spacing to footer */
  }

  .resource-center .rc-callouts-heading {
    font-size: 26px;   /* Match section titles on mobile */
    line-height: 30px;
    margin-bottom: 24px;
  }

  .resource-center .rc-callouts-grid {
    grid-template-columns: 1fr;  /* Stack cards vertically on mobile */
  }

  /* Airbnb mobile pattern: Horizontal scroll carousel */
  .resource-center .rc-cards-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;  /* Align items to top, don't stretch */
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to edges like Airbnb */
    margin-left: calc(-1 * var(--rc-container-padding));
    margin-right: calc(-1 * var(--rc-container-padding));
    padding: 0 var(--rc-container-padding) 8px;
  }

  .resource-center .rc-cards-grid::-webkit-scrollbar {
    display: none;
  }

  /* Fixed card width for carousel - ~75% of viewport for peek effect */
  .resource-center .rc-cards-grid .rc-card {
    flex: 0 0 calc(75vw - 32px);
    min-width: calc(75vw - 32px);
    max-width: 280px;
  }

  /* Show all card - Airbnb mobile carousel pattern */
  .resource-center .rc-show-all-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(75vw - 32px);
    min-width: calc(75vw - 32px);
    max-width: 280px;
    height: auto;
    aspect-ratio: var(--rc-card-image-ratio);  /* Match card image aspect ratio */
    align-self: flex-start;  /* Don't stretch to match full card height */
    background: #f7f7f7;
    border-radius: var(--rc-card-image-radius, 16px);
    text-decoration: none;
    color: var(--hc-color-primary, #222);
    margin-right: var(--rc-container-padding);  /* Extra padding at end of carousel */
  }

  .resource-center .rc-show-all-card:hover {
    background: #ebebeb;
  }

  .resource-center .rc-show-all-text {
    font-family: var(--hc-font-family);
    font-size: 16px;
    font-weight: 500;
  }

  .resource-center .rc-skeleton-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
  }

  .resource-center .rc-card-title {
    font-size: 14px;
    line-height: 20px;
  }

  .resource-center .rc-card-description {
    font-size: 13px;
    line-height: 18px;
  }

  .resource-center.resource-center--search .resource-hero {
    padding-top: 16px;
  }

  .resource-center.resource-center--search .rc-search {
    margin: 0 0 64px 0;
  }

  .resource-center.resource-center--search .rc-results-header {
    margin-bottom: 48px;
  }

  .resource-center.resource-center--search .rc-search-initial {
    max-width: none;
    margin: 48px 0 0;
  }

  .resource-center.resource-center--search .rc-search-initial-title {
    font-size: 32px;
    line-height: 36px;
  }

  .resource-center.resource-center--search .rc-search-initial-hint {
    font-size: 18px;
    line-height: 24px;
  }

  .resource-center.resource-center--search.is-search-results-route .rc-results-header {
    margin: 48px 0 16px;
    max-width: none;
  }

  .resource-center.resource-center--search.is-search-results-route .rc-results-title {
    font-size: 32px;
    line-height: 36px;
  }

  .resource-center.resource-center--search.is-search-results-route .rc-results-meta {
    font-size: 18px;
    line-height: 24px;
  }

  .resource-center.resource-center--search.is-search-results-route .rc-search-results {
    max-width: none;
    margin-bottom: 24px;
  }

  .resource-center.resource-center--search.is-section-view .rc-results-header {
    margin-bottom: 34px;
  }

  .resource-center.resource-center--search.is-section-view .rc-results-title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 0;
  }

  .resource-center.resource-center--search.is-section-view .rc-section-breadcrumb {
    margin: 16px 0 33px;
    font-size: 14px;
    line-height: 20px;
  }

  .resource-center.resource-center--search.is-section-view .rc-search-result-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--rc-container-padding));
    margin-right: calc(-1 * var(--rc-container-padding));
    padding: 0 var(--rc-container-padding) 8px;
  }

  .resource-center.resource-center--search.is-section-view .rc-search-result-group::-webkit-scrollbar {
    display: none;
  }

  .resource-center.resource-center--search.is-section-view .rc-search-result {
    flex: 0 0 calc(75vw - 32px);
    min-width: calc(75vw - 32px);
    max-width: 280px;
  }

  .resource-center .rc-section:not(:first-of-type) {
    margin-top: 40px;  /* Proportionally compact on mobile */
  }
}

@media (min-width: 1128px) {
  .resource-center.resource-center--search.is-search-results-route.resource-center-container {
    padding-left: 104px;
    padding-right: 104px;
  }
}

/* ==========================================================================
   MINIMAL FOOTER (Airbnb pattern)
   Compact footer keeps icons visible when scrolled to bottom
   ========================================================================== */

.rc-minimal-footer {
  background: #1a5f5c;  /* Buggy teal - matches main footer */
  padding: 20px 0;
}

/* Airbnb-style show-all page baseline:
   short pages keep a stable content floor and fixed pre-footer breathing room;
   longer pages grow naturally and push footer down via normal flow. */
@media (min-width: 744px) {
  body#help.resource-section-route main#main-content {
    min-height: 740px;
  }

  body#help.resource-section-route .rc-minimal-footer {
    margin-top: 80px;
  }
}

.rc-footer-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Stacked layout: copyright above links (Airbnb pattern) */
.rc-footer-info {
  display: flex;
  flex-direction: row;  /* Single line on desktop */
  align-items: center;
  gap: 8px;
}

.rc-footer-copyright {
  color: #fff;
  font-size: 14px;
}

.rc-footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.rc-footer-separator {
  color: rgba(255, 255, 255, 0.5);
}

.rc-footer-link {
  color: #fff;
  text-decoration: none;
}

.rc-footer-link:hover {
  text-decoration: underline;
}

/* Social icons use .buggy-footer-social from footer.css */

/* Tablet/mobile footer adjustments */
@media (max-width: 1127px) {
  .rc-footer-content {
    padding: 0 40px;
  }
}

@media (max-width: 743px) {
  .rc-footer-content {
    padding: 0 24px;
    flex-direction: column;
    gap: 16px;
  }

  .rc-footer-info {
    flex-direction: column;  /* Stack vertically on mobile */
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .rc-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
  }

  .rc-minimal-footer .buggy-footer-social {
    order: -1;  /* Social icons above on mobile */
  }
}