/* ==========================================================================
   HOME PAGE STYLES — Udet Jasso Artist Portfolio
   ==========================================================================

   Styles for the homepage (index.html). Four sections:

   1. Hero — Full-viewport welcome with artist name, tagline, and CTA
   2. About — Two-column bio panel with portrait image
   3. Featured Work — Responsive grid of artwork categories
   4. Instagram — Follow call-to-action card

   Depends on css/styles.css being loaded first for:
   - CSS custom properties (colors, fonts, spacing, transitions)
   - Shared classes (.btn, .section-title, .content-panel, .reveal, .sr-only)
   - Global reset and base typography
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 1: Hero
   --------------------------------------------------------------------------
   Fills the entire viewport (min-height: 100vh) and centers the content
   using flexbox. The background is intentionally transparent so the
   floating bubble background (from styles.css) shows through.

   Layering: bubbles sit at z-index 0, hero content at z-index 1,
   navigation at z-index 1000.
   -------------------------------------------------------------------------- */

.hero {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: var(--space-xl);
   position: relative;
   z-index: 1; /* above bubbles, below nav */
}

/* Inner wrapper — constrains content width and adds vertical spacing */
.hero-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-lg);
   max-width: 900px;
}

/* Artist name in Metal Mania display font.
   clamp() provides fluid sizing: 3rem on small screens, 8vw in the middle,
   capped at 7rem on large screens. No media queries needed. */
.hero-title {
   font-family: var(--font-heading);
   font-size: clamp(3.5rem, 10vw, 9rem);
   color: var(--color-text);
   line-height: 1.1;
   letter-spacing: 0.03em;
   /* Pink text-shadow glow — creates the ethereal, luminous effect
      as if the name is softly radiating in the darkness */
   text-shadow:
      0 0 40px rgba(216, 167, 177, 0.4),
      0 0 80px rgba(216, 167, 177, 0.2);
}

/* Tagline beneath the name — EB Garamond italic for a refined,
   understated contrast to the bold display heading */
.hero-tagline {
   font-family: var(--font-body);
   font-size: clamp(1rem, 2.5vw, 1.5rem);
   color: var(--color-text);
   opacity: 0.8;
   font-style: italic;
   letter-spacing: 0.05em;
   max-width: 600px;
}

/* Hero CTA button inherits .btn styling from styles.css.
   Margin-top adds breathing room between tagline and button. */
.hero-content .btn {
   margin-top: var(--space-md);
   background-color: transparent;
   color: #D8A7B1;
   border-color: #D8A7B1;
   border-radius: 12px;
   padding: 0.85rem 2.5rem;
   font-size: 1.1rem;
}


/* --------------------------------------------------------------------------
   SECTION 2: About the Artist
   --------------------------------------------------------------------------
   Two-column layout: bio text on the left, circular portrait on the right.
   Uses .content-panel from styles.css for the dark translucent card.
   .about-grid gets .reveal for scroll-triggered fade-in animation.
   Stacks to a single column on mobile (max-width: 768px).
   -------------------------------------------------------------------------- */

.about-section {
   /* Section spacing is inherited from the global `section` rule in
      styles.css (padding-block: var(--space-section)). We add
      horizontal padding and keep z-index consistent. */
   position: relative;
   z-index: 1;
}

/* .content-panel.about-panel gets the dark translucent background,
   midnight-purple border, and border-radius from styles.css's
   .panel class. We add horizontal padding override if needed. */
.about-panel {
   padding: var(--space-2xl);
}

/* Two-column grid: text + portrait side by side on desktop */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-2xl);
   align-items: center;
}

/* Bio text column — flex column for vertical flow with spacing */
.about-text {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

/* Bio paragraphs — slightly increased line-height for readability */
.about-text p {
   font-size: 1.1rem;
   line-height: 1.8;
   color: var(--color-text);
   opacity: 0.9;
}

/* Portrait container — centers the circular image */
.about-portrait {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Circular portrait with midnight-purple border and gentle floating
   animation. The float makes the image feel alive and atmospheric,
   subtly bobbing up and down on a 6-second loop. */
.about-portrait img {
   width: 300px;
   height: 300px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--color-accent-primary);
   box-shadow: 0 0 30px rgba(216, 167, 177, 0.15);
   animation: portrait-float 6s ease-in-out infinite;
}

@keyframes portrait-float {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-10px);
   }
}

/* ---- About: Tablet & Mobile (768px) ---- */
@media screen and (max-width: 768px) {
   .about-panel {
      padding: var(--space-lg);
   }

   .about-grid {
      /* Stack to single column */
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      text-align: center;
   }

   /* Portrait moves above text on mobile (it comes second in HTML) */
   .about-portrait {
      order: -1;
   }

   .about-portrait img {
      width: 220px;
      height: 220px;
   }
}


/* --------------------------------------------------------------------------
   SECTION 3: Featured Work
   --------------------------------------------------------------------------
   Responsive grid of artwork category cards (Pottery, Sculpture, 2D Work).
   Uses CSS Grid with auto-fit + minmax for fluid column counts:
     - 3 columns on wide screens (>900px)
     - 2 columns on medium screens (>600px)
     - 1 column on small screens
   No explicit breakpoints needed for column transitions.

   Each card is a link wrapping an image and an overlay label.
   Hover reveals the overlay and applies a pink glow + lift effect.
   -------------------------------------------------------------------------- */

.featured-section {
   position: relative;
   z-index: 1;
}

/* The card grid — auto-fit with a 300px minimum column width */
.featured-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-xl);
   max-width: calc(var(--max-width) * 0.75);
   margin: 0 auto;
}

