/* ============================================================
   ORHASHI — ABOUT PAGE STYLES
   assets/css/pages/about.css
   ============================================================ */

/* ── Masonry / gallery within about ──────────────────────── */
.img-zoom-container img,
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Space cards (floor cards) ───────────────────────────── */
.space-floor-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  height: 100%;
  transition: transform .4s ease, box-shadow .4s ease;
}
.space-floor-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* ── Booking process steps ───────────────────────────────── */
/*
   FIX: The connecting line must span between the centres
   of the 3 step circles. Each col is col-md-4 (33.33%).
   The circle is 80px wide, centred in its col.
   
   Line starts at centre of col-1 and ends at centre of col-3.
   Left edge of col-1 centre = 16.666% (half of 33.33%)
   Right edge of col-3 centre = 100% - 16.666% = 83.333%
   So left = 16.666%, width = 83.333% - 16.666% = 66.666%
   
   The line sits at the vertical centre of the circle (40px from top
   of the step circle wrapper). The process row has no top padding,
   so we use top: 40px (half of 80px circle height).
*/
.process-step-row {
  position: relative;
}
.process-connecting-line {
  display: none; /* hidden by default; shown on lg via utility class */
  position: absolute;
  top: 40px; /* vertical centre of the 80px circle */
  left: calc(16.6667% + 40px);  /* centre of circle 1 */
  right: calc(16.6667% + 40px); /* centre of circle 3 */
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-primary-tint-md),
    var(--color-primary),
    var(--color-primary-tint-md)
  );
  z-index: 0;
}
/* Show on large screens only */
@media (min-width: 992px) {
  .process-connecting-line { display: block; }
}

.process-step-circle {
  width: 80px;
  height: 80px;
  background: #fff;
  border: 2px solid var(--color-primary-tint-md);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1; /* above the line */
  box-shadow: var(--shadow-md);
  transition: all .3s ease;
}
.process-step-circle:hover,
.process-step-col:hover .process-step-circle {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-green-md);
}
.process-step-badge {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  box-shadow: 0 2px 8px rgba(67,58,107,.4);
}

/* ── Feature cards ────────────────────────────────────────── */
.feature-card {
  background: var(--color-primary-tint);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--color-primary-tint-md);
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.feature-card-icon {
  width: 64px; height: 64px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1.25rem;
  box-shadow: var(--shadow-green-md);
}

/* ── Duration booking cards ──────────────────────────────── */
.duration-book-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.duration-book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(42,34,64,.15);
}

/* ── Rooftop floor badge ─────────────────────────────────── */
.floor-badge-rooftop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--color-sky-tint);
  color: var(--color-sky);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .35rem .85rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
}