/**
 * Resume Template Bundle
 *
 * Combined base + modern template styles.
 * Loaded only on resume example pages via <link> tag.
 * Fonts are loaded separately in the page head for better performance.
 */

/* ==========================================================================
   BASE LAYOUT - US Letter Page Dimensions
   ========================================================================== */

/* Outer container - centers content */
.resume-container {
  max-width: 816px;
  margin: 0 auto;
}

/*
 * Individual page container
 * US Letter at 96dpi: 816px × 1056px
 * Padding: 48px all sides (0.5in)
 */
.resume-page {
  width: 100%;
  max-width: 816px;
  min-height: 1056px;
  margin: 0 auto;
  padding: 48px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Embedded variant - when resume is inside another container */
.resume-container--embedded {
  padding: 0;
}

.resume-container--embedded .resume-page {
  box-shadow: none;
  margin-bottom: 0;
}

/* Scaled variant - for preview at smaller size */
.resume-container--scaled {
  transform-origin: top left;
}

/* ==========================================================================
   SECTION STRUCTURE
   ========================================================================== */

.resume-section {
  margin-bottom: 1.25rem;
}

.resume-section:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   MODERN TEMPLATE STYLES
   ========================================================================== */

/* Container */
.resume-modern {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* ==================== HEADER ==================== */
.resume-modern__header {
  margin-bottom: 1.5rem;
}

.resume-modern__name {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 500;
  color: #000000;
  line-height: 34px;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.resume-modern__title {
  font-size: 1rem;
  font-weight: 400;
  color: #3e3e3e;
  line-height: 1.25;
  margin-bottom: 4px;
}

.resume-modern__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.625rem;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #3e3e3e;
}

.resume-modern__contact-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.resume-modern__contact-icon {
  flex-shrink: 0;
  color: #666;
}

.resume-modern__contact-link {
  color: inherit;
  text-decoration: none;
}

.resume-modern__contact-link:hover {
  text-decoration: underline;
}

.resume-modern__contact--social {
  margin-top: 0.25rem;
}

/* ==================== SECTIONS ==================== */
.resume-modern__section {
  margin-bottom: 1.25rem;
}

.resume-modern__section:last-child {
  margin-bottom: 0;
}

.resume-modern__section-title {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #69696d;
  margin-bottom: 0.625rem;
}

/* ==================== SUMMARY ==================== */
.resume-modern__summary {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #3e3e3e;
  margin-top: 0.5rem;
}

/* ==================== EXPERIENCE ==================== */
.resume-modern__experience-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.resume-modern__experience-item {
  padding-bottom: 0.5rem;
}

.resume-modern__experience-item:last-child {
  padding-bottom: 0;
}

.resume-modern__experience-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.resume-modern__job-title {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
  color: #000000;
}

.resume-modern__location {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #666666;
  flex-shrink: 0;
}

.resume-modern__company-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.375rem;
}

.resume-modern__company {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: #1e90ff;
}

.resume-modern__dates {
  font-size: 0.6875rem;
  color: #666666;
  flex-shrink: 0;
}

.resume-modern__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 0.75rem;
}

.resume-modern__bullet {
  position: relative;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #3e3e3e;
  margin-bottom: 0.25rem;
  padding-left: 0.75rem;
}

.resume-modern__bullet::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3e3e3e;
}

.resume-modern__bullet:last-child {
  margin-bottom: 0;
}

/* ==================== EDUCATION ==================== */
.resume-modern__education-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.resume-modern__education-item {
  display: flex;
  flex-direction: column;
}

.resume-modern__field {
  font-size: 0.75rem;
  color: #666666;
  margin-left: 0.25rem;
}

.resume-modern__school {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: #1e90ff;
}

.resume-modern__gpa {
  font-size: 0.6875rem;
  color: #666666;
  margin-left: 0.5rem;
}

/* ==================== SKILLS ==================== */
.resume-modern__skills {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #3e3e3e;
  margin: 0;
}

.resume-modern__skill-item {
  /* nbsp before separator keeps it attached to skill */
}

.resume-modern__skill-sep {
  color: #999;
}

/* ==================== CERTIFICATIONS ==================== */
.resume-modern__certifications-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resume-modern__certification {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.resume-modern__cert-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.resume-modern__cert-issuer {
  font-size: 0.75rem;
  color: #666666;
}

.resume-modern__cert-date {
  font-size: 0.6875rem;
  color: #666666;
}

/* ==================== PROJECTS ==================== */
.resume-modern__projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.resume-modern__project {
  padding-bottom: 0.5rem;
}

.resume-modern__project-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e90ff;
  margin-bottom: 0.125rem;
}

.resume-modern__project-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #333333;
}

.resume-modern__project-tech {
  font-size: 0.6875rem;
  color: #666666;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ==================== EMPTY STATE ==================== */
.resume-modern__empty {
  text-align: center;
  font-size: 0.875rem;
  color: #9ca3af;
  padding: 2rem;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .resume-container {
    background: none;
    padding: 0;
  }

  .resume-page {
    width: 8.5in;
    padding: 0.5in 0.75in;
    box-shadow: none;
    background: white;
    min-height: auto;
  }

  /* Prevent page breaks inside content blocks */
  .resume-experience-item,
  .resume-education-item,
  .resume-modern__experience-item,
  .resume-modern__education-item {
    page-break-inside: avoid;
  }

  .resume-section,
  .resume-modern__section {
    page-break-after: avoid;
  }

  .resume-section-title,
  .resume-modern__section-title {
    page-break-after: avoid;
  }

  .resume-modern__skill {
    border: 1px solid #1e90ff;
  }

  @page {
    size: 8.5in 11in;
    margin: 0;
  }
}