/* LEARN LIST PAGE STYLES */

/* HERO SECTION */
.section-learn-hero {
  overflow: visible;
  margin-top: 9.5rem;
  background: var(--color-white);
}

.section-learn-hero .central-container {
  display: flex;
  max-width: 103.8rem;
  flex-direction: column;
  gap: 1.2rem;
}

.section-learn-hero .breadcrumb {
  margin-bottom: 0;
}

.section-learn-hero .heading-1 {
  font: var(--font-heading-1);
  color: var(--color-blue-900);
  margin: 3.4rem 0 1.2rem;
  text-align: left;
}

.section-learn-hero .form-search {
  position: relative;
  max-width: 100%;
  margin-top: 0;
}

.section-learn-hero .form-search input[type="search"] {
  width: 100%;
  padding: 1.8rem 2.4rem;
  padding-left: 6rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-secondary);
  font: var(--font-placeholder);
  color: var(--color-blue-900);
  background: var(--color-white);
  transition: border-color 0.3s ease;
}

.section-learn-hero .form-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-blue-500);
}

.section-learn-hero .form-search input[type="search"]::placeholder {
  color: var(--color-gray-700);
}

.section-learn-hero .form-search::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5318 20.4693L16.8378 15.7762C18.1983 14.1428 18.8767 12.0478 18.7319 9.92691C18.5871 7.80604 17.6302 5.82265 16.0603 4.38932C14.4904 2.95599 12.4284 2.18308 10.3031 2.23138C8.17785 2.27968 6.15303 3.14547 4.64986 4.64864C3.14669 6.15181 2.2809 8.17663 2.2326 10.3019C2.1843 12.4271 2.95721 14.4892 4.39054 16.0591C5.82387 17.629 7.80726 18.5859 9.92813 18.7307C12.049 18.8755 14.144 18.1971 15.7774 16.8365L20.4706 21.5306C20.5403 21.6003 20.623 21.6556 20.714 21.6933C20.8051 21.731 20.9026 21.7504 21.0012 21.7504C21.0997 21.7504 21.1973 21.731 21.2884 21.6933C21.3794 21.6556 21.4621 21.6003 21.5318 21.5306C21.6015 21.4609 21.6568 21.3782 21.6945 21.2871C21.7322 21.1961 21.7516 21.0985 21.7516 21C21.7516 20.9014 21.7322 20.8038 21.6945 20.7128C21.6568 20.6218 21.6015 20.539 21.5318 20.4693ZM3.75119 10.5C3.75119 9.16495 4.14707 7.8599 4.88877 6.74987C5.63047 5.63984 6.68468 4.77467 7.91808 4.26378C9.15148 3.75289 10.5087 3.61922 11.8181 3.87967C13.1274 4.14012 14.3302 4.78299 15.2742 5.727C16.2182 6.671 16.861 7.87374 17.1215 9.18311C17.3819 10.4925 17.2483 11.8497 16.7374 13.0831C16.2265 14.3165 15.3613 15.3707 14.2513 16.1124C13.1413 16.8541 11.8362 17.25 10.5012 17.25C8.71159 17.248 6.99585 16.5362 5.73041 15.2708C4.46497 14.0053 3.75318 12.2896 3.75119 10.5Z" fill="%23999AA9"/></svg>') no-repeat center;
  background-size: contain;
  pointer-events: none;
}

.section-learn-hero .form-search button {
  display: none;
}

.section-learn-hero .form-search .resultBox {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.4rem;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-top: none;
  border-radius: var(--radius-secondary) ;
  max-height: 22.4rem;
  overflow-y: auto;
  z-index: 100;
  border: 1px solid var(--color-gray-200);
  box-shadow: none;
}

.section-learn-hero .form-search .resultBox a {
  font: var(--font-placeholder);
  padding: 1.4rem 1.8rem;
  background: var(--color-gray-100);
  color: var(--color-blue-900);
  border-radius: var(--radius-tertiary);
  border: none;
  transition: all 0.3s ease;
}

.section-learn-hero .form-search .resultBox a:hover {
  background: var(--color-gray-200);
  color: var(--color-blue-900);
}

/* FEATURED SECTION */
.section-featured {
  background: var(--color-white);
  margin-top: 1.2rem;
}

