/* =========================================================
   InVaal [016] — V2
   Component System

   Purpose:
   Styles reusable UI components used throughout InVaal.

   Components:
   - Buttons
   - Cards
   - Discovery cards
   - News cards
   - Business cards
   - Opportunity cards
   - Creative cards
   - Event cards
   - Community cards
   - Category cards
   - Promotion panels
   - Images
   - Badges
   - Interactive states

   Layout rules belong in layout.css.
   Responsive rules belong in responsive.css.
========================================================= */


/* =========================================================
   01. BUTTONS
========================================================= */

.button {
  /*
    Buttons are shared across the entire platform so
    CTAs remain visually consistent.
  */
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  min-height: 44px;

  padding:
    var(--space-3)
    var(--space-5);

  border: 1px solid transparent;

  border-radius: var(--radius-md);

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}


.button:hover {
  /*
    Slight upward movement gives the button a subtle
    interactive response.
  */
  transform: translateY(-1px);

  text-decoration: none;
}


.button:active {
  /*
    Return the button to its original position when clicked.
  */
  transform: translateY(0);
}


/* Primary button */

.button-primary {
  color: var(--color-text-inverse);

  background-color: var(--color-brand);
}


.button-primary:hover {
  color: var(--color-text-inverse);

  background-color: var(--color-brand-light);
}


/* Secondary button */

.button-secondary {
  color: var(--color-text);

  background-color: transparent;

  border-color: var(--color-border-dark);
}


.button-secondary:hover {
  color: var(--color-text);

  background-color: var(--color-background-muted);

  border-color: var(--color-text);
}


/* =========================================================
   02. DISCOVERY CARDS
========================================================= */

.discovery-card {
  /*
    Discovery cards are the main entry points into
    the different areas of the InVaal platform.
  */
  display: flex;

  flex-direction: column;

  min-height: 250px;

  padding: var(--space-6);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}


.discovery-card:hover {
  /*
    Elevation indicates that the card is interactive.
  */
  transform: translateY(-4px);

  border-color: var(--color-border-dark);

  box-shadow: var(--shadow-md);
}


.discovery-card a {
  /*
    Push the action link toward the bottom of the card
    when cards have different amounts of text.
  */
  margin-top: auto;
}


/* =========================================================
   03. GENERIC CONTENT CARD
   ---------------------------------------------------------
   Shared foundation for dynamic content.
========================================================= */

