/**
 * ==========================================================================
 * SINGLE TEMPLATE - LOGGED OUT VIEW
 * ==========================================================================
 *
 * Styles for the public-facing single template page shown to visitors
 * who are not logged in. Includes the hero header, content/sidebar layout,
 * reviews, pricing banner, related documents, and page footer.
 *
 * Depends on: _variables.css, components/buttons.css, components/badges.css
 * ==========================================================================
 */

/* ==========================================================================
   LAYOUT OVERRIDE
   ========================================================================== */

.theme-verimus {
  max-width: 100% !important;
}

/* ==========================================================================
   HERO HEADER
   ========================================================================== */

.tpl-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--base-fg);
  padding: var(--spacing-8) 13rem var(--spacing-10) 13rem;
}

.tpl-hero__inner h1 {
  width: 50%;
}

.tpl-hero__description {
  width: 60%;
}

.tpl-hero__category {
  padding: var(--spacing-0-5) var(--spacing-2);
}

.tpl-hero__actions .v-btn--outline {
  background-color: var(--white);
  color: var(--color-primary);
  margin-left: var(--spacing-2);
}

.tpl-hero__actions .v-btn--outline img {
  color: var(--color-primary);
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.tpl-main-container {
  margin-bottom: var(--spacing-20);
}

.tpl-content {
  background-color: var(--card-bg);
  margin: var(--spacing-6) 6rem;
  padding: var(--spacing-8) var(--spacing-6);
}

/* Metadata badges */
.tpl-meta .v-badge {
  margin: 0 var(--spacing-2) var(--spacing-2) 0;
  padding: var(--spacing-1);
}

.tpl-meta .v-badge .label {
  color: var(--gray-400);
  font-weight: var(--font-weight-bold);
}

.tpl-meta .v-badge .value {
  color: var(--gray-500);
}

/* Left/right split */
.tpl-content__left {
  border-right: 1px solid var(--border-color-light);
}

.tpl-content__right {
  padding-left: var(--spacing-12);
}

/* Feature cards in sidebar */
.tpl-feature-card {
  border-color: var(--white);
  padding: var(--spacing-4);
}

.tpl-feature-card img {
  width: 1.25rem;
  height: 3rem;
}

/* ==========================================================================
   REVIEWS SECTION
   ========================================================================== */

.tpl-reviews-heading {
  margin: var(--spacing-16) 0 var(--spacing-8) 0;
}

.tpl-reviews {
  margin: 0 6rem var(--spacing-16) 6rem;
  column-gap: var(--spacing-6);
}

.tpl-review-card {
  border-color: var(--white);
  padding: var(--spacing-10) var(--spacing-16) var(--spacing-6) var(--spacing-8);
}

/* ==========================================================================
   PRICING BANNER
   ========================================================================== */

.tpl-pricing-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--base-fg);
  padding: var(--spacing-12) 10rem;
}

.tpl-pricing-banner__description {
  padding-top: var(--spacing-12);
}

/* ==========================================================================
   RELATED DOCUMENTS
   ========================================================================== */

.tpl-more-documents {
  padding: var(--spacing-20) 22rem;
  background-color: var(--color-primary-light);
}

/* ==========================================================================
   LOGGED-OUT HEADER/FOOTER (shared by all logged-out pages)
   ========================================================================== */

.empty-page-header {
  background-color: var(--white);
}

.top-header-logo-logout {
  padding: var(--spacing-12);
}

.top-header-logo-logout .btn-visit-text {
  color: var(--gray-500);
}

.bottom-header-logo {
  padding: var(--spacing-12) var(--spacing-12) 0 var(--spacing-12);
}

.bottom-header-logo img {
  height: 40px;
  object-fit: contain;
}

.bottom-header-text {
  font-size: var(--font-size-xs);
}

.support-icon {
  width: 7rem;
}

/* ==========================================================================
   RESPONSIVE — 1280px (wide desktop down)
   ========================================================================== */

@media screen and (max-width: 1280px) {
  .tpl-hero {
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-10) var(--spacing-8);
  }

  .tpl-hero__inner .tpl-hero__category {
    margin-bottom: var(--spacing-4);
  }

  .tpl-hero__inner h1 {
    width: 100%;
  }

  .tpl-hero__description {
    width: 100%;
  }

  .tpl-hero__actions {
    flex-direction: column;
  }

  .tpl-hero__actions .v-btn--outline {
    margin: var(--spacing-4) 0 0 0;
  }

  .tpl-main-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .tpl-content {
    border-right: 0;
    margin: 0;
    padding: var(--spacing-8) var(--spacing-4);
  }

  .tpl-meta .v-badge {
    margin-bottom: var(--spacing-2);
  }

  .tpl-reviews-heading {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
  }

  .tpl-review-card {
    margin: var(--spacing-4) var(--spacing-4) 0 var(--spacing-4);
  }

  .tpl-pricing-banner {
    padding: var(--spacing-4);
    margin: 0;
  }

  .tpl-pricing-banner img {
    max-width: 100%;
  }

  .tpl-more-documents {
    padding: var(--spacing-4) var(--spacing-8) var(--spacing-12) var(--spacing-8);
  }
}

/* ==========================================================================
   RESPONSIVE — 1024px (tablet/desktop down)
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .tpl-content__left {
    border-right: 0;
  }

  .tpl-content__right {
    padding: 0;
    margin-bottom: var(--spacing-8);
  }

  .tpl-reviews {
    margin: 0 var(--spacing-4) var(--spacing-12) var(--spacing-4);
  }
}

/* ==========================================================================
   RESPONSIVE — 767px (mobile)
   ========================================================================== */

@media screen and (max-width: 767px) {
  .tpl-hero {
    padding: var(--spacing-4) var(--spacing-8) var(--spacing-8) var(--spacing-8);
  }

  .tpl-hero__inner {
    text-align: center;
  }

  .tpl-reviews {
    margin: 0 0 var(--spacing-8) 0;
    flex-direction: column;
  }

  .tpl-pricing-banner__description {
    padding: 0 0 var(--spacing-4) var(--spacing-4);
    text-align: center;
  }

  .top-header-logo-logout {
    padding: var(--spacing-6) var(--spacing-4);
  }

  .top-header-logo-logout .btn-light {
    max-width: 136px;
  }

  .tpl-content__right {
    padding-left: 0;
  }

  .tpl-review-card {
    padding: var(--spacing-10) var(--spacing-8) var(--spacing-6) var(--spacing-8);
  }
}

/* ==========================================================================
   RESPONSIVE — 480px (small phone)
   ========================================================================== */

@media screen and (max-width: 480px) {
  .tpl-hero .notice-sign {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .tpl-hero .notice-sign .users-star-rate {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
  }

  .tpl-hero .notice-sign .suitable {
    align-items: center;
    margin: auto;
  }
}