/*
 * Author: Manoj Mathangadeera
 * Contact: aivotandra@gmail.com / www.aivotandra.com
 * Company: Adeon Bridge Technology - Dubai, UAE / www.adeon.ae
 * Copyright (c) 2026 Manoj Mathangadeera. All rights reserved.
 *
 * Project: JJ Prime Properties
 * Client: ATTESTAR Private Limited - Sri Lanka
 *
 * File Name: assets/css/components.css
 * File Description: Component styles: buttons, cards, forms, gallery/lightbox, hero, and other reusable UI components.
 */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-charcoal);
}

.btn--gold {
  background: var(--gradient-gold);
  color: var(--color-ink);
}

.btn--gold:hover {
  filter: brightness(1.05);
}

.btn--outline {
  border-color: currentColor;
  color: var(--color-ink);
}

.btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.section--dark .btn--outline {
  color: var(--color-white);
}

.section--dark .btn--outline:hover {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--sm {
  padding: 0.6rem 1.25rem;
  font-size: var(--fs-eyebrow);
}

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--duration-med) var(--ease-standard), transform var(--duration-med) var(--ease-standard);
}

.card:hover {
  box-shadow: 0 24px 48px -24px rgba(15, 15, 15, 0.25);
  transform: translateY(-4px);
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-med) var(--ease-standard);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__body {
  padding: var(--space-md);
}

.card__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2xs);
}

.card__text {
  color: var(--color-slate);
  font-size: var(--fs-small);
}

.card--status {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 2;
}

/* ---- Pillar / feature blocks ---- */
.pillar {
  padding: var(--space-lg);
  border-top: 2px solid transparent;
  border-image: var(--gradient-gold) 1;
  background: var(--color-white);
}

.pillar__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-md);
}

/* ---- Quick facts ---- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.facts__item {
  padding: var(--space-md);
  border-left: var(--border-hairline);
}

.facts__item:first-child {
  border-left: none;
}

.facts__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate);
  margin-bottom: var(--space-3xs);
}

.facts__value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
}

@media (max-width: 760px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .facts__item:nth-child(3) {
    border-left: none;
  }
  .facts__item:nth-child(odd) {
    border-left: none;
  }
}

/* ---- Forms ---- */
.form-field {
  margin-bottom: var(--space-md);
}

.form-field label,
.form-field legend {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.form-field .hint {
  font-size: var(--fs-eyebrow);
  color: var(--color-slate);
  font-weight: 400;
  display: block;
  margin-top: var(--space-3xs);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select {
  width: 100%;
  border: 1px solid var(--color-mist);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: var(--fs-body);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-gold-deep);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

fieldset {
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0 0 var(--space-md);
}

.checkbox-grid,
.radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs) var(--space-md);
}

@media (max-width: 560px) {
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}

.check-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 400;
}

.check-option input {
  margin-top: 3px;
  accent-color: var(--color-gold-deep);
}

.form-required {
  color: var(--color-error);
}

.form-note {
  background: var(--color-white);
  border: var(--border-hairline);
  border-left: 3px solid var(--color-gold-deep);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-slate);
  margin-bottom: var(--space-lg);
}

/* ---- Gallery / Lightbox ---- */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.gallery-tabs button {
  background: var(--color-white);
  border: var(--border-hairline);
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}

.gallery-tabs button[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: none;
  padding: 0;
  background: var(--color-charcoal);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-med) var(--ease-standard);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-sm);
  background: linear-gradient(0deg, rgba(15,15,15,0.75), transparent);
  color: var(--color-white);
  font-size: var(--fs-eyebrow);
  text-align: left;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption {
  opacity: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.92);
  padding: var(--space-lg);
}

.lightbox.is-open {
  display: flex;
}

.lightbox__figure {
  max-width: min(1100px, 90vw);
  max-height: 85vh;
  position: relative;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.lightbox__caption {
  color: var(--color-mist);
  text-align: center;
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}

.lightbox__close {
  top: -56px;
  right: 0;
}

.lightbox__prev {
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  .lightbox__prev { left: 0; }
  .lightbox__next { right: 0; }
  .lightbox__close { top: -48px; right: 0; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.75) 100%);
}

.hero__content {
  padding-block: var(--space-2xl) var(--space-xl);
  max-width: 900px;
}

.hero__content h1 {
  color: var(--color-white);
}

.hero__content p.lead {
  color: rgba(255, 255, 255, 0.85);
  margin-block: var(--space-md) var(--space-lg);
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---- Page header (non-hero pages) ---- */
.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--border-hairline);
  background: var(--color-white);
}

/* ---- Pattern accent ---- */
.pattern-accent {
  position: absolute;
  width: 380px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* ---- Hexagon pattern wash for dark sections (trial: index.html CTA only) ----
   Tiles assets/patterns/pattern-hexagon-gold.svg at low opacity as a subtle
   textured backdrop. Opt-in via .has-hexagon-pattern alongside .section--dark
   so it doesn't affect any section that hasn't been given the class. */
.section--dark.has-hexagon-pattern {
  position: relative;
  overflow: hidden;
}

.section--dark.has-hexagon-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../patterns/pattern-hexagon-gold.svg");
  
  /* 1. Stretch to full height, scale width proportionally */
  background-size: auto 100%;
  
  /* 2. Center the primary tile horizontally and vertically */
  background-position: center;
  
  /* 3. Repeat only left and right */
  background-repeat: repeat-x;
  
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}


/* ---- Team ---- */
.team-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

@media (max-width: 700px) {
  .team-card {
    grid-template-columns: 1fr;
  }

  .team-card__media {
    aspect-ratio: 1;
    height: auto;
  }
}

.team-card__media {
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-mist);
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__role {
  color: var(--color-gold-deep);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

/* ---- Founder (square photo pinned to the top, never stretched) ---- */
.founder {
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.founder__top {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.founder__media {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-mist);
}

.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__intro p {
  margin-top: var(--space-sm);
}

@media (max-width: 700px) {
  .founder__top {
    grid-template-columns: 1fr;
  }

  .founder__media {
    max-width: 220px;
  }

  .founder__body.grid--2 {
    grid-template-columns: 1fr;
  }
}

/* ---- Value list ---- */
.value-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}

@media (max-width: 700px) {
  .value-list { grid-template-columns: 1fr; }
}

.value-list__item h3 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.value-list__item p {
  color: var(--color-slate);
  font-size: var(--fs-small);
}

/* ---- Alert / form status ---- */
.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

.alert--todo {
  background: #fff7e6;
  border: 1px dashed var(--color-gold-deep);
  color: var(--color-charcoal);
}