/**
 * Phoca Author Expert Module Styles
 *
 * @package     Phoca Premiere
 * @subpackage  mod_phoca_authorexpert
 * @copyright   (C) 2026 Dariusz Mysliwiec
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Uses BEM naming convention with CSS custom properties for theming.
 * Mobile-first responsive design optimized for all screen sizes.
 * Dark mode supported, WCAG 2.1 AA compliant.
 *
 * Breakpoints:
 *   Base:     < 480px (small phones)
 *   sm:       ≥ 480px (large phones)
 *   md:       ≥ 640px (tablets)
 *   lg:       ≥ 768px (small desktops / landscape tablets)
 *   xl:       ≥ 1024px (desktops)
 */

/* =====================================================================
   Block: ph-author-expert (Base: < 480px mobile-first)
   ===================================================================== */

.ph-author-expert {
  /* CSS custom properties for theming */
  --ph-author-expert-bg: var(--bs-body-bg, #ffffff);
  --ph-author-expert-border: var(--bs-border-color, #e5e7eb);
  --ph-author-expert-text: var(--bs-body-color, #1f2937);
  --ph-author-expert-muted: var(--bs-secondary-color, #6b7280);
  --ph-author-expert-accent: var(--bs-primary, #3b82f6);
  --ph-author-expert-accent-hover: var(--bs-primary-dark, #2563eb);
  --ph-author-expert-tag-bg: var(--bs-primary-bg-subtle, #eff6ff);
  --ph-author-expert-tag-text: var(--bs-primary-text-emphasis, #1e40af);
  --ph-author-expert-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ph-author-expert-radius: var(--bs-border-radius-lg, 0.75rem);

  /* Fluid spacing: scales from 1rem on mobile to 2.5rem on desktop */
  margin-top: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(1rem, 3vw, 2.5rem);
  font-family: var(--bs-body-font-family, system-ui, -apple-system, sans-serif);
  color: var(--ph-author-expert-text);
}

/* =====================================================================
   Element: card (Base: stacked vertical layout)
   ===================================================================== */

.ph-author-expert__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--ph-author-expert-bg);
  border: 1px solid var(--ph-author-expert-border);
  border-radius: var(--ph-author-expert-radius);
  box-shadow: var(--ph-author-expert-shadow);
}

/**
 * ≥ 480px: Slightly more padding, still stacked
 */
@media (min-width: 480px) {
  .ph-author-expert__card {
    padding: 1.25rem;
    gap: 1.25rem;
  }
}

/**
 * ≥ 640px: Side-by-side layout (image left, content right)
 */
@media (min-width: 640px) {
  .ph-author-expert__card {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

/**
 * ≥ 768px: More generous spacing
 */
@media (min-width: 768px) {
  .ph-author-expert__card {
    padding: 2rem;
    gap: 2rem;
  }
}

/**
 * ≥ 1024px: Max-width container for readability on large screens
 */
@media (min-width: 1024px) {
  .ph-author-expert__card {
    padding: 2.25rem;
    gap: 2.25rem;
  }
}

/* =====================================================================
   Element: image-wrapper (Base: centered, full width)
   ===================================================================== */

.ph-author-expert__image-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/**
 * ≥ 640px: Align to start when in row layout
 */
@media (min-width: 640px) {
  .ph-author-expert__image-wrapper {
    justify-content: flex-start;
  }
}

/* =====================================================================
   Element: image (Base: smaller for mobile)
   ===================================================================== */

.ph-author-expert__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ph-author-expert-border);
}

/**
 * ≥ 480px: Medium size
 */
@media (min-width: 480px) {
  .ph-author-expert__image {
    width: 100px;
    height: 100px;
    border-width: 3px;
  }
}

/**
 * ≥ 640px: Full size
 */
@media (min-width: 640px) {
  .ph-author-expert__image {
    width: 120px;
    height: 120px;
  }
}

/**
 * ≥ 768px: Larger for desktop
 */
@media (min-width: 768px) {
  .ph-author-expert__image {
    width: 130px;
    height: 130px;
  }
}

/* =====================================================================
   Element: content
   ===================================================================== */

.ph-author-expert__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0; /* Prevent flex overflow */
}

/**
 * ≥ 640px: Slightly larger gap when side-by-side
 */
@media (min-width: 640px) {
  .ph-author-expert__content {
    gap: 0.625rem;
  }
}

/* =====================================================================
   Element: name (Base: compact mobile)
   ===================================================================== */

.ph-author-expert__name {
  margin: 0;
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--ph-author-expert-text);
}

/**
 * ≥ 480px
 */
@media (min-width: 480px) {
  .ph-author-expert__name {
    font-size: 1.125rem; /* 18px */
  }
}

/**
 * ≥ 640px
 */
@media (min-width: 640px) {
  .ph-author-expert__name {
    font-size: 1.25rem; /* 20px */
  }
}

/**
 * ≥ 768px
 */
@media (min-width: 768px) {
  .ph-author-expert__name {
    font-size: 1.375rem; /* 22px */
  }
}

/* =====================================================================
   Element: title (Base: compact mobile)
   ===================================================================== */

.ph-author-expert__title {
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--ph-author-expert-accent);
}

@media (min-width: 480px) {
  .ph-author-expert__title {
    font-size: 0.875rem; /* 14px */
  }
}

@media (min-width: 640px) {
  .ph-author-expert__title {
    font-size: 0.9375rem; /* 15px */
  }
}

/* =====================================================================
   Element: credentials (Base: compact mobile)
   ===================================================================== */

.ph-author-expert__credentials {
  margin: 0;
  font-size: 0.75rem; /* 12px */
  color: var(--ph-author-expert-muted);
  font-style: italic;
}

@media (min-width: 480px) {
  .ph-author-expert__credentials {
    font-size: 0.8125rem; /* 13px */
  }
}

@media (min-width: 640px) {
  .ph-author-expert__credentials {
    font-size: 0.875rem; /* 14px */
  }
}

/* =====================================================================
   Element: bio (Base: compact mobile, fluid font)
   ===================================================================== */

.ph-author-expert__bio {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--ph-author-expert-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ph-author-expert__bio p:last-child {
  margin-bottom: 0;
}

@media (min-width: 480px) {
  .ph-author-expert__bio {
    font-size: 0.9375rem; /* 15px */
  }
}

/* =====================================================================
   Element: expertise (Base: stacked)
   ===================================================================== */

.ph-author-expert__expertise {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .ph-author-expert__expertise {
    gap: 0.5rem;
  }
}

.ph-author-expert__expertise-label {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ph-author-expert-muted);
}

@media (min-width: 480px) {
  .ph-author-expert__expertise-label {
    font-size: 0.75rem; /* 12px */
  }
}

@media (min-width: 640px) {
  .ph-author-expert__expertise-label {
    font-size: 0.8125rem; /* 13px */
  }
}

/* =====================================================================
   Element: expertise-tags
   ===================================================================== */

.ph-author-expert__expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

@media (min-width: 480px) {
  .ph-author-expert__expertise-tags {
    gap: 0.5rem;
  }
}

/* =====================================================================
   Element: tag (Base: compact mobile)
   ===================================================================== */

.ph-author-expert__tag {
  display: inline-block;
  padding: 0.1875rem 0.5rem; /* 3px 8px */
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--ph-author-expert-tag-text);
  background-color: var(--ph-author-expert-tag-bg);
  border-radius: 9999px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .ph-author-expert__tag {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem; /* 12px */
  }
}

@media (min-width: 640px) {
  .ph-author-expert__tag {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem; /* 13px */
  }
}

/* =====================================================================
   Element: social (Base: tightly packed)
   ===================================================================== */

.ph-author-expert__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

@media (min-width: 480px) {
  .ph-author-expert__social {
    gap: 0.5rem;
  }
}

/* =====================================================================
   Element: social-link (Base: touch-friendly 40×40px)
   ===================================================================== */

.ph-author-expert__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;  /* 40px — touch target minimum */
  height: 2.5rem;
  border-radius: 0.5rem;
  color: var(--ph-author-expert-muted);
  background-color: transparent;
  border: 1px solid var(--ph-author-expert-border);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

/**
 * ≈ 640px: Slightly smaller, non-touch context
 */
@media (min-width: 640px) {
  .ph-author-expert__social-link {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.ph-author-expert__social-link:hover,
.ph-author-expert__social-link:focus-visible {
  color: var(--ph-author-expert-accent);
  border-color: var(--ph-author-expert-accent);
  background-color: var(--ph-author-expert-tag-bg);
  outline: none;
}

.ph-author-expert__social-link:focus-visible {
  box-shadow: 0 0 0 2px var(--ph-author-expert-accent);
}

/* =====================================================================
   Element: social-icon (Base: compact)
   ===================================================================== */

.ph-author-expert__social-icon {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
}

@media (min-width: 640px) {
  .ph-author-expert__social-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* =====================================================================
   Element: cta button (Base: full-width mobile, touch-friendly)
   ===================================================================== */

.ph-author-expert__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Full width on mobile */
  margin-top: 0.5rem;
  padding: 0.75rem 1.25rem; /* Larger touch target */
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  background-color: var(--ph-author-expert-accent);
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  text-align: center;
}

/**
 * ≥ 480px: Slightly narrower, still centered
 */
@media (min-width: 480px) {
  .ph-author-expert__cta {
    width: auto;
    padding: 0.75rem 2rem;
  }
}

/**
 * ≥ 640px: Auto width, left-aligned
 */
@media (min-width: 640px) {
  .ph-author-expert__cta {
    align-self: flex-start;
    width: auto;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
  }
}

/**
 * ≥ 768px
 */
@media (min-width: 768px) {
  .ph-author-expert__cta {
    padding: 0.75rem 2rem;
    font-size: 1rem;
  }
}

.ph-author-expert__cta:hover,
.ph-author-expert__cta:focus-visible {
  background-color: var(--ph-author-expert-accent-hover);
  color: #ffffff;
  text-decoration: none;
}

.ph-author-expert__cta:active {
  transform: scale(0.98);
}

/* =====================================================================
   Layout: when image is hidden (content-only mode)
   ===================================================================== */

/**
 * When no image displayed, the card still looks great centered
 * with the bio taking full width.
 */
@media (min-width: 640px) {
  .ph-author-expert__card:not(:has(.ph-author-expert__image-wrapper)) .ph-author-expert__content {
    max-width: 100%;
  }
}

/**
 * Maximum content width for readability
 */
@media (min-width: 1024px) {
  .ph-author-expert__content {
    max-width: 65ch; /* Optimal reading line length */
  }
}

/* =====================================================================
   Dark mode support
   ===================================================================== */

[data-bs-theme="dark"] .ph-author-expert {
  --ph-author-expert-bg: var(--bs-body-bg, #111827);
  --ph-author-expert-border: var(--bs-border-color, #374151);
  --ph-author-expert-text: var(--bs-body-color, #e5e7eb);
  --ph-author-expert-muted: var(--bs-secondary-color, #9ca3af);
  --ph-author-expert-tag-bg: rgba(59, 130, 246, 0.15);
  --ph-author-expert-tag-text: #93c5fd;
  --ph-author-expert-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  .ph-author-expert {
    --ph-author-expert-bg: var(--bs-body-bg, #111827);
    --ph-author-expert-border: var(--bs-border-color, #374151);
    --ph-author-expert-text: var(--bs-body-color, #e5e7eb);
    --ph-author-expert-muted: var(--bs-secondary-color, #9ca3af);
    --ph-author-expert-tag-bg: rgba(59, 130, 246, 0.15);
    --ph-author-expert-tag-text: #93c5fd;
    --ph-author-expert-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  }
}

/* =====================================================================
   High contrast / forced-colors mode
   ===================================================================== */

@media (forced-colors: active) {
  .ph-author-expert__card {
    border: 2px solid CanvasText;
  }

  .ph-author-expert__image {
    border: 2px solid CanvasText;
  }

  .ph-author-expert__cta {
    border: 1px solid CanvasText;
    background-color: ButtonFace;
    color: ButtonText;
  }

  .ph-author-expert__cta:hover {
    background-color: Highlight;
    color: HighlightText;
  }

  .ph-author-expert__social-link {
    border: 1px solid CanvasText;
  }
}

/* =====================================================================
   Print styles: simplified layout
   ===================================================================== */

@media print {
  .ph-author-expert {
    --ph-author-expert-shadow: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .ph-author-expert__card {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .ph-author-expert__cta {
    display: none; /* Hide CTA in print */
  }

  .ph-author-expert__social-link {
    border: 1px solid #666;
  }
}

/* =====================================================================
   Reduced motion preference
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ph-author-expert__cta,
  .ph-author-expert__social-link {
    transition: none;
  }

  .ph-author-expert__cta:active {
    transform: none;
  }
}