/* ============================================================
   web.css — WEB DESIGN PAGE STYLES
   Loaded by web-design.html on top of style.css.
   Aesthetic: Editorial / magazine — large ghost text in the
   background, purple accents, clean process steps, and
   portfolio cards with clickable image upload areas.

   Sections:
     1.  Accent colour variables (purple theme)
     2.  Hero section
     3.  Process steps
     4.  Portfolio cards (with image upload)
     5.  Services list
     6.  CTA banner
     7.  Responsive overrides
   ============================================================ */


/* ============================================================
   1. ACCENT COLOUR OVERRIDE
   This page uses purple (#a855f7) as its accent colour.
   ============================================================ */
:root {
  --accent:      #a855f7;                /* bright purple */
  --accent-glow: rgba(168,85,247,0.3);   /* glow version */
  --accent-dim:  rgba(168,85,247,0.1);   /* very faint tint */
  --accent2:     #f59e0b;                /* warm amber, used sparingly */
  --blue:        #2563eb;                /* keep blue available for shared components */
}


/* ============================================================
   2. HERO SECTION
   The large "WEB" ghost text sits in the background as a
   decorative element. The content overlays it.
   ============================================================ */

.web-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;   /* needed for the ghost text to be absolutely positioned */
  overflow: hidden;
  padding-top: 80px;    /* clears the fixed nav */
}

/* Giant "WEB" text in the background — decorative only.
   It's enormous and faint, sitting behind all real content.
   pointer-events: none means you can still click through it.
   user-select: none means you can't accidentally highlight it. */
.web-hero__bg-text {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%); /* vertically centred */
  font-family: var(--font-display);
  font-size: clamp(12rem, 22vw, 22rem);
  line-height: 1;
  color: rgba(168,85,247,0.05); /* 5% opacity purple — barely visible */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Content sits in front of the ghost text */
.web-hero__content { position: relative; z-index: 1; }

/* "// Web Designer · UK Based · Available" line */
.web-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* Main heading — "WEBSITES THAT HIT DIFFERENT" */
.web-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 8.5rem);
  line-height: 0.92;
  color: var(--text);
  margin-bottom: 2rem;
}
/* The word "HIT" uses outline text — transparent fill, purple stroke */
.web-hero__title .outline {
  -webkit-text-stroke: 1px rgba(168,85,247,0.7);
  color: transparent;
}

/* Description paragraph */
.web-hero__desc {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.web-hero__desc strong { color: var(--text); }

/* Row of small pill badges (Available, Mobile-First, etc.) */
.web-hero__badges { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* Default badge style — dimmed */
.web-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.3rem 0.8rem;
  background: rgba(255,255,255,0.03);
}
/* The "Available" badge is highlighted purple */
.web-badge.active { color: var(--accent); border-color: var(--accent); }


/* ============================================================
   3. PROCESS STEPS
   Four steps displayed side by side in a bordered box.
   Each step has a big faint number, a coloured title, and description.
   On hover the step gets a subtle purple background tint.
   ============================================================ */

.process-section { padding: 6rem 0; background: var(--surface); }

/* The container for all four steps — one outer border wraps them all */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-top: 3rem;
  border: 1px solid var(--border); /* outer border around all steps */
}

/* Individual step */
.process-block {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border); /* dividing line between steps */
  position: relative;
  transition: background 0.3s;
}
.process-block:last-child { border-right: none; } /* no border after the last step */
.process-block:hover { background: rgba(168,85,247,0.05); }

/* The large faint step number (01, 02, 03, 04) */
.process-block__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: rgba(168,85,247,0.2); /* very faint purple */
  line-height: 1;
  margin-bottom: 1rem;
}

/* The step title in purple */
.process-block__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.process-block__desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }


/* ============================================================
   4. PORTFOLIO CARDS (with image upload)
   Each card is a 16:9 area. Before you upload an image it
   shows a dashed border with a placeholder icon and hint text.
   After upload, your image fills the card.
   The card info (name, tags, link) floats over the bottom
   via a gradient overlay.
   ============================================================ */

.portfolio-section { padding: 6rem 0; }

/* Two-column grid with 2px gaps */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 3rem;
}

/* Individual card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 16/10; /* slightly taller than widescreen for visual balance */
  display: flex;
  align-items: flex-end; /* info sits at the bottom */
  transition: border-color 0.3s;
}
.portfolio-card:hover { border-color: var(--accent); }

