/* ==========================================================================
   Asia Finest — Layout Utilities & Structural Classes
   ========================================================================== */

/* Container */
.af-container {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sections */
.af-section {
  padding: var(--af-space-normal) 0;
}

.af-section--large {
  padding: var(--af-space-large) 0;
}

.af-section--compact {
  padding: var(--af-space-compact) 0;
}

/* Section head — flex row with title left, optional description right */
.af-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.af-section-head h2 {
  margin: 0;
  font-family: var(--af-serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .01em;
}

.af-section-head p {
  margin: 0;
  max-width: 62ch;
  color: rgba(248, 248, 248, .76);
}

/* Divider */
.af-divider {
  height: 1px;
  background: rgba(248, 248, 248, .10);
  margin-top: 18px;
}

/* Grid systems */
.af-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.af-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Main content area — prevent footer floating up on short pages */
.af-main {
  min-height: calc(100vh - 76px - 200px);
}

/* Page header — used on archive / single templates */
.af-page-header {
  padding: var(--af-space-large) 0 var(--af-space-normal);
  text-align: center;
}

/* Accessibility — WordPress standard screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
  white-space: nowrap;
}

.screen-reader-text:focus {
  background-color: var(--af-obsidian);
  clip: auto !important;
  clip-path: none;
  color: var(--af-ivory);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}