/* =====================================
   IDIOMS PAGE — ORIGINAL STYLE, REFINED
===================================== */


/* ---------- Main hero box ---------- */
.page-content {
  max-width: 1200px;
  margin: 2rem auto 3.5rem;
  padding: 2.5rem 2.5rem 3rem;
  border-radius: 26px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 60px rgba(0,0,0,0.45);
}

/* ---------- Title ---------- */
.page-content h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

/* Kill global underline */
.page-content h2::after{
  display: none !important;
}

.subtitle {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 1.8rem;
}

/* ---------- Search ---------- */
.idiom-search {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,255,182,0.5);
  color: var(--color-text);
  margin-bottom: 2rem;
}

/* ---------- Layout ---------- */
.idioms-section {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .idioms-section {
    grid-template-columns: 42% 58%;
    align-items: start;
  }
}

/* =====================================
   LEFT — BUBBLE BOX (YOUR STYLE)
===================================== */

.idiom-cloud {
  padding: 1.6rem;
  border-radius: 22px;
  border: 1px dashed rgba(0,255,182,0.55);
  background: rgba(255,255,255,0.04);

  max-height: 440px;
  overflow-y: auto;
}

.idiom-bubble {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  border: 1px solid rgba(0,255,182,0.7);
  background: rgba(0,255,182,0.06);
  color: var(--color-text);
  cursor: pointer;
  margin: 6px;
  display: inline-block;
  transition: 0.25s;
}

.idiom-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,255,182,0.25);
}

.idiom-bubble.active {
  background: rgba(0,255,182,0.12);
}

/* =====================================
   RIGHT — CARD (BIGGER IMAGE, STABLE)
===================================== */

.idiom-card {
  display: none;
  padding: 1.8rem;
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,255,182,0.6);

  max-height: 440px;
  overflow-y: auto;
}

.idiom-card.show {
  display: block;
}

/* Layout */
.idiom-flex {
  display: grid;
  grid-template-columns: 220px 1fr; /* BIG IMAGE */
  gap: 1.6rem;
  align-items: start;
}

/* Image */
.idiom-image-wrapper {
  width: 220px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,182,0.6);
}

.idiom-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
.idiom-info h3 {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
}

.idiom-info p {
  margin-bottom: 0.55rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.example {
  color: var(--color-secondary);
}

/* Tag */
.pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid rgba(0,255,182,0.6);
  background: rgba(255,255,255,0.05);
}

/* =====================================
   LEARN ENGLISH SECTION — MORE BREATHING
===================================== */

.idioms-seo {
  margin-top: 5rem;   /* pushed down */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-muted);
}

.idioms-azdir{
  max-width: 1100px;
  margin: 48px auto 70px;
  padding: 0 18px;
}

.idioms-azdir__toggle{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
}

.idioms-azdir__summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.idioms-azdir__summary::-webkit-details-marker{display:none;}
.idioms-azdir__summary::after{
  content:"▾";
  float:right;
  opacity:.8;
  transition: transform .18s ease;
}
.idioms-azdir__toggle[open] .idioms-azdir__summary::after{transform: rotate(180deg);}

.idioms-azdir__grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px){ .idioms-azdir__grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .idioms-azdir__grid{grid-template-columns: 1fr;} }

.idioms-azdir__letter{ margin:0 0 8px; }
.idioms-azdir__list{ margin:0; padding-left:18px; }

/* =====================================
   Instagram
===================================== */
.idioms-cta {
  margin: 3rem auto 0;
  text-align: center;
}

.insta-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* keep text + icon white on hover */
.insta-cta:hover {
  filter: brightness(1.03);
  color: #ffffff;
}

.insta-icon svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/* ===== Skeleton loading state ===== */

#idiomCloud.is-loading {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 360px;           /* square */
}

/* subtle hint */
.idiom-hint {
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* skeleton bubbles */
.idiom-skel {
  width: 120px;
  height: 36px;
  margin: 6px;

  border-radius: 999px;
  border: 1px dashed rgba(0,255,182,0.6);

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04),
    rgba(0,255,182,0.18),
    rgba(255,255,255,0.04)
  );

  animation: shimmer 1.6s infinite ease-in-out;
}

@keyframes shimmer {
  0%   { opacity: 0.45; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.45; }
}

.page-content img {
  opacity: 0;
  transition: opacity 180ms ease;
}

.page-content img[src] {
  opacity: 1;
}


#idiomTitle, #idiomImg { cursor: pointer; }



/* =====================================
  Idiom single (SEO pages)
===================================== */

