/* [aob_blog] — Figma "blog" (6007:10993): light section, intro on the left, up to two post cards on the right. */
:not(#_) .aob-blog { position: relative; overflow: hidden; background: var(--aob-light-1); color: var(--aob-black-3); font-family: var(--aob-font-body); }

:not(#_) .aob-blog__deco { display: none; position: absolute; top: 0; right: 0; width: 267px; height: 261px; pointer-events: none; }
:not(#_) .aob-blog__pattern { position: absolute; left: 0; top: 0; width: 267px; height: 261px; max-width: none; }
:not(#_) .aob-blog__arc { position: absolute; left: -1.5px; top: 0; width: 268.5px; height: 262.5px; max-width: none; }
@media (min-width: 1100px) { :not(#_) .aob-blog__deco { display: block; } }

:not(#_) .aob-blog__inner { position: relative; display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 1024px) {
	:not(#_) .aob-blog__inner { flex-direction: row; align-items: center; gap: 80px; }
	:not(#_) .aob-blog__intro { flex: 1 1 0; min-width: 0; }
	:not(#_) .aob-blog__cards { flex: 0 0 715px; max-width: 715px; }
}

:not(#_) .aob-blog__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
:not(#_) .aob-blog__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
:not(#_) .aob-blog__badge { padding: 6px 8px; border: 1px solid var(--aob-gold-soft); border-radius: 44px; background: rgba(242, 106, 10, 0.05); font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aob-black-3); }
:not(#_) .aob-blog__title { margin: 0; font-family: var(--aob-font-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: 400; line-height: 1.2; color: var(--aob-black-3); }
:not(#_) .aob-blog__accent { color: var(--aob-brand); }
:not(#_) .aob-blog__text { margin: 0; font-size: 20px; line-height: 26px; color: var(--aob-black-1); }

/* Secondary button on a light background: transparent, dark text. */
:not(#_) .aob-btn--on-light { background: transparent; color: var(--aob-black-3); box-shadow: none; }
@media (hover: hover) {
	:not(#_) .aob-btn--on-light:hover { color: var(--aob-white); }
}
/* Two buttons, one visible at a time: in the intro on desktop, centered under the cards on tablet/phone. */
:not(#_) .aob-blog__btn--desktop { display: none; }
:not(#_) .aob-blog__btn--mobile { display: flex; width: fit-content; align-self: center; }
@media (min-width: 1024px) {
	:not(#_) .aob-blog__btn--desktop { display: inline-flex; }
	:not(#_) .aob-blog__btn--mobile { display: none; }
}

:not(#_) .aob-blog__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
/* One card is as wide as one of two (so a single post is not stretched); centered on tablet/phone, left-aligned on desktop like Figma. */
:not(#_) .aob-blog__card { display: flex; flex: 0 0 100%; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--aob-radius); }
@media (min-width: 640px) { :not(#_) .aob-blog__card { flex-basis: calc((100% - 32px) / 2); } }
@media (min-width: 1024px) { :not(#_) .aob-blog__cards { justify-content: flex-start; } }
:not(#_) .aob-blog__media { display: block; height: 200px; overflow: hidden; border-radius: var(--aob-radius); background: var(--aob-light-2); }
:not(#_) .aob-blog__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { :not(#_) .aob-blog__card:hover .aob-blog__img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { :not(#_) .aob-blog__img { transition: none; } }

:not(#_) .aob-blog__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: var(--aob-pad-y); }
:not(#_) .aob-blog__card-title { margin: 0; font-size: 24px; font-weight: 400; line-height: 31.2px; letter-spacing: -0.02em; }
:not(#_) .aob-blog__card-title a { color: var(--aob-black-3); text-decoration: none; }
:not(#_) .aob-blog__excerpt { flex: 1; margin: 0; font-size: 16px; line-height: 22.4px; color: var(--aob-black-1); }
:not(#_) .aob-blog__more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 6px; background: var(--aob-black-3); color: var(--aob-light-1); font-size: 18px; font-weight: 500; line-height: 23.4px; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.28s var(--aob-btn-ease), box-shadow 0.28s var(--aob-btn-ease), background 0.28s; }
:not(#_) .aob-blog__more img { display: block; width: 16px; height: 14px; transition: transform 0.25s; }
:not(#_) .aob-blog__more:hover { background: var(--aob-gradient-button); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(242, 106, 10, 0.4); }
:not(#_) .aob-blog__more:hover img { transform: translateX(4px); }
:not(#_) .aob-blog__more:active { transform: translateY(0) scale(0.98); }
:not(#_) .aob-blog__more:focus-visible, :not(#_) .aob-blog__card-title a:focus-visible { outline: 2px solid var(--aob-brand); outline-offset: 3px; }

@media (max-width: 767px) {
	:not(#_) .aob-blog__intro, :not(#_) .aob-blog__head { align-items: center; text-align: center; }
	:not(#_) .aob-blog__title { text-wrap: balance; }
}