.section-featured .central-container {
  z-index: 0;
  max-width: 103.8rem;
}

.section-featured .heading-2 {
  font: var(--font-heading-2);
  color: var(--color-blue-900);
  text-align: center;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-items: start;
}

.featured-cards-column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.featured-card {
  position: relative;
  background: var(--color-gray-50);
  border-radius: var(--radius-secondary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.8rem;
}

.featured-card-large {
  min-height: 100%;
}

.featured-card-image {
  width: 100%;
  height: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-secondary);
}

.featured-card-large .featured-card-image {
  padding-bottom: 70%;
}

/* Featured Card Image Hover - Uses base styles from common.css */

.featured-card-content {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.featured-card-tags {
  position: absolute;
  top: 1.8rem;
  left: 1.8rem;
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Featured tag, title, meta - Uses common styles from common.css */

.featured-card-description {
  font: var(--font-sm);
  color: var(--color-gray-800);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-card-small {
  flex-direction: row;
}

.featured-card-small .featured-card-title {
  font: var(--font-heading-6);
}

.featured-card-small .featured-card-content {
  padding: 0.9rem 1.4rem;
}

.featured-card-small .featured-card-image {
  flex: 0 0 50%;
  padding-bottom: 34%;
}

.featured-card-small .featured-card-description {
  display: none;
}

.featured-card-small .featured-card-meta {
  padding-top: 0.8rem;
}

/* Featured card meta - Uses common styles from common.css */

.section-online-doctor {
  margin-top: 1.2rem;
}

/* ALL ARTICLES SECTION */
.section-all-articles {
  margin-top: 1.2rem;
  background: var(--color-white);
}

.section-all-articles .central-container {
  max-width: 103.8rem;
}

.section-all-articles .heading-2 {
  font: var(--font-heading-2);
  color: var(--color-blue-900);
  text-align: center;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  align-items: stretch;
}

/* Article Card Styles - Uses base styles from common.css */

/* Pagination styles moved to components.css */

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Breakpoint: 1199px */
@media all and (max-width: 1199px) {
  .featured-cards-column {
    gap: 2.3rem;
  }
}

/* Breakpoint: 1038px */
@media all and (max-width: 1038px) {
  .section-learn-hero .central-container {
    max-width: 100%;
  }

  .section-featured .central-container {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .section-all-articles .central-container {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Breakpoint: 991px */
@media all and (max-width: 991px) {
  .section-learn-hero {
    padding-top: 4rem;
    padding-bottom: 2.4rem;
  }

  .section-learn-hero .heading-1 {
    font: var(--font-mobile-heading-1);
    margin: 2.4rem 0 1rem;
  }

  .section-learn-hero .form-search input[type="search"] {
    padding: 1.4rem 1.8rem;
    padding-left: 4.5rem;
    font: var(--font-md);
  }

  .section-learn-hero .form-search .resultBox {
    gap: 0.4rem;
    padding: 0.4rem;
    max-height: 20rem;
  }

  .section-learn-hero .form-search .resultBox a {
    font: var(--font-md);
    padding: 1.2rem 1.6rem;
  }

  .section-featured {
    margin-top: 2.4rem;
  }

  .section-featured .central-container {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .section-featured .heading-2 {
    font: var(--font-mobile-heading-2);
    margin-bottom: 1.6rem;
  }

  .featured-grid {
    gap: 1.6rem;
  }

  .featured-card-content {
    padding: 1.6rem;
    gap: 1rem;
    flex: 1;
  }

  .featured-cards-column {
    gap: 0.8rem;
  }

  .featured-card-title,
  .featured-card-small .featured-card-title {
    font-size: 1.6rem;
  }

  .featured-card-small .featured-card-content {
    padding: 0 0.8rem;
  }

  /* Featured and article meta items use common styles from common.css */
  .featured-meta-item,
  .article-meta-item {
    font-size: 1.2rem;
  }

  /* Featured and article tags use common styles from common.css */
  .featured-tag,
  .article-tag {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .section-all-articles {
    margin-top: 2.4rem;
  }

  .section-all-articles .central-container {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .section-all-articles .heading-2 {
    font: var(--font-mobile-heading-2);
    margin-bottom: 1.6rem;
  }

  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }

  .article-card-content {
    padding: 1.6rem;
    gap: 1rem;
    flex: 1;
  }

  .article-card-title {
    font-size: 1.6rem;
  }

  .article-card-image {
    padding-bottom: 60%;
  }

  .article-tag {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .line {
    margin: 3rem 0;
  }
}

/* Breakpoint: 870px */
@media all and (max-width: 870px) {
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .featured-cards-column {
    gap: 1.6rem;
  }

  .featured-card-small {
    flex-direction: column;
  }

  .featured-card-image {
    padding-bottom: 60%;
  }

  .featured-card-large .featured-card-image {
    padding-bottom: 60%;
  }

  .featured-card-small .featured-card-image {
    flex: none;
    padding-bottom: 60%;
  }

  .featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .featured-card-content {
    padding: 2.4rem;
    gap: 0.8rem;
  }

  .featured-card-small .featured-card-content {
    padding: 2.4rem;
  }

  .featured-card-tags {
    top: 1.8rem;
    left: 1.8rem;
  }

  .featured-card-title,
  .featured-card-small .featured-card-title {
    font: var(--font-heading-5);
  }

  .featured-card-description {
    font: var(--font-sm);
  }

  .featured-card-meta {
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
  }

  /* Featured and article meta items use common styles from common.css */
  .featured-meta-item,
  .article-meta-item {
    font: var(--font-sm);
    gap: 0.6rem;
  }

  .featured-meta-item svg,
  .article-meta-item svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .featured-meta-item:first-child:not(:only-child),
  .article-meta-item:first-child:not(:only-child) {
    padding-right: 0;
    border-right: none;
    border-left: none;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-gray-300);
  }

  .article-meta-item:not(:only-child):last-child,
  .featured-meta-item:not(:only-child):last-child {
    padding-left: 0;
    border-left: none;
  }

  /* Featured and article tags use common styles from common.css */
  .featured-tag,
  .article-tag {
    font: var(--font-caption);
    padding: 0.7rem 1.2rem;
  }

  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }

  .article-card-image {
    padding-bottom: 60%;
  }

  .article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-card-content {
    padding: 2.4rem;
    gap: 0.8rem;
  }

  .article-card-tags {
    top: 1.8rem;
    left: 1.8rem;
  }

  .article-card-title {
    font: var(--font-heading-5);
  }

  .article-card-meta {
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
  }

  .article-meta-item {
    font: var(--font-sm);
    gap: 0.6rem;
  }

  .article-meta-item svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .article-meta-item:first-child:not(:only-child) {
    padding-right: 0;
    border-right: none;
    border-left: none;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-gray-300);
  }

  .article-meta-item:not(:only-child):last-child {
    padding-left: 0;
    border-left: none;
  }

  .article-tag {
    font: var(--font-caption);
    padding: 0.7rem 1.2rem;
  }
}

/* Breakpoint: 767px */
@media all and (max-width: 767px) {
  .section-learn-hero .form-search .resultBox {
    gap: 0.4rem;
    padding: 0.4rem;
    max-height: 16rem;
  }

  .section-learn-hero .form-search .resultBox a {
    font: var(--font-sm);
    padding: 1rem 1.2rem;
  }

  .section-featured {
    margin-top: 2.4rem;
  }

  .section-featured .central-container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .section-featured .heading-2 {
    font: var(--font-mobile-heading-2);
    margin-bottom: 1.6rem;
  }

  .featured-grid {
    gap: 1.6rem;
  }

  .featured-cards-column {
    gap: 1.6rem;
  }

  .featured-card {
    padding: 0.6rem;
  }

  .featured-card-image {
    padding-bottom: 60%;
  }

  .featured-card-large .featured-card-image {
    padding-bottom: 60%;
  }

  .featured-card-small .featured-card-image {
    padding-bottom: 60%;
  }

  .featured-card-image img {
    width: 100%;
    height: 100%;
  }

  .featured-card-content {
    padding: 1.6rem;
    gap: 0.8rem;
  }

  .featured-card-small .featured-card-content {
    padding: 1.6rem;
  }

  .featured-card-tags {
    top: 1.2rem;
    left: 1.2rem;
    gap: 0.4rem;
  }

  /* Featured and article tags use common styles from common.css */
  .featured-tag,
  .article-tag {
    padding: 0.5rem 1rem;
  }

  .featured-card-title,
  .featured-card-small .featured-card-title {
    font: var(--font-mobile-heading-5);
  }

  .featured-card-meta {
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
  }

  /* Featured and article meta items use common styles from common.css */
  .featured-meta-item:first-child:not(:only-child),
  .article-meta-item:first-child:not(:only-child) {
    padding-right: 0;
    border-right: none;
    border-left: none;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-gray-300);
  }

  .article-meta-item:not(:only-child):last-child,
  .featured-meta-item:not(:only-child):last-child {
    padding-left: 0;
    padding-top: 0.4rem;
    border-left: none;
  }

  .article-meta-item:not(:only-child):last-child,
  .featured-meta-item:not(:only-child):last-child {
    border-left: none;
  }

  .section-all-articles {
    margin-top: 2.4rem;
  }

  .section-all-articles .central-container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .section-all-articles .heading-2 {
    font: var(--font-mobile-heading-2);
    margin-bottom: 1.6rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .article-card {
    padding: 0.6rem;
  }

  .article-card-image {
    padding-bottom: 60%;
  }

  .article-card-image img {
    width: 100%;
    height: 100%;
  }

  .article-card-content {
    padding: 1.6rem;
    gap: 0.8rem;
  }

  .article-card-tags {
    top: 1.2rem;
    left: 1.2rem;
    gap: 0.4rem;
  }

  .article-tag {
    padding: 0.5rem 1rem;
  }

  .article-card-title {
    font: var(--font-mobile-heading-5);
  }

  .article-card-meta {
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
  }

  .article-meta-item:first-child:not(:only-child) {
    padding-right: 0;
    border-right: none;
    border-left: none;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-gray-300);
  }

  .article-meta-item:not(:only-child):last-child {
    padding-left: 0;
    padding-top: 0.4rem;
    border-left: none;
  }

  /* Pagination responsive styles moved to components.css */

  .line {
    margin: 2.4rem 0;
  }
}

/* Breakpoint: 600px */
@media all and (max-width: 600px) {
  .section-learn-hero {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .section-learn-hero .central-container {
    gap: 1.2rem;
  }

  .section-learn-hero .heading-1 {
    font: var(--font-mobile-heading-1);
    margin: 2rem 0 0.8rem;
  }

  .section-learn-hero .form-search input[type="search"] {
    padding: 1.2rem 1.6rem;
    padding-left: 4rem;
    font: var(--font-sm);
  }

  .section-learn-hero .form-search::before {
    left: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
  }

  .section-learn-hero .form-search .resultBox {
    gap: 0.4rem;
    padding: 0.4rem;
    border-radius: var(--radius-secondary);
  }

  .section-learn-hero .form-search .resultBox a {
    font: var(--font-sm);
    padding: 1rem 1.4rem;
  }
}

/* Breakpoint: 480px */
@media all and (max-width: 480px) {
  .section-learn-hero .form-search .resultBox {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .section-learn-hero .form-search .resultBox a {
    font: var(--font-sm);
    padding: 0.8rem 1rem;
  }

  .section-featured .central-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .featured-grid {
    gap: 1.2rem;
  }

  .featured-cards-column {
    gap: 1.2rem;
  }

  .featured-card {
    padding: 0.4rem;
  }

  .featured-card-image {
    padding-bottom: 55%;
  }

  .featured-card-large .featured-card-image {
    padding-bottom: 55%;
  }

  .featured-card-small .featured-card-image {
    padding-bottom: 55%;
  }

  .featured-card-content {
    padding: 1.2rem;
  }

  .featured-card-small .featured-card-content {
    padding: 1.2rem;
  }

  .featured-card-tags {
    top: 1rem;
    left: 1rem;
  }

  .section-all-articles .central-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-all-articles .heading-2 {
    font: var(--font-mobile-heading-2);
    margin-bottom: 1.2rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .article-card {
    padding: 0.4rem;
  }

  .article-card-image {
    padding-bottom: 55%;
  }

  .article-card-content {
    padding: 1.2rem;
  }

  .article-card-tags {
    top: 1rem;
    left: 1rem;
  }

  .line {
    margin: 1.6rem 0;
  }
}