/* Card: never scroll inside, keep premium look */
.idiom-card.idiom-card--single{
  display: block;
  max-height: none !important;
  overflow: visible !important;

  padding: 2.2rem;
  border-radius: 28px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,182,0.45);
  box-shadow: 0 0 60px rgba(0,0,0,0.35);
}

/* Layout: image left, text right */
.idiom-flex.idiom-flex--single{
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 2.4rem;
  align-items: center;
}

/* Image wrapper: keep your breathing room, but make it FULL */
.idiom-image-wrapper.idiom-image-wrapper--single{
  margin-left: 5.1rem;  /* keep your offset */
  width: calc(100% - 5.1rem);
  height: 420px;        /* controls visual impact */
  border-radius: 24px;
  overflow: hidden;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,182,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.idiom-image-wrapper.idiom-image-wrapper--single img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag pill */
.idiom-card--single .pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(0,255,182,0.55);
  background: rgba(0,255,182,0.06);
  margin-bottom: 0.9rem;
}

/* Title */
.idiom-card--single .idiom-info h1{
  margin: 0 0 1.2rem;
  font-size: 2.05rem;
  line-height: 1.25;
}

/* Lines / paragraphs */
.idiom-card--single .idiom-info p{
  margin: 0 0 0.75rem;
  line-height: 1.75;
  color: var(--color-muted);
}

/* Label words (Meaning/Example/etc) */
.idiom-card--single .idiom-info strong{
  color: var(--color-text);
  font-weight: 650;
}

/* Example highlight */
.idiom-card--single .idiom-info .example{
  color: var(--color-secondary);
}






/* ===============================
   Mobile / tablet stack
================================ */
@media (max-width: 900px){

  .idiom-flex.idiom-flex--single{
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .idiom-image-wrapper.idiom-image-wrapper--single{
    margin-left: 0;
    width: 100%;
    height: 320px;
  }

  .idiom-card.idiom-card--single{
    padding: 1.6rem;
  }
}

/* =====================================
   Idiom extras — refined / proportional
===================================== */

.idiom-extra{
  max-width: 820px;
  margin: 2.2rem auto 0;
}

/* Section headings — smaller, cleaner */
.idiom-extra .lesson-h{
  margin: 2.2rem 0 0.8rem;
  font-size: 1.55rem;              /* reduced */
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;                /* no center */
  color: rgba(255,255,255,0.92);
}

/* remove dramatic divider */
.idiom-extra .lesson-h::after{
  display: none;
}

/* Context text */
.idiom-extra .idiom-context{
  margin: 0 0 0.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.82);
  text-align: left;
}

/* subtle highlight only */
.idiom-extra .idiom-context strong{
  font-weight: 700;
  color: #ffffff;
}

/* Lists — compact and elegant */
.idiom-extra ul{
  margin: 0.4rem 0 0;
  padding-left: 18px;
  list-style: disc;
}

.idiom-extra ul li{
  margin: 6px 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}

/* Related links */
.idiom-extra ul li a{
  color: rgba(53,241,255,0.9);
  text-decoration: none;
  font-weight: 600;
}
.idiom-extra ul li a:hover{
  text-decoration: underline;
}

/* tighten spacing between sections */
.idiom-extra > * + *{
  margin-top: 0.6rem;
}

/* Label: Work / Family / Friends */

.idiom-contextLabel{
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  color: rgba(53,241,255,0.95);

  margin-bottom: 4px;
}

/* Make extra section headings cyan (same as your label/link color) */
.idiom-extra .lesson-h{
  color: var(--color-primary);
}


.idiom-related-missing{
  color: var(--color-secondary);
  cursor: default;
  text-decoration: none;
  opacity: .9;
}
/* =====================================
  back to idioms
===================================== */

.idiom-back-outside{
  max-width: 1200px;
  margin: -1rem auto 1.1rem auto;
  padding: 0 1.2rem;
}

.idiom-back-outside .idiom-back{
  font-size: 0.95rem;
  font-weight: 600;
  
}

.idiom-back-outside .idiom-back:hover{
  opacity: 0.8;
}


.idiom-meaning {
 
  font-size: 1.05rem;
  line-height: 1.75;
  

}





/* =====================================
  Quick answer + etc
===================================== */


.idiom-quick-answer,
.idiom-tone-note{
  font-size: 1.03rem;
  line-height: 1.7;
  margin: 0 0 0.85rem;
  color: rgba(255,255,255,0.86);
}

.idiom-quick-answer{
  font-weight: 650;
  color: #ffffff;
}



.idiom-faq-item{
  margin: 0.9rem 0;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.idiom-faq-item h4{
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #ffffff;
}

.idiom-faq-item p{
  margin: 0;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}