/* Individual artwork card — positioned relative so the overlay
   can be absolutely positioned inside it. Aspect ratio prevents
   layout shift while images load. */
.featured-card {
   position: relative;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   border: 1px solid var(--color-accent-primary);
   aspect-ratio: 4 / 5;
   transition:
      box-shadow var(--transition-speed) var(--transition-ease),
      transform var(--transition-speed) var(--transition-ease);
}

/* The card is an <a> wrapping an <img> and <span>.
   card-link fills the card and makes the entire area clickable. */
.card-link {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
}

/* Artwork image fills the card */
.card-link img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

/* Subtle zoom on hover — image scales within the overflow:hidden card,
   creating a gentle parallax-like motion */
.featured-card:hover .card-link img,
.featured-card:focus-visible .card-link img {
   transform: scale(1.05);
}

/* Hover state — pink glow and slight upward lift */
.featured-card:hover,
.featured-card:focus-visible {
   box-shadow: var(--glow-pink-strong);
   transform: translateY(-4px);
}

/* Overlay label — sits at the bottom of the card, hidden by default,
   fades in on hover with a gradient backdrop for text readability */
.card-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      transparent 100%
   );
   display: flex;
   align-items: flex-end;
   padding: var(--space-xl);
   font-family: var(--font-heading);
   font-size: 1.4rem;
   color: var(--color-white);
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity var(--transition-speed) var(--transition-ease);
   pointer-events: none; /* clicks pass through to the card-link */
}

.featured-card:hover .card-overlay,
.featured-card:focus-visible .card-overlay {
   opacity: 1;
}

/* Make the entire card focusable for keyboard navigation */
.featured-card:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 4px;
}

/* ---- Featured Work: Tablet (768px) ---- */
@media screen and (max-width: 768px) {
   .featured-grid {
      /* Force 2 columns on tablet */
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
   }
}

/* ---- Featured Work: Mobile (480px) ---- */
@media screen and (max-width: 480px) {
   .featured-grid {
      /* Single column on mobile */
      grid-template-columns: 1fr;
   }

   .featured-card {
      aspect-ratio: 3 / 4;
   }
}


/* --------------------------------------------------------------------------
   SECTION 4: Instagram
   --------------------------------------------------------------------------
   A centered card encouraging visitors to follow the artist on Instagram.
   Contains an SVG icon, the @handle text, and a CTA button.
   The card uses the dark panel style and gains a pink glow on hover.
   -------------------------------------------------------------------------- */

.instagram-section {
   position: relative;
   z-index: 1;
}

/* Instagram card — centered, max-width constrained, dark translucent panel.
   The entire card is a link to the artist's Instagram. Uses flex column
   layout to stack icon, handle, and button vertically. */
.instagram-card {
   max-width: 500px;
   margin: 0 auto;
   background-color: var(--color-panel);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius-lg);
   padding: var(--space-2xl);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-lg);
   color: var(--color-text);
   text-decoration: none;
   transition:
      box-shadow var(--transition-speed) var(--transition-ease),
      transform var(--transition-speed) var(--transition-ease);
}

/* Hover — pink glow and lift, consistent with card interaction language */
.instagram-card:hover {
   box-shadow: var(--glow-pink-strong);
   transform: translateY(-4px);
}

/* Keyboard focus indicator for the whole-card link */
.instagram-card:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 4px;
   box-shadow: var(--glow-pink-strong);
}

/* SVG Instagram icon — large decorative element with subtle glow */
.instagram-icon {
   width: 64px;
   height: 64px;
   color: var(--color-text);
   /* Subtle drop-shadow glow behind the icon */
   filter: drop-shadow(0 0 10px rgba(216, 167, 177, 0.3));
}

/* Instagram handle text */
.instagram-handle {
   font-family: var(--font-body);
   font-size: 1.2rem;
   color: var(--color-text);
   opacity: 0.85;
   letter-spacing: 0.03em;
}

/* Instagram-specific button variant — adds a subtle pink accent on hover
   to distinguish it from generic .btn styling */
.instagram-btn {
   margin-top: var(--space-sm);
}

/* The CTA text sits inside the whole-card link, so it should not glow,
   lift, or change border on its own hover — only the card responds. */
.instagram-btn,
.instagram-btn:hover,
.instagram-btn:active {
   box-shadow: none;
   transform: none;
   border-color: var(--color-accent-primary);
}

/* ---- Instagram: Mobile (480px) ---- */
@media screen and (max-width: 480px) {
   .instagram-card {
      padding: var(--space-xl);
   }

   .instagram-icon {
      width: 48px;
      height: 48px;
   }

   .instagram-handle {
      font-size: 1rem;
   }
}


/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------------
   Users who prefer reduced motion get:
   - Portrait float animation disabled
   - Hover transforms kept (they are intentional interaction feedback,
     not decorative motion)
   Note: The global prefers-reduced-motion in styles.css handles
   .reveal animations, bubble animations, and general transitions.
   This block only covers home.css-specific concerns.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
   .about-portrait img {
      animation: none;
   }

   /* Keep hover transforms subtle but visible — they provide
      interaction feedback, not decoration */
   .featured-card,
   .instagram-card {
      transition: box-shadow var(--transition-speed) var(--transition-ease);
   }

   .featured-card:hover,
   .instagram-card:hover {
      transform: none;
   }

   /* Image zoom on card hover — disabled for reduced motion */
   .featured-card:hover .card-link img,
   .featured-card:focus-visible .card-link img {
      transform: none;
   }
}