.content-card {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.content-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


/* =========================================================
   04. CARD IMAGE
========================================================= */

.card-image {
  /*
    Provides a predictable image area for cards.
  */
  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.card-content {
  /*
    Keeps textual content separated from the image.
  */
  padding: var(--space-5);
}


/* =========================================================
   05. NEWS CARDS
========================================================= */

.news-card {
  /*
    News cards use the shared content-card structure.
  */
  display: flex;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.news-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


.news-card-image {
  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.news-card-content {
  display: flex;

  flex-direction: column;

  flex: 1;

  padding: var(--space-5);
}


.news-card-category {
  margin-bottom: var(--space-3);
}


.news-card-title {
  font-size: var(--font-size-xl);

  font-weight: var(--font-weight-bold);

  line-height: var(--line-height-heading);
}


.news-card-excerpt {
  margin-top: var(--space-3);

  color: var(--color-text-muted);
}


.news-card-link {
  /*
    Keeps the action at the bottom of the card.
  */
  margin-top: auto;

  padding-top: var(--space-5);

  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-semibold);
}


/* =========================================================
   06. BUSINESS CARDS
========================================================= */

.business-card {
  /*
    Business listings need to communicate information
    quickly because users may scan many businesses.
  */
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.business-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


.business-card-image {
  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;
}


.business-card-content {
  padding: var(--space-5);
}


.business-card-meta {
  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

  margin-top: var(--space-3);
}


.business-card-location {
  color: var(--color-text-light);

  font-size: var(--font-size-sm);
}


.business-card-action {
  display: inline-flex;

  margin-top: var(--space-5);

  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-semibold);
}


/* =========================================================
   07. BUSINESS STATUS BADGES
========================================================= */

.business-status {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  padding:
    var(--space-1)
    var(--space-3);

  border-radius: var(--radius-pill);

  font-size: var(--font-size-xs);

  font-weight: var(--font-weight-semibold);
}


.business-status-open {
  color: var(--color-success);

  background-color: rgba(22, 128, 60, 0.10);
}


.business-status-closed {
  color: var(--color-error);

  background-color: rgba(180, 35, 24, 0.10);
}


/* =========================================================
   08. OPPORTUNITY CARDS
========================================================= */

.opportunity-card {
  display: flex;

  flex-direction: column;

  min-height: 240px;

  padding: var(--space-6);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.opportunity-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


.opportunity-card a {
  margin-top: auto;

  padding-top: var(--space-5);
}


/* =========================================================
   09. CREATIVE CARDS
========================================================= */

.creative-card {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.creative-card:hover {
  transform: translateY(-4px);

  box-shadow: var(--shadow-md);
}


.creative-card-image {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;
}


.creative-card-content {
  padding: var(--space-5);
}


.creative-card-role {
  margin-top: var(--space-2);

  color: var(--color-accent);

  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-semibold);
}


/* =========================================================
   10. EVENT CARDS
========================================================= */

.event-card {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.event-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


.event-card-image {
  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.event-card-content {
  padding: var(--space-5);
}


/* =========================================================
   11. EVENT DATE
========================================================= */

.event-date {
  display: inline-flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-width: 64px;

  padding: var(--space-2);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background-color: var(--color-background-soft);

  text-align: center;
}


.event-date-day {
  font-size: var(--font-size-2xl);

  font-weight: var(--font-weight-bold);

  line-height: 1;
}


.event-date-month {
  margin-top: var(--space-1);

  color: var(--color-text-muted);

  font-size: var(--font-size-xs);

  font-weight: var(--font-weight-bold);

  text-transform: uppercase;
}


/* =========================================================
   12. COMMUNITY CARDS
========================================================= */

.community-card {
  /*
    Community cards are intentionally simple because
    the action itself should remain obvious.
  */
  display: flex;

  flex-direction: column;

  padding: var(--space-6);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background-soft);
}


.community-card a {
  margin-top: auto;

  padding-top: var(--space-5);

  font-weight: var(--font-weight-semibold);
}


/* =========================================================
   13. CATEGORY CARDS
========================================================= */

.category-card {
  border: 1px solid var(--color-border);

  background-color: var(--color-background);

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}


.category-card span:first-child {
  /*
    The first span contains the category icon.
  */
  font-size: 1.75rem;
}


.category-card:hover {
  /*
    Category navigation should feel interactive without
    having the same heavy elevation as content cards.
  */
  border-color: var(--color-accent);

  background-color: var(--color-background-soft);

  transform: translateY(-2px);

  text-decoration: none;
}


/* =========================================================
   14. PROMOTION PANEL
========================================================= */

.promotion-panel {
  /*
    Commercial content receives a distinct visual treatment
    so users can distinguish advertising from editorial
    content.
  */
  background-color: var(--color-background-dark);

  color: var(--color-text-inverse);
}


.promotion-panel .section-title {
  max-width: 800px;

  color: var(--color-text-inverse);
}


.promotion-panel .section-description {
  color: var(--color-gray-300);
}


/* =========================================================
   15. FINAL CTA
========================================================= */

.final-cta {
  padding: var(--space-12);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  background-color: var(--color-background-soft);
}


/* =========================================================
   16. FEATURED CONTENT
========================================================= */

.featured-card {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-background);

  box-shadow: var(--shadow-sm);
}


.featured-card-image {
  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.featured-card-content {
  padding: var(--space-5);
}


/* =========================================================
   17. BADGES
========================================================= */

.badge {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  padding:
    var(--space-1)
    var(--space-3);

  border-radius: var(--radius-pill);

  font-size: var(--font-size-xs);

  font-weight: var(--font-weight-semibold);

  line-height: 1.2;
}


.badge-accent {
  color: var(--color-black);

  background-color: var(--color-accent);
}


.badge-neutral {
  color: var(--color-text);

  background-color: var(--color-gray-100);
}


/* =========================================================
   18. IMAGE PLACEHOLDER
   ---------------------------------------------------------
   Dynamic data may not always contain an image.

   JavaScript can assign this class when an image
   isn't available.
========================================================= */

.image-placeholder {
  /*
    Gives missing images a deliberate appearance instead
    of leaving a broken image icon.
  */
  display: grid;

  place-items: center;

  width: 100%;

  min-height: 180px;

  color: var(--color-text-light);

  background-color: var(--color-gray-100);
}


/* =========================================================
   19. HOVER IMAGE EFFECT
========================================================= */

.card-media {
  overflow: hidden;
}


.card-media img {
  transition:
    transform var(--transition-slow);
}


.card:hover .card-media img,
.content-card:hover .card-media img {
  /*
    Very subtle zoom effect.

    This should remain restrained because InVaal is an
    information platform rather than an entertainment site.
  */
  transform: scale(1.03);
}


/* =========================================================
   20. DIVIDERS
========================================================= */

.divider {
  width: 100%;

  height: 1px;

  margin-block: var(--space-8);

  background-color: var(--color-border);
}


/* =========================================================
   21. LOADING SKELETON
   ---------------------------------------------------------
   Used later when dynamic JSON content is loading.
========================================================= */

.skeleton {
  /*
    Gives us a reusable loading placeholder without
    requiring an external library.
  */
  min-height: 20px;

  border-radius: var(--radius-sm);

  background-color: var(--color-gray-200);

  animation:
    skeleton-pulse 1.5s ease-in-out infinite;
}


@keyframes skeleton-pulse {

  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }

}


/* =========================================================
   22. ERROR MESSAGE
========================================================= */

.error-message {
  padding: var(--space-5);

  border: 1px solid rgba(180, 35, 24, 0.25);

  border-radius: var(--radius-md);

  color: var(--color-error);

  background-color: rgba(180, 35, 24, 0.05);
}


/* =========================================================
   23. SUCCESS MESSAGE
========================================================= */

.success-message {
  padding: var(--space-5);

  border: 1px solid rgba(22, 128, 60, 0.25);

  border-radius: var(--radius-md);

  color: var(--color-success);

  background-color: rgba(22, 128, 60, 0.05);
}


/* =========================================================
   24. FORM COMPONENT FOUNDATION
   ---------------------------------------------------------
   We'll build the actual submission forms later,
   but establish consistent controls now.
========================================================= */

.form-group {
  display: flex;

  flex-direction: column;

  gap: var(--space-2);
}


.form-label {
  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-semibold);
}


.form-input,
.form-textarea,
.form-select {
  width: 100%;

  padding:
    var(--space-3)
    var(--space-4);

  border: 1px solid var(--color-border-dark);

  border-radius: var(--radius-md);

  color: var(--color-text);

  background-color: var(--color-background);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-accent);

  outline: none;

  box-shadow: var(--focus-ring);
}


.form-textarea {
  min-height: 160px;

  resize: vertical;
}


/* =========================================================
   25. MOBILE COMPONENT ADJUSTMENTS
========================================================= */

@media (max-width: 768px) {

  .button {
    /*
      Keep mobile buttons comfortable to tap.
    */
    min-height: 46px;

    padding-inline: var(--space-4);
  }


  .promotion-panel,
  .final-cta {
    padding: var(--space-8);
  }


  .card-content,
  .news-card-content,
  .business-card-content,
  .creative-card-content,
  .event-card-content {
    padding: var(--space-4);
  }

}