/* .wide makes the first card span both columns (full width) */
.portfolio-card.wide { grid-column: span 2; aspect-ratio: 16/7; }

/* --- Image upload area ---
   Fills the whole card. Clicking it opens a file picker.
   pointer events are managed in JS so the info overlay
   doesn't interfere with clicking. */
.portfolio-card__img-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

/* Once an image is uploaded, it fills the area with cover scaling.
   On hover the image very slightly zooms in (Ken Burns effect). */
.portfolio-card__img-area img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.portfolio-card:hover .portfolio-card__img-area img { transform: scale(1.04); }

/* --- Upload placeholder (shown before an image is added) ---
   A dashed bordered box with an icon and hint text.
   Hovering changes the border to purple and the background dims. */
.portfolio-card__upload-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: var(--bg2);
  border: 2px dashed rgba(168,85,247,0.25);
  transition: border-color 0.3s, background 0.3s;
}
.portfolio-card__upload-placeholder:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
/* The SVG icon fades in on hover */
.portfolio-card__upload-placeholder svg { opacity: 0.4; transition: opacity 0.3s; }
.portfolio-card__upload-placeholder:hover svg { opacity: 0.8; }

/* Hint text inside the placeholder */
.upload-hint {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}
/* Sub-hint on the second line */
.upload-hint span {
  display: block;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.2);
  margin-top: 0.2rem;
}

/* The hidden file input — never shown, triggered by clicking the area in JS */
input[type="file"].img-file-input { display: none; }

/* --- Card info overlay ---
   Floats above the image at the bottom.
   A gradient fade from transparent (top) to near-black (bottom)
   makes the text readable over any image. */
.portfolio-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(5,5,10,0.95));
  padding: 3rem 1.5rem 1.5rem;
  z-index: 2; /* above the image */
}

.portfolio-card__num  { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); margin-bottom: 0.3rem; }
.portfolio-card__name { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); }

/* Row of small tag labels */
.portfolio-card__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.portfolio-tag { font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* "↗ Visit Live Site" link */
.portfolio-link { display: inline-block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); letter-spacing: 0.08em; }
.portfolio-link:hover { text-decoration: underline; }


/* ============================================================
   5. SERVICES LIST
   A stacked list of services with number, name, tags, arrow.
   The arrow slides right on hover to invite interaction.
   ============================================================ */

.services-section { padding: 6rem 0; background: var(--surface); }

.services-list { margin-top: 3rem; }

/* One service row */
.service-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
  cursor: default;
}
/* Arrow slides right on row hover — transition defined on the arrow */
.service-row:hover .service-row__arrow { transform: translateX(6px); color: var(--accent); }

/* Large faint number (01, 02, etc.) */
.service-row__num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: rgba(168,85,247,0.3); /* faint purple */
  min-width: 3rem; /* fixed width keeps names aligned */
}

/* Service name — large display font */
.service-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--text);
  flex: 1; /* takes all remaining width */
}

/* Small tags to the right of the name */
.service-row__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.service-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
}

/* Arrow on the far right — transitions on hover above */
.service-row__arrow {
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
}


/* ============================================================
   6. CALL-TO-ACTION BANNER
   A bordered box with a heading and a button.
   The background uses a subtle gradient blending purple and blue.
   ============================================================ */

.web-cta { padding: 6rem 0; }

/* The inner bordered box */
.web-cta__inner {
  border: 1px solid var(--border);
  padding: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  /* gradient tints from two colours — very subtle */
  background: linear-gradient(135deg, rgba(168,85,247,0.05), rgba(37,99,235,0.05));
}

.web-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--text);
  line-height: 1.1;
}
/* "website" is purple */
.web-cta__title span { color: var(--accent); }


/* ============================================================
   7. RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
  /* Portfolio cards: single column on mobile (two columns too cramped) */
  .portfolio-grid { grid-template-columns: 1fr; }
  /* Wide card loses its spanning on mobile (only one column anyway) */
  .portfolio-card.wide { grid-column: span 1; aspect-ratio: 16/10; }
  /* Process steps: 2 columns instead of 4 on tablet */
  .process-steps { grid-template-columns: 1fr 1fr; }
  /* Steps: remove right border, add bottom border for vertical stacking */
  .process-block { border-right: none; border-bottom: 1px solid var(--border); }
  /* CTA box: less padding on mobile */
  .web-cta__inner { padding: 2.5rem 1.5rem; }
}
@media (max-width: 480px) {
  /* Process steps: single column on small phones */
  .process-steps { grid-template-columns: 1fr